@lukekaalim/act-recon 3.0.0-alpha.1 → 3.0.0-alpha.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @lukekaalim/act-recon
 
+## 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
+
+- c5e8775: Fix context updates not actually being pushed to the MustRender list
+
 ## 3.0.0-alpha.1
 
 ### Patch Changes

package/element.ts

@@ -7,6 +7,7 @@ import { loadHooks } from "./hooks";
 import { ContextState } from "./context";
 import { ComponentState, EffectID, EffectTask } from "./state";
 import { CommitTree } from "./tree";
+import { WorkThread } from "./thread";
 
 /**
  * When processing an element, it may produce additional
@@ -17,19 +18,17 @@ export type ElementOutput = {
   child: Node,
   reject: null | unknown,
   effects: EffectTask[],
-  targets: CommitRef[],
 };
 export const ElementOutput = {
   new: (child: Node): ElementOutput => ({
     child,
     reject: null,
     effects: [],
-    targets: [],
   })
 }
 
 export type ElementService = {
-  render(element: Element, ref: CommitRef): ElementOutput,
+  render(element: Element, ref: CommitRef, thread: WorkThread): ElementOutput,
   clear(ref: Commit): ElementOutput,
 
   boundary: Map<CommitID, unknown>,
@@ -45,6 +44,7 @@ export const createElementService = (
   const render = (
     element: Element,
     ref: CommitRef,
+    thread: WorkThread,
   ): ElementOutput => {
     const output = ElementOutput.new(element.children);
   
@@ -66,7 +66,13 @@ export const createElementService = (
             }
             if (state.value !== element.props.value) {
               state.value = element.props.value;
-              output.targets.push(...state.consumers.values());
+              
+              for (const [, consumer] of state.consumers) {
+                // there should be no way for the children of the
+                // provider to already have been renderer,
+                // so we don't check the return value.
+                WorkThread.queueTarget(thread, consumer, tree);
+              }
             }
             break;
           }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lukekaalim/act-recon",
   "type": "module",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.3",
   "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

@@ -83,7 +83,7 @@ const updateWorkThread = (thread: WorkThread, update: Update, tree: CommitTree,
   thread.visited.set(ref.id, ref);
   
   if (next) {
-    const output = element.render(next, ref);
+    const output = element.render(next, ref, thread);
     if (output.reject) {
       const errorBoundary = WorkThread.findClosestBoundary(thread, tree, ref);
       if (errorBoundary) {
@@ -158,35 +158,37 @@ const startWorkThreadUpdate = (thread: WorkThread, ref: CommitRef, prev: Commit
 }
 
 /**
- * Request that a commit be re-rendered
+ * For a running thread, add an additional "target" to render,
+ * which forces the thread to VISIT each commit on the path to the target,
+ * and to RENDER the target specifically.
  * 
- * If returns false, the update cannot be queued in the current
- * thread (maybe it already re-rendered?).
- * @param thread 
- * @param ref 
- * @returns 
+ * @param thread
+ * @param target 
+ * @returns `true` if the target was added successfully (or was already in the thread),
+ * 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)
  */
-const queueWorkThreadTarget = (thread: WorkThread, ref: CommitRef, tree: CommitTree): boolean => {
-  // If the thread _already_ has this ref as a target,
-  // do nothing
-  if (thread.mustRender.has(ref.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(ref.id))
+  if (thread.visited.has(target.id))
     return false;
 
-  thread.reasons.push({ type: 'target', ref });
-  thread.mustRender.set(ref.id, ref);
+  // 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);
 
   // Search through all the parents, looking to see if
   // there are any pendingUpdates that might
   // lead to this commit. If so, make sure ancestor commit
   // is on the MustVisit so they should make their way down
   // eventually
-  for (let i = ref.path.length - 1; i >= 0; i--) {
-    const id = ref.path[i];
+  for (let i = target.path.length - 1; i >= 0; i--) {
+    const id = target.path[i];
     thread.mustVisit.add(id);
 
     for (const update of thread.pendingUpdates) {
@@ -196,11 +198,13 @@ const queueWorkThreadTarget = (thread: WorkThread, ref: CommitRef, tree: CommitT
         return true;
     }
   }
+
   // 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);