integrations icon indicating copy to clipboard operation
integrations copied to clipboard

bug: InjectionKey is not working

Open Mr-Smilin opened this issue 1 year ago • 6 comments

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 avatar Jul 15 '24 06:07 Mr-Smilin

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"

Mr-Smilin avatar Jul 15 '24 06:07 Mr-Smilin

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 avatar Jul 15 '24 18:07 nekomeowww

no problem

https://codesandbox.io/p/github/Mr-Smilin/test-InjectionKey/main?import=true

Mr-Smilin avatar Jul 16 '24 04:07 Mr-Smilin

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 avatar Jul 21 '24 05:07 nekomeowww

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 avatar Aug 04 '24 10:08 nekomeowww

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 avatar Aug 04 '24 10:08 nekomeowww

Staled for quite a long time, feel free to post a comment here to re-open again.

nekomeowww avatar Mar 17 '25 03:03 nekomeowww