@lukekaalim/act-recon 3.0.0-alpha.2 → 3.0.0-alpha.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @lukekaalim/act-recon
 
+## 3.0.0-alpha.4
+
+### Patch Changes
+
+- 2984273: Check if immediate child update is already handlded by some other system (avoiding double-rendering)
+
+## 3.0.0-alpha.3
+
+### Patch Changes
+
+- ccb3900: Reconciler should apply all changes in the correct order, and not skip any.
+  - Reconciler does send out a Render command once it completes all pending renders (called a "ThreadStack")
+    Scheduler has been updated to perform some updates in Sync.
+
 ## 3.0.0-alpha.2
 
 ### Patch Changes

package/element.ts

@@ -7,7 +7,7 @@ import { loadHooks } from "./hooks";
 import { ContextState } from "./context";
 import { ComponentState, EffectID, EffectTask } from "./state";
 import { CommitTree } from "./tree";
-import { addRenderTargetToThread, WorkThread } from "./thread";
+import { WorkThread } from "./thread";
 
 /**
  * When processing an element, it may produce additional
@@ -71,7 +71,7 @@ export const createElementService = (
                 // there should be no way for the children of the
                 // provider to already have been renderer,
                 // so we don't check the return value.
-                addRenderTargetToThread(thread, consumer);
+                WorkThread.queueTarget(thread, consumer, tree);
               }
             }
             break;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lukekaalim/act-recon",
   "type": "module",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.4",
   "main": "mod.ts",
   "dependencies": {
     "@lukekaalim/act": "^3.2.0"

package/reconciler.ts

@@ -3,7 +3,7 @@ import { CommitID, CommitRef } from "./commit";
 import { WorkThread } from "./thread"
 import { CommitTree } from "./tree";
 import { ElementService } from "./element";
-import { Scheduler, WorkID } from "./scheduler";
+import { Scheduler } from "./scheduler";
 import { createEventEmitter, EventEmitter } from "./event";
 
 export type Reconciler = {
@@ -18,7 +18,7 @@ export type Reconciler = {
 
 export type ReconcilerState = {
   thread: WorkThread | null,
-  work: WorkID | null,
+  pendingThreadStack: WorkThread[],
   /**
    * These are targets that can't be fulfilled with the current thread
    * */
@@ -36,56 +36,66 @@ export const createReconciler = (scheduler: Scheduler): Reconciler => {
   const events = createEventEmitter<ReconcilerEvent>();
   const state: ReconcilerState = {
     thread: null,
-    work: null,
+    pendingThreadStack: [],
     pendingTargets: new Map(),
   };
 
   const work = () => {
-    state.work = null;
     if (!state.thread)
       return;
 
     const update = state.thread.pendingUpdates.pop();
     if (update) {
       WorkThread.update(state.thread, update, tree, elements);
-      state.work = scheduler.requestWork(work);
+      
+      scheduler.requestCallback();
     } else {
       const completedThread = state.thread;
       state.thread = null;
 
       const pendingTargets = [...state.pendingTargets]
       state.pendingTargets.clear();
+      state.pendingThreadStack.push(completedThread);
+      WorkThread.apply(completedThread, tree);
 
-      for (const [,target] of pendingTargets)
-        render(target);
+      if (pendingTargets.length === 0) {
+        for (const thread of state.pendingThreadStack) {
+          // fire off all renders
+          events.emit({ type: 'thread:complete', thread });
+
+          // Run side effects
+          for (const effect of thread.pendingEffects) {
+            try {
+              effect.func();
+            } catch (error) {
+              console.error(error);
+            }
+          }
+        }
 
-      WorkThread.apply(completedThread, tree);
-      events.emit({ type: 'thread:complete', thread: completedThread });
-
-      // Run side effects
-      for (const effect of completedThread.pendingEffects) {
-        try {
-          effect.func();
-        } catch (error) {
-          console.error(error);
+        state.pendingThreadStack = [];
+      } else {
+        const nextThread = getOrStartThread();
+        for (const [,target] of pendingTargets) {
+          render(target);
         }
+        nextThread.pendingEffects.push(...completedThread.pendingEffects);
       }
     }
   }
 
-  const start = () => {
+  const getOrStartThread = () => {
     if (!state.thread) {
       state.thread = WorkThread.new();
       events.emit({ type: 'thread:start', thread: state.thread });
+    } else {
     }
-    if (!state.work) {
-      state.work = scheduler.requestWork(work);
-    }
+    scheduler.requestCallback();
     return state.thread;
   }
 
   const mount = (node: Node) => {
-    const thread = start();
+    const thread = getOrStartThread();
     const elements = convertNodeToElements(node)
 
     for (const element of elements) {
@@ -96,7 +106,7 @@ export const createReconciler = (scheduler: Scheduler): Reconciler => {
     events.emit({ type: 'thread:new-root', thread });
   };
   const render = (ref: CommitRef) => {
-    const thread = start();
+    const thread = getOrStartThread();
 
     if (WorkThread.queueTarget(thread, ref, tree)) {
       events.emit({ type: 'thread:new-target', thread });
@@ -108,5 +118,8 @@ export const createReconciler = (scheduler: Scheduler): Reconciler => {
   const tree = CommitTree.new();
   const elements = ElementService.create(tree, render);
 
+
+  scheduler.setCallbackFunc(work);
+
   return { mount, render, state, tree, elements, subscribe: events.subscribe };
 }

package/scheduler.ts

@@ -1,10 +1,19 @@
-import { OpaqueID } from "@lukekaalim/act";
-
-export type WorkID = OpaqueID<"WorkID">;
 /**
- * Work provider is platform agnostic timer/callback interface
+ * The Scheduler is an agnostic interface for a very simple
+ * request/cancel interface for async work.
+ * 
+ * In practice, this will be backed by something
+ * as simple as setTimeout, requestAnimationFrame
+ * or even idleCallback.
+ * 
+ * It should have a bit of internal state - only
+ * a single callback can be queued at once.
  */
 export type Scheduler = {
-  requestWork(callback: () => void): WorkID,
-  cancelWork(workId: WorkID): void,
+  setCallbackFunc(callback: () => void): void,
+
+  requestCallback(): void,
+  cancelCallback(): void,
+
+  isCallbackPending(): boolean,
 };

package/thread.ts

@@ -109,7 +109,12 @@ const updateWorkThread = (thread: WorkThread, update: Update, tree: CommitTree,
     const [childRefs, updates] = calculateUpdates(ref, prevChildren, output.child);
 
     thread.pendingEffects.push(...output.effects);
-    thread.pendingUpdates.push(...updates);
+    for (const update of updates) {
+      // if someone has already marked the update as needing rendering, assume
+      // that there is already an update in the stack to handle it.
+      if (!thread.mustRender.has(update.ref.id))
+        thread.pendingUpdates.push(update);
+    }
 
     const commit = Commit.update(ref, next, childRefs);
 
@@ -168,17 +173,17 @@ const startWorkThreadUpdate = (thread: WorkThread, ref: CommitRef, prev: Commit
  * or `false` if it could not be added for some reason, such as:
  *    - The thread has already visited the Commit (a thread will never backtrack)
  */
-export const addRenderTargetToThread = (thread: WorkThread, target: CommitRef): boolean => {
-  // If the thread _already_ has this ref as a target,
-  // do nothing
-  if (thread.mustRender.has(target.id))
-    return true;
-
+const queueWorkThreadTarget = (thread: WorkThread, target: CommitRef, tree: CommitTree): boolean => {
   // We cant do work on a commit that has
   // already been visited
   if (thread.visited.has(target.id))
     return false;
 
+  // If the thread _already_ has this ref as a target,
+  // do nothing
+  if (thread.mustRender.has(target.id))
+    return true;
+
   thread.reasons.push({ type: 'target', ref: target });
   thread.mustRender.set(target.id, target);
 
@@ -199,28 +204,12 @@ export const addRenderTargetToThread = (thread: WorkThread, target: CommitRef):
     }
   }
 
-  return true;
-}
-
-/**
- * Request that a commit be re-rendered
- * 
- * If returns false, the update cannot be queued in the current
- * thread (maybe it already re-rendered?).
- * @param thread 
- * @param ref 
- * @returns 
- */
-const queueWorkThreadTarget = (thread: WorkThread, ref: CommitRef, tree: CommitTree): boolean => {
-  // Try to add to the thread
-  if (!addRenderTargetToThread(thread, ref)) {
-    return false;
-  }
   // otherwise, start a new update from the root
-  const prev = tree.commits.get(ref.id) as Commit;
-  startWorkThreadUpdate(thread, ref, prev, prev.element);
+  const prev = tree.commits.get(target.id) as Commit;
+  startWorkThreadUpdate(thread, target, prev, prev.element);
   return true;
 }
+
 const queueWorkThreadMount = (thread: WorkThread, ref: CommitRef, element: Element) => {
   thread.reasons.push({ type: 'mount', element, ref });
   startWorkThreadUpdate(thread, ref, null, element);