refactor(runtime-vapor): renderEffect based on ReactiveEffect + remove renderWatch (#155)

LittleSound · web-flow · commit 64e83689a0f5 · 2024-03-18T20:13:40.000+08:00
diff --git a/packages/runtime-vapor/__tests__/renderEffect.spec.ts b/packages/runtime-vapor/__tests__/renderEffect.spec.ts
@@ -1,11 +1,10 @@
+import { onEffectCleanup } from '@vue/reactivity'
 import {
   nextTick,
   onBeforeUpdate,
   onUpdated,
-  onWatcherCleanup,
   ref,
   renderEffect,
-  renderWatch,
   template,
   watchEffect,
   watchPostEffect,
@@ -31,8 +30,8 @@ const createDemo = (setupFn: () => any, renderFn: (ctx: any) => any) =>
     },
   })
 
-describe('renderWatch', () => {
-  test('effect', async () => {
+describe('renderEffect', () => {
+  test('basic', async () => {
     let dummy: any
     const source = ref(0)
     renderEffect(() => {
@@ -58,26 +57,6 @@ describe('renderWatch', () => {
     expect(dummy).toBe(3)
   })
 
-  test('watch', async () => {
-    let dummy: any
-    const source = ref(0)
-    renderWatch(source, () => {
-      dummy = source.value
-    })
-    await nextTick()
-    expect(dummy).toBe(undefined)
-
-    source.value++
-    expect(dummy).toBe(undefined)
-    await nextTick()
-    expect(dummy).toBe(1)
-
-    source.value++
-    expect(dummy).toBe(1)
-    await nextTick()
-    expect(dummy).toBe(2)
-  })
-
   test('should run with the scheduling order', async () => {
     const calls: string[] = []
 
@@ -101,17 +80,17 @@ describe('renderWatch', () => {
         watchPostEffect(() => {
           const current = source.value
           calls.push(`post ${current}`)
-          onWatcherCleanup(() => calls.push(`post cleanup ${current}`))
+          onEffectCleanup(() => calls.push(`post cleanup ${current}`))
         })
         watchEffect(() => {
           const current = source.value
           calls.push(`pre ${current}`)
-          onWatcherCleanup(() => calls.push(`pre cleanup ${current}`))
+          onEffectCleanup(() => calls.push(`pre cleanup ${current}`))
         })
         watchSyncEffect(() => {
           const current = source.value
           calls.push(`sync ${current}`)
-          onWatcherCleanup(() => calls.push(`sync cleanup ${current}`))
+          onEffectCleanup(() => calls.push(`sync cleanup ${current}`))
         })
         return { source, change, renderSource, changeRender }
       },
@@ -121,15 +100,8 @@ describe('renderWatch', () => {
         renderEffect(() => {
           const current = _ctx.renderSource
           calls.push(`renderEffect ${current}`)
-          onWatcherCleanup(() => calls.push(`renderEffect cleanup ${current}`))
+          onEffectCleanup(() => calls.push(`renderEffect cleanup ${current}`))
         })
-        renderWatch(
-          () => _ctx.renderSource,
-          value => {
-            calls.push(`renderWatch ${value}`)
-            onWatcherCleanup(() => calls.push(`renderWatch cleanup ${value}`))
-          },
-        )
       },
     ).render()
     const { change, changeRender } = instance.setupState as any
@@ -151,7 +123,6 @@ describe('renderWatch', () => {
       'beforeUpdate 1',
       'renderEffect cleanup 0',
       'renderEffect 1',
-      'renderWatch 1',
       'post cleanup 0',
       'post 1',
       'updated 1',
@@ -172,8 +143,6 @@ describe('renderWatch', () => {
       'beforeUpdate 2',
       'renderEffect cleanup 1',
       'renderEffect 2',
-      'renderWatch cleanup 1',
-      'renderWatch 2',
       'post cleanup 1',
       'post 2',
       'updated 2',
diff --git a/packages/runtime-vapor/src/apiCreateFor.ts b/packages/runtime-vapor/src/apiCreateFor.ts
@@ -1,7 +1,7 @@
 import { type EffectScope, effectScope, isReactive } from '@vue/reactivity'
 import { isArray, isObject, isString } from '@vue/shared'
 import { createComment, createTextNode, insert, remove } from './dom/element'
-import { renderEffect } from './renderWatch'
+import { renderEffect } from './renderEffect'
 import { type Block, type Fragment, fragmentKey } from './apiRender'
 import { warn } from './warning'
 
diff --git a/packages/runtime-vapor/src/apiCreateIf.ts b/packages/runtime-vapor/src/apiCreateIf.ts
@@ -1,4 +1,4 @@
-import { renderWatch } from './renderWatch'
+import { renderEffect } from './renderEffect'
 import { type Block, type Fragment, fragmentKey } from './apiRender'
 import { type EffectScope, effectScope } from '@vue/reactivity'
 import { createComment, createTextNode, insert, remove } from './dom/element'
@@ -12,6 +12,8 @@ export const createIf = (
   b2?: BlockFn,
   // hydrationNode?: Node,
 ): Fragment => {
+  let newValue: any
+  let oldValue: any
   let branch: BlockFn | undefined
   let parent: ParentNode | undefined | null
   let block: Block | undefined
@@ -29,25 +31,23 @@ export const createIf = (
   //   setCurrentHydrationNode(hydrationNode!)
   // }
 
-  renderWatch(
-    () => !!condition(),
-    value => {
+  renderEffect(() => {
+    if ((newValue = !!condition()) !== oldValue) {
       parent ||= anchor.parentNode
       if (block) {
         scope!.stop()
         remove(block, parent!)
       }
-      if ((branch = value ? b1 : b2)) {
+      if ((branch = (oldValue = newValue) ? b1 : b2)) {
         scope = effectScope()
         fragment.nodes = block = scope.run(branch)!
         parent && insert(block, parent, anchor)
       } else {
         scope = block = undefined
         fragment.nodes = []
       }
-    },
-    { immediate: true },
-  )
+    }
+  })
 
   // TODO: SSR
   // if (isHydrating) {
diff --git a/packages/runtime-vapor/src/directives.ts b/packages/runtime-vapor/src/directives.ts
@@ -1,8 +1,8 @@
-import { NOOP, isFunction } from '@vue/shared'
+import { isFunction } from '@vue/shared'
 import { type ComponentInternalInstance, currentInstance } from './component'
-import { pauseTracking, resetTracking } from '@vue/reactivity'
+import { pauseTracking, resetTracking, traverse } from '@vue/reactivity'
 import { VaporErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
-import { renderWatch } from './renderWatch'
+import { renderEffect } from './renderEffect'
 
 export type DirectiveModifiers<M extends string = string> = Record<M, boolean>
 
@@ -100,8 +100,12 @@ export function withDirectives<T extends Node>(
 
     // register source
     if (source) {
-      // callback will be overridden by middleware
-      renderWatch(source, NOOP, { deep: dir.deep })
+      if (dir.deep) {
+        const deep = dir.deep === true ? undefined : dir.deep
+        const baseSource = source
+        source = () => traverse(baseSource(), deep)
+      }
+      renderEffect(source)
     }
   }
 
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
@@ -46,7 +46,7 @@ export {
   type FunctionalComponent,
   type SetupFn,
 } from './component'
-export { renderEffect, renderWatch } from './renderWatch'
+export { renderEffect } from './renderEffect'
 export {
   watch,
   watchEffect,
diff --git a/packages/runtime-vapor/src/renderEffect.ts b/packages/runtime-vapor/src/renderEffect.ts
@@ -0,0 +1,59 @@
+import { EffectFlags, ReactiveEffect, type SchedulerJob } from '@vue/reactivity'
+import { invokeArrayFns } from '@vue/shared'
+import { getCurrentInstance, setCurrentInstance } from './component'
+import { queueJob, queuePostRenderEffect } from './scheduler'
+import { VaporErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
+import { invokeDirectiveHook } from './directives'
+
+export function renderEffect(cb: () => void) {
+  const instance = getCurrentInstance()
+
+  let effect: ReactiveEffect
+
+  const job: SchedulerJob = () => {
+    if (!(effect.flags & EffectFlags.ACTIVE) || !effect.dirty) {
+      return
+    }
+
+    if (instance?.isMounted && !instance.isUpdating) {
+      instance.isUpdating = true
+
+      const { bu, u, dirs } = instance
+      // beforeUpdate hook
+      if (bu) {
+        invokeArrayFns(bu)
+      }
+      if (dirs) {
+        invokeDirectiveHook(instance, 'beforeUpdate')
+      }
+
+      effect.run()
+
+      queuePostRenderEffect(() => {
+        instance.isUpdating = false
+        if (dirs) {
+          invokeDirectiveHook(instance, 'updated')
+        }
+        // updated hook
+        if (u) {
+          queuePostRenderEffect(u)
+        }
+      })
+    } else {
+      effect.run()
+    }
+  }
+
+  effect = new ReactiveEffect(() => {
+    const reset = instance && setCurrentInstance(instance)
+    callWithAsyncErrorHandling(cb, instance, VaporErrorCodes.RENDER_FUNCTION)
+    reset?.()
+  })
+
+  effect.scheduler = () => {
+    if (instance) job.id = instance.uid
+    queueJob(job)
+  }
+
+  effect.run()
+}
diff --git a/packages/runtime-vapor/src/renderWatch.ts b/packages/runtime-vapor/src/renderWatch.ts
diff --git a/packages/runtime-vapor/src/scheduler.ts b/packages/runtime-vapor/src/scheduler.ts
@@ -32,7 +32,7 @@ let postFlushIndex = 0
 const resolvedPromise = /*#__PURE__*/ Promise.resolve() as Promise<any>
 let currentFlushPromise: Promise<void> | null = null
 
-function queueJob(job: SchedulerJob) {
+export function queueJob(job: SchedulerJob) {
   if (!(job.flags! & SchedulerJobFlags.QUEUED)) {
     if (job.id == null) {
       queue.push(job)
