refactor: concurrent to fiber mode

Author: aidenybai

src/core/render.ts

@@ -1,7 +1,7 @@
-import { CONCURRENT_MODE_THRESHOLD, DIRECTIVE_PREFIX, UnknownKV } from '../models/generics';
+import { DIRECTIVE_PREFIX, UnknownKV } from '../models/generics';
 import { ASTNode, ASTNodeType, Directives } from '../models/structs';
 import { renderDirective } from './directive';
-import concurrent from './utils/concurrent';
+import fiber from './utils/fiber';
 import { rawDirectiveSplitRE } from './utils/patterns';
 
 const render = (
@@ -12,7 +12,7 @@ const render = (
 ): void => {
   const legalDirectiveNames = Object.keys(directives);
 
-  concurrent(CONCURRENT_MODE_THRESHOLD, function* () {
+  const renderFiber = fiber(function* () {
     for (const node of ast) {
       if (node.type === ASTNodeType.NULL) continue;
       yield;
@@ -62,7 +62,9 @@ const render = (
         node.el.dispatchEvent(effectEvent);
       }
     }
-  })();
+  });
+
+  window.requestIdleCallback(renderFiber);
 };
 
 export default render;

src/core/utils/__test__/concurrent.spec.ts

@@ -0,0 +1,7 @@
+import fiber from '../fiber';
+
+describe('.fiber', () => {
+  it('should be a function', () => {
+    expect(typeof fiber).toEqual('function');
+  });
+});

src/core/utils/__test__/fiber.spec.ts

@@ -1,25 +1,23 @@
 /* istanbul ignore file */
 
-// Concurrent allows us to delay render calls if the main thread is blocked
+// Fiber allows us to delay render calls if the main thread is blocked
 // This is kind of like time slicing in React but less advanced
 
-export const concurrent = (
-  threshold: number,
+export const fiber = (
   generatorFunction: () => Generator<undefined, void, unknown>
   // eslint-disable-next-line @typescript-eslint/ban-types
-): Function => {
+): IdleRequestCallback => {
   const generator = generatorFunction();
-  return function next() {
-    const start = performance.now();
+  return function next(deadline: IdleDeadline) {
     let task = null;
     do {
       task = generator.next();
-    } while (performance.now() - start < threshold && !task.done);
+    } while (!task.done && deadline.timeRemaining() > 0);
 
     if (task.done) return;
     /* istanbul ignore next */
-    setTimeout(next);
+    requestIdleCallback(next);
   };
 };
 
-export default concurrent;
+export default fiber;

src/core/utils/concurrent.ts renamed to src/core/utils/fiber.ts

@@ -2,7 +2,6 @@ export const DIRECTIVE_PREFIX = 'l-';
 export const COMPONENT_FLAG = 'component';
 export const FOR_TEMPLATE_FLAG = '__for_template';
 export const MODEL_REGISTERED_FLAG = '__model_registered';
-export const CONCURRENT_MODE_THRESHOLD = 25;
 export enum DIRECTIVE_SHORTHANDS {
   '@' = 'on',
   ':' = 'bind',