From 792e276a62136d3fbee0b0807adbb34490f68aae Mon Sep 17 00:00:00 2001 From: daiwei Date: Thu, 21 Nov 2024 22:04:28 +0800 Subject: [PATCH 1/6] fix(customElement): keep appContext during custom element update --- packages/runtime-dom/src/apiCustomElement.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index aeeaeec9b9f..87243887e17 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -520,7 +520,9 @@ export class VueElement } private _update() { - render(this._createVNode(), this._root) + const vnode = this._createVNode() + if (this._app) vnode.appContext = this._app._context + render(vnode, this._root) } private _createVNode(): VNode { @@ -573,6 +575,7 @@ export class VueElement this._setParent() } } + return vnode } From 2235643a4e1c559fea25ae1cfb9f6058ac8becfc Mon Sep 17 00:00:00 2001 From: daiwei Date: Thu, 21 Nov 2024 22:05:34 +0800 Subject: [PATCH 2/6] chore: update --- packages/runtime-dom/src/apiCustomElement.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 87243887e17..efdfcc2a81f 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -575,7 +575,6 @@ export class VueElement this._setParent() } } - return vnode } From 42a30ad1dc62a0650f94c823c695481614cd7f74 Mon Sep 17 00:00:00 2001 From: daiwei Date: Fri, 22 Nov 2024 10:38:38 +0800 Subject: [PATCH 3/6] test: add test --- .../__tests__/customElement.spec.ts | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index df438d47eee..5192584a9a4 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -1330,6 +1330,43 @@ describe('defineCustomElement', () => { expect(e.shadowRoot?.innerHTML).toBe('
app-injected
') }) + + test('with hmr reload', async () => { + const __hmrId = '__hmrWithApp' + const def = defineComponent({ + __hmrId, + setup() { + const msg = inject('msg') + return { msg } + }, + render(this: any) { + return h('div', [h('span', this.msg), h('span', this.$foo)]) + }, + }) + const E = defineCustomElement(def, { + configureApp(app) { + app.provide('msg', 'app-injected') + app.config.globalProperties.$foo = 'foo' + }, + }) + customElements.define('my-element-with-app-hmr', E) + + container.innerHTML = `` + const el = container.childNodes[0] as VueElement + expect(el.shadowRoot?.innerHTML).toBe( + `
app-injectedfoo
`, + ) + + // hmr + __VUE_HMR_RUNTIME__.reload(__hmrId, { + ...def, + } as any) + + await nextTick() + expect(el.shadowRoot?.innerHTML).toBe( + `
app-injectedfoo
`, + ) + }) }) // #9885 From b7b093203775d292ede1ec5841452af9e2a7f3cc Mon Sep 17 00:00:00 2001 From: daiwei Date: Fri, 22 Nov 2024 10:40:48 +0800 Subject: [PATCH 4/6] test: update --- packages/runtime-dom/__tests__/customElement.spec.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 5192584a9a4..e879c9848fc 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -1358,9 +1358,7 @@ describe('defineCustomElement', () => { ) // hmr - __VUE_HMR_RUNTIME__.reload(__hmrId, { - ...def, - } as any) + __VUE_HMR_RUNTIME__.reload(__hmrId, def as any) await nextTick() expect(el.shadowRoot?.innerHTML).toBe( From b07d1db9503143584862497d9344cf1b1d3cd6f3 Mon Sep 17 00:00:00 2001 From: daiwei Date: Fri, 22 Nov 2024 11:48:56 +0800 Subject: [PATCH 5/6] chore: update --- packages/runtime-dom/src/apiCustomElement.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index efdfcc2a81f..2fadf1946bd 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -521,7 +521,7 @@ export class VueElement private _update() { const vnode = this._createVNode() - if (this._app) vnode.appContext = this._app._context + if (this._app && !this._instance) vnode.appContext = this._app._context render(vnode, this._root) } From c1e6e8568ebf6ab96c6d64c63fbbbd3742dee4a1 Mon Sep 17 00:00:00 2001 From: daiwei Date: Wed, 14 May 2025 16:28:58 +0800 Subject: [PATCH 6/6] chore: tweaks --- packages/runtime-dom/src/apiCustomElement.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 2fadf1946bd..efdfcc2a81f 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -521,7 +521,7 @@ export class VueElement private _update() { const vnode = this._createVNode() - if (this._app && !this._instance) vnode.appContext = this._app._context + if (this._app) vnode.appContext = this._app._context render(vnode, this._root) }