wip

Author: johnsoncodehk

packages/reactivity/src/effectScope.ts

@@ -1,4 +1,4 @@
-import { EffectFlags, cleanup, onCleanup } from './effect'
+import { EffectFlags, ReactiveEffect, cleanup, onCleanup } from './effect'
 import {
   type Dependency,
   type Link,
@@ -18,6 +18,8 @@ export class EffectScope implements Subscriber, Dependency {
   depsTail: Link | undefined = undefined
   flags: number = 0
   cleanups: number = 0
+  jobs: Link | undefined = undefined
+  jobsTail: Link | undefined = undefined
 
   // Dependency
   subs: Link | undefined = undefined
@@ -33,7 +35,17 @@ export class EffectScope implements Subscriber, Dependency {
     return this.deps !== undefined
   }
 
-  notify(): void {}
+  notify(): void {
+    let link = this.jobs
+    while (link !== undefined) {
+      ;(link.dep as ReactiveEffect | EffectScope).notify()
+      const next = link.nextJob
+      link.nextJob = undefined
+      link = next
+    }
+    this.jobs = undefined
+    this.jobsTail = undefined
+  }
 
   pause(): void {
     if (!(this.flags & EffectFlags.PAUSED)) {

packages/reactivity/src/system.ts

@@ -22,25 +22,33 @@ export interface Link {
   nextSub: Link | undefined
   prevDep: Link | undefined
   nextDep: Link | undefined
+  nextJob: Link | undefined
 }
 
 export const enum SubscriberFlags {
   Tracking = 1 << 2,
   Recursed = 1 << 4,
   Dirty = 1 << 5,
   Pending = 1 << 6,
+  Job = 1 << 10,
 }
 
 interface OneWayLink<T> {
   target: T
   linked: OneWayLink<T> | undefined
 }
 
-const notifyBuffer: (Effect | EffectScope | undefined)[] = []
+const notifyBuffer: (Effect | undefined)[] = []
+const jobBuffer: (Effect | EffectScope | undefined)[] = []
 
 let batchDepth = 0
 let notifyIndex = 0
+let flushIndex = 0
 let notifyBufferLength = 0
+let jobBufferLength = 0
+let currentFlushPromise: Promise<void> | undefined
+
+const resolvedPromise = /*@__PURE__*/ Promise.resolve() as Promise<any>
 
 export function startBatch(): void {
   ++batchDepth
@@ -77,6 +85,7 @@ export function link(dep: Dependency, sub: Subscriber): void {
     nextDep,
     prevSub: undefined,
     nextSub: undefined,
+    nextJob: undefined,
   }
   if (prevDep === undefined) {
     sub.deps = newLink
@@ -180,18 +189,33 @@ export function propagate(current: Link): void {
 
     if (shouldNotify) {
       if (shouldNotify === 1 && 'notify' in sub) {
-        notifyBuffer[notifyBufferLength++] = sub
-      } else {
-        const subSubs = (sub as Dependency).subs
-        if (subSubs !== undefined) {
-          current = subSubs
-          if (subSubs.nextSub !== undefined) {
-            branchs = { target: next, linked: branchs }
-            ++branchDepth
-            next = current.nextSub
+        if (subFlags & SubscriberFlags.Job) {
+          let last = sub
+          let parent = sub.subs
+          let queued = false
+          while (parent !== undefined) {
+            last = parent.sub as EffectScope
+            let next = last.subs
+            while (last.deps === last.depsTail && next !== undefined) {
+              last = next.sub as EffectScope
+              next = last.subs
+            }
+            const jobsTail = last.jobsTail
+            if (jobsTail === undefined) {
+              last.jobsTail = last.jobs = parent
+              parent = next
+            } else {
+              last.jobsTail = jobsTail.nextJob = parent
+              queued = true
+              break
+            }
           }
-          targetFlag = SubscriberFlags.Pending
-          continue
+          if (!queued) {
+            jobBuffer[jobBufferLength++] = last
+            queueFlush()
+          }
+        } else if (!('jobs' in sub)) {
+          notifyBuffer[notifyBufferLength++] = sub
         }
       }
     } else if (!(subFlags & (SubscriberFlags.Tracking | targetFlag))) {
@@ -230,6 +254,24 @@ export function propagate(current: Link): void {
   }
 }
 
+async function queueFlush() {
+  if (currentFlushPromise === undefined) {
+    currentFlushPromise = resolvedPromise
+    try {
+      await currentFlushPromise
+      while (flushIndex < jobBufferLength) {
+        const effect = jobBuffer[flushIndex]!
+        jobBuffer[flushIndex++] = undefined
+        effect.notify()
+      }
+      flushIndex = 0
+      jobBufferLength = 0
+    } finally {
+      currentFlushPromise = undefined
+    }
+  }
+}
+
 export function startTracking(sub: Subscriber): void {
   sub.depsTail = undefined
   sub.flags =

packages/runtime-core/src/component.ts

@@ -557,10 +557,6 @@ export interface ComponentInternalInstance extends GenericComponentInstance {
    * Force update render effect
    */
   update: () => void
-  /**
-   * Render effect job to be passed to scheduler (checks if dirty)
-   */
-  job: SchedulerJob
   /**
    * The render function that returns vdom tree.
    * @internal
@@ -718,7 +714,6 @@ export function createComponentInstance(
     subTree: null!, // will be set synchronously right after creation
     effect: null!,
     update: null!, // will be set synchronously right after creation
-    job: null!,
     scope: new EffectScope(true /* detached */),
     render: null,
     proxy: null,

packages/runtime-core/src/components/BaseTransition.ts

@@ -20,7 +20,6 @@ import { PatchFlags, ShapeFlags, isArray, isFunction } from '@vue/shared'
 import { onBeforeUnmount, onMounted } from '../apiLifecycle'
 import { isTeleport } from './Teleport'
 import type { RendererElement } from '../renderer'
-import { SchedulerJobFlags } from '../scheduler'
 
 type Hook<T = () => void> = T | T[]
 
@@ -223,7 +222,7 @@ const BaseTransitionImpl: ComponentOptions = {
             state.isLeaving = false
             // #6835
             // it also needs to be updated when active is undefined
-            if (!(instance.job.flags! & SchedulerJobFlags.DISPOSED)) {
+            if (instance.effect.active) {
               instance.update()
             }
             delete leavingHooks.afterLeave

packages/runtime-core/src/renderer.ts

@@ -46,12 +46,10 @@ import {
   isReservedProp,
 } from '@vue/shared'
 import {
-  type SchedulerJob,
   SchedulerJobFlags,
   type SchedulerJobs,
   flushOnAppMount,
   flushPreFlushCbs,
-  queueJob,
   queuePostFlushCb,
 } from './scheduler'
 import {
@@ -1597,13 +1595,11 @@ function baseCreateRenderer(
     // create reactive effect for rendering
     const prevScope = setCurrentScope(instance.scope)
     const effect = (instance.effect = new ReactiveEffect(componentUpdateFn))
+    effect.flags |= 1 << 10 // SubscriberFlags.Job
+
     setCurrentScope(prevScope)
 
     const update = (instance.update = effect.run.bind(effect))
-    const job: SchedulerJob = (instance.job = effect.scheduler.bind(effect))
-    job.i = instance
-    job.id = instance.uid
-    effect.scheduler = () => queueJob(job)
 
     // allowRecurse
     // #1801, #2043 component render effects should allow recursive updates
@@ -2343,7 +2339,7 @@ function baseCreateRenderer(
       unregisterHMR(instance)
     }
 
-    const { bum, scope, job, subTree, um, m, a } = instance
+    const { bum, scope, effect, subTree, um, m, a } = instance
     invalidateMount(m)
     invalidateMount(a)
 
@@ -2364,9 +2360,9 @@ function baseCreateRenderer(
 
     // job may be null if a component is unmounted before its async
     // setup has resolved.
-    if (job) {
+    if (effect) {
       // so that scheduler will no longer invoke it
-      job.flags! |= SchedulerJobFlags.DISPOSED
+      effect.stop()
       unmount(subTree, instance, parentSuspense, doRemove)
     }
     // unmounted hook
@@ -2549,16 +2545,14 @@ function resolveChildrenNamespace(
 }
 
 function toggleRecurse(
-  { effect, job, vapor }: ComponentInternalInstance,
+  { effect, vapor }: ComponentInternalInstance,
   allowed: boolean,
 ) {
   if (!vapor) {
     if (allowed) {
       effect.flags |= EffectFlags.ALLOW_RECURSE
-      job.flags! |= SchedulerJobFlags.ALLOW_RECURSE
     } else {
       effect.flags &= ~EffectFlags.ALLOW_RECURSE
-      job.flags! &= ~SchedulerJobFlags.ALLOW_RECURSE
     }
   }
 }

packages/runtime-vapor/src/renderEffect.ts

@@ -1,8 +1,6 @@
-import { EffectFlags, type EffectScope, ReactiveEffect } from '@vue/reactivity'
+import { type EffectScope, ReactiveEffect } from '@vue/reactivity'
 import {
-  type SchedulerJob,
   currentInstance,
-  queueJob,
   queuePostFlushCb,
   setCurrentInstance,
   startMeasure,
@@ -13,33 +11,28 @@ import { invokeArrayFns } from '@vue/shared'
 
 class RenderEffect extends ReactiveEffect {
   i: VaporComponentInstance | null
-  job: SchedulerJob
 
   constructor(public render: () => void) {
     super()
-    const instance = currentInstance as VaporComponentInstance | null
-    if (__DEV__ && !__TEST__ && !this.subs && !isVaporComponent(instance)) {
-      warn('renderEffect called without active EffectScope or Vapor instance.')
-    }
-
-    const job: SchedulerJob = super.scheduler.bind(this)
+    this.flags |= 1 << 10 // SubscriberFlags.Job
+    const instance = (this.i = currentInstance as VaporComponentInstance | null)
 
-    if (instance) {
-      if (__DEV__) {
+    if (__DEV__) {
+      if (!__TEST__ && !this.subs && !isVaporComponent(instance)) {
+        warn(
+          'renderEffect called without active EffectScope or Vapor instance.',
+        )
+      }
+      if (instance) {
         this.onTrack = instance.rtc
           ? e => invokeArrayFns(instance.rtc!, e)
           : void 0
         this.onTrigger = instance.rtg
           ? e => invokeArrayFns(instance.rtg!, e)
           : void 0
       }
-      job.i = instance
-      job.id = instance.uid
     }
 
-    this.job = job
-    this.i = instance
-
     // TODO recurse handling
   }
 
@@ -72,15 +65,6 @@ class RenderEffect extends ReactiveEffect {
       startMeasure(instance, `renderEffect`)
     }
   }
-
-  notify(): void {
-    const flags = this.flags
-    if (!(flags & EffectFlags.PAUSED)) {
-      queueJob(this.job)
-    } else {
-      this.flags = flags | EffectFlags.NOTIFIED
-    }
-  }
 }
 
 class RenderEffect_NoLifecycle extends RenderEffect {