refactor(runtime-vapor): extract firstEffect

Author: sxzz

packages/runtime-vapor/src/componentAttrs.ts

@@ -6,12 +6,15 @@ import type { RawProps } from './componentProps'
 import { renderEffect } from './renderEffect'
 
 export function patchAttrs(instance: ComponentInternalInstance) {
-  const attrs = instance.attrs
-  const options = instance.propsOptions[0]
+  const {
+    attrs,
+    rawProps,
+    propsOptions: [options],
+  } = instance
 
   const keys = new Set<string>()
-  if (instance.rawProps.length)
-    for (const props of Array.from(instance.rawProps).reverse()) {
+  if (rawProps.length)
+    for (const props of Array.from(rawProps).reverse()) {
       if (isFunction(props)) {
         const resolved = props()
         for (const rawKey in resolved) {

packages/runtime-vapor/src/componentProps.ts

@@ -9,15 +9,15 @@ import {
   isArray,
   isFunction,
 } from '@vue/shared'
-import { baseWatch, shallowReactive } from '@vue/reactivity'
+import { shallowReactive } from '@vue/reactivity'
 import { warn } from './warning'
 import {
   type Component,
   type ComponentInternalInstance,
   setCurrentInstance,
 } from './component'
 import { patchAttrs } from './componentAttrs'
-import { createVaporPreScheduler } from './scheduler'
+import { firstEffect } from './renderEffect'
 
 export type ComponentPropsOptions<P = Data> =
   | ComponentObjectPropsOptions<P>
@@ -82,16 +82,16 @@ export function initProps(
   rawProps: RawProps,
   isStateful: boolean,
 ) {
-  const props: Data = {}
-  const attrs = (instance.attrs = shallowReactive<Data>({}))
-
   if (!rawProps) rawProps = []
   else if (!isArray(rawProps)) rawProps = [rawProps]
   instance.rawProps = rawProps
 
+  const props: Data = {}
+  const attrs = (instance.attrs = shallowReactive<Data>({}))
   const [options] = instance.propsOptions
-
+  // has v-bind or :[eventName]
   const hasDynamicProps = rawProps.some(isFunction)
+
   if (options) {
     if (hasDynamicProps) {
       for (const key in options) {
@@ -100,15 +100,11 @@ export function initProps(
         registerProp(instance, props, key, getter, true)
       }
     } else {
+      const staticProps = rawProps[0] as StaticProps
       for (const key in options) {
-        const rawKey = rawProps[0] && getRawKey(rawProps[0] as StaticProps, key)
+        const rawKey = staticProps && getRawKey(staticProps, key)
         if (rawKey) {
-          registerProp(
-            instance,
-            props,
-            key,
-            (rawProps[0] as StaticProps)[rawKey],
-          )
+          registerProp(instance, props, key, staticProps[rawKey])
         } else {
           registerProp(instance, props, key, undefined, false, true)
         }
@@ -122,15 +118,13 @@ export function initProps(
   }
 
   if (hasDynamicProps) {
-    baseWatch(() => patchAttrs(instance), undefined, {
-      scheduler: createVaporPreScheduler(instance),
-    })
+    firstEffect(instance, () => patchAttrs(instance))
   } else {
     patchAttrs(instance)
   }
 
   if (isStateful) {
-    instance.props = /* isSSR ? props :  */ shallowReactive(props)
+    instance.props = /* TODO isSSR ? props :  */ shallowReactive(props)
   } else {
     // functional w/ optional props, props === attrs
     instance.props = instance.propsOptions === EMPTY_ARR ? attrs : props

packages/runtime-vapor/src/componentSlots.ts

@@ -1,9 +1,6 @@
 import { type IfAny, isArray, isFunction } from '@vue/shared'
 import {
   type EffectScope,
-  ReactiveEffect,
-  type SchedulerJob,
-  SchedulerJobFlags,
   effectScope,
   isReactive,
   shallowReactive,
@@ -14,9 +11,8 @@ import {
   setCurrentInstance,
 } from './component'
 import { type Block, type Fragment, fragmentKey } from './apiRender'
-import { renderEffect } from './renderEffect'
+import { firstEffect, renderEffect } from './renderEffect'
 import { createComment, createTextNode, insert, remove } from './dom/element'
-import { queueJob } from './scheduler'
 import { VaporErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
 
 // TODO: SSR
@@ -56,8 +52,7 @@ export function initSlots(
   if (dynamicSlots) {
     slots = shallowReactive(slots)
     const dynamicSlotKeys: Record<string, true> = {}
-
-    const effect = new ReactiveEffect(() => {
+    firstEffect(instance, () => {
       const _dynamicSlots = callWithAsyncErrorHandling(
         dynamicSlots,
         instance,
@@ -98,12 +93,6 @@ export function initSlots(
         }
       }
     })
-
-    const job: SchedulerJob = () => effect.run()
-    job.flags! |= SchedulerJobFlags.PRE
-    job.id = instance.uid
-    effect.scheduler = () => queueJob(job)
-    effect.run()
   }
 
   instance.slots = slots

packages/runtime-vapor/src/renderEffect.ts

@@ -1,6 +1,15 @@
-import { EffectFlags, ReactiveEffect, type SchedulerJob } from '@vue/reactivity'
+import {
+  EffectFlags,
+  ReactiveEffect,
+  type SchedulerJob,
+  SchedulerJobFlags,
+} from '@vue/reactivity'
 import { invokeArrayFns } from '@vue/shared'
-import { getCurrentInstance, setCurrentInstance } from './component'
+import {
+  type ComponentInternalInstance,
+  getCurrentInstance,
+  setCurrentInstance,
+} from './component'
 import { queueJob, queuePostRenderEffect } from './scheduler'
 import { VaporErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
 import { invokeDirectiveHook } from './directives'
@@ -57,3 +66,15 @@ export function renderEffect(cb: () => void) {
 
   effect.run()
 }
+
+export function firstEffect(
+  instance: ComponentInternalInstance,
+  fn: () => void,
+) {
+  const effect = new ReactiveEffect(fn)
+  const job: SchedulerJob = () => effect.run()
+  job.flags! |= SchedulerJobFlags.PRE
+  job.id = instance.uid
+  effect.scheduler = () => queueJob(job)
+  effect.run()
+}