@lukekaalim/act-recon 1.1.2 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @lukekaalim/act-recon
 
+## 2.0.0
+
+### Major Changes
+
+- Scheduling refactor
+
+## 1.2.0
+
+### Minor Changes
+
+- Added support for keys/reordering elements without unmounting them
+
+### Patch Changes
+
+- Updated dependencies
+  - @lukekaalim/act@3.2.0
+
 ## 1.1.2
 
 ### Patch Changes

package/commit.ts

@@ -1,5 +1,4 @@
 import { createId, Element, OpaqueID } from "@lukekaalim/act";
-import { version } from "os";
 
 /**
  * A single consistent id representing a commit in the act tree.
@@ -28,13 +27,19 @@ export type CommitRef = {
   path: CommitPath;
 };
 export const CommitRef = {
+  from(path: CommitPath) {
+    return {
+      path,
+      id: path[path.length - 1],
+    }
+  },
   new(path: CommitPath = []) {
     const id = createId<'CommitID'>();
     return {
       path: [...path, id],
       id,
     }
-  }
+  },
 }
 
 /**

package/delta.ts

@@ -1,7 +1,8 @@
 import { Commit, CommitRef } from "./commit.ts";
+import { CommitTree } from "./tree.ts";
 
 export type CreateDelta = { ref: CommitRef, next: Commit };
-export type UpdateDelta = { ref: CommitRef, next: Commit, prev: Commit };
+export type UpdateDelta = { ref: CommitRef, next: Commit, prev: Commit, moved: boolean };
 export type RemoveDelta = { ref: CommitRef, prev: Commit };
 export type SkipDelta =   { next: Commit };
 
@@ -11,3 +12,36 @@ export type DeltaSet = {
   skipped: SkipDelta[],
   removed: RemoveDelta[],
 };
+
+/**
+ * Apply a deltaset to a tree, modifying it's commit list
+ * to match the changes produced by the thread.
+ * 
+ * @param thread 
+ * @param tree 
+ */
+const applyDeltaSet = (deltas: DeltaSet, tree: CommitTree) => {
+  for (const delta of deltas.created)
+    tree.commits.set(delta.ref.id, delta.next);
+  
+  for (const delta of deltas.skipped)
+    tree.commits.set(delta.next.id, delta.next);
+  
+  for (const delta of deltas.updated)
+    tree.commits.set(delta.ref.id, delta.next);
+  
+  for (const delta of deltas.removed)
+    tree.commits.delete(delta.ref.id);
+};
+
+export const DeltaSet = {
+  create: (): DeltaSet => ({ created: [], updated: [], skipped: [], removed: [] }),
+  clone: (deltas: DeltaSet): DeltaSet => ({
+    created: [...deltas.created],
+    updated: [...deltas.updated],
+    skipped: [...deltas.skipped],
+    removed: [...deltas.removed],
+  }),
+  apply: applyDeltaSet,
+}
+

package/element.ts

@@ -40,7 +40,6 @@ export const createElementService = (
   requestRender: (ref: CommitRef) => void
 ): ElementService => {
   const contextStates = new Map<CommitID, ContextState<unknown>>();
-  const componentStates = new Map<CommitID, ComponentState>();
   const boundaryValues = new Map<CommitID, unknown>();
 
   const render = (
@@ -82,7 +81,7 @@ export const createElementService = (
         }
         break;
       case 'function': {
-        let state = componentStates.get(ref.id);
+        let state = tree.components.get(ref.id);
         if (!state) {
           state = {
             unmounted: false,
@@ -93,7 +92,7 @@ export const createElementService = (
             deps: new Map(),
             effects: new Map(),
           }
-          componentStates.set(ref.id, state);
+          tree.components.set(ref.id, state);
         }
         loadHooks(contextStates, requestRender, state, ref, output);
         const props = {
@@ -125,7 +124,7 @@ export const createElementService = (
         break;
       }
       case 'function': {
-        const componentState = componentStates.get(prev.id) as ComponentState;
+        const componentState = tree.components.get(prev.id) as ComponentState;
         componentState.unmounted = true;
         for (const [,context] of componentState.contexts) {
           if (context.state)
@@ -143,7 +142,7 @@ export const createElementService = (
             }
           });
         }
-        componentStates.delete(prev.id);
+        tree.components.delete(prev.id);
         break;
       }
     }
@@ -153,3 +152,7 @@ export const createElementService = (
 
   return { render, clear, boundary: boundaryValues };
 }
+
+export const ElementService = {
+  create: createElementService
+}

package/event.ts

@@ -0,0 +1,34 @@
+export type Subscription = { cancel: () => void };
+export type EventHandler<T> = (event: T) => unknown; 
+export type EventMap = Record<string, unknown>;
+
+export type EventEmitter<T extends EventMap> = {
+  on<K extends keyof T>(type: K, handler: EventHandler<T[K]>): Subscription,
+  call<K extends keyof T>(type: K, event: T[K]): void;
+}
+
+export const createEventEmitter = <T extends EventMap>(): EventEmitter<T> => {
+  type AnyEvent = T[keyof T];
+  type AnyHandler = EventHandler<AnyEvent>
+  const handlers = new Map<keyof T, Set<AnyHandler>>();
+
+  return {
+    on(type, handler) {
+      const set = handlers.get(type) || new Set<AnyHandler>();
+      handlers.set(type, set);
+      set.add(handler as AnyHandler);
+      return {
+        cancel() {
+          set.delete(handler as AnyHandler);
+        },
+      }
+    },
+    call(type, event) {
+      const set = handlers.get(type);
+      if (!set)
+        return;
+      for (const handler of set)
+        handler(event);
+    },
+  }
+};

package/mod.ts

@@ -1,9 +1,11 @@
-export * from './commit.ts'
-export * from './delta.ts';
-export * from './state.ts';
-export * from './algorithms.ts';
-export * from './update.ts';
-export * from './thread.ts';
-export * from './tree.ts';
+export * from './commit'
+export * from './delta';
+export * from './state';
+export * from './algorithms';
+export * from './scheduler';
+export * from './update';
+export * from './thread';
+export * from './tree';
+export * from './event';
 
-export * from './reconciler.ts';
+export * from './reconciler';

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@lukekaalim/act-recon",
   "type": "module",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "main": "mod.ts",
   "dependencies": {
-    "@lukekaalim/act": "^3.1.0"
+    "@lukekaalim/act": "^3.2.0"
   }
 }

package/reconciler.ts

@@ -1,36 +1,111 @@
-import { createThreadManager } from "./thread";
+import { convertNodeToElements, Node, OpaqueID } from "@lukekaalim/act";
+import { CommitID, CommitRef } from "./commit";
+import { WorkThread } from "./thread"
 import { CommitTree } from "./tree";
-import { DeltaSet } from "./delta";
-import { createElementService } from "./element";
-import { EffectTask } from "./state";
-
-/**
- * A reconciler links all the relevant subsystems together.
- * 
- * @param space 
- * @param onAfterRender 
- * @returns 
- */
-export const createReconciler = (
-  render: (deltas: DeltaSet) => void,
-  requestWork: () => void,
-) => {
-  const tree = CommitTree.new();
-  const elements = createElementService(tree, ref => threads.request(ref));
-
-  const onThreadComplete = (deltas: DeltaSet, effects: EffectTask[]) => {
-    render(deltas);
-    
-    // immedialty execute all side effects
-    for (const effect of effects)
-      effect.func();
+import { ElementService } from "./element";
+import { Scheduler, WorkID } from "./scheduler";
+import { createEventEmitter, EventEmitter } from "./event";
+
+export type Reconciler = {
+  mount(node: Node): void,
+  render(ref: CommitRef): void,
+
+  state: ReconcilerState,
+  tree: CommitTree,
+  elements: ElementService,
+  on: EventEmitter<ReconcilerEvents>["on"],
+}
+
+export type ReconcilerState = {
+  thread: WorkThread | null,
+  work: WorkID | null,
+  /**
+   * These are targets that can't be fulfilled with the current thread
+   * */
+  pendingTargets: Map<CommitID, CommitRef>,
+}
+
+export type ReconcilerEvents = {
+  'on-thread-start': WorkThread,
+  'on-thread-update': WorkThread,
+  'on-thread-complete': WorkThread,
+}
+
+export const createReconciler = (scheduler: Scheduler): Reconciler => {
+  const events = createEventEmitter<ReconcilerEvents>();
+  const state: ReconcilerState = {
+    thread: null,
+    work: null,
+    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);
+    } else {
+      const completedThread = state.thread;
+      state.thread = null;
+
+      const pendingTargets = [...state.pendingTargets]
+      state.pendingTargets.clear();
+
+      for (const [,target] of pendingTargets)
+        render(target);
+
+      WorkThread.apply(completedThread, tree);
+      events.call('on-thread-complete', completedThread);
+
+      // Run side effects
+      for (const effect of completedThread.pendingEffects) {
+        try {
+          effect.func();
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    }
+  }
+
+  const start = () => {
+    if (!state.thread) {
+      state.thread = WorkThread.new();
+      events.call('on-thread-start', state.thread);
+    }
+    if (!state.work) {
+      state.work = scheduler.requestWork(work);
+    }
+    return state.thread;
   }
 
-  const threads = createThreadManager(elements, tree, requestWork, onThreadComplete);
+  const mount = (node: Node) => {
+    const thread = start();
+    const elements = convertNodeToElements(node)
 
-  return {
-    threads,
-    elements,
-    tree,
+    for (const element of elements) {
+      const ref = CommitRef.new()
+      tree.roots.add(ref);
+      WorkThread.queueMount(thread, ref, element);
+    }
+    events.call('on-thread-update', thread);
+  };
+  const render = (ref: CommitRef) => {
+    const thread = start();
+
+    if (WorkThread.queueTarget(thread, ref, tree)) {
+      events.call('on-thread-update', thread);
+    } else {
+      state.pendingTargets.set(ref.id, ref);
+    }
   }
+
+  const tree = CommitTree.new();
+  const elements = ElementService.create(tree, render);
+
+  return { mount, render, state, tree, elements, on: events.on };
 }

package/scheduler.ts

@@ -0,0 +1,10 @@
+import { OpaqueID } from "@lukekaalim/act";
+
+export type WorkID = OpaqueID<"WorkID">;
+/**
+ * Work provider is platform agnostic timer/callback interface
+ */
+export type Scheduler = {
+  requestWork(callback: () => void): WorkID,
+  cancelWork(workId: WorkID): void,
+};

package/thread.ts

@@ -1,4 +1,4 @@
-import { convertNodeToElements, createId, ErrorBoundaryProps, errorBoundaryType, Node } from "@lukekaalim/act";
+import { convertNodeToElements, createId, Element, ErrorBoundaryProps, errorBoundaryType, Node } from "@lukekaalim/act";
 import { Commit, CommitID, CommitRef } from "./commit.ts";
 import { DeltaSet } from "./delta.ts";
 import { CommitTree } from "./tree.ts";
@@ -8,273 +8,293 @@ import { EffectTask } from "./state.ts";
 import { ErrorBoundaryState } from "./errors.ts";
 import { first, last } from "./algorithms.ts";
 
+export type WorkReason =
+  | { type: 'mount', element: Element, ref: CommitRef }
+  | { type: 'target', ref: CommitRef }
+
 /**
- * A WorkThread is a mutable data struture that
- * represents a particular "Tree Travesal Task".
+ * Apply a thread to a tree, modifying it's commit list
+ * to match the changes produced by the thread.
  * 
- * Its expected when you start rendering, you
- * may start rendering more nodes due to updates.
+ * @param thread 
+ * @param tree 
  */
-export type WorkThread = {
-  started: boolean,
-
-  pendingUpdates: Update[],
-  pendingEffects: EffectTask[],
-
-  errorNotifications: Set<CommitID>,
+const applyWorkThread = (thread: WorkThread, tree: CommitTree) => {
+  DeltaSet.apply(thread.deltas, tree);
+  return null;
+}
 
-  visited: Set<CommitID>,
-  deltas: DeltaSet,
-};
-export const WorkThread = {
-  new(): WorkThread {
-    return {
-      started: false,
-      pendingEffects: [],
-      pendingUpdates: [],
-      errorNotifications: new Set(),
-      visited: new Set(),
-      deltas: {
-        created: [],
-        updated: [],
-        removed: [],
-        skipped: [],
-      },
+const notifyErrorBoundaries = (thread: WorkThread, tree: CommitTree) => {
+  for (const [boundaryId] of thread.errorNotifications) {
+    const commit = tree.commits.get(boundaryId) as Commit;
+    const { onError, ref } = commit.element.props as ErrorBoundaryProps;
+    if (typeof onError === 'function') {
+      const state = CommitTree.getError(tree, commit.id);
+      onError(state.value);
     }
-  },
-  /**
-   * Remove all changes from a particular commit onward
-   */
-  rollback(thread: WorkThread, from: CommitRef) {
-    thread.deltas.created = thread.deltas.created.filter(d => !isDescendant(from, d.ref));
-    thread.deltas.updated = thread.deltas.updated.filter(d => !isDescendant(from, d.ref));
-    thread.deltas.removed = thread.deltas.removed.filter(d => !isDescendant(from, d.ref));
-    thread.deltas.skipped = thread.deltas.skipped.filter(d => !isDescendant(from, d.next));
-    thread.pendingUpdates = thread.pendingUpdates.filter(update => !isDescendant(from, update.ref))
-    thread.pendingEffects = thread.pendingEffects.filter(effect => !isDescendant(from, effect.ref))
-  },
-  notifyError(thread: WorkThread, ref: CommitRef) {
-    thread.errorNotifications.add(ref.id);
-  },
-  /**
-   * Find the closest anscestor error boundary for a commit,
-   * either in the tree or one that was just created
-   * */
-  findClosestBoundary(thread: WorkThread, tree: CommitTree, ref: CommitRef): Commit | null {
-    return last(ref.path, id => {
-      if (tree.commits.has(id)) {
-        const commit = tree.commits.get(id) as Commit;
-        if (commit.element.type === errorBoundaryType)
-          return commit;
-        return null;
-      }
-      // We also might have just created the boundary
-      const freshBoundary = thread.deltas.created.find(c => c.ref.id === id && c.next.element.type === errorBoundaryType);
-      if (freshBoundary)
-        return freshBoundary.next;
-      return null;
-    });
   }
 }
 
-export const createThreadManager = (
-  elementService: ElementService,
-  tree: CommitTree,
-  requestWork: () => void,
-  onThreadComplete: (deltas: DeltaSet, effects: EffectTask[]) => unknown = _ => {},
-) => {
-  const pendingUpdateTargets = new Map<CommitID, CommitRef>();
+/**
+ * Remove all changes from a particular commit and all it's children
+ * - essentially making it as if it had never rendered at all
+ * @param thread
+ * @param from 
+ */
+const rollbackWorkThread = (thread: WorkThread, from: CommitRef) => {
+  // TODO: rollbacks are hard: need rollback compatible with new
+  // thread model
+  throw new Error();
+  /*
+  thread.deltas.created = thread.deltas.created.filter(d => !isDescendant(from, d.ref));
+  thread.deltas.updated = thread.deltas.updated.filter(d => !isDescendant(from, d.ref));
+  thread.deltas.removed = thread.deltas.removed.filter(d => !isDescendant(from, d.ref));
+  thread.deltas.skipped = thread.deltas.skipped.filter(d => !isDescendant(from, d.next));
 
-  let currentThread = WorkThread.new();
+  thread.visited = new Set([...thread.visited].filter(v => !isDescendant(from, v)))
 
-  const run = () => {
-    const update = currentThread.pendingUpdates.pop();
-    if (update) {
-      applyUpdate(currentThread, update);
-    }
-  }
+  thread.pendingUpdates = thread.pendingUpdates.filter(update => !isDescendant(from, update.ref))
+  thread.pendingEffects = thread.pendingEffects.filter(effect => !isDescendant(from, effect.ref))
+  */
+}
 
-  const work = (test: () => boolean) => {
-    let tick = 0;
+const updateWorkThread = (thread: WorkThread, update: Update, tree: CommitTree, element: ElementService) => {
+  const { next, prev, ref, moved } = update;
 
-    while (currentThread.pendingUpdates.length > 0) {
-      run()
-      tick++;
+  const identicalChange = next && prev && (next.id === prev.element.id);
+  const prevChildren = prev && prev.children
+    .map(c => tree.commits.get(c.id) as Commit) || [];
 
-      if (currentThread.pendingUpdates.length === 0) {
-        apply();
-      }
+  if (identicalChange) {
+    const mustVisit = thread.mustVisit.has(ref.id);
+    if (!mustVisit)
+      return;
 
-      // only test every 10 ticks
-      if ((tick % 10 === 0) && test()) {
-        // early exit
-        return false;
-      }
+    const mustRender = thread.mustRender.has(ref.id);
+
+    if (!mustRender) {
+      const updates = prevChildren.map(prev => Update.skip(prev));  
+      thread.pendingUpdates.push(...updates);
+      const commit = Commit.version(prev);
+      thread.deltas.skipped.push({ next: commit });
+      return;
     }
-    // completed all work
-    return true;
   }
+  thread.visited.set(ref.id, ref);
+  
+  if (next) {
+    const output = element.render(next, ref);
+    if (output.reject) {
+      const errorBoundary = WorkThread.findClosestBoundary(thread, tree, ref);
+      if (errorBoundary) {
+        const errorState = CommitTree.getError(tree, errorBoundary.id);
+        ErrorBoundaryState.set(errorState, output.reject);
+        WorkThread.rollback(thread, errorBoundary);
+        WorkThread.notifyError(thread, errorBoundary);
 
-  const apply = () => {
-    // Update the tree.
-    for (const delta of currentThread.deltas.created)
-      tree.commits.set(delta.ref.id, delta.next);
-    
-    for (const delta of currentThread.deltas.skipped)
-      tree.commits.set(delta.next.id, delta.next);
-    
-    for (const delta of currentThread.deltas.updated)
-      tree.commits.set(delta.ref.id, delta.next);
-    
-    for (const delta of currentThread.deltas.removed)
-      tree.commits.delete(delta.ref.id);
-
-    for (const boundaryId of currentThread.errorNotifications) {
-      const commit = tree.commits.get(boundaryId) as Commit;
-      const { onError } = commit.element.props as ErrorBoundaryProps;
-      if (typeof onError === 'function') {
-        const state = CommitTree.getError(tree, commit.id);
-        const clear = () => {
-          ErrorBoundaryState.clear(state);
-          request(commit);
+        thread.pendingUpdates.push(Update.target(errorBoundary));
+        return;
+      } else {
+        console.error(output.reject);
+        console.error(`No boundary to catch error: Unmounting roots`);
+        for (const ref of tree.roots) {
+          WorkThread.rollback(thread, ref);
+          const prev = tree.commits.get(ref.id);
+          if (prev)
+            thread.pendingUpdates.push(Update.remove(prev));
         }
-        onError(state.value, clear);
       }
     }
 
-    // Notify external
-    onThreadComplete(currentThread.deltas, currentThread.pendingEffects);
+    const [childRefs, updates] = calculateUpdates(ref, prevChildren, output.child);
 
-    // clear the thread
-    currentThread = WorkThread.new();
+    thread.pendingEffects.push(...output.effects);
+    thread.pendingUpdates.push(...updates);
 
-    // add any pending work that couldnt be completed last thread
-    if (pendingUpdateTargets.size > 0) {
-      const roots = CommitTree.getRootCommits(tree);
-      const targets = [...pendingUpdateTargets.values()];
-      for (const root of roots) {
-        currentThread.pendingUpdates.push(Update.distant(root, targets));
-      }
-      
-      pendingUpdateTargets.clear();
-    }
-  }
+    const commit = Commit.update(ref, next, childRefs);
 
-  const request = (target: CommitRef) => {
-    if (currentThread.started) {
-      const updateOnPath = currentThread.pendingUpdates.find(update => {
-        return isDescendant(update.ref, target)
-      })
-      if (updateOnPath) {
-        if (updateOnPath.targets.some(target => target.id === target.id)) {
-          updateOnPath.targets.push(target);
-        }
-      } else {
-        pendingUpdateTargets.set(target.id, target);
-      }
-    } else {
-      const roots = CommitTree.getRootCommits(tree);
-      for (const root of roots) {
-        currentThread.started = true;
-        currentThread.pendingUpdates.push(Update.distant(root, [target]));
-      }
-    }
+    if (prev)
+      thread.deltas.updated.push({ ref, prev, next: commit, moved });
+    else
+      thread.deltas.created.push({ ref, next: commit });
 
-    requestWork();
-  }
+    // Update tree
+    //tree.commits.set(ref.id, commit);
 
-  const mount = (root: Node) => {
-    const elements = convertNodeToElements(root);
-    for (const element of elements) {
-      const id = createId<"CommitID">();
-      const ref = { id, path: [id] };
-      tree.roots.add(ref);
-      currentThread.pendingUpdates.push(Update.fresh(ref, element));
-    }
+    return;
+  }
+  else if (prev && !next) {
+    // We should delay this?
+    const output = element.clear(prev);
 
-    requestWork();
+    thread.deltas.removed.push({ ref: prev, prev });
+    thread.pendingUpdates.push(...prevChildren.map(prev => Update.remove(prev)));
+    thread.pendingEffects.push(...output.effects);
+    return;
+  } else {
+    throw new Error(`No prev, no next, did this commit ever exist?`)
   }
+};
 
-  const applyUpdate = (thread: WorkThread, { next, prev, ref, targets, suspend }: Update) => {
-    thread.visited.add(ref.id);
+/**
+ * Start a new Update in the current Thread.
+ * @param thread
+ * @param ref 
+ * @param tree 
+ */
+const startWorkThreadUpdate = (thread: WorkThread, ref: CommitRef, prev: Commit | null, next: Element | null) => {
+  // Once a update starts,
+  // all "parents" are considered to have been visited,
+  // and cannot be rendered in this pass.
+  for (const id of [...ref.path].reverse().slice(1))
+    thread.visited.set(id, ref);
 
-    const identicalChange = next && prev && (next.id === prev.element.id);
-    const prevChildren = prev && prev.children
-      .map(c => tree.commits.get(c.id) as Commit) || [];
+  thread.pendingUpdates.push({
+    ref,
+    prev,
+    next,
+    moved: false,
+  })
+}
 
-    if (identicalChange) {
-      const isOnTargetPath = targets.some(target => target.path.includes(ref.id));
-      if (!isOnTargetPath)
-        return;
+/**
+ * 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 => {
+  // If the thread _already_ has this ref as a target,
+  // do nothing
+  if (thread.mustRender.has(ref.id))
+    return true;
 
-      const isSpecificallyTarget = targets.some(target => target.id === ref.id);
+  // We cant do work on a commit that has
+  // already been visited
+  if (thread.visited.has(ref.id))
+    return false;
 
-      if (!isSpecificallyTarget) {
-        const updates = prevChildren.map(prev => Update.skip(prev, targets));  
-        thread.pendingUpdates.push(...updates);
-    
-        const commit = Commit.version(prev);
-        thread.deltas.skipped.push({ next: commit });
-        return;
-      }
+  thread.reasons.push({ type: 'target', ref });
+  thread.mustRender.set(ref.id, ref);
+
+  // 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 (const id of [...ref.path].reverse().slice(1)) {
+    thread.mustVisit.set(ref.id, ref);
+
+    for (const update of thread.pendingUpdates) {
+      // Found an ancestor pending update - it should
+      // handle our target eventually
+      if (update.ref.id === id)
+        return true;
     }
-    if (next) {
-      const output = elementService.render(next, ref);
-      if (output.reject) {
-        const errorBoundary = WorkThread.findClosestBoundary(thread, tree, ref);
-        if (errorBoundary) {
-          const errorState = CommitTree.getError(tree, errorBoundary.id);
-          ErrorBoundaryState.set(errorState, output.reject);
-          WorkThread.rollback(thread, errorBoundary);
-          WorkThread.notifyError(thread, errorBoundary);
-
-          thread.pendingUpdates.push(Update.target(errorBoundary));
-          return;
-        } else {
-          console.error(output.reject);
-          console.error(`No boundary to catch error: Unmounting roots`);
-          for (const ref of tree.roots) {
-            WorkThread.rollback(thread, ref);
-            const prev = tree.commits.get(ref.id);
-            if (prev)
-              thread.pendingUpdates.push(Update.remove(prev));
-          }
+  }
+  // otherwise, start a new update from the root
+  const prev = tree.commits.get(ref.id) as Commit;
+  startWorkThreadUpdate(thread, ref, 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);
+};
 
-        }
-      }
-  
-      const [childRefs, updates] = calculateUpdates(ref, prevChildren, output.child);
 
-      thread.pendingEffects.push(...output.effects);
-      thread.pendingUpdates.push(...updates.map(update => ({
-        ...update,
-        targets: [...targets, ...output.targets.filter(t => isDescendant(update.ref, t))]
-      })));
+/**
+ * A WorkThread is a mutable data structure that
+ * represents a particular "Tree Traversal Task".
+ * 
+ * Its expected when you start rendering, you
+ * may start rendering more nodes due to updates.
+ * 
+ * A thread can be "worked" to remove an update off the
+ * "pending updates" list, which may optionally produce more
+ * updates, effects, or error notification.
+ */
+export type WorkThread = {
+  reasons: WorkReason[],
   
-      const commit = Commit.update(ref, next, childRefs);
+  mustRender: Map<CommitID, CommitRef>,
+  mustVisit: Map<CommitID, CommitRef>,
   
-      if (prev)
-        thread.deltas.updated.push({ ref, prev, next: commit });
-      else
-        thread.deltas.created.push({ ref, next: commit });
+  pendingUpdates: Update[],
+  pendingEffects: EffectTask[],
 
-      // Update tree
-      //tree.commits.set(ref.id, commit);
-  
-      return;
-    }
-    else if (prev && !next) {
-      const output = elementService.clear(prev);
-      thread.deltas.removed.push({ ref: prev, prev });
-      thread.pendingUpdates.push(...prevChildren.map(prev => Update.remove(prev)));
-      thread.pendingEffects.push(...output.effects);
-      return;
-    } else {
-      throw new Error(`No prev, no next, did this commit ever exist?`)
-    }
-  };
+  errorNotifications: Map<CommitID, CommitRef>,
 
-  return { work, request, mount }
+  /**
+   * A list of each commit the thread processed
+   */
+  visited: Map<CommitID, CommitRef>,
+  deltas: DeltaSet,
 };
 
-export type ThreadManager = ReturnType<typeof createThreadManager>;
+export const cloneWorkThread = (thread: WorkThread): WorkThread => {
+  return {
+    reasons: [...thread.reasons],
+    pendingEffects: [...thread.pendingEffects],
+    pendingUpdates: [...thread.pendingUpdates],
+    errorNotifications: new Map(thread.errorNotifications),
+
+    mustVisit: new Map(thread.mustVisit),
+    mustRender: new Map(thread.mustRender),
+
+    visited: new Map(thread.visited),
+
+    deltas: DeltaSet.clone(thread.deltas),
+  }
+}
+
+export const WorkThread = {
+  new(): WorkThread {
+    return {
+      reasons: [],
+      pendingEffects: [],
+      pendingUpdates: [],
+      errorNotifications: new Map(),
+
+      mustVisit: new Map(),
+      mustRender: new Map(),
+
+      visited: new Map(),
+
+      deltas: DeltaSet.create(),
+    }
+  },
+  rollback: rollbackWorkThread,
+  apply: applyWorkThread,
+  update: updateWorkThread,
+  queueTarget: queueWorkThreadTarget,
+  queueMount: queueWorkThreadMount,
+
+  clone: cloneWorkThread,
+
+  notifyError(thread: WorkThread, ref: CommitRef) {
+    thread.errorNotifications.set(ref.id, ref);
+  },
+  /**
+   * Find the closest ancestor error boundary for a commit,
+   * either in the tree or one that was just created
+   * */
+  findClosestBoundary(thread: WorkThread, tree: CommitTree, ref: CommitRef): Commit | null {
+    return last(ref.path, id => {
+      if (tree.commits.has(id)) {
+        const commit = tree.commits.get(id) as Commit;
+        if (commit.element.type === errorBoundaryType)
+          return commit;
+        return null;
+      }
+      // We also might have just created the boundary
+      const freshBoundary = thread.deltas.created.find(c => c.ref.id === id && c.next.element.type === errorBoundaryType);
+      if (freshBoundary)
+        return freshBoundary.next;
+      return null;
+    });
+  }
+}

package/tree.ts

@@ -21,9 +21,27 @@ export const CommitTree = {
     commits: new Map(),
     roots: new Set(),
   }),
+  clone(tree: CommitTree): CommitTree {
+    return {
+      errors: new Map(tree.errors),
+      components: new Map(tree.components),
+      contexts: new Map(tree.contexts),
+  
+      commits: new Map(tree.commits),
+      roots: new Set(tree.roots),
+    }
+  },
   getRootCommits: (tree: CommitTree) => {
-    return [...tree.roots].map(ref => tree.commits.get(ref.id) as Commit)
+    return [...tree.roots]
+      .map(ref => tree.commits.get(ref.id))
+      .filter(c => !!c)
   },
+  /**
+   * Each commit ID _may_ have an ErrorBoundaryState associated with it
+   * @param tree 
+   * @param id 
+   * @returns 
+   */
   getError(tree: CommitTree, id: CommitID): ErrorBoundaryState {
     if (tree.errors.has(id))
       return tree.errors.get(id) as ErrorBoundaryState;

package/update.ts

@@ -22,37 +22,32 @@ export type Update = {
    */
   next: null | Element;
 
-  /**
-   * List of commits that _must_ re-render as a
-   * concequence of this update.
-   */
-  targets: CommitRef[];
-
-  suspend: boolean,
+  // TODO: maybe expose prev/next index information?
+  moved: boolean,
 };
 
 export const Update = {
   fresh: (ref: CommitRef, next: Element): Update => ({
-    ref, next, prev: null, targets: [], suspend: false,
+    ref, next, prev: null, moved: false,
   }),
-  existing: (prev: Commit, next: Element): Update => ({
-    ref: prev, next, prev, targets: [], suspend: false,
+  existing: (prev: Commit, next: Element, moved: boolean = false): Update => ({
+    ref: prev, next, prev, moved,
   }),
   remove: (prev: Commit): Update => ({
-    ref: prev, next: null, prev, targets: [], suspend: false,
+    ref: prev, next: null, prev, moved: false,
   }),
-  distant: (root: Commit, targets: CommitRef[]): Update => ({
-    ref: root, next: root.element, prev: root, targets, suspend: false,
+  distant: (root: Commit): Update => ({
+    ref: root, next: root.element, prev: root, moved: false,
   }),
-  skip: (prev: Commit, targets: CommitRef[]): Update => ({
-    ref: prev, next: prev.element, prev, targets, suspend: false,
+  skip: (prev: Commit): Update => ({
+    ref: prev, next: prev.element, prev, moved: false,
   }),
   target: (prev: Commit): Update => ({
-    ref: prev, next: prev.element, prev, targets: [prev], suspend: false,
+    ref: prev, next: prev.element, prev, moved: false,
   }),
   suspend: (prev: Commit): Update => ({
-    ref: prev, next: prev.element, prev, targets: [], suspend: true,
-  })
+    ref: prev, next: prev.element, prev, moved: false,
+  }),
 }
 
 /** 
@@ -89,6 +84,18 @@ export const calculateFastUpdate = (
 const simpleElementEqualityTest: ChangeEqualityTest<Commit, Element> = (prev, next, prev_index, next_index) =>
   prev.element.type === next.type && prev_index === next_index;
 
+const keyedElementEqualityTest:  ChangeEqualityTest<Commit, Element> = (prev, next, prev_index, next_index) => {
+  const compatible = prev.element.type === next.type;
+  if (!compatible)
+    return false;
+  const prevKey = prev.element.props.key;
+  const nextKey = next.props.key;
+  if (prevKey || nextKey)
+    return prevKey === nextKey;
+
+  return prev_index === next_index;
+}
+
 /**
  * Returns a list of all updates that should
  * occur -- given a set of commits and a
@@ -110,7 +117,7 @@ export const calculateUpdates = (
   if (commits.length <= 1 && elements.length == 1)
     return calculateFastUpdate(parentRef, commits[0], elements[0])
 
-  const change_report = calculateChangedElements(commits, elements, simpleElementEqualityTest);
+  const change_report = calculateChangedElements(commits, elements, keyedElementEqualityTest);
 
   const newOrPersisted = elements.map((next, index) => {
     const prevIndex = change_report.nextToPrev[index];
@@ -118,8 +125,10 @@ export const calculateUpdates = (
 
     if (!prev)
       return Update.fresh(CommitRef.new(parentRef.path), next);
-    
-    return Update.existing(prev, next);
+
+    const moved = index === prevIndex;
+
+    return Update.existing(prev, next, moved);
   });
   const removed = change_report.removed.map((index) => {
     const prev = commits[index];

package/work.ts

@@ -0,0 +1,10 @@
+export type WorkRequestFunc<ID> = (callback: () => void) => ID;
+export type WorkCancelFunc<ID> = (id: ID) => void;
+
+/**
+ * A work manger is a service 
+ */
+export type WorkManager<ID> = {
+  request: WorkRequestFunc<ID>,
+  cancel: WorkCancelFunc<ID>,
+}