fix(custom-element): preserve appContext during hmr reload

[edison1105]

close #12453

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB (+70 B)	38 kB (+18 B)	34.3 kB (-7 B)
vue.global.prod.js	158 kB (+70 B)	57.8 kB (+15 B)	51.5 kB (+84 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.4 kB	18.2 kB	16.6 kB
createApp	54.3 kB	21.2 kB	19.3 kB
createSSRApp	58.5 kB	22.9 kB	20.9 kB
defineCustomElement	59.2 kB (+70 B)	22.8 kB (+22 B)	20.7 kB (+14 B)
overall	68.4 kB	26.3 kB	24 kB

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@12455

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@12455

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@12455

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@12455

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@12455

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@12455

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@12455

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@12455

@vue/shared

npm i https://pkg.pr.new/@vue/shared@12455

vue

npm i https://pkg.pr.new/vue@12455

@vue/compat

npm i https://pkg.pr.new/@vue/compat@12455

commit: 1f38527

[edison1105]

The reason for checking this._app here is that the test case will not pass.

core/packages/runtime-dom/__tests__/customElement.spec.ts

Lines 137 to 147 in b7b0932

	test('remove then insert again', async () => {
	container.innerHTML = `<my-element></my-element>`
	const e = container.childNodes[0] as VueElement
	container.removeChild(e)
	await nextTick()
	expect(e._instance).toBe(null)
	expect(e.shadowRoot!.innerHTML).toBe('')
	container.appendChild(e)
	expect(e._instance).toBeTruthy()
	expect(e.shadowRoot!.innerHTML).toBe('<div>hello</div>')
	})

When re-inserting, this._app is null because we cleared it in disconnectedCallback.
For custom elements that remove and then re-insert (this._resolved = true), just calling _update is not enough.

core/packages/runtime-dom/src/apiCustomElement.ts

Lines 300 to 303 in 2235643

	if (this._resolved) {
	this._setParent()
	this._update()
	} else {

We must also reinitialize this._ob because it is cleared in disconnectedCallback.
For more edge cases refer to #12412. Maybe once #12413 is merged, the check for this._app can be removed.

[Copilot]

Copilot reviewed 2 out of 2 changed files in this pull request and generated no suggestions.

Comments skipped due to low confidence (1)

packages/runtime-dom/src/apiCustomElement.ts:524

• The new behavior introduced in the '_update' method should be covered by tests to ensure that 'vnode.appContext' is correctly set.

if (this._app && !this._instance) vnode.appContext = this._app._context

[danieldasilva-smake]

@edison1105 Can you tell me when this will be merged? Some colleagues and me would be very happy if the HMR works again for us 😅
But thanks a lot for your work ^^

[edison1105]

@danieldasilva-smake
I'm also not sure exactly when this PR will be merged. Maybe you can try using it in your development environment with:

npm i https://pkg.pr.new/vue@12455

It includes the latest code from the main branch.

[danieldasilva-smake]

@edison1105 I've found another issue related to this.
When getting the current instance (with getCurrentInstance) and using it (with withCtx) after the root props have changed (where this _update function will be called) the context also gets lost.
This would be fixed without the !this._instance check, but I don't know if there is a deeper reason for this check and if this would break something else.

Reproduction link: https://stackblitz.com/edit/vitejs-vite-o5qqgnnu?file=index.html,src%2Fmain.js,src%2FApp.ce.vue
If you look there in the JS Console you can see that the context gets lost as soon as the prop has been updated.