chore: debug

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+  // 想了解更多的信息, 请访问：https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Current Test File",
+      "autoAttachChildProcesses": true,
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
+      "args": ["run", "${relativeFile}"],
+      "smartStep": true,
+      "console": "integratedTerminal"
+    }
+  ]
+}

src/utils/vnode.ts

@@ -117,6 +117,8 @@ export function getRootElements(children: VNode[] = []) {
 
     if (isTextNode(item) || isComponent(item) || isElement(item)) {
       result.push(item)
+    } else if (isSlot(item)) {
+      result.push(...getAllElements(item.children.default?.()))
     } else if (Array.isArray(item)) {
       result.push(...getRootElements(item))
     } else if (isFragment(item)) {

test/utils.test.tsx

@@ -1,27 +1,61 @@
 import { mount } from '@vue/test-utils'
 import { defineComponent, type VNode } from 'vue'
 
-import { getRootElements, isComponent, isElement } from '@/utils/vnode'
+import { getRootElements, isElement } from '@/utils/vnode'
 
-let vnodes: VNode[] = []
-const ElementSlot = defineComponent((props, { slots }) => {
-  return () => {
-    const children = slots.default?.()
-    vnodes = getRootElements(children)
-    return children
-  }
-})
-describe('utils', () => {
-  it('creates a todo', () => {
+describe('getRootElements', () => {
+  const ElementSlot = defineComponent({
+    name: 'ElementSlot',
+    setup(_, { slots, expose }) {
+      const vnodes: VNode[] = []
+      expose({ vnodes })
+      return () => {
+        const children = getRootElements(slots.default?.())
+        vnodes.push(...children)
+        return children
+      }
+    },
+  })
+  // it('element', () => {
+  //   const wrapper = mount(
+  //     defineComponent(props => () => (
+  //       <ElementSlot>
+  //         <div>Todo</div>
+  //         <div>Todo</div>
+  //       </ElementSlot>
+  //     ))
+  //   )
+
+  //   const exposed = wrapper.getComponent(ElementSlot)!.getCurrentComponent().exposed || {}
+
+  //   expect(exposed.vnodes).lengthOf(2)
+  //   expect(isElement(exposed.vnodes[0])).toBe(true)
+  //   expect(isElement(exposed.vnodes[1])).toBe(true)
+  // })
+  it('comp', () => {
+    const comp = defineComponent({
+      name: 'Comp',
+      template: '<div>Todo</div><div>Todo</div><slot/>',
+    })
     const wrapper = mount(
-      defineComponent(props => () => (
-        <ElementSlot>
-          <div>Todo</div>
-          <div>Todo</div>
-        </ElementSlot>
-      ))
+      defineComponent({
+        components: { comp },
+        setup() {
+          return () => (
+            <ElementSlot>
+              <comp>
+                <div>Todo</div>
+              </comp>
+              <div>Todo</div>
+            </ElementSlot>
+          )
+        },
+      })
     )
-    expect(vnodes).lengthOf(2)
-    expect(isElement(vnodes[0])).toBe(true)
+    const exposed = wrapper.getComponent(ElementSlot)!.getCurrentComponent().exposed || {}
+    console.log(wrapper.html())
+    expect(exposed.vnodes).lengthOf(4)
+    expect(isElement(exposed.vnodes[0])).toBe(true)
+    expect(isElement(exposed.vnodes[1])).toBe(true)
   })
 })