vaporInteropPlugin,
} from '../src'
import {
+ type Ref,
createApp,
createSlots,
currentInstance,
})
describe('vdom interop', () => {
- test('vdom slot > vapor forwarded slot > vapor slot', async () => {
- const foo = ref('foo')
- const show = ref(true)
-
- const VaporSlot = defineVaporComponent({
+ const createVaporSlot = (fallbackText = 'fallback') => {
+ return defineVaporComponent({
setup() {
const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
+ const n2 = template(`<div>${fallbackText}</div>`)()
return n2
})
return n0
},
})
+ }
+
+ const createVdomSlot = (fallbackText = 'fallback') => {
+ return {
+ render(this: any) {
+ return renderSlot(this.$slots, 'foo', {}, () => [
+ h('div', fallbackText),
+ ])
+ },
+ }
+ }
- const VaporForwardedSlot = defineVaporComponent({
+ const createVaporForwardedSlot = (
+ targetComponent: any,
+ fallbackText?: string,
+ ) => {
+ return defineVaporComponent({
setup() {
const createForwardedSlot = forwardedSlotCreator()
const n2 = createComponent(
- VaporSlot,
+ targetComponent,
null,
{
foo: () => {
- return createForwardedSlot('foo', null)
+ return fallbackText
+ ? createForwardedSlot('foo', null, () => {
+ const n2 = template(`<div>${fallbackText}</div>`)()
+ return n2
+ })
+ : createForwardedSlot('foo', null)
},
},
true,
return n2
},
})
+ }
+
+ const createVdomForwardedSlot = (
+ targetComponent: any,
+ fallbackText?: string,
+ ) => {
+ return {
+ render(this: any) {
+ return h(targetComponent, null, {
+ foo: () => [
+ fallbackText
+ ? renderSlot(this.$slots, 'foo', {}, () => [
+ h('div', fallbackText),
+ ])
+ : renderSlot(this.$slots, 'foo'),
+ ],
+ _: 3 /* FORWARDED */,
+ })
+ },
+ }
+ }
+
+ const createMultipleVaporForwardedSlots = (
+ targetComponent: any,
+ count: number,
+ ) => {
+ let current = targetComponent
+ for (let i = 0; i < count; i++) {
+ current = createVaporForwardedSlot(current)
+ }
+ return current
+ }
+
+ const createMultipleVdomForwardedSlots = (
+ targetComponent: any,
+ count: number,
+ ) => {
+ let current = targetComponent
+ for (let i = 0; i < count; i++) {
+ current = createVdomForwardedSlot(current)
+ }
+ return current
+ }
- const App = {
+ const createTestApp = (
+ rootComponent: any,
+ foo: Ref<string>,
+ show: Ref<Boolean>,
+ ) => {
+ return {
setup() {
return () =>
h(
- VaporForwardedSlot as any,
+ rootComponent,
null,
createSlots({ _: 2 /* DYNAMIC */ } as any, [
show.value
)
},
}
+ }
+
+ const createEmptyTestApp = (rootComponent: any) => {
+ return {
+ setup() {
+ return () => h(rootComponent)
+ },
+ }
+ }
+
+ test('vdom slot > vapor forwarded slot > vapor slot', async () => {
+ const foo = ref('foo')
+ const show = ref(true)
+
+ const VaporSlot = createVaporSlot()
+ const VaporForwardedSlot = createVaporForwardedSlot(VaporSlot)
+ const App = createTestApp(VaporForwardedSlot, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VaporSlot = defineVaporComponent({
- setup() {
- const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
- return n2
- })
- return n0
- },
- })
-
- const VaporForwardedSlotWithFallback = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporSlot,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null, () => {
- const n2 = template('<div>forwarded fallback</div>')()
- return n2
- })
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlotWithFallback as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VaporSlot = createVaporSlot()
+ const VaporForwardedSlotWithFallback = createVaporForwardedSlot(
+ VaporSlot,
+ 'forwarded fallback',
+ )
+ const App = createTestApp(VaporForwardedSlotWithFallback, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VdomSlot = {
- render(this: any) {
- return renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'fallback'),
- ])
- },
- }
-
- const VaporForwardedSlot = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlot as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VdomSlot = createVdomSlot()
+ const VaporForwardedSlot = createVaporForwardedSlot(VdomSlot)
+ const App = createTestApp(VaporForwardedSlot, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VdomSlot = {
- render(this: any) {
- return renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'fallback'),
- ])
- },
- }
-
- const VaporForwardedSlotWithFallback = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null, () => {
- const n2 = template('<div>forwarded fallback</div>')()
- return n2
- })
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlotWithFallback as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VdomSlot = createVdomSlot()
+ const VaporForwardedSlotWithFallback = createVaporForwardedSlot(
+ VdomSlot,
+ 'forwarded fallback',
+ )
+ const App = createTestApp(VaporForwardedSlotWithFallback, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VaporSlot = defineVaporComponent({
- setup() {
- const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
- return n2
- })
- return n0
- },
- })
-
- const VdomForwardedSlot = {
- render(this: any) {
- return h(VaporSlot as any, null, {
- foo: () => [renderSlot(this.$slots, 'foo')],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VaporForwardedSlot = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomForwardedSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlot as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VaporSlot = createVaporSlot()
+ const VdomForwardedSlot = createVdomForwardedSlot(VaporSlot)
+ const VaporForwardedSlot = createVaporForwardedSlot(VdomForwardedSlot)
+ const App = createTestApp(VaporForwardedSlot, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VaporSlot = defineVaporComponent({
- setup() {
- const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
- return n2
- })
- return n0
- },
- })
-
- const VdomForwardedSlot = {
- render(this: any) {
- return h(VaporSlot as any, null, {
- foo: () => [renderSlot(this.$slots, 'foo')],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VaporForwardedSlotWithFallback = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomForwardedSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null, () => {
- const n2 = template('<div>forwarded fallback</div>')()
- return n2
- })
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlotWithFallback as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VaporSlot = createVaporSlot()
+ const VdomForwardedSlot = createVdomForwardedSlot(VaporSlot)
+ const VaporForwardedSlotWithFallback = createVaporForwardedSlot(
+ VdomForwardedSlot,
+ 'forwarded fallback',
+ )
+ const App = createTestApp(VaporForwardedSlotWithFallback, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VaporSlot = defineVaporComponent({
- setup() {
- const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
- return n2
- })
- return n0
- },
- })
-
- const VdomForwardedSlotWithFallback = {
- render(this: any) {
- return h(VaporSlot as any, null, {
- foo: () => [
- renderSlot(this.$slots, 'foo', {}, () => {
- return [h('div', 'vdom fallback')]
- }),
- ],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VaporForwardedSlot = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomForwardedSlotWithFallback as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlot as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VaporSlot = createVaporSlot()
+ const VdomForwardedSlotWithFallback = createVdomForwardedSlot(
+ VaporSlot,
+ 'vdom fallback',
+ )
+ const VaporForwardedSlot = createVaporForwardedSlot(
+ VdomForwardedSlotWithFallback,
+ )
+ const App = createTestApp(VaporForwardedSlot, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
})
test('vdom slot(empty) > vapor forwarded slot > vdom forwarded slot(with fallback) > vapor slot', async () => {
- const VaporSlot = defineVaporComponent({
- setup() {
- const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
- return n2
- })
- return n0
- },
- })
-
- const VdomForwardedSlotWithFallback = {
- render(this: any) {
- return h(VaporSlot as any, null, {
- foo: () => [
- renderSlot(this.$slots, 'foo', {}, () => {
- return [h('div', 'vdom fallback')]
- }),
- ],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VaporForwardedSlot = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomForwardedSlotWithFallback as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () => h(VaporForwardedSlot as any)
- },
- }
+ const VaporSlot = createVaporSlot()
+ const VdomForwardedSlotWithFallback = createVdomForwardedSlot(
+ VaporSlot,
+ 'vdom fallback',
+ )
+ const VaporForwardedSlot = createVaporForwardedSlot(
+ VdomForwardedSlotWithFallback,
+ )
+ const App = createEmptyTestApp(VaporForwardedSlot)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VdomSlot = {
- render(this: any) {
- return renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'fallback'),
- ])
- },
- }
-
- const VdomForwardedSlot = {
- render(this: any) {
- return h(VdomSlot, null, {
- foo: () => [renderSlot(this.$slots, 'foo')],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VaporForwardedSlot = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomForwardedSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlot as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VdomSlot = createVdomSlot()
+ const VdomForwardedSlot = createVdomForwardedSlot(VdomSlot)
+ const VaporForwardedSlot = createVaporForwardedSlot(VdomForwardedSlot)
+ const App = createTestApp(VaporForwardedSlot, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VdomSlot = {
- render(this: any) {
- return renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'fallback'),
- ])
- },
- }
-
- const VdomForwardedSlot = {
- render(this: any) {
- return h(VdomSlot, null, {
- foo: () => [renderSlot(this.$slots, 'foo')],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VaporForwardedSlotWithFallback = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomForwardedSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null, () => {
- const n2 = template('<div>vapor fallback</div>')()
- return n2
- })
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlotWithFallback as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VdomSlot = createVdomSlot()
+ const VdomForwardedSlot = createVdomForwardedSlot(VdomSlot)
+ const VaporForwardedSlotWithFallback = createVaporForwardedSlot(
+ VdomForwardedSlot,
+ 'vapor fallback',
+ )
+ const App = createTestApp(VaporForwardedSlotWithFallback, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VdomSlot = {
- render(this: any) {
- return renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'fallback'),
- ])
- },
- }
-
- const VdomForwardedSlotWithFallback = {
- render(this: any) {
- return h(VdomSlot, null, {
- foo: () => [
- renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'vdom fallback'),
- ]),
- ],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VaporForwardedSlot = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomForwardedSlotWithFallback as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
+ const VdomSlot = createVdomSlot()
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlot as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VdomForwardedSlotWithFallback = createVdomForwardedSlot(
+ VdomSlot,
+ 'vdom fallback',
+ )
+ const VaporForwardedSlot = createVaporForwardedSlot(
+ VdomForwardedSlotWithFallback,
+ )
+ const App = createTestApp(VaporForwardedSlot, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VdomSlot = {
- render(this: any) {
- return renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'fallback'),
- ])
- },
- }
+ const VdomSlot = createVdomSlot()
+ const VdomForwardedSlot = createVdomForwardedSlot(VdomSlot)
+ const VaporForwardedSlot = createMultipleVaporForwardedSlots(
+ VdomForwardedSlot,
+ 3,
+ )
+ const App = createTestApp(VaporForwardedSlot, foo, show)
- const VdomForwardedSlot = {
- render(this: any) {
- return h(VdomSlot, null, {
- foo: () => [renderSlot(this.$slots, 'foo')],
- _: 3 /* FORWARDED */,
- })
- },
- }
+ const root = document.createElement('div')
+ createApp(App).use(vaporInteropPlugin).mount(root)
+ expect(root.innerHTML).toBe('<span>foo</span><!--slot--><!--slot-->')
- const VaporForwardedSlot2 = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomForwardedSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
+ foo.value = 'bar'
+ await nextTick()
+ expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
- const VaporForwardedSlot1 = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporForwardedSlot2,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const VaporForwardedSlot = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporForwardedSlot1,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlot as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
-
- const root = document.createElement('div')
- createApp(App).use(vaporInteropPlugin).mount(root)
- expect(root.innerHTML).toBe('<span>foo</span><!--slot--><!--slot-->')
-
- foo.value = 'bar'
- await nextTick()
- expect(root.innerHTML).toBe('<span>bar</span><!--slot--><!--slot-->')
-
- show.value = false
- await nextTick()
- expect(root.innerHTML).toBe('<!--slot--><!--slot--><div>fallback</div>')
+ show.value = false
+ await nextTick()
+ expect(root.innerHTML).toBe('<!--slot--><!--slot--><div>fallback</div>')
show.value = true
await nextTick()
const foo = ref('foo')
const show = ref(true)
- const VdomSlot = {
- render(this: any) {
- return renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'fallback'),
- ])
- },
- }
-
- const VdomForwardedSlotWithFallback = {
- render(this: any) {
- return h(VdomSlot, null, {
- foo: () => [
- renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'vdom fallback'),
- ]),
- ],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VaporForwardedSlot2 = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomForwardedSlotWithFallback as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const VaporForwardedSlot1 = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporForwardedSlot2,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const VaporForwardedSlot = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporForwardedSlot1,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlot as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VdomSlot = createVdomSlot()
+ const VdomForwardedSlotWithFallback = createVdomForwardedSlot(
+ VdomSlot,
+ 'vdom fallback',
+ )
+ const VaporForwardedSlot = createMultipleVaporForwardedSlots(
+ VdomForwardedSlotWithFallback,
+ 3,
+ )
+ const App = createTestApp(VaporForwardedSlot, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VaporSlot = defineVaporComponent({
- setup() {
- const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
- return n2
- })
- return n0
- },
- })
-
- const VdomForwardedSlot = {
- render(this: any) {
- return h(VaporSlot as any, null, {
- foo: () => [renderSlot(this.$slots, 'foo')],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const App = {
- setup() {
- return () =>
- h(
- VdomForwardedSlot,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VaporSlot = createVaporSlot()
+ const VdomForwardedSlot = createVdomForwardedSlot(VaporSlot)
+ const App = createTestApp(VdomForwardedSlot, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VaporSlot = defineVaporComponent({
- setup() {
- const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
- return n2
- })
- return n0
- },
- })
-
- const VaporForwardedSlot = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const VdomForwardedSlot = {
- render(this: any) {
- return h(VaporForwardedSlot as any, null, {
- foo: () => [renderSlot(this.$slots, 'foo')],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const App = {
- setup() {
- return () =>
- h(
- VdomForwardedSlot,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VaporSlot = createVaporSlot()
+ const VaporForwardedSlot = createVaporForwardedSlot(VaporSlot)
+ const VdomForwardedSlot = createVdomForwardedSlot(VaporForwardedSlot)
+ const App = createTestApp(VdomForwardedSlot, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VaporSlot = defineVaporComponent({
- setup() {
- const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
- return n2
- })
- return n0
- },
- })
-
- const VaporForwardedSlot = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const VdomForwardedSlot2 = {
- render(this: any) {
- return h(VaporForwardedSlot as any, null, {
- foo: () => [renderSlot(this.$slots, 'foo')],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VdomForwardedSlot1 = {
- render(this: any) {
- return h(VdomForwardedSlot2, null, {
- foo: () => [renderSlot(this.$slots, 'foo')],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VdomForwardedSlot = {
- render(this: any) {
- return h(VdomForwardedSlot1, null, {
- foo: () => [renderSlot(this.$slots, 'foo')],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const App = {
- setup() {
- return () =>
- h(
- VdomForwardedSlot,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VaporSlot = createVaporSlot()
+ const VaporForwardedSlot = createVaporForwardedSlot(VaporSlot)
+ const VdomForwardedSlot = createMultipleVdomForwardedSlots(
+ VaporForwardedSlot,
+ 3,
+ )
+ const App = createTestApp(VdomForwardedSlot, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VaporSlot = defineVaporComponent({
- setup() {
- const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
- return n2
- })
- return n0
- },
- })
-
- const VaporForwardedSlot = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null, () => {
- const n2 = template('<div>vapor fallback</div>')()
- return n2
- })
- },
- },
- true,
- )
- return n2
- },
- })
-
- const VdomForwardedSlot2 = {
- render(this: any) {
- return h(VaporForwardedSlot as any, null, {
- foo: () => [renderSlot(this.$slots, 'foo')],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VdomForwardedSlot1 = {
- render(this: any) {
- return h(VdomForwardedSlot2, null, {
- foo: () => [renderSlot(this.$slots, 'foo')],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VdomForwardedSlot = {
- render(this: any) {
- return h(VdomForwardedSlot1, null, {
- foo: () => [renderSlot(this.$slots, 'foo')],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const App = {
- setup() {
- return () =>
- h(
- VdomForwardedSlot,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VaporSlot = createVaporSlot()
+ const VaporForwardedSlot = createVaporForwardedSlot(
+ VaporSlot,
+ 'vapor fallback',
+ )
+ const VdomForwardedSlot = createMultipleVdomForwardedSlots(
+ VaporForwardedSlot,
+ 3,
+ )
+ const App = createTestApp(VdomForwardedSlot, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VdomSlot = {
- render(this: any) {
- return renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'fallback'),
- ])
- },
- }
-
- const VaporForwardedSlot2 = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const VaporForwardedSlot1 = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporForwardedSlot2,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlot1 as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VdomSlot = createVdomSlot()
+ const VaporForwardedSlot1 = createMultipleVaporForwardedSlots(
+ VdomSlot,
+ 2,
+ )
+ const App = createTestApp(VaporForwardedSlot1, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VdomSlot = {
- render(this: any) {
- return renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'fallback'),
- ])
- },
- }
-
- const VaporForwardedSlot2 = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const VaporForwardedSlot1WithFallback = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporForwardedSlot2,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null, () => {
- const n2 = template('<div>vapor1 fallback</div>')()
- return n2
- })
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlot1WithFallback as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VdomSlot = createVdomSlot()
+ const VaporForwardedSlot2 = createVaporForwardedSlot(VdomSlot)
+ const VaporForwardedSlot1WithFallback = createVaporForwardedSlot(
+ VaporForwardedSlot2,
+ 'vapor1 fallback',
+ )
+ const App = createTestApp(VaporForwardedSlot1WithFallback, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VdomSlot = {
- render(this: any) {
- return renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'fallback'),
- ])
- },
- }
-
- const VaporForwardedSlot2WithFallback = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null, () => {
- const n2 = template('<div>vapor2 fallback</div>')()
- return n2
- })
- },
- },
- true,
- )
- return n2
- },
- })
-
- const VaporForwardedSlot1 = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporForwardedSlot2WithFallback,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlot1 as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VdomSlot = createVdomSlot()
+ const VaporForwardedSlot2WithFallback = createVaporForwardedSlot(
+ VdomSlot,
+ 'vapor2 fallback',
+ )
+ const VaporForwardedSlot1 = createVaporForwardedSlot(
+ VaporForwardedSlot2WithFallback,
+ )
+ const App = createTestApp(VaporForwardedSlot1, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
await nextTick()
expect(root.innerHTML).toBe('<!--slot--><div>vapor2 fallback</div>')
- show.value = true
- await nextTick()
- expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
- })
-
- test('vdom slot > vapor forwarded slot > vapor forwarded slot > vapor slot', async () => {
- const foo = ref('foo')
- const show = ref(true)
-
- const VaporSlot = defineVaporComponent({
- setup() {
- const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
- return n2
- })
- return n0
- },
- })
-
- const VaporForwardedSlot2 = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporSlot,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const VaporForwardedSlot1 = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporForwardedSlot2,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null)
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlot1 as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
-
+ show.value = true
+ await nextTick()
+ expect(root.innerHTML).toBe('<!--slot--><span>bar</span>')
+ })
+
+ test('vdom slot > vapor forwarded slot > vapor forwarded slot > vapor slot', async () => {
+ const foo = ref('foo')
+ const show = ref(true)
+
+ const VaporSlot = createVaporSlot()
+ const VaporForwardedSlot2 = createVaporForwardedSlot(VaporSlot)
+ const VaporForwardedSlot1 =
+ createVaporForwardedSlot(VaporForwardedSlot2)
+ const App = createTestApp(VaporForwardedSlot1, foo, show)
+
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
expect(root.innerHTML).toBe('<span>foo</span><!--slot--><!--slot-->')
const foo = ref('foo')
const show = ref(true)
- const VdomSlot = {
- render(this: any) {
- return renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'fallback'),
- ])
- },
- }
-
- const VaporForwardedSlot2WithFallback = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VdomSlot as any,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null, () => {
- const n2 = template('<div>vapor2 fallback</div>')()
- return n2
- })
- },
- },
- true,
- )
- return n2
- },
- })
-
- const VaporForwardedSlot1WithFallback = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporForwardedSlot2WithFallback,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null, () => {
- const n2 = template('<div>vapor1 fallback</div>')()
- return n2
- })
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlot1WithFallback as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VdomSlot = createVdomSlot()
+ const VaporForwardedSlot2WithFallback = createVaporForwardedSlot(
+ VdomSlot,
+ 'vapor2 fallback',
+ )
+ const VaporForwardedSlot1WithFallback = createVaporForwardedSlot(
+ VaporForwardedSlot2WithFallback,
+ 'vapor1 fallback',
+ )
+ const App = createTestApp(VaporForwardedSlot1WithFallback, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VaporSlot = defineVaporComponent({
- setup() {
- const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
- return n2
- })
- return n0
- },
- })
-
- const VaporForwardedSlot2WithFallback = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporSlot,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null, () => {
- const n2 = template('<div>vapor2 fallback</div>')()
- return n2
- })
- },
- },
- true,
- )
- return n2
- },
- })
-
- const VaporForwardedSlot1WithFallback = defineVaporComponent({
- setup() {
- const createForwardedSlot = forwardedSlotCreator()
- const n2 = createComponent(
- VaporForwardedSlot2WithFallback,
- null,
- {
- foo: () => {
- return createForwardedSlot('foo', null, () => {
- const n2 = template('<div>vapor1 fallback</div>')()
- return n2
- })
- },
- },
- true,
- )
- return n2
- },
- })
-
- const App = {
- setup() {
- return () =>
- h(
- VaporForwardedSlot1WithFallback as any,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VaporSlot = createVaporSlot()
+ const VaporForwardedSlot2WithFallback = createVaporForwardedSlot(
+ VaporSlot,
+ 'vapor2 fallback',
+ )
+ const VaporForwardedSlot1WithFallback = createVaporForwardedSlot(
+ VaporForwardedSlot2WithFallback,
+ 'vapor1 fallback',
+ )
+ const App = createTestApp(VaporForwardedSlot1WithFallback, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VaporSlot = defineVaporComponent({
- setup() {
- const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
- return n2
- })
- return n0
- },
- })
-
- const VdomForwardedSlot2WithFallback = {
- render(this: any) {
- return h(VaporSlot as any, null, {
- foo: () => [
- renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'vdom2 fallback'),
- ]),
- ],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VdomForwardedSlot1WithFallback = {
- render(this: any) {
- return h(VdomForwardedSlot2WithFallback, null, {
- foo: () => [
- renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'vdom1 fallback'),
- ]),
- ],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const App = {
- setup() {
- return () =>
- h(
- VdomForwardedSlot1WithFallback,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VaporSlot = createVaporSlot()
+ const VdomForwardedSlot2WithFallback = createVdomForwardedSlot(
+ VaporSlot,
+ 'vdom2 fallback',
+ )
+ const VdomForwardedSlot1WithFallback = createVdomForwardedSlot(
+ VdomForwardedSlot2WithFallback,
+ 'vdom1 fallback',
+ )
+ const App = createTestApp(VdomForwardedSlot1WithFallback, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VdomSlot = {
- render(this: any) {
- return renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'fallback'),
- ])
- },
- }
-
- const VdomForwardedSlot2WithFallback = {
- render(this: any) {
- return h(VdomSlot, null, {
- foo: () => [
- renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'vdom2 fallback'),
- ]),
- ],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VdomForwardedSlot1WithFallback = {
- render(this: any) {
- return h(VdomForwardedSlot2WithFallback, null, {
- foo: () => [
- renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'vdom1 fallback'),
- ]),
- ],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const App = {
- setup() {
- return () =>
- h(
- VdomForwardedSlot1WithFallback,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VdomSlot = createVdomSlot()
+ const VdomForwardedSlot2WithFallback = createVdomForwardedSlot(
+ VdomSlot,
+ 'vdom2 fallback',
+ )
+ const VdomForwardedSlot1WithFallback = createVdomForwardedSlot(
+ VdomForwardedSlot2WithFallback,
+ 'vdom1 fallback',
+ )
+ const App = createTestApp(VdomForwardedSlot1WithFallback, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
const foo = ref('foo')
const show = ref(true)
- const VaporSlot = defineVaporComponent({
- setup() {
- const n0 = createSlot('foo', null, () => {
- const n2 = template('<div>fallback</div>')()
- return n2
- })
- return n0
- },
- })
-
- const VdomForwardedSlot3WithFallback = {
- render(this: any) {
- return h(VaporSlot as any, null, {
- foo: () => [
- renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'vdom3 fallback'),
- ]),
- ],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VdomForwardedSlot2WithFallback = {
- render(this: any) {
- return h(VdomForwardedSlot3WithFallback, null, {
- foo: () => [
- renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'vdom2 fallback'),
- ]),
- ],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const VdomForwardedSlot1WithFallback = {
- render(this: any) {
- return h(VdomForwardedSlot2WithFallback, null, {
- foo: () => [
- renderSlot(this.$slots, 'foo', {}, () => [
- h('div', 'vdom1 fallback'),
- ]),
- ],
- _: 3 /* FORWARDED */,
- })
- },
- }
-
- const App = {
- setup() {
- return () =>
- h(
- VdomForwardedSlot1WithFallback,
- null,
- createSlots({ _: 2 /* DYNAMIC */ } as any, [
- show.value
- ? {
- name: 'foo',
- fn: () => [h('span', foo.value)],
- key: '0',
- }
- : undefined,
- ]),
- )
- },
- }
+ const VaporSlot = createVaporSlot()
+ const VdomForwardedSlot3WithFallback = createVdomForwardedSlot(
+ VaporSlot,
+ 'vdom3 fallback',
+ )
+ const VdomForwardedSlot2WithFallback = createVdomForwardedSlot(
+ VdomForwardedSlot3WithFallback,
+ 'vdom2 fallback',
+ )
+ const VdomForwardedSlot1WithFallback = createVdomForwardedSlot(
+ VdomForwardedSlot2WithFallback,
+ 'vdom1 fallback',
+ )
+ const App = createTestApp(VdomForwardedSlot1WithFallback, foo, show)
const root = document.createElement('div')
createApp(App).use(vaporInteropPlugin).mount(root)
projects / thirdparty / vuejs / core.git / commitdiff
