refactor(runtime-vapor): rewrite renderEffect as a class

Author: johnsoncodehk

packages/reactivity/__tests__/effect.spec.ts

@@ -624,15 +624,15 @@ describe('reactivity/effect', () => {
     const runner = effect(() => {})
     const otherRunner = effect(runner)
     expect(runner).not.toBe(otherRunner)
-    expect(runner.effect.fn).toBe(otherRunner.effect.fn)
+    expect(runner.effect.callback).toBe(otherRunner.effect.callback)
   })
 
   it('should wrap if the passed function is a fake effect', () => {
     const fakeRunner = () => {}
     fakeRunner.effect = {}
     const runner = effect(fakeRunner)
     expect(fakeRunner).not.toBe(runner)
-    expect(runner.effect.fn).toBe(fakeRunner)
+    expect(runner.effect.callback).toBe(fakeRunner)
   })
 
   it('should not run multiple times for a single mutation', () => {

packages/reactivity/src/effect.ts

@@ -73,7 +73,13 @@ export class ReactiveEffect<T = any> implements ReactiveEffectOptions {
   onTrack?: (event: DebuggerEvent) => void
   onTrigger?: (event: DebuggerEvent) => void
 
-  constructor(public fn: () => T) {
+  // @ts-expect-error
+  callback(): T {}
+
+  constructor(fn?: () => T) {
+    if (fn !== undefined) {
+      this.callback = fn
+    }
     if (activeEffectScope && activeEffectScope.active) {
       link(this, activeEffectScope)
     }
@@ -120,15 +126,15 @@ export class ReactiveEffect<T = any> implements ReactiveEffectOptions {
 
     if (!this.active) {
       // stopped during cleanup
-      return this.fn()
+      return this.callback()
     }
     cleanupEffect(this)
     const prevSub = activeSub
     setActiveSub(this)
     startTracking(this)
 
     try {
-      return this.fn()
+      return this.callback()
     } finally {
       if (__DEV__ && activeSub !== this) {
         warn(
@@ -191,7 +197,7 @@ export function effect<T = any>(
   options?: ReactiveEffectOptions,
 ): ReactiveEffectRunner<T> {
   if ((fn as ReactiveEffectRunner).effect instanceof ReactiveEffect) {
-    fn = (fn as ReactiveEffectRunner).effect.fn
+    fn = (fn as ReactiveEffectRunner).effect.callback
   }
 
   const e = new ReactiveEffect(fn)

packages/runtime-vapor/src/renderEffect.ts

@@ -1,4 +1,8 @@
-import { ReactiveEffect, getCurrentScope } from '@vue/reactivity'
+import {
+  type EffectScope,
+  ReactiveEffect,
+  getCurrentScope,
+} from '@vue/reactivity'
 import {
   type SchedulerJob,
   currentInstance,
@@ -11,60 +15,94 @@ import {
 import { type VaporComponentInstance, isVaporComponent } from './component'
 import { invokeArrayFns } from '@vue/shared'
 
-export function renderEffect(fn: () => void, noLifecycle = false): void {
-  const instance = currentInstance as VaporComponentInstance | null
-  const scope = getCurrentScope()
-  if (__DEV__ && !__TEST__ && !scope && !isVaporComponent(instance)) {
-    warn('renderEffect called without active EffectScope or Vapor instance.')
-  }
+class RenderEffect extends ReactiveEffect {
+  i: VaporComponentInstance | null
+  scope: EffectScope | undefined
+  baseJob: SchedulerJob
+  postJob: SchedulerJob
+
+  constructor(public render: () => void) {
+    super()
+    const instance = currentInstance as VaporComponentInstance | null
+    const scope = getCurrentScope()
+    if (__DEV__ && !__TEST__ && !scope && !isVaporComponent(instance)) {
+      warn('renderEffect called without active EffectScope or Vapor instance.')
+    }
+
+    this.baseJob = () => {
+      if (this.dirty) {
+        this.run()
+      }
+    }
+    this.postJob = () => {
+      instance!.isUpdating = false
+      instance!.u && invokeArrayFns(instance!.u)
+    }
 
-  // renderEffect is always called after user has registered all hooks
-  const hasUpdateHooks = instance && (instance.bu || instance.u)
-  const renderEffectFn = noLifecycle
-    ? fn
-    : () => {
-        if (__DEV__ && instance) {
-          startMeasure(instance, `renderEffect`)
-        }
-        const prev = currentInstance
-        simpleSetCurrentInstance(instance)
-        if (scope) scope.on()
-        if (hasUpdateHooks && instance.isMounted && !instance.isUpdating) {
-          instance.isUpdating = true
-          instance.bu && invokeArrayFns(instance.bu)
-          fn()
-          queuePostFlushCb(() => {
-            instance.isUpdating = false
-            instance.u && invokeArrayFns(instance.u)
-          })
-        } else {
-          fn()
-        }
-        if (scope) scope.off()
-        simpleSetCurrentInstance(prev, instance)
-        if (__DEV__ && instance) {
-          startMeasure(instance, `renderEffect`)
-        }
+    if (instance) {
+      if (__DEV__) {
+        this.onTrack = instance.rtc
+          ? e => invokeArrayFns(instance.rtc!, e)
+          : void 0
+        this.onTrigger = instance.rtg
+          ? e => invokeArrayFns(instance.rtg!, e)
+          : void 0
       }
+      this.baseJob.i = instance
+      this.baseJob.id = instance.uid
+    }
+
+    this.i = instance
+    this.scope = scope
 
-  const effect = new ReactiveEffect(renderEffectFn)
-  const job: SchedulerJob = () => effect.dirty && effect.run()
+    // TODO recurse handling
+  }
 
-  if (instance) {
-    if (__DEV__) {
-      effect.onTrack = instance.rtc
-        ? e => invokeArrayFns(instance.rtc!, e)
-        : void 0
-      effect.onTrigger = instance.rtg
-        ? e => invokeArrayFns(instance.rtg!, e)
-        : void 0
+  callback() {
+    const instance = this.i!
+    const scope = this.scope
+    // renderEffect is always called after user has registered all hooks
+    const hasUpdateHooks = instance && (instance.bu || instance.u)
+    if (__DEV__ && instance) {
+      startMeasure(instance, `renderEffect`)
     }
-    job.i = instance
-    job.id = instance.uid
+    const prev = currentInstance
+    simpleSetCurrentInstance(instance)
+    if (scope) scope.on()
+    if (hasUpdateHooks && instance.isMounted && !instance.isUpdating) {
+      instance.isUpdating = true
+      instance.bu && invokeArrayFns(instance.bu)
+      this.render()
+      queuePostFlushCb(this.postJob)
+    } else {
+      this.render()
+    }
+    if (scope) scope.off()
+    simpleSetCurrentInstance(prev, instance)
+    if (__DEV__ && instance) {
+      startMeasure(instance, `renderEffect`)
+    }
+  }
+
+  scheduler() {
+    queueJob(this.baseJob)
   }
+}
 
-  effect.scheduler = () => queueJob(job)
-  effect.run()
+class RenderEffect_NoLifecycle extends RenderEffect {
+  constructor(render: () => void) {
+    super(render)
+  }
 
-  // TODO recurse handling
+  callback() {
+    this.render()
+  }
+}
+
+export function renderEffect(fn: () => void, noLifecycle = false): void {
+  if (noLifecycle) {
+    new RenderEffect_NoLifecycle(fn).run()
+  } else {
+    new RenderEffect(fn).run()
+  }
 }