chore: merge refactoring of component

Author: ubugeeei

packages/runtime-vapor/src/apiCreateComponent.ts

@@ -5,10 +5,15 @@ import {
 } from './component'
 import { setupComponent } from './apiRender'
 import type { RawProps } from './componentProps'
+import type { Slots } from './componentSlots'
 
-export function createComponent(comp: Component, rawProps: RawProps = null) {
+export function createComponent(
+  comp: Component,
+  rawProps: RawProps = null,
+  slots: Slots | null = null,
+) {
   const current = currentInstance!
-  const instance = createComponentInstance(comp, rawProps)
+  const instance = createComponentInstance(comp, rawProps, slots)
   setupComponent(instance)
 
   // register sub-component with current component for lifecycle management

packages/runtime-vapor/src/component.ts

@@ -17,7 +17,7 @@ import {
   emit,
   normalizeEmitsOptions,
 } from './componentEmits'
-import type { InternalSlots } from './componentSlots'
+import { type InternalSlots, type Slots, initSlots } from './componentSlots'
 import { VaporLifecycleHooks } from './apiLifecycle'
 import type { Data } from '@vue/shared'
 
@@ -142,6 +142,7 @@ let uid = 0
 export function createComponentInstance(
   component: ObjectComponent | FunctionalComponent,
   rawProps: RawProps | null,
+  slots: Slots | null,
 ): ComponentInternalInstance {
   const instance: ComponentInternalInstance = {
     uid: uid++,
@@ -228,7 +229,7 @@ export function createComponentInstance(
     // [VaporLifecycleHooks.SERVER_PREFETCH]: null,
   }
   initProps(instance, rawProps, !isFunction(component))
-  // TODO: initSlots(instance, slots)
+  initSlots(instance, slots)
   instance.emit = emit.bind(null, instance)
 
   return instance

packages/runtime-vapor/src/componentSlots.ts

@@ -1,6 +1,6 @@
 import type { IfAny } from '@vue/shared'
-import type { Block } from './render'
 import type { ComponentInternalInstance } from './component'
+import type { Block } from './apiRender'
 
 export type Slot<T extends any = any> = (
   ...args: IfAny<T, any[], [T] | (T extends undefined ? [] : never)>
@@ -14,8 +14,9 @@ export type Slots = Readonly<InternalSlots>
 
 export const initSlots = (
   instance: ComponentInternalInstance,
-  slots: Slots,
+  slots: Slots | null,
 ) => {
+  if (!slots) slots = {}
   // TODO: normalize?
   instance.slots = slots
 }

playground/src/slots.js

@@ -1,13 +1,13 @@
 // @ts-check
 import {
   children,
-  createSlot,
+  createComponent,
+  createSlots,
   defineComponent,
   getCurrentInstance,
   insert,
   on,
   ref,
-  render as renderComponent,
   renderEffect,
   setText,
   template,
@@ -27,29 +27,31 @@ const t1 = template(
 
 const Parent = defineComponent({
   vapor: true,
-  props: undefined,
-  setup(props) {},
-  render(_ctx) {
-    const n0 = /** @type {any} */ (t0())
-    const s0 = createSlot({
-      mySlot: scope => {
-        const n1 = t1()
-        const n2 = /** @type {any} */ (children(n1, 0))
-        const n3 = /** @type {any} */ (children(n1, 1))
-        renderEffect(() => {
-          setText(n2, scope.message)
-        })
-        on(n3, 'click', scope.changeMessage)
-        return [n1]
-      },
-      // e.g. default slot
-      // default: () => {
-      //   const n1 = t1()
-      //   return [n1]
-      // }
-    })
-    renderComponent(Child, {}, s0, n0)
-    return n0
+
+  setup(props) {
+    return (() => {
+      const n0 = /** @type {any} */ (t0())
+      const s0 = createSlots({
+        mySlot: scope => {
+          const n1 = t1()
+          const n2 = /** @type {any} */ (children(n1, 0))
+          const n3 = /** @type {any} */ (children(n1, 1))
+          renderEffect(() => {
+            setText(n2, scope.message())
+          })
+          on(n3, 'click', scope.changeMessage)
+          return [n1]
+        },
+        // e.g. default slot
+        // default: () => {
+        //   const n1 = t1()
+        //   return [n1]
+        // }
+      })
+      /** @type {any} */
+      const n1 = createComponent(Child, {}, s0)
+      return [n0, n1]
+    })()
   },
 })
 
@@ -59,41 +61,30 @@ const t2 = template(
 
 const Child = defineComponent({
   vapor: true,
-  props: undefined,
-  setup(props, { expose: __expose }) {
+  setup(_, { expose: __expose }) {
     __expose()
     const message = ref('Hello World!')
     function changeMessage() {
       message.value += '!'
     }
-    const __returned__ = { message, changeMessage }
-    Object.defineProperty(__returned__, '__isScriptSetup', {
-      enumerable: false,
-      value: true,
-    })
-    return __returned__
-  },
-  render(_ctx) {
-    const instance = /** @type {any} */ (getCurrentInstance())
-    const { slots } = instance
 
-    // <div>
-    //   <slot name="mySlot" :message="msg" :changeMessage="changeMessage" />
-    //   <button @click="changeMessage">button in child</button>
-    // </div>
-    const n0 = /** @type {any} */ (t2())
-    const n1 = /** @type {any} */ (children(n0, 0))
-    on(n1, 'click', _ctx.changeMessage)
-    const s0 = slots.mySlot({
-      get message() {
-        return _ctx.message
-      },
-      get changeMessage() {
-        return _ctx.changeMessage
-      },
-    })
-    insert(s0, n0, n1)
-    return n0
+    return (() => {
+      const instance = /** @type {any} */ (getCurrentInstance())
+      const { slots } = instance
+      // <div>
+      //   <slot name="mySlot" :message="msg" :changeMessage="changeMessage" />
+      //   <button @click="changeMessage">button in child</button>
+      // </div>
+      const n0 = /** @type {any} */ (t2())
+      const n1 = /** @type {any} */ (children(n0, 0))
+      on(n1, 'click', () => changeMessage)
+      const s0 = slots.mySlot({
+        message: () => message.value,
+        changeMessage: () => changeMessage,
+      })
+      insert(s0, n0, n1)
+      return n0
+    })()
   },
 })