bug: InjectionKey is not working
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.
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"
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?
no problem
https://codesandbox.io/p/github/Mr-Smilin/test-InjectionKey/main?import=true
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.
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
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.
Staled for quite a long time, feel free to post a comment here to re-open again.