feat(compiler): support nested component slot

Author: zhiyuanzmj

packages/compiler/src/transforms/transformChildren.ts

@@ -19,20 +19,31 @@ export const transformChildren: NodeTransform = (node, context) => {
     const childContext = context.create(child, i)
     transformNode(childContext)
 
+    const childDynamic = childContext.dynamic
+
     if (isFragment) {
       childContext.reference()
       childContext.registerTemplate()
 
       if (
-        !(childContext.dynamic.flags & DynamicFlag.NON_TEMPLATE) ||
-        childContext.dynamic.flags & DynamicFlag.INSERT
+        !(childDynamic.flags & DynamicFlag.NON_TEMPLATE) ||
+        childDynamic.flags & DynamicFlag.INSERT
       ) {
-        context.block.returns.push(childContext.dynamic.id!)
+        context.block.returns.push(childDynamic.id!)
       }
     } else {
       context.childrenTemplate.push(childContext.template)
     }
 
+    if (
+      childDynamic.hasDynamicChild ||
+      childDynamic.id !== undefined ||
+      childDynamic.flags & DynamicFlag.NON_TEMPLATE ||
+      childDynamic.flags & DynamicFlag.INSERT
+    ) {
+      context.dynamic.hasDynamicChild = true
+    }
+
     context.dynamic.children[i] = childContext.dynamic
   }
 

packages/compiler/src/transforms/transformElement.ts

@@ -101,7 +101,7 @@ function transformComponentElement(
     props: propsResult[0] ? propsResult[1] : [propsResult[1]],
     asset,
     root: singleRoot,
-    slots: context.slots,
+    slots: [...context.slots],
     once: context.inVOnce,
   })
   context.slots = []

packages/compiler/test/transforms/__snapshots__/transformChildren.spec.ts.snap

@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: children transform > efficient find 1`] = `
+"
+  const n1 = t0()
+  const n0 = _nthChild(n1, 2)
+  _setText(n0, () => ({ msg: msg }))
+  return n1
+"
+`;
+
+exports[`compiler: children transform > efficient traversal 1`] = `
+"
+  const n3 = t0()
+  const p0 = _next(_child(n3))
+  const n0 = _child(p0)
+  const p1 = _next(p0)
+  const n1 = _child(p1)
+  const p2 = _next(p1)
+  const n2 = _child(p2)
+  _setText(n0, () => ({ msg: msg }))
+  _setText(n1, () => ({ msg: msg }))
+  _setText(n2, () => ({ msg: msg }))
+  return n3
+"
+`;

packages/compiler/test/transforms/__snapshots__/vSlot.spec.ts.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compiler: transform slot > nested component slot 1`] = `
+"
+  const n1 = _createComponent(A, null, {
+    "default": () => {
+      const n0 = _createComponent(B)
+      return n0
+    }
+  })
+  return n1
+"
+`;

packages/compiler/test/transforms/transformChildren.spec.ts

@@ -112,4 +112,28 @@ describe('compiler: children transform', () => {
     ])
     expect(code).contains('_setDynamicProps(n0, [obj], true)')
   })
+
+  test('efficient traversal', () => {
+    const { code } = compileWithElementTransform(
+      `<div>
+    <div>x</div>
+    <div><span>{{ msg }}</span></div>
+    <div><span>{{ msg }}</span></div>
+    <div><span>{{ msg }}</span></div>
+  </div>`,
+    )
+    expect(code).toMatchSnapshot()
+  })
+
+  test('efficient find', () => {
+    const { code } = compileWithElementTransform(
+      `<div>
+        <div>x</div>
+        <div>x</div>
+        <div>{{ msg }}</div>
+      </div>`,
+    )
+    expect(code).contains(`const n0 = _nthChild(n1, 2)`)
+    expect(code).toMatchSnapshot()
+  })
 })

packages/compiler/test/transforms/vSlot.spec.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from 'vitest'
 // import { ErrorCodes, NodeTypes } from '@vue/compiler-dom'
+import { IRNodeTypes, IRSlotType } from '@vue/compiler-vapor'
 import {
   // IRNodeTypes,
   // IRSlotType,
@@ -99,6 +100,34 @@ describe('compiler: transform slot', () => {
     // ])
   })
 
+  test('nested component slot', () => {
+    const { ir, code } = compileWithSlots(`<A><B/></A>`)
+    expect(code).toMatchSnapshot()
+    expect(ir.block.operation).toMatchObject([
+      {
+        type: IRNodeTypes.CREATE_COMPONENT_NODE,
+        tag: 'A',
+        slots: [
+          {
+            slotType: IRSlotType.STATIC,
+            slots: {
+              default: {
+                type: IRNodeTypes.BLOCK,
+                operation: [
+                  {
+                    type: IRNodeTypes.CREATE_COMPONENT_NODE,
+                    tag: 'B',
+                    slots: [],
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      },
+    ])
+  })
+
   /*
   test('on component named slot', () => {
     const { ir, code } = compileWithSlots(

playground/main.ts

@@ -1,16 +1,21 @@
-import { createApp, vaporInteropPlugin } from 'vue'
+import {
+  createVaporApp,
+  // vaporInteropPlugin,
+} from 'vue'
 
 const modules = import.meta.glob<any>('./src/*.tsx')
 const mod = (
   modules[`./src${location.pathname}.tsx`] || modules['./src/App.tsx']
 )()
 
 mod.then(({ default: mod }) => {
-  const app = createApp(mod)
-  app.use(vaporInteropPlugin).mount('#app')
+  const app = createVaporApp(mod)
+    // app.use(vaporInteropPlugin).
+    .mount('#app')
 
   // @ts-expect-error
   globalThis.unmount = () => {
+    // @ts-expect-error
     app.unmount()
   }
 })

playground/vite.config.ts

@@ -1,14 +1,14 @@
 import { defineConfig } from 'vite'
 import Inspect from 'vite-plugin-inspect'
 import VueJsxVapor from 'unplugin-vue-jsx-vapor/vite'
-import VueJsx from '@vitejs/plugin-vue-jsx'
+// import VueJsx from '@vitejs/plugin-vue-jsx'
 
 export default defineConfig({
   plugins: [
     VueJsxVapor({
-      interop: true,
+      // interop: true,
     }),
-    VueJsx(),
+    // VueJsx(),
     Inspect(),
   ],
 })