Skip to content

Commit 9fa0d63

Browse files
edison1105edison1105
committed
fix: update createComponent call to include app context
1 parent 7e29657 commit 9fa0d63

File tree

2 files changed

+160
-159
lines changed

2 files changed

+160
-159
lines changed

‎packages/runtime-vapor/__tests__/customElement.spec.ts‎

Lines changed: 151 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -811,11 +811,10 @@ describe('defineVaporCustomElement', () => {
811811
})
812812
})
813813

814-
describe.todo('provide/inject', () => {
814+
describe('provide/inject', () => {
815815
const Consumer = defineVaporCustomElement({
816816
setup() {
817817
const foo = inject<Ref>('foo')!
818-
// return () => h('div', foo.value)
819818
const n0 = template('<div> </div>', true)() as any
820819
const x0 = txt(n0) as any
821820
renderEffect(() => setText(x0, toDisplayString(foo.value)))
@@ -827,12 +826,6 @@ describe('defineVaporCustomElement', () => {
827826
test('over nested usage', async () => {
828827
const foo = ref('injected!')
829828
const Provider = defineVaporCustomElement({
830-
// provide: {
831-
// foo,
832-
// },
833-
// render() {
834-
// return h('my-consumer')
835-
// },
836829
setup() {
837830
provide('foo', foo)
838831
return createComponentWithFallback('my-consumer')
@@ -850,168 +843,168 @@ describe('defineVaporCustomElement', () => {
850843
expect(consumer.shadowRoot!.innerHTML).toBe(`<div>changed!</div>`)
851844
})
852845

853-
// test('over slot composition', async () => {
854-
// const foo = ref('injected!')
855-
// const Provider = defineVaporCustomElement({
856-
// provide: {
857-
// foo,
858-
// },
859-
// render() {
860-
// return renderSlot(this.$slots, 'default')
861-
// },
862-
// })
863-
// customElements.define('my-provider-2', Provider)
846+
test('over slot composition', async () => {
847+
const foo = ref('injected!')
848+
const Provider = defineVaporCustomElement({
849+
setup() {
850+
provide('foo', foo)
851+
return createSlot('default', null)
852+
},
853+
})
854+
customElements.define('my-provider-2', Provider)
864855

865-
// container.innerHTML = `<my-provider-2><my-consumer></my-consumer><my-provider-2>`
866-
// const provider = container.childNodes[0]
867-
// const consumer = provider.childNodes[0] as VaporElement
868-
// expect(consumer.shadowRoot!.innerHTML).toBe(`<div>injected!</div>`)
856+
container.innerHTML = `<my-provider-2><my-consumer></my-consumer><my-provider-2>`
857+
const provider = container.childNodes[0]
858+
const consumer = provider.childNodes[0] as VaporElement
859+
expect(consumer.shadowRoot!.innerHTML).toBe(`<div>injected!</div>`)
869860

870-
// foo.value = 'changed!'
871-
// await nextTick()
872-
// expect(consumer.shadowRoot!.innerHTML).toBe(`<div>changed!</div>`)
873-
// })
861+
foo.value = 'changed!'
862+
await nextTick()
863+
expect(consumer.shadowRoot!.innerHTML).toBe(`<div>changed!</div>`)
864+
})
874865

875-
// test('inherited from ancestors', async () => {
876-
// const fooA = ref('FooA!')
877-
// const fooB = ref('FooB!')
878-
// const ProviderA = defineVaporCustomElement({
879-
// provide: {
880-
// fooA,
881-
// },
882-
// render() {
883-
// return h('provider-b')
884-
// },
885-
// })
886-
// const ProviderB = defineVaporCustomElement({
887-
// provide: {
888-
// fooB,
889-
// },
890-
// render() {
891-
// return h('my-multi-consumer')
892-
// },
893-
// })
866+
test('inherited from ancestors', async () => {
867+
const fooA = ref('FooA!')
868+
const fooB = ref('FooB!')
869+
const ProviderA = defineVaporCustomElement({
870+
setup() {
871+
provide('fooA', fooA)
872+
return createComponentWithFallback('provider-b')
873+
},
874+
})
875+
const ProviderB = defineVaporCustomElement({
876+
setup() {
877+
provide('fooB', fooB)
878+
return createComponentWithFallback('my-multi-consumer')
879+
},
880+
})
894881

895-
// const Consumer = defineVaporCustomElement({
896-
// setup() {
897-
// const fooA = inject<Ref>('fooA')!
898-
// const fooB = inject<Ref>('fooB')!
899-
// return () => h('div', `${fooA.value} ${fooB.value}`)
900-
// },
901-
// })
902-
903-
// customElements.define('provider-a', ProviderA)
904-
// customElements.define('provider-b', ProviderB)
905-
// customElements.define('my-multi-consumer', Consumer)
906-
// container.innerHTML = `<provider-a><provider-a>`
907-
// const providerA = container.childNodes[0] as VaporElement
908-
// const providerB = providerA.shadowRoot!.childNodes[0] as VaporElement
909-
// const consumer = providerB.shadowRoot!.childNodes[0] as VaporElement
910-
911-
// expect(consumer.shadowRoot!.innerHTML).toBe(`<div>FooA! FooB!</div>`)
912-
913-
// fooA.value = 'changedA!'
914-
// fooB.value = 'changedB!'
915-
// await nextTick()
916-
// expect(consumer.shadowRoot!.innerHTML).toBe(
917-
// `<div>changedA! changedB!</div>`,
918-
// )
919-
// })
882+
const Consumer = defineVaporCustomElement({
883+
setup() {
884+
const fooA = inject<Ref>('fooA')!
885+
const fooB = inject<Ref>('fooB')!
886+
const n0 = template('<div> </div>', true)() as any
887+
const x0 = txt(n0) as any
888+
renderEffect(() => setText(x0, `${fooA.value} ${fooB.value}`))
889+
return n0
890+
},
891+
})
920892

921-
// // #13212
922-
// test('inherited from app context within nested elements', async () => {
923-
// const outerValues: (string | undefined)[] = []
924-
// const innerValues: (string | undefined)[] = []
925-
// const innerChildValues: (string | undefined)[] = []
893+
customElements.define('provider-a', ProviderA)
894+
customElements.define('provider-b', ProviderB)
895+
customElements.define('my-multi-consumer', Consumer)
896+
container.innerHTML = `<provider-a><provider-a>`
897+
const providerA = container.childNodes[0] as VaporElement
898+
const providerB = providerA.shadowRoot!.childNodes[0] as VaporElement
899+
const consumer = providerB.shadowRoot!.childNodes[0] as VaporElement
926900

927-
// const Outer = defineVaporCustomElement(
928-
// {
929-
// setup() {
930-
// outerValues.push(
931-
// inject<string>('shared'),
932-
// inject<string>('outer'),
933-
// inject<string>('inner'),
934-
// )
935-
// },
936-
// render() {
937-
// return h('div', [renderSlot(this.$slots, 'default')])
938-
// },
939-
// },
940-
// {
941-
// configureApp(app) {
942-
// app.provide('shared', 'shared')
943-
// app.provide('outer', 'outer')
944-
// },
945-
// },
946-
// )
901+
expect(consumer.shadowRoot!.innerHTML).toBe(`<div>FooA! FooB!</div>`)
947902

948-
// const Inner = defineVaporCustomElement(
949-
// {
950-
// setup() {
951-
// // ensure values are not self-injected
952-
// provide('inner', 'inner-child')
953-
954-
// innerValues.push(
955-
// inject<string>('shared'),
956-
// inject<string>('outer'),
957-
// inject<string>('inner'),
958-
// )
959-
// },
960-
// render() {
961-
// return h('div', [renderSlot(this.$slots, 'default')])
962-
// },
963-
// },
964-
// {
965-
// configureApp(app) {
966-
// app.provide('outer', 'override-outer')
967-
// app.provide('inner', 'inner')
968-
// },
969-
// },
970-
// )
903+
fooA.value = 'changedA!'
904+
fooB.value = 'changedB!'
905+
await nextTick()
906+
expect(consumer.shadowRoot!.innerHTML).toBe(
907+
`<div>changedA! changedB!</div>`,
908+
)
909+
})
971910

972-
// const InnerChild = defineVaporCustomElement({
973-
// setup() {
974-
// innerChildValues.push(
975-
// inject<string>('shared'),
976-
// inject<string>('outer'),
977-
// inject<string>('inner'),
978-
// )
979-
// },
980-
// render() {
981-
// return h('div')
982-
// },
983-
// })
911+
test('inherited from app context within nested elements', async () => {
912+
const outerValues: (string | undefined)[] = []
913+
const innerValues: (string | undefined)[] = []
914+
const innerChildValues: (string | undefined)[] = []
915+
916+
const Outer = defineVaporCustomElement(
917+
{
918+
setup() {
919+
outerValues.push(
920+
inject<string>('shared'),
921+
inject<string>('outer'),
922+
inject<string>('inner'),
923+
)
924+
925+
const n0 = template('<div></div>', true)() as any
926+
setInsertionState(n0, null)
927+
createSlot('default', null)
928+
return n0
929+
},
930+
},
931+
{
932+
configureApp(app: any) {
933+
app.provide('shared', 'shared')
934+
app.provide('outer', 'outer')
935+
},
936+
} as any,
937+
)
984938

985-
// customElements.define('provide-from-app-outer', Outer)
986-
// customElements.define('provide-from-app-inner', Inner)
987-
// customElements.define('provide-from-app-inner-child', InnerChild)
939+
const Inner = defineVaporCustomElement(
940+
{
941+
setup() {
942+
// ensure values are not self-injected
943+
provide('inner', 'inner-child')
944+
945+
innerValues.push(
946+
inject<string>('shared'),
947+
inject<string>('outer'),
948+
inject<string>('inner'),
949+
)
950+
const n0 = template('<div></div>', true)() as any
951+
setInsertionState(n0, null)
952+
createSlot('default', null)
953+
return n0
954+
},
955+
},
956+
{
957+
configureApp(app: any) {
958+
app.provide('outer', 'override-outer')
959+
app.provide('inner', 'inner')
960+
},
961+
} as any,
962+
)
988963

989-
// container.innerHTML =
990-
// '<provide-from-app-outer>' +
991-
// '<provide-from-app-inner>' +
992-
// '<provide-from-app-inner-child></provide-from-app-inner-child>' +
993-
// '</provide-from-app-inner>' +
994-
// '</provide-from-app-outer>'
964+
const InnerChild = defineVaporCustomElement({
965+
setup() {
966+
innerChildValues.push(
967+
inject<string>('shared'),
968+
inject<string>('outer'),
969+
inject<string>('inner'),
970+
)
971+
const n0 = template('<div></div>', true)() as any
972+
return n0
973+
},
974+
})
995975

996-
// const outer = container.childNodes[0] as VaporElement
997-
// expect(outer.shadowRoot!.innerHTML).toBe('<div><slot></slot></div>')
976+
customElements.define('provide-from-app-outer', Outer)
977+
customElements.define('provide-from-app-inner', Inner)
978+
customElements.define('provide-from-app-inner-child', InnerChild)
998979

999-
// expect('[Vue warn]: injection "inner" not found.').toHaveBeenWarnedTimes(
1000-
// 1,
1001-
// )
1002-
// expect(
1003-
// '[Vue warn]: App already provides property with key "outer" inherited from its parent element. ' +
1004-
// 'It will be overwritten with the new value.',
1005-
// ).toHaveBeenWarnedTimes(1)
1006-
1007-
// expect(outerValues).toEqual(['shared', 'outer', undefined])
1008-
// expect(innerValues).toEqual(['shared', 'override-outer', 'inner'])
1009-
// expect(innerChildValues).toEqual([
1010-
// 'shared',
1011-
// 'override-outer',
1012-
// 'inner-child',
1013-
// ])
1014-
// })
980+
container.innerHTML =
981+
'<provide-from-app-outer>' +
982+
'<provide-from-app-inner>' +
983+
'<provide-from-app-inner-child></provide-from-app-inner-child>' +
984+
'</provide-from-app-inner>' +
985+
'</provide-from-app-outer>'
986+
987+
const outer = container.childNodes[0] as VaporElement
988+
expect(outer.shadowRoot!.innerHTML).toBe(
989+
'<div><slot></slot><!--slot--></div>',
990+
)
991+
992+
expect('[Vue warn]: injection "inner" not found.').toHaveBeenWarnedTimes(
993+
1,
994+
)
995+
expect(
996+
'[Vue warn]: App already provides property with key "outer" inherited from its parent element. ' +
997+
'It will be overwritten with the new value.',
998+
).toHaveBeenWarnedTimes(1)
999+
1000+
expect(outerValues).toEqual(['shared', 'outer', undefined])
1001+
expect(innerValues).toEqual(['shared', 'override-outer', 'inner'])
1002+
expect(innerChildValues).toEqual([
1003+
'shared',
1004+
'override-outer',
1005+
'inner-child',
1006+
])
1007+
})
10151008
})
10161009

10171010
// describe('styles', () => {

‎packages/runtime-vapor/src/apiDefineVaporCustomElement.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,14 @@ export class VaporElement extends VueElementBase<
132132
}
133133
this._processInstance()
134134
}
135-
createComponent(this._def, this._props)
135+
136+
createComponent(
137+
this._def,
138+
this._props,
139+
undefined,
140+
undefined,
141+
undefined,
142+
this._app!._context,
143+
)
136144
}
137145
}

0 commit comments

Comments
 (0)