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

Feature: detect shareable appContext components #445

Open
theniceangel opened this issue Jun 15, 2024 · 2 comments
Open

Feature: detect shareable appContext components #445

theniceangel opened this issue Jun 15, 2024 · 2 comments
Labels
enhancement New feature or request

Comments

@theniceangel
Copy link

在组件库的设计当中,往往可能存在多个 App,但是有一些 App 不是通过 createApp 方法构造而来的,比如 ElementPlus 的 MessageBox 组件,它是通过 render 方法,直接渲染一个与主应用程序分离的 DOM 树,比如:
image

对于 App2 来说,我借用了 App1 的 appContext,就是为了共享 App1 上面的全局组件,VueI18N,全局方法之类的。

但是 App2 永远不会被插件给捕捉到

image

当然,看了 Vue3 的源码,发现只有调用 mount 的时候,App 才会被记录

image

对于我这种场景,如果想要使用 VueDevTools 调试 App2 组件,应该怎么办?下面是可调试的 Demo:

shareable-context.zip

@alexzhang1030
Copy link
Member

alexzhang1030 commented Jun 16, 2024

Solutions:

  1. Inject some code into vuejs/core
  2. use a utility function imported from @vue/devtools-api that proxies the render function

Limitations:

  1. hacky, if we call app:init hook into render function that will be weird, and might cause extra issues.
  2. better than 1, but still hacky...

@theniceangel
Copy link
Author

方法一:我有尝试过主动触发app:init,这样虽然可以激活另外一个 App2 实例,但是我这个需求太独特了,他和App1共享一个 appContext,而且插件内部很多逻辑应该是靠 appContext 去做的,导致有很多问题

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants