mirror of https://github.com/vuejs/core.git
fix(custom-element): preserve appContext during update (#12455)
close #12453
This commit is contained in:
parent
35aeae7fa3
commit
013749e75e
|
@ -1425,6 +1425,41 @@ describe('defineCustomElement', () => {
|
||||||
|
|
||||||
expect(e.shadowRoot?.innerHTML).toBe('<div>app-injected</div>')
|
expect(e.shadowRoot?.innerHTML).toBe('<div>app-injected</div>')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
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 = `<my-element-with-app-hmr></my-element-with-app-hmr>`
|
||||||
|
const el = container.childNodes[0] as VueElement
|
||||||
|
expect(el.shadowRoot?.innerHTML).toBe(
|
||||||
|
`<div><span>app-injected</span><span>foo</span></div>`,
|
||||||
|
)
|
||||||
|
|
||||||
|
// hmr
|
||||||
|
__VUE_HMR_RUNTIME__.reload(__hmrId, def as any)
|
||||||
|
|
||||||
|
await nextTick()
|
||||||
|
expect(el.shadowRoot?.innerHTML).toBe(
|
||||||
|
`<div><span>app-injected</span><span>foo</span></div>`,
|
||||||
|
)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
// #9885
|
// #9885
|
||||||
|
|
|
@ -533,7 +533,9 @@ export class VueElement
|
||||||
}
|
}
|
||||||
|
|
||||||
private _update() {
|
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<any, any> {
|
private _createVNode(): VNode<any, any> {
|
||||||
|
|
Loading…
Reference in New Issue