Feature: detect shareable appContext components

[theniceangel]

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

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

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

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

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

shareable-context.zip

[alexzhang1030]

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]

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

[cuijieer]

@theniceangel 请问这个问题 有解决办法吗 我也遇到了 类似的问题

[FeBe95]

I would love to see this implemented! A shared app context is usually used by modal apps. I've put together a short demo on stackblitz, which is based on the linked ZIP file above:

https://stackblitz.com/edit/vitejs-vite-ebsrmc2p?file=src%2Fmain.js&terminal=dev

@alexzhang1030 Solution 2 sounds like a viable approach to me. If you could give me a starting point, I would love to help you add this to the project.

Code

const app = createApp(App);
app.mount('#app');

const vNode = createVNode(ModalApp);
vNode.appContext = app._context;
const modalContainer = document.querySelector('#modal-container');

render(vNode, modalContainer);

Screenshot

[alexzhang1030]

I would love to see this implemented! A shared app context is usually used by modal apps. I've put together a short demo on stackblitz, which is based on the linked ZIP file above:

stackblitz.com/edit/vitejs-vite-ebsrmc2p?file=src%2Fmain.js&terminal=dev

@alexzhang1030 Solution 2 sounds like a viable approach to me. If you could give me a starting point, I would love to help you add this to the project.

Code

const app = createApp(App); app.mount('#app');

const vNode = createVNode(ModalApp); vNode.appContext = app._context; const modalContainer = document.querySelector('#modal-container');

render(vNode, modalContainer);

Screenshot

So great that hear this news! Feel free to open the PR, I will help you if you need.

[FeBe95]

Unfortunately, I don't even know where to start. I looked through this repository, but I have no idea how any of these things work 😅

use a utility function imported from @vue/devtools-api that proxies the render function

Could you explain how this could be implemented in more detail?

[eric-gitta-moore]

any news? From the above conclusion, it seems that manually assigning and sharing the appContext does not work. @theniceangel The picture seems to be invalid. I can't see any information.