refactor(runtime-core): improve scheduler code reusability

Author: johnsoncodehk

packages/runtime-core/src/scheduler.ts

@@ -1,4 +1,4 @@
-import { ErrorCodes, callWithErrorHandling, handleError } from './errorHandling'
+import { ErrorCodes, handleError } from './errorHandling'
 import { isArray } from '@vue/shared'
 import { type GenericComponentInstance, getComponentName } from './component'
 
@@ -39,23 +39,21 @@ export interface SchedulerJob extends Function {
 
 export type SchedulerJobs = SchedulerJob | SchedulerJob[]
 
-const queueMainJobs: (SchedulerJob | undefined)[] = []
-const queuePreJobs: (SchedulerJob | undefined)[] = []
-const queuePostJobs: (SchedulerJob | undefined)[] = []
+const jobs: SchedulerJob[] = []
+const preJobs: SchedulerJob[] = []
 
-let mainFlushIndex = -1
-let preFlushIndex = -1
-let postFlushIndex = 0
-let mainJobsLength = 0
-let preJobsLength = 0
-let postJobsLength = 0
-let flushingPreJob = false
-let activePostFlushCbs: SchedulerJob[] | null = null
+let postJobs: SchedulerJob[] = []
+let activePostJobs: SchedulerJob[] | null = null
 let currentFlushPromise: Promise<void> | null = null
+let jobsLength = 0
+let preJobsLength = 0
+let flushIndex = 0
+let preFlushIndex = 0
+let postFlushIndex = 0
 
 const resolvedPromise = /*@__PURE__*/ Promise.resolve() as Promise<any>
-
 const RECURSION_LIMIT = 100
+
 type CountMap = Map<SchedulerJob, number>
 
 export function nextTick<T = void, R = void>(
@@ -75,48 +73,70 @@ export function nextTick<T = void, R = void>(
 // A pre watcher will have the same id as its component's update job. The
 // watcher should be inserted immediately before the update job. This allows
 // watchers to be skipped if the component is unmounted by the parent update.
-function findInsertionIndex(id: number, isPre: boolean) {
-  let start = (isPre ? preFlushIndex : mainFlushIndex) + 1
-  let end = isPre ? preJobsLength : mainJobsLength
-  const queue = isPre ? queuePreJobs : queueMainJobs
-
+function findInsertionIndex(
+  id: number,
+  queue: SchedulerJob[],
+  start: number,
+  end: number,
+) {
   while (start < end) {
     const middle = (start + end) >>> 1
-    const middleJob = queue[middle]!
+    const middleJob = queue[middle]
     if (middleJob.id! <= id) {
       start = middle + 1
     } else {
       end = middle
     }
   }
-
   return start
 }
 
 /**
  * @internal for runtime-vapor only
  */
 export function queueJob(job: SchedulerJob, isPre = false): void {
+  if (isPre) {
+    if (_queueJob(job, preJobs, preJobsLength, preFlushIndex, -1)) {
+      preJobsLength++
+      queueFlush()
+    }
+  } else {
+    if (_queueJob(job, jobs, jobsLength, flushIndex, Infinity)) {
+      jobsLength++
+      queueFlush()
+    }
+  }
+}
+
+function _queueJob(
+  job: SchedulerJob,
+  queue: SchedulerJob[],
+  length: number,
+  flushIndex: number,
+  defaultId: number,
+) {
   const flags = job.flags!
   if (!(flags & SchedulerJobFlags.QUEUED)) {
+    job.flags! = flags | SchedulerJobFlags.QUEUED
     if (job.id === undefined) {
-      job.id = isPre ? -1 : Infinity
+      job.id = defaultId
     }
-    const queueLength = isPre ? preJobsLength : mainJobsLength
-    const queue = isPre ? queuePreJobs : queueMainJobs
     if (
-      !queueLength ||
+      flushIndex === length ||
       // fast path when the job id is larger than the tail
-      job.id >= queue[queueLength - 1]!.id!
+      job.id >= queue[length - 1].id!
     ) {
-      queue[queueLength] = job
+      queue[length] = job
     } else {
-      queue.splice(findInsertionIndex(job.id, isPre), 0, job)
+      queue.splice(
+        findInsertionIndex(job.id, queue, flushIndex, length),
+        0,
+        job,
+      )
     }
-    isPre ? preJobsLength++ : mainJobsLength++
-    job.flags! = flags | SchedulerJobFlags.QUEUED
-    queueFlush()
+    return true
   }
+  return false
 }
 
 function queueFlush() {
@@ -128,26 +148,19 @@ function queueFlush() {
   }
 }
 
-export function queuePostFlushCb(cb: SchedulerJobs): void {
-  if (!isArray(cb)) {
-    if (cb.id === undefined) {
-      cb.id = Infinity
-    }
-    if (activePostFlushCbs && cb.id === -1) {
-      activePostFlushCbs.splice(postFlushIndex + 1, 0, cb)
-    } else if (!(cb.flags! & SchedulerJobFlags.QUEUED)) {
-      queuePostJobs[postJobsLength++] = cb
-      cb.flags! |= SchedulerJobFlags.QUEUED
+export function queuePostFlushCb(jobs: SchedulerJobs): void {
+  if (!isArray(jobs)) {
+    if (activePostJobs && jobs.id === -1) {
+      activePostJobs.splice(postFlushIndex, 0, jobs)
+    } else {
+      _queueJob(jobs, postJobs, postJobs.length, 0, Infinity)
     }
   } else {
     // if cb is an array, it is a component lifecycle hook which can only be
     // triggered by a job, which is already deduped in the main queue, so
     // we can skip duplicate check here to improve perf
-    for (const job of cb) {
-      if (job.id === undefined) {
-        job.id = Infinity
-      }
-      queuePostJobs[postJobsLength++] = job
+    for (const job of jobs) {
+      _queueJob(job, postJobs, postJobs.length, 0, Infinity)
     }
   }
   queueFlush()
@@ -160,62 +173,45 @@ export function flushPreFlushCbs(
   if (__DEV__) {
     seen = seen || new Map()
   }
-  for (
-    let i = flushingPreJob ? preFlushIndex + 1 : preFlushIndex;
-    i < preJobsLength;
-    i++
-  ) {
-    const cb = queuePreJobs[i]
-    if (cb) {
-      if (instance && cb.id !== instance.uid) {
-        continue
-      }
-      if (__DEV__ && checkRecursiveUpdates(seen!, cb)) {
-        continue
-      }
-      queuePreJobs.splice(i, 1)
-      preJobsLength--
-      i--
-      if (cb.flags! & SchedulerJobFlags.ALLOW_RECURSE) {
-        cb.flags! &= ~SchedulerJobFlags.QUEUED
-      }
-      cb()
-      if (!(cb.flags! & SchedulerJobFlags.ALLOW_RECURSE)) {
-        cb.flags! &= ~SchedulerJobFlags.QUEUED
-      }
+  for (let i = preFlushIndex; i < preJobsLength; i++) {
+    const cb = preJobs[i]
+    if (instance && cb.id !== instance.uid) {
+      continue
+    }
+    if (__DEV__ && checkRecursiveUpdates(seen!, cb)) {
+      continue
+    }
+    preJobs.splice(i, 1)
+    i--
+    preJobsLength--
+    if (cb.flags! & SchedulerJobFlags.ALLOW_RECURSE) {
+      cb.flags! &= ~SchedulerJobFlags.QUEUED
+    }
+    cb()
+    if (!(cb.flags! & SchedulerJobFlags.ALLOW_RECURSE)) {
+      cb.flags! &= ~SchedulerJobFlags.QUEUED
     }
   }
 }
 
 export function flushPostFlushCbs(seen?: CountMap): void {
-  if (postJobsLength) {
-    const deduped = new Set<SchedulerJob>()
-    for (let i = 0; i < postJobsLength; i++) {
-      const job = queuePostJobs[i]!
-      queuePostJobs[i] = undefined
-      deduped.add(job)
-    }
-    postJobsLength = 0
-
-    const sorted = [...deduped].sort((a, b) => a.id! - b.id!)
-
+  if (postJobs.length) {
     // #1947 already has active queue, nested flushPostFlushCbs call
-    if (activePostFlushCbs) {
-      activePostFlushCbs.push(...sorted)
+    if (activePostJobs) {
+      activePostJobs.push(...postJobs)
+      postJobs.length = 0
       return
     }
 
-    activePostFlushCbs = sorted
+    activePostJobs = postJobs
+    postJobs = []
+
     if (__DEV__) {
       seen = seen || new Map()
     }
 
-    for (
-      postFlushIndex = 0;
-      postFlushIndex < activePostFlushCbs.length;
-      postFlushIndex++
-    ) {
-      const cb = activePostFlushCbs[postFlushIndex]
+    while (postFlushIndex < activePostJobs.length) {
+      const cb = activePostJobs[postFlushIndex++]
       if (__DEV__ && checkRecursiveUpdates(seen!, cb)) {
         continue
       }
@@ -230,7 +226,8 @@ export function flushPostFlushCbs(seen?: CountMap): void {
         }
       }
     }
-    activePostFlushCbs = null
+
+    activePostJobs = null
     postFlushIndex = 0
   }
 }
@@ -250,33 +247,30 @@ export function flushOnAppMount(): void {
 
 function flushJobs(seen?: CountMap) {
   if (__DEV__) {
-    seen = seen || new Map()
+    seen ||= new Map()
   }
 
   try {
-    preFlushIndex = 0
-    mainFlushIndex = 0
-
-    while (preFlushIndex < preJobsLength || mainFlushIndex < mainJobsLength) {
+    while (preFlushIndex < preJobsLength || flushIndex < jobsLength) {
       let job: SchedulerJob
       if (preFlushIndex < preJobsLength) {
-        if (mainFlushIndex < mainJobsLength) {
-          const preJob = queuePreJobs[preFlushIndex]!
-          const mainJob = queueMainJobs[mainFlushIndex]!
+        if (flushIndex < jobsLength) {
+          const mainJob = jobs[flushIndex]
+          const preJob = preJobs[preFlushIndex]
           if (preJob.id! <= mainJob.id!) {
             job = preJob
-            flushingPreJob = true
+            preJobs[preFlushIndex++] = undefined as any
           } else {
             job = mainJob
-            flushingPreJob = false
+            jobs[flushIndex++] = undefined as any
           }
         } else {
-          job = queuePreJobs[preFlushIndex]!
-          flushingPreJob = true
+          job = preJobs[preFlushIndex]
+          preJobs[preFlushIndex++] = undefined as any
         }
       } else {
-        job = queueMainJobs[mainFlushIndex]!
-        flushingPreJob = false
+        job = jobs[flushIndex]
+        jobs[flushIndex++] = undefined as any
       }
 
       if (!(job.flags! & SchedulerJobFlags.DISPOSED)) {
@@ -286,60 +280,47 @@ function flushJobs(seen?: CountMap) {
         // they would get eventually shaken by a minifier like terser, some minifiers
         // would fail to do that (e.g. https://github.com/evanw/esbuild/issues/1610)
         if (__DEV__ && checkRecursiveUpdates(seen!, job)) {
-          if (flushingPreJob) {
-            queuePreJobs[preFlushIndex++] = undefined
-          } else {
-            queueMainJobs[mainFlushIndex++] = undefined
-          }
           continue
         }
         if (job.flags! & SchedulerJobFlags.ALLOW_RECURSE) {
           job.flags! &= ~SchedulerJobFlags.QUEUED
         }
-        callWithErrorHandling(
-          job,
-          job.i,
-          job.i ? ErrorCodes.COMPONENT_UPDATE : ErrorCodes.SCHEDULER,
-        )
-        if (!(job.flags! & SchedulerJobFlags.ALLOW_RECURSE)) {
-          job.flags! &= ~SchedulerJobFlags.QUEUED
+        try {
+          job()
+        } catch (err) {
+          handleError(
+            err,
+            job.i,
+            job.i ? ErrorCodes.COMPONENT_UPDATE : ErrorCodes.SCHEDULER,
+          )
+        } finally {
+          if (!(job.flags! & SchedulerJobFlags.ALLOW_RECURSE)) {
+            job.flags! &= ~SchedulerJobFlags.QUEUED
+          }
         }
       }
-
-      if (flushingPreJob) {
-        queuePreJobs[preFlushIndex++] = undefined
-      } else {
-        queueMainJobs[mainFlushIndex++] = undefined
-      }
     }
   } finally {
     // If there was an error we still need to clear the QUEUED flags
     while (preFlushIndex < preJobsLength) {
-      const job = queuePreJobs[preFlushIndex]
-      queuePreJobs[preFlushIndex++] = undefined
-      if (job) {
-        job.flags! &= ~SchedulerJobFlags.QUEUED
-      }
+      preJobs[preFlushIndex].flags! &= ~SchedulerJobFlags.QUEUED
+      preJobs[preFlushIndex++] = undefined as any
     }
-    while (mainFlushIndex < mainJobsLength) {
-      const job = queueMainJobs[mainFlushIndex]
-      queueMainJobs[mainFlushIndex++] = undefined
-      if (job) {
-        job.flags! &= ~SchedulerJobFlags.QUEUED
-      }
+    while (flushIndex < jobsLength) {
+      jobs[flushIndex].flags! &= ~SchedulerJobFlags.QUEUED
+      jobs[flushIndex++] = undefined as any
     }
 
-    preFlushIndex = -1
-    mainFlushIndex = -1
+    flushIndex = 0
+    preFlushIndex = 0
+    jobsLength = 0
     preJobsLength = 0
-    mainJobsLength = 0
-    flushingPreJob = false
 
     flushPostFlushCbs(seen)
 
     currentFlushPromise = null
     // If new jobs have been added to either queue, keep flushing
-    if (preJobsLength || mainJobsLength || postJobsLength) {
+    if (preJobsLength || jobsLength || postJobs.length) {
       flushJobs(seen)
     }
   }