Commit 013749e

authored

fix(custom-element): preserve appContext during update (#12455)

1 parent 35aeae7 commit 013749eCopy full SHA for 013749e

File tree

+38

-1

lines changed

+38

-1

lines changed

Lines changed: 35 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1425,6 +1425,41 @@ describe('defineCustomElement', () => {`
`1425`	`1425`
`1426`	`1426`	`expect(e.shadowRoot?.innerHTML).toBe('<div>app-injected</div>')`
`1427`	`1427`	`})`
	`1428`	`+`
	`1429`	`+ test('with hmr reload', async () => {`
	`1430`	`+ const __hmrId = '__hmrWithApp'`
	`1431`	`+ const def = defineComponent({`
	`1432`	`+ __hmrId,`
	`1433`	`+ setup() {`
	`1434`	`+ const msg = inject('msg')`
	`1435`	`+ return { msg }`
	`1436`	`+ },`
	`1437`	`+ render(this: any) {`
	`1438`	`+ return h('div', [h('span', this.msg), h('span', this.$foo)])`
	`1439`	`+ },`
	`1440`	`+ })`
	`1441`	`+ const E = defineCustomElement(def, {`
	`1442`	`+ configureApp(app) {`
	`1443`	`+ app.provide('msg', 'app-injected')`
	`1444`	`+ app.config.globalProperties.$foo = 'foo'`
	`1445`	`+ },`
	`1446`	`+ })`
	`1447`	`+ customElements.define('my-element-with-app-hmr', E)`
	`1448`	`+`
	`1449`	+ container.innerHTML = `<my-element-with-app-hmr></my-element-with-app-hmr>`
	`1450`	`+ const el = container.childNodes[0] as VueElement`
	`1451`	`+ expect(el.shadowRoot?.innerHTML).toBe(`
	`1452`	+ `<div><span>app-injected</span><span>foo</span></div>`,
	`1453`	`+ )`
	`1454`	`+`
	`1455`	`+ // hmr`
	`1456`	`+ __VUE_HMR_RUNTIME__.reload(__hmrId, def as any)`
	`1457`	`+`
	`1458`	`+ await nextTick()`
	`1459`	`+ expect(el.shadowRoot?.innerHTML).toBe(`
	`1460`	+ `<div><span>app-injected</span><span>foo</span></div>`,
	`1461`	`+ )`
	`1462`	`+ })`
`1428`	`1463`	`})`
`1429`	`1464`
`1430`	`1465`	`// #9885`

Lines changed: 3 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -533,7 +533,9 @@ export class VueElement`
`533`	`533`	`}`
`534`	`534`
`535`	`535`	`private _update() {`
`536`		`- render(this._createVNode(), this._root)`
	`536`	`+ const vnode = this._createVNode()`
	`537`	`+ if (this._app) vnode.appContext = this._app._context`
	`538`	`+ render(vnode, this._root)`
`537`	`539`	`}`
`538`	`540`
`539`	`541`	`private _createVNode(): VNode<any, any> {`

Comments

(0)