core/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts

import { ref, shallowRef } from '@vue/reactivity'
import { nextTick, resolveDynamicComponent } from '@vue/runtime-dom'
import {
  createComponent,
  createComponentWithFallback,
  createDynamicComponent,
  createSlot,
  defineVaporComponent,
  insert,
  renderEffect,
  setHtml,
  setInsertionState,
  template,
  withVaporCtx,
} from '../src'
import { makeRender } from './_utils'

const define = makeRender()

describe('api: createDynamicComponent', () => {
  const A = () => document.createTextNode('AAA')
  const B = () => document.createTextNode('BBB')

  test('direct value', async () => {
    const val = shallowRef<any>(A)

    const { html } = define({
      setup() {
        return createDynamicComponent(() => val.value)
      },
    }).render()

    expect(html()).toBe('AAA<!--dynamic-component-->')

    val.value = B
    await nextTick()
    expect(html()).toBe('BBB<!--dynamic-component-->')

    // fallback
    val.value = 'foo'
    await nextTick()
    expect(html()).toBe('<foo></foo><!--dynamic-component-->')
  })

  test('global registration', async () => {
    const val = shallowRef('foo')

    const { app, html, mount } = define({
      setup() {
        return createDynamicComponent(() => val.value)
      },
    }).create()

    app.component('foo', A)
    app.component('bar', B)

    mount()
    expect(html()).toBe('AAA<!--dynamic-component-->')

    val.value = 'bar'
    await nextTick()
    expect(html()).toBe('BBB<!--dynamic-component-->')

    // fallback
    val.value = 'baz'
    await nextTick()
    expect(html()).toBe('<baz></baz><!--dynamic-component-->')
  })

  test('with v-once', async () => {
    const val = shallowRef<any>(A)

    const { html } = define({
      setup() {
        return createDynamicComponent(() => val.value, null, null, true, true)
      },
    }).render()

    expect(html()).toBe('AAA<!--dynamic-component-->')

    val.value = B
    await nextTick()
    expect(html()).toBe('AAA<!--dynamic-component-->') // still AAA
  })

  test('fallback with v-once', async () => {
    const val = shallowRef<any>('button')
    const id = ref(0)
    const { html } = define({
      setup() {
        return createDynamicComponent(
          () => val.value,
          { id: () => id.value },
          null,
          true,
          true,
        )
      },
    }).render()

    expect(html()).toBe('<button id="0"></button><!--dynamic-component-->')

    id.value++
    await nextTick()
    expect(html()).toBe('<button id="0"></button><!--dynamic-component-->')
  })

  test('render fallback with insertionState', async () => {
    const { html, mount } = define({
      setup() {
        const html = ref('hi')
        const n1 = template('<div></div>', true)() as any
        setInsertionState(n1)
        const n0 = createComponentWithFallback(
          resolveDynamicComponent('button') as any,
        ) as any
        renderEffect(() => setHtml(n0, html.value))
        return n1
      },
    }).create()

    mount()
    expect(html()).toBe('<div><button>hi</button></div>')
  })

  test('switch dynamic component children', async () => {
    const CompA = defineVaporComponent({
      setup() {
        return template('<div>A</div>')()
      },
    })
    const CompB = defineVaporComponent({
      setup() {
        return template('<div>B</div>')()
      },
    })

    const current = shallowRef(CompA)
    const { html } = define({
      setup() {
        const t1 = template('<div></div>')
        const n2 = t1() as any
        setInsertionState(n2)
        createDynamicComponent(() => current.value)
        return n2
      },
    }).render()

    expect(html()).toBe('<div><div>A</div><!--dynamic-component--></div>')

    current.value = CompB
    await nextTick()
    expect(html()).toBe('<div><div>B</div><!--dynamic-component--></div>')
  })

  test('fallback with dynamic slots', async () => {
    const slotName = ref('default')
    const { html } = define({
      setup() {
        return createDynamicComponent(() => 'div', null, {
          $: [
            () => ({
              name: slotName.value,
              fn: () => template('<span>hi</span>')(),
            }),
          ] as any,
        })
      },
    }).render()

    expect(html()).toBe(
      '<div><span>hi</span><!--slot--></div><!--dynamic-component-->',
    )

    // update slot name
    slotName.value = 'custom'
    await nextTick()
    expect(html()).toBe('<div><!--slot--></div><!--dynamic-component-->')

    slotName.value = 'default'
    await nextTick()
    expect(html()).toBe(
      '<div><span>hi</span><!--slot--></div><!--dynamic-component-->',
    )
  })

  test('resolves slot owner local components after dynamic updates', async () => {
    const current = shallowRef('Foo')
    const Foo = defineVaporComponent({
      setup() {
        return template('<span>foo</span>')()
      },
    })
    const Child = defineVaporComponent({
      setup() {
        const n0 = template('<section></section>')()
        insert(createSlot('default'), n0 as ParentNode)
        return n0
      },
    })

    const { html } = define({
      components: { Foo },
      setup() {
        return createComponent(Child, null, {
          default: withVaporCtx(() =>
            createDynamicComponent(() => current.value),
          ),
        })
      },
    }).render()

    expect(html()).toBe(
      '<section><span>foo</span><!--dynamic-component--><!--slot--></section>',
    )

    current.value = 'div'
    await nextTick()
    expect(html()).toBe(
      '<section><div></div><!--dynamic-component--><!--slot--></section>',
    )

    current.value = 'Foo'
    await nextTick()
    expect(html()).toBe(
      '<section><span>foo</span><!--dynamic-component--><!--slot--></section>',
    )
  })

  test('accept blocks', async () => {
    const { html } = define({
      setup() {
        const n0 = template('<a>router link</a>')()
        return createDynamicComponent(() => n0)
      },
    }).render()

    expect(html()).toBe('<a>router link</a><!--dynamic-component-->')
  })
})