test: createSlot

Author: LittleSound

packages/runtime-vapor/__tests__/componentSlots.spec.ts

@@ -8,7 +8,10 @@ import {
   getCurrentInstance,
   insert,
   nextTick,
+  prepend,
   ref,
+  renderEffect,
+  setText,
   template,
 } from '../src'
 import { makeRender } from './_utils'
@@ -43,13 +46,11 @@ describe('component: slots', () => {
         const t0 = template('<div></div>')
         const n0 = t0()
         instance = getCurrentInstance()
-        const n1 = createSlot('header')
-        insert(n1, n0 as any as ParentNode)
         return n0
       },
     })
 
-    const { render, host } = define({
+    const { render } = define({
       render() {
         return createComponent(Comp, {}, { header: () => template('header')() })
       },
@@ -60,8 +61,6 @@ describe('component: slots', () => {
     expect(instance.slots.header()).toMatchObject(
       document.createTextNode('header'),
     )
-
-    expect(host.innerHTML).toBe('<div>header</div>')
   })
 
   // NOTE: slot normalization is not supported
@@ -243,4 +242,190 @@ describe('component: slots', () => {
       'Slot "default" invoked outside of the render function',
     ).not.toHaveBeenWarned()
   })
+
+  describe('createSlot', () => {
+    test('slot should be render correctly', () => {
+      const Comp = defineComponent(() => {
+        const n0 = template('<div></div>')()
+        insert(createSlot('header'), n0 as any as ParentNode)
+        return n0
+      })
+
+      const { host } = define(() => {
+        return createComponent(Comp, {}, { header: () => template('header')() })
+      }).render()
+
+      expect(host.innerHTML).toBe('<div>header</div>')
+    })
+
+    test('slot should be render correctly with binds', async () => {
+      const Comp = defineComponent(() => {
+        const n0 = template('<div></div>')()
+        insert(
+          createSlot('header', { title: () => 'header' }),
+          n0 as any as ParentNode,
+        )
+        return n0
+      })
+
+      const { host } = define(() => {
+        return createComponent(
+          Comp,
+          {},
+          {
+            header: ({ title }) => {
+              const el = template('<h1></h1>')()
+              renderEffect(() => {
+                setText(el, title())
+              })
+              return el
+            },
+          },
+        )
+      }).render()
+
+      expect(host.innerHTML).toBe('<div><h1>header</h1></div>')
+    })
+
+    test('dynamic slot should be render correctly with binds', async () => {
+      const Comp = defineComponent(() => {
+        const n0 = template('<div></div>')()
+        prepend(
+          n0 as any as ParentNode,
+          createSlot('header', { title: () => 'header' }),
+        )
+        return n0
+      })
+
+      const { host } = define(() => {
+        // dynamic slot
+        return createComponent(Comp, {}, {}, () => [
+          { name: 'header', fn: ({ title }) => template(`${title()}`)() },
+        ])
+      }).render()
+
+      expect(host.innerHTML).toBe('<div>header<!--slot--></div>')
+    })
+
+    test('dynamic slot outlet should be render correctly with binds', async () => {
+      const Comp = defineComponent(() => {
+        const n0 = template('<div></div>')()
+        prepend(
+          n0 as any as ParentNode,
+          createSlot(
+            () => 'header', // dynamic slot outlet name
+            { title: () => 'header' },
+          ),
+        )
+        return n0
+      })
+
+      const { host } = define(() => {
+        return createComponent(
+          Comp,
+          {},
+          { header: ({ title }) => template(`${title()}`)() },
+        )
+      }).render()
+
+      expect(host.innerHTML).toBe('<div>header<!--slot--></div>')
+    })
+
+    test('fallback should be render correctly', () => {
+      const Comp = defineComponent(() => {
+        const n0 = template('<div></div>')()
+        insert(
+          createSlot('header', {}, () => template('fallback')()),
+          n0 as any as ParentNode,
+        )
+        return n0
+      })
+
+      const { host } = define(() => {
+        return createComponent(Comp, {}, {})
+      }).render()
+
+      expect(host.innerHTML).toBe('<div>fallback</div>')
+    })
+
+    test('dynamic slot should be updated correctly', async () => {
+      const flag1 = ref(true)
+
+      const Child = defineComponent(() => {
+        const temp0 = template('<p></p>')
+        const el0 = temp0()
+        const el1 = temp0()
+        const slot1 = createSlot('one', {}, () => template('one fallback')())
+        const slot2 = createSlot('two', {}, () => template('two fallback')())
+        insert(slot1, el0 as any as ParentNode)
+        insert(slot2, el1 as any as ParentNode)
+        return [el0, el1]
+      })
+
+      const { host } = define(() => {
+        return createComponent(Child, {}, {}, () => [
+          flag1.value
+            ? { name: 'one', fn: () => template('one content')() }
+            : { name: 'two', fn: () => template('two content')() },
+        ])
+      }).render()
+
+      expect(host.innerHTML).toBe(
+        '<p>one content<!--slot--></p><p>two fallback<!--slot--></p>',
+      )
+
+      flag1.value = false
+      await nextTick()
+
+      expect(host.innerHTML).toBe(
+        '<p>one fallback<!--slot--></p><p>two content<!--slot--></p>',
+      )
+
+      flag1.value = true
+      await nextTick()
+
+      expect(host.innerHTML).toBe(
+        '<p>one content<!--slot--></p><p>two fallback<!--slot--></p>',
+      )
+    })
+
+    test('dynamic slot outlet should be updated correctly', async () => {
+      const slotOutletName = ref('one')
+
+      const Child = defineComponent(() => {
+        const temp0 = template('<p></p>')
+        const el0 = temp0()
+        const slot1 = createSlot(
+          () => slotOutletName.value,
+          {},
+          () => template('fallback')(),
+        )
+        insert(slot1, el0 as any as ParentNode)
+        return el0
+      })
+
+      const { host } = define(() => {
+        return createComponent(
+          Child,
+          {},
+          {
+            one: () => template('one content')(),
+            two: () => template('two content')(),
+          },
+        )
+      }).render()
+
+      expect(host.innerHTML).toBe('<p>one content<!--slot--></p>')
+
+      slotOutletName.value = 'two'
+      await nextTick()
+
+      expect(host.innerHTML).toBe('<p>two content<!--slot--></p>')
+
+      slotOutletName.value = 'none'
+      await nextTick()
+
+      expect(host.innerHTML).toBe('<p>fallback<!--slot--></p>')
+    })
+  })
 })

packages/runtime-vapor/src/componentSlots.ts

@@ -127,7 +127,7 @@ export function createSlot(
     }
   }
 
-  const getName = isDynamicName ? name : () => name
+  const getSlot = isDynamicName ? () => slots[name()] : () => slots[name]
   const anchor = __DEV__ ? createComment('slot') : createTextNode()
   const fragment: Fragment = {
     nodes: [],
@@ -137,7 +137,7 @@ export function createSlot(
 
   // TODO lifecycle hooks
   renderEffect(() => {
-    if ((branch = slots[getName()] || fallback) !== oldBranch) {
+    if ((branch = getSlot() || fallback) !== oldBranch) {
       parent ||= anchor.parentNode
       if (block) {
         scope!.stop()