Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: InjectionKey is not working #267

Open
Mr-Smilin opened this issue Jul 15, 2024 · 6 comments
Open

bug: InjectionKey is not working #267

Mr-Smilin opened this issue Jul 15, 2024 · 6 comments
Labels
bug Something isn't working difficulty/hard Hard to deal with / implement against documentation Improvements or additions to documentation pkg/inline-link-preview Related to @nolebase/vitepress-plugin-inline-link-preview

Comments

@Mr-Smilin
Copy link

Mr-Smilin commented Jul 15, 2024

https://nolebase-integrations.ayaka.io/pages/zh-CN/integrations/vitepress-plugin-inline-link-preview/configuration#%E5%A6%82%E4%BD%95%E5%9C%A8-vitepress-%E4%B8%AD%E8%BF%9B%E8%A1%8C%E9%85%8D%E7%BD%AE

This is my configuration in index.js

import {
  NolebaseInlineLinkPreviewPlugin,
  InjectionKey,
} from "@nolebase/vitepress-plugin-inline-link-preview/client";
import "@nolebase/vitepress-plugin-inline-link-preview/client/style.css";

export default {
    enhanceApp({ app }) {
        app.use(NolebaseInlineLinkPreviewPlugin);
        app.provide(InjectionKey, {
              popupWidth: 100,
              popupHeight: 100,
              locales: {
                "zh-TW": {
                  popup: {
                    loading: "加載中...",
                    loadingAriaLabel: "加載中",
                    iframeAriaLabel: "連結預覽",
                  },
                },
              },
            });
    }
}

its not working
component is still the default style.

Snipaste_2024-07-15_14-12-42

@Mr-Smilin Mr-Smilin changed the title InjectionKey is not work InjectionKey is not working Jul 15, 2024
@Mr-Smilin
Copy link
Author

and this is my package version
"@nolebase/vitepress-plugin-inline-link-preview": "^2.2.0",
"vite": "^5.3.2",
"vitepress": "^1.2.3",
"vue": "^3.4.31"

@nekomeowww nekomeowww added bug Something isn't working pkg/inline-link-preview Related to @nolebase/vitepress-plugin-inline-link-preview documentation Improvements or additions to documentation labels Jul 15, 2024
@nekomeowww
Copy link
Member

Sorry but I cannot reproduce it with the following code:

import DefaultTheme from 'vitepress/theme'
import type { Theme } from 'vitepress'
import { InjectionKey, NolebaseInlineLinkPreviewPlugin } from '@nolebase/vitepress-plugin-inline-link-preview/client'

import 'virtual:uno.css'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    // register your custom global components
    app.use(NolebaseInlineLinkPreviewPlugin)
    app.provide(InjectionKey, {
      popupWidth: 100,
      popupHeight: 100,
      locales: {
        'zh-TW': {
          popup: {
            loading: '加載中...',
            loadingAriaLabel: '加載中',
            iframeAriaLabel: '連結預覽',
          },
        },
      },
    })
  },
} satisfies Theme

Can you provide me a minimal repo with StackBlitz or CodeSandbox?

@nekomeowww nekomeowww added the question Further information is requested label Jul 15, 2024
@Mr-Smilin
Copy link
Author

Mr-Smilin commented Jul 16, 2024

@nekomeowww
Copy link
Member

Sorry for the delay, I was in Hackathon last week and we had no time to focus on Nolebase communities. Apologize for the delay, really! Let me take a look into this.

@nekomeowww
Copy link
Member

I've created another repro on StackBlitz but I cannot understand why the injection key is not working...
https://stackblitz.com/edit/vite-clseiw?file=docs%2F.vitepress%2Ftheme%2Findex.ts

@nekomeowww nekomeowww added difficulty/hard Hard to deal with / implement against and removed question Further information is requested labels Aug 4, 2024
@nekomeowww
Copy link
Member

telegram-cloud-photo-size-1-5006242330537209031-y

telegram-cloud-photo-size-1-5006242330537209030-y

telegram-cloud-photo-size-1-5006242330537209032-y

telegram-cloud-photo-size-1-5006242330537209029-y

With the assist from @Jack-Works, he told me that such issue may caused by non-equal Symbol. Since I wrote the Symbol injection key code into a dedicated module under constants.ts, the imported module should be cached during runtime (which means the imported module shouldn't be ran twice or more), then how could the two Symbol be different?

I will need to investigate deeper down to find out why.

@nekomeowww nekomeowww changed the title InjectionKey is not working bug: InjectionKey is not working Aug 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working difficulty/hard Hard to deal with / implement against documentation Improvements or additions to documentation pkg/inline-link-preview Related to @nolebase/vitepress-plugin-inline-link-preview
Projects
None yet
Development

No branches or pull requests

2 participants