@lukekaalim/act-recon 1.0.0 → 1.1.1

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @lukekaalim/act-recon
+
+## 1.1.1
+
+### Patch Changes
+
+- 0017c07: Fix packages emitting debugging console logs
+
+## 1.1.0
+
+### Minor Changes
+
+- 4381035: Added error boundaries
+
+### Patch Changes
+
+- Updated dependencies [4381035]
+  - @lukekaalim/act@3.1.0

package/algorithms.ts

@@ -43,4 +43,24 @@ export type SortedChangeReport = ChangeReport & {
 };
 export const calculateSortedChangedElements = (): SortedChangeReport => {
   throw new MagicError();
-}
+}
+
+export const first = <X, Y>(array: ReadonlyArray<X>, func: (value: X, index: number) => Y | null): Y | null => {
+  for (let i = 0; i < array.length; i++) {
+    const value = array[i];
+    const result = func(value, i);
+    if (result !== null)
+      return result;
+  }
+  return null;
+}
+
+export const last = <X, Y>(array: ReadonlyArray<X>, func: (value: X, index: number) => Y | null): Y | null => {
+  for (let i = array.length - 1; i > 0; i--) {
+    const value = array[i];
+    const result = func(value, i);
+    if (result !== null)
+      return result;
+  }
+  return null;
+}

package/commit.ts

@@ -1,4 +1,5 @@
 import { createId, Element, OpaqueID } from "@lukekaalim/act";
+import { version } from "os";
 
 /**
  * A single consistent id representing a commit in the act tree.
@@ -66,4 +67,8 @@ export const Commit = {
     }
   },
   update: updateCommit,
+  version: (commit: Commit): Commit => ({
+    ...commit,
+    version: createId(),
+  }),
 }

package/context.ts

@@ -1,8 +1,5 @@
-import { Context, ContextID, Element, providerNodeType } from "@lukekaalim/act";
-import { CommitID, CommitRef, Commit } from "./commit.ts";
-import { WorkThread } from "./thread.ts";
-
-export type ContextManager = ReturnType<typeof createContextManager>;
+import { Context, ContextID } from "@lukekaalim/act";
+import { CommitID, CommitRef } from "./commit.ts";
 
 export type ContextState<T> = {
   id: CommitID,
@@ -11,50 +8,12 @@ export type ContextState<T> = {
   value: T,
 }
 
-export const createContextManager = () => {
-  const contextStates = new Map<CommitID, ContextState<unknown>>();
-
-  return {
-    /**
-     * Take an element+commit, and if a change is detected,
-     * the context value is updated and the consumers are returned.
-     */
-    processContextElement(element: Element, commitId: CommitID) {
-      if (element.type !== providerNodeType)
-        return;
-      const prevState: ContextState<unknown> = contextStates.get(commitId) || {
-        id: commitId,
-        contextId: element.props.id as ContextID,
-        consumers: new Map(),
-        value: element.props.value,
-      };
-
-      if (prevState.value !== element.props.value || !contextStates.has(commitId)) {
-        contextStates.set(commitId, { ...prevState, value: element.props.value })
-        return [...prevState.consumers.values()];
-      }
-      return [];
-    },
-    subscribeContext<T>(ref: CommitRef, context: Context<T>): T {
-      const contextsInPath = ref.path.map(id => contextStates.get(id)).reverse();
-      
-      const closestContextOfType = contextsInPath.find(cState => cState && cState.contextId === context.id);
-      if (!closestContextOfType)
-        return context.defaultValue;
-      closestContextOfType.consumers.set(ref.id, ref);
-
-      return closestContextOfType.value as T;
-    },
-    unsubscribeContext(ref: CommitRef, context: Context<unknown>) {
-      const contextsInPath = ref.path.map(id => contextStates.get(id)).reverse();
-      
-      const closestContextOfType = contextsInPath.find(cState => cState && cState.contextId === context.id);
-      if (!closestContextOfType)
-        return;
-      closestContextOfType.consumers.delete(ref.id);
-    },
-    deleteContextValue(ref: CommitRef) {
-      contextStates.delete(ref.id);
+export const findContext = <T>(contexts: Map<CommitID, ContextState<unknown>>, ref: CommitRef, context: Context<T>) => {
+  for (const id of [...ref.path].reverse()) {
+    const state = contexts.get(id);
+    if (state && state.contextId === context.id) {
+      return state;
     }
-  };
+  }
+  return null;
 };

package/delta.ts

@@ -1,14 +1,9 @@
-import { Commit, CommitID, CommitRef, updateCommit } from "./commit.ts";
-import { WorkThread } from "./thread.ts";
-import { Update, calculateUpdates, isDescendant } from "./update.ts";
-import { CommitTree } from "./tree.ts";
-import { ComponentService } from "./component.ts";
+import { Commit, CommitRef } from "./commit.ts";
 
 export type CreateDelta = { ref: CommitRef, next: Commit };
 export type UpdateDelta = { ref: CommitRef, next: Commit, prev: Commit };
 export type RemoveDelta = { ref: CommitRef, prev: Commit };
-export type SkipDelta =   { ref: CommitRef, next: Commit };
-
+export type SkipDelta =   { next: Commit };
 
 export type DeltaSet = {
   created: CreateDelta[],
@@ -16,85 +11,3 @@ export type DeltaSet = {
   skipped: SkipDelta[],
   removed: RemoveDelta[],
 };
-
-
-/**
- * Given an Update, compute if there is any
- * change to the tree (a "Delta"), and if more updates
- * are needed to complete this work, appending them to
- * the work thread
- * */
-export const applyUpdate = (
-  tree: CommitTree,
-  comp: ComponentService,
-  thread: WorkThread,
-  { next, prev, ref, targets }: Update
-) => {
-  /**
-   * A change is considered identical if the "next element"
-   * is the same as the "prev element" - its the same as there
-   * being no change at all.
-   * */
-  const identicalChange = (next && prev && next.id === prev.element.id);
-  /**
-   * If we're "on a target's path", then we have to continue rendering.
-   */
-  const requiredChange = !!targets.find(target => target.path.includes(ref.id));
-  const requiresRerender = targets.some(target => target.id === ref.id);
-
-  if (identicalChange && !requiredChange)
-    return;
-
-  const prevChildren = prev && prev.children
-    .map(c => tree.commits.get(c.id) as Commit) || [];
-
-  // If we have a "Next", then this is a request to either
-  // Create or Update a commit.
-  if (next) {
-
-    // skip the change
-    if (identicalChange && !requiresRerender) {
-      const updates = prevChildren.map(prev => ({ ref: prev, prev, next: prev.element, targets }));  
-      thread.pendingUpdates.push(...updates);
-      const commit = Commit.update(ref, prev.element, prev.children);
-      thread.deltas.skipped.push({ ref, next: commit });
-      return;
-    }
-
-    const contextTargets = comp.context.processContextElement(next, ref.id) || [];
-    const nextTargets = [...contextTargets, ...targets];
-
-    const childNode = comp.state.calculateCommitChildren(thread, next, ref);
-
-    const [childRefs, updates] = calculateUpdates(ref, prevChildren, childNode);
-    const finalUpdates = updates.map(update => ({
-      ...update,
-      targets: nextTargets.filter(t => isDescendant(update.ref, t))
-    }))
-
-    const commit = Commit.update(ref, next, childRefs);
-
-    if (prev)
-      thread.deltas.updated.push({ ref, prev, next: commit });
-    else
-      thread.deltas.created.push({ ref, next: commit });
-
-    thread.pendingUpdates.push(...finalUpdates);
-    return;
-  }
-  // If we have a prev, but no next, then this is a requets to
-  // delete this commit. We still have emit "delete" updates
-  // as well for all children of this node too.
-  else if (prev && !next) {
-    const [, updates] = calculateUpdates(ref, prevChildren, []);
-    comp.state.clearCommitState(thread, ref);
-    // No need to reclculate targets - no more re-rendering
-    // will happen on this set of updates.
-
-    thread.deltas.removed.push({ ref: prev, prev });
-    thread.pendingUpdates.push(...updates);
-    return;
-  } else {
-    throw new Error(`No prev, no next, did this commit ever exist?`)
-  }
-};

package/element.ts

@@ -0,0 +1,155 @@
+import {
+  ContextID, Element, errorBoundaryType, Node,
+  providerNodeType
+} from "@lukekaalim/act";
+import { Commit, CommitID, CommitRef } from "./commit";
+import { loadHooks } from "./hooks";
+import { ContextState } from "./context";
+import { ComponentState, EffectID, EffectTask } from "./state";
+import { CommitTree } from "./tree";
+
+/**
+ * When processing an element, it may produce additional
+ * pieces of information: new targets, side effects, and boundary
+ * values
+ */
+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,
+  clear(ref: Commit): ElementOutput,
+
+  boundary: Map<CommitID, unknown>,
+}
+
+export const createElementService = (
+  tree: CommitTree,
+  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 = (
+    element: Element,
+    ref: CommitRef,
+  ): ElementOutput => {
+    const output = ElementOutput.new(element.children);
+  
+    switch (typeof element.type) {
+      case 'string':
+        break;
+      case 'symbol':
+        switch (element.type) {
+          case providerNodeType: {
+            let state = contextStates.get(ref.id);
+            if (!state) {
+              state = {
+                id: ref.id,
+                contextId: element.props.id as ContextID,
+                value: element.props.value,
+                consumers: new Map(),
+              }
+              contextStates.set(ref.id, state);
+            }
+            if (state.value !== element.props.value) {
+              state.value = element.props.value;
+              output.targets.push(...state.consumers.values());
+            }
+            break;
+          }
+          case errorBoundaryType: {
+            const error = CommitTree.getError(tree, ref.id);
+            if (error.state === 'error')
+              output.child = null;
+            break;
+          }
+          default:
+            break;
+        }
+        break;
+      case 'function': {
+        let state = componentStates.get(ref.id);
+        if (!state) {
+          state = {
+            unmounted: false,
+            ref,
+            cleanups: new Map(),
+            contexts: new Map(),
+            values: new Map(),
+            deps: new Map(),
+            effects: new Map(),
+          }
+          componentStates.set(ref.id, state);
+        }
+        loadHooks(contextStates, requestRender, state, ref, output);
+        const props = {
+          ...element.props,
+          children: element.children,
+        } as Parameters<typeof element.type>[0];
+        try {
+          output.child = element.type(props);
+        } catch (thrownValue) {
+          output.child = null;
+          output.reject = thrownValue;
+        }
+        break;
+      }
+      default:
+        break;
+    }
+    return output;
+  }
+  const clear = (prev: Commit) => {
+    const output = ElementOutput.new(null);
+  
+    switch (typeof prev.element.type) {
+      case 'symbol': {
+        switch (prev.element.type) {
+          case providerNodeType:
+            contextStates.delete(prev.id);
+        }
+        break;
+      }
+      case 'function': {
+        const componentState = componentStates.get(prev.id) as ComponentState;
+        componentState.unmounted = true;
+        for (const [,context] of componentState.contexts) {
+          if (context.state)
+            context.state.consumers.delete(prev.id);
+        }
+        for (const [index, cleanup] of componentState.cleanups) {
+          if (!cleanup)
+            continue;
+          const id = componentState.effects.get(index) as EffectID;
+          output.effects.push({
+            id,
+            ref: prev,
+            func: () => {
+              cleanup();
+            }
+          });
+        }
+        componentStates.delete(prev.id);
+        break;
+      }
+    }
+
+    return output;
+  }
+
+  return { render, clear, boundary: boundaryValues };
+}

package/errors.ts

@@ -0,0 +1,20 @@
+import { CommitID } from "./commit"
+
+export type ErrorBoundaryState = {
+  id: CommitID,
+  state: 'error' | 'normal',
+  value: unknown,
+}
+
+export const ErrorBoundaryState = {
+  create(id: CommitID): ErrorBoundaryState {
+    return { id, value: null, state: 'normal' };
+  },
+  clear(state: ErrorBoundaryState) {
+    state.state = 'normal';
+  },
+  set(state: ErrorBoundaryState, value: unknown) {
+    state.state = 'error';
+    state.value = value;
+  }
+}

package/hooks.ts

@@ -0,0 +1,78 @@
+import {
+  HookImplementation, hookImplementation, Context,
+  ValueOrCalculator, calculateValue, StateSetter,
+  runUpdater,
+  createId,
+  calculateDepsChange
+} from "@lukekaalim/act";
+import { ComponentState, EffectID } from "./state";
+import { CommitID, CommitRef } from "./commit";
+import { ElementOutput } from "./element";
+import { ContextState, findContext } from "./context";
+
+/**
+ * A fresh set of hook functions is created per component run.
+ */
+export const loadHooks = (
+  contexts: Map<CommitID, ContextState<unknown>>,
+  requestRender: (ref: CommitRef) => void,
+
+  state: ComponentState,
+  ref: CommitRef,
+
+  output: ElementOutput
+) => {
+  let index = 0;
+  hookImplementation.useContext = <T>(context: Context<T>): T => {
+    let value = state.contexts.get(index);
+    if (!value) {
+      value = { state: findContext(contexts, ref, context) };
+      state.contexts.set(index, value);
+      if (value.state)
+        value.state.consumers.set(ref.id, ref);
+    }
+    if (value.state)
+      return value.state.value as T;
+    return context.defaultValue;
+  };
+  hookImplementation.useState = <T>(initialValue: ValueOrCalculator<T>) => {
+    const stateIndex = index++;
+    if (!state.values.has(stateIndex))
+      state.values.set(stateIndex, calculateValue(initialValue));
+
+    const value = state.values.get(stateIndex) as T;
+    const setValue: StateSetter<T> = (updater) => {
+      if (state.unmounted)
+        return;
+      const prevValue = state.values.get(stateIndex) as T;
+      const nextValue = runUpdater(prevValue, updater);
+      state.values.set(stateIndex, nextValue);
+      requestRender(ref);
+    };
+    return [value, setValue];
+  }
+  hookImplementation.useEffect = (effect, deps = null) => {
+    const effectIndex = index++;
+    if (!state.effects.has(effectIndex))
+      state.effects.set(effectIndex, createId());
+    
+    const prevDeps = state.deps.get(effectIndex) || null;
+    const effectId = state.effects.get(effectIndex) as EffectID;
+    state.deps.set(effectIndex, deps);
+    const depsChanges = calculateDepsChange(prevDeps, deps)
+    if (depsChanges) {
+      output.effects.push({
+        id: effectId,
+        ref,
+        func() {
+          const prevCleanup = state.cleanups.get(effectId);
+          if (prevCleanup) {
+            state.cleanups.delete(effectId);
+            prevCleanup();
+          }
+          state.cleanups.set(effectId, effect());
+        }
+      });
+    }
+  };
+};

package/mod.ts

@@ -5,6 +5,5 @@ export * from './algorithms.ts';
 export * from './update.ts';
 export * from './thread.ts';
 export * from './tree.ts';
-export * from './effects.ts';
 
 export * from './reconciler.ts';

package/package.json

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

package/reconciler.ts

@@ -1,8 +1,8 @@
-
-import { createThreadManager, WorkThread } from "./thread";
+import { createThreadManager } from "./thread";
 import { CommitTree } from "./tree";
-import { ComponentService } from "./component";
 import { DeltaSet } from "./delta";
+import { createElementService } from "./element";
+import { EffectTask } from "./state";
 
 /**
  * A reconciler links all the relevant subsystems together.
@@ -16,21 +16,21 @@ export const createReconciler = (
   requestWork: () => void,
 ) => {
   const tree = CommitTree.new();
-  const components = ComponentService.create(ref => {
-    threads.request(ref);
-  });
+  const elements = createElementService(tree, ref => threads.request(ref));
 
-  const threads = createThreadManager(components, tree, requestWork, (deltas, effects) => {
+  const onThreadComplete = (deltas: DeltaSet, effects: EffectTask[]) => {
     render(deltas);
     
     // immedialty execute all side effects
     for (const effect of effects)
-      effect.task();
-  });
+      effect.func();
+  }
+
+  const threads = createThreadManager(elements, tree, requestWork, onThreadComplete);
 
   return {
     threads,
-    components,
+    elements,
     tree,
   }
 }

package/state.ts

@@ -1,118 +1,23 @@
-import { CommitRef, CommitID } from "./commit.ts";
-import { ContextManager } from "./context.ts";
+import { CommitRef } from "./commit.ts";
+import { ContextState } from "./context.ts";
 import * as act from '@lukekaalim/act';
-import { EffectManager, EffectID } from "./effects.ts";
-import { WorkThread } from "./thread.ts";
+
+
+export type EffectID = act.OpaqueID<"EffectID">;
+export type EffectTask = {
+  ref: CommitRef,
+  id: EffectID,
+  func: () => void,
+}
 
 export type ComponentState = {
   ref: CommitRef;
 
+  unmounted: boolean,
+
   values:   Map<number, unknown>;
   deps:     Map<number, act.Deps>;
   effects:  Map<number, EffectID>;
-  contexts:  Map<number, act.Context<unknown>>;
+  cleanups:  Map<number, act.EffectCleanup>;
+  contexts:  Map<number, { state: null | ContextState<unknown> }>;
 };
-
-export const createStateManager = (
-  effectManager: EffectManager,
-  rerender: (ref: CommitRef) => unknown,
-  contextManager: ContextManager | null = null
-) => {
-  const states = new Map<CommitID, ComponentState>();
-
-  const createState = (ref: CommitRef): ComponentState => {
-    const state = {
-      ref,
-      values: new Map(),
-      effects: new Map(),
-      deps: new Map(),
-      contexts: new Map(),
-    };
-    states.set(ref.id, state);
-    return state;
-  };
-
-  const loadHookImplementation = (thread: WorkThread, ref: CommitRef) => {
-    const createHookImplementation = (): act.HookImplementation => {
-      const state = states.get(ref.id) || createState(ref);
-      let index = 0;
-      return {
-        useContext<T>(context: act.Context<T>): T {
-          if (!contextManager)
-            throw new act.MagicError();
-
-          state.contexts.set(index, context as act.Context<unknown>);
-          return contextManager.subscribeContext(ref, context);
-        },
-        useState<T>(initialValue: act.ValueOrCalculator<T>) {
-          const stateIndex = index++;
-          if (!state.values.has(stateIndex))
-            state.values.set(stateIndex, act.calculateValue(initialValue));
-
-          const value = state.values.get(stateIndex) as T;
-          const setValue: act.StateSetter<T> = (updater) => {
-            const prevValue = state.values.get(stateIndex) as T;
-            const nextValue = act.runUpdater(prevValue, updater);
-            state.values.set(stateIndex, nextValue);
-            rerender(ref);
-          };
-          return [value, setValue];
-        },
-        useEffect(effect, deps = null) {
-          const effectIndex = index++;
-          if (!state.effects.has(effectIndex))
-            state.effects.set(effectIndex, act.createId());
-          const prevDeps = state.deps.get(effectIndex) || null;
-          const effectId = state.effects.get(effectIndex) as EffectID;
-          state.deps.set(effectIndex, deps);
-          const depsChanges = act.calculateDepsChange(prevDeps, deps)
-          if (depsChanges)
-            effectManager.enqueueEffect(thread, effectId, effect);
-          return;
-        },
-      };
-    };
-
-    const hooks = createHookImplementation();
-    act.hookImplementation.useContext = hooks.useContext;
-    act.hookImplementation.useState = hooks.useState;
-    act.hookImplementation.useEffect = hooks.useEffect;
-  };
-
-  const calculateCommitChildren = (
-    thread: WorkThread,
-    element: act.Element,
-    commit: CommitRef
-  ) => {
-    const component = typeof element.type === "function" && element.type;
-    if (!component) return element.children;
-
-    const children = element.children;
-
-    const props = {
-      ...element.props,
-      children,
-    } as Parameters<typeof component>[0];
-
-    loadHookImplementation(thread, commit);
-    const result = component(props);
-
-    return result;
-  };
-  const clearCommitState = (thread: WorkThread, ref: CommitRef) => {
-    const state = states.get(ref.id)
-    if (!state)
-      return;
-    const effects = [...state.effects.values()];
-    const contexts = [...state.contexts.values()];
-    for (const effect of effects)
-      effectManager.enqueueTeardown(thread, effect);
-    if (contextManager)
-      for (const context of contexts)
-        contextManager.unsubscribeContext(ref, context);
-  };
-
-  return { calculateCommitChildren, clearCommitState, states };
-};
-
-export type StateManager = ReturnType<typeof createStateManager>;

package/thread.ts

@@ -1,10 +1,12 @@
-import { convertNodeToElements, createId, Node } from "@lukekaalim/act";
+import { convertNodeToElements, createId, ErrorBoundaryProps, errorBoundaryType, Node } from "@lukekaalim/act";
 import { Commit, CommitID, CommitRef } from "./commit.ts";
-import { ComponentService } from "./component.ts";
-import { applyUpdate, DeltaSet } from "./delta.ts";
-import { EffectTask } from "./effects.ts";
+import { DeltaSet } from "./delta.ts";
 import { CommitTree } from "./tree.ts";
-import { Update } from "./update.ts";
+import { calculateUpdates, isDescendant, Update } from "./update.ts";
+import { ElementService } from "./element.ts";
+import { EffectTask } from "./state.ts";
+import { ErrorBoundaryState } from "./errors.ts";
+import { first, last } from "./algorithms.ts";
 
 /**
  * A WorkThread is a mutable data struture that
@@ -19,6 +21,9 @@ export type WorkThread = {
   pendingUpdates: Update[],
   pendingEffects: EffectTask[],
 
+  errorNotifications: Set<CommitID>,
+
+  visited: Set<CommitID>,
   deltas: DeltaSet,
 };
 export const WorkThread = {
@@ -27,6 +32,8 @@ export const WorkThread = {
       started: false,
       pendingEffects: [],
       pendingUpdates: [],
+      errorNotifications: new Set(),
+      visited: new Set(),
       deltas: {
         created: [],
         updated: [],
@@ -35,10 +42,43 @@ export const WorkThread = {
       },
     }
   },
+  /**
+   * 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 = (
-  comp: ComponentService,
+  elementService: ElementService,
   tree: CommitTree,
   requestWork: () => void,
   onThreadComplete: (deltas: DeltaSet, effects: EffectTask[]) => unknown = _ => {},
@@ -50,7 +90,7 @@ export const createThreadManager = (
   const run = () => {
     const update = currentThread.pendingUpdates.pop();
     if (update) {
-      applyUpdate(tree, comp, currentThread, update);
+      applyUpdate(currentThread, update);
     }
   }
 
@@ -81,7 +121,7 @@ export const createThreadManager = (
       tree.commits.set(delta.ref.id, delta.next);
     
     for (const delta of currentThread.deltas.skipped)
-      tree.commits.set(delta.ref.id, delta.next);
+      tree.commits.set(delta.next.id, delta.next);
     
     for (const delta of currentThread.deltas.updated)
       tree.commits.set(delta.ref.id, delta.next);
@@ -89,6 +129,19 @@ export const createThreadManager = (
     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);
+        }
+        onError(state.value, clear);
+      }
+    }
+
     // Notify external
     onThreadComplete(currentThread.deltas, currentThread.pendingEffects);
 
@@ -109,10 +162,16 @@ export const createThreadManager = (
 
   const request = (target: CommitRef) => {
     if (currentThread.started) {
-      // TODO: add new requests to the current thread
-      // if they are compatible instead of scheduling another
-      // thread.
-      pendingUpdateTargets.set(target.id, target);
+      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) {
@@ -136,6 +195,85 @@ export const createThreadManager = (
     requestWork();
   }
 
+  const applyUpdate = (thread: WorkThread, { next, prev, ref, targets, suspend }: Update) => {
+    thread.visited.add(ref.id);
+
+    const identicalChange = next && prev && (next.id === prev.element.id);
+    const prevChildren = prev && prev.children
+      .map(c => tree.commits.get(c.id) as Commit) || [];
+
+    if (identicalChange) {
+      const isOnTargetPath = targets.some(target => target.path.includes(ref.id));
+      if (!isOnTargetPath)
+        return;
+
+      const isSpecificallyTarget = targets.some(target => target.id === ref.id);
+
+      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;
+      }
+    }
+    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));
+          }
+
+        }
+      }
+  
+      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))]
+      })));
+  
+      const commit = Commit.update(ref, next, childRefs);
+  
+      if (prev)
+        thread.deltas.updated.push({ ref, prev, next: commit });
+      else
+        thread.deltas.created.push({ ref, next: commit });
+
+      // 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?`)
+    }
+  };
+
   return { work, request, mount }
 };
 

package/tree.ts

@@ -1,16 +1,42 @@
 import { Commit, CommitID, CommitRef } from "./commit.ts";
+import { ContextState } from "./context.ts";
+import { ErrorBoundaryState } from "./errors.ts";
+import { ComponentState } from "./state.ts";
 
 export type CommitTree = {
+  components: Map<CommitID, ComponentState>,
+  contexts: Map<CommitID, ContextState<unknown>>,
+  errors: Map<CommitID, ErrorBoundaryState>,
+
   commits: Map<CommitID, Commit>,
   roots: Set<CommitRef>,
 }
 
 export const CommitTree = {
   new: (): CommitTree => ({
+    errors: new Map(),
+    components: new Map(),
+    contexts: new Map(),
+
     commits: new Map(),
     roots: new Set(),
   }),
   getRootCommits: (tree: CommitTree) => {
     return [...tree.roots].map(ref => tree.commits.get(ref.id) as Commit)
+  },
+  getError(tree: CommitTree, id: CommitID): ErrorBoundaryState {
+    if (tree.errors.has(id))
+      return tree.errors.get(id) as ErrorBoundaryState;
+    const state = ErrorBoundaryState.create(id);
+    tree.errors.set(id, state);
+    return state;
+  },
+  searchParents(tree: CommitTree, ref: CommitRef, func: (commit: Commit) => boolean): Commit | null {
+    for (const id of [...ref.path].reverse()) {
+      const commit = tree.commits.get(id) as Commit;
+      if (func(commit))
+        return commit
+    }
+    return null;
   }
 }

package/update.ts

@@ -2,6 +2,10 @@ import { convertNodeToElements, createId, Element, Node } from "@lukekaalim/act"
 import { calculateChangedElements, ChangeEqualityTest } from "./algorithms.ts";
 import { Commit, CommitID, CommitRef } from "./commit.ts";
 
+/**
+ * A request to transform part of a tree specified by
+ * the "ref"
+ */
 export type Update = {
   /**
    * The commit that should evaluate this
@@ -23,20 +27,31 @@ export type Update = {
    * concequence of this update.
    */
   targets: CommitRef[];
+
+  suspend: boolean,
 };
 
 export const Update = {
   fresh: (ref: CommitRef, next: Element): Update => ({
-    ref, next, prev: null, targets: []
+    ref, next, prev: null, targets: [], suspend: false,
   }),
   existing: (prev: Commit, next: Element): Update => ({
-    ref: prev, next, prev, targets: [],
+    ref: prev, next, prev, targets: [], suspend: false,
   }),
   remove: (prev: Commit): Update => ({
-    ref: prev, next: null, prev, targets: [],
+    ref: prev, next: null, prev, targets: [], suspend: false,
   }),
   distant: (root: Commit, targets: CommitRef[]): Update => ({
-    ref: root, next: root.element, prev: root, targets,
+    ref: root, next: root.element, prev: root, targets, suspend: false,
+  }),
+  skip: (prev: Commit, targets: CommitRef[]): Update => ({
+    ref: prev, next: prev.element, prev, targets, suspend: false,
+  }),
+  target: (prev: Commit): Update => ({
+    ref: prev, next: prev.element, prev, targets: [prev], suspend: false,
+  }),
+  suspend: (prev: Commit): Update => ({
+    ref: prev, next: prev.element, prev, targets: [], suspend: true,
   })
 }
 

package/component.ts

@@ -1,24 +0,0 @@
-import { CommitRef } from "./commit";
-import { ContextManager, createContextManager } from "./context"
-import { createEffectManager, EffectManager } from "./effects"
-import { createStateManager, StateManager } from "./state"
-
-export type ComponentService = {
-  state: StateManager,
-  effect: EffectManager,
-  context: ContextManager,
-};
-
-export const ComponentService = {
-  create: (requestRender: (ref: CommitRef) => unknown): ComponentService => {
-    const effect = createEffectManager();
-    const context = createContextManager();
-    const state = createStateManager(effect, requestRender, context);
-
-    return {
-      effect,
-      context,
-      state,
-    }
-  }
-}

package/delta.test.ts

@@ -1,108 +0,0 @@
-import { noop } from 'lodash-es';
-
-import { describe, it } from "node:test";
-import { CommitTree } from "./tree";
-import { WorkThread } from "./thread";
-import { ComponentService } from "./component";
-import { applyUpdate } from "./delta";
-import { Update } from "./update";
-import { Commit, CommitRef } from "./commit";
-import { h } from "@lukekaalim/act";
-import { equal } from "node:assert/strict";
-
-describe('delta library', () => {
-
-  describe('generated deltas', () => {
-    it('should make a create delta if there is no prev', () => {
-      const tree = CommitTree.new();
-      const comp = ComponentService.create(noop);
-
-      const thread = WorkThread.new();
-      const element = h('test-element');
-      const ref = CommitRef.new();
-      const update = Update.fresh(ref, element);
-
-      applyUpdate(tree, comp, thread, update);
-
-      equal(thread.deltas.created.length, 1);
-      const delta = thread.deltas.created[0];
-      equal(delta.next.element, element);
-      equal(delta.next.id, ref.id);
-      equal(delta.next.path, ref.path);
-    })
-    it('should not make any deltas if the prev and next are the same (and there is no targets)', () => {
-      const tree = CommitTree.new();
-      const comp = ComponentService.create(noop);
-
-      const thread = WorkThread.new();
-      const element = h('test-element');
-      const prev = Commit.new(element);
-      const update = Update.existing(prev, element);
-      tree.commits.set(prev.id, prev);
-
-      applyUpdate(tree, comp, thread, update);
-
-      equal(thread.deltas.created.length, 0);
-      equal(thread.deltas.updated.length, 0);
-      equal(thread.deltas.removed.length, 0);
-      equal(thread.deltas.skipped.length, 0);
-    })
-    it('should make a skip delta if the prev and the next are the same, but there is a target', () => {
-      const tree = CommitTree.new();
-      const comp = ComponentService.create(noop);
-
-      const thread = WorkThread.new();
-      const element = h('test-element');
-      const prev = Commit.new(element);
-      // an imaginary child
-      const target = CommitRef.new(prev.path);
-
-      const update = Update.existing(prev, element);
-      update.targets.push(target);
-      tree.commits.set(prev.id, prev);
-
-      applyUpdate(tree, comp, thread, update);
-
-      equal(thread.deltas.skipped.length, 1);
-    })
-  })
-
-  it('should create a delta for a new id, and queue its children for creation', () => {
-    const tree = CommitTree.new();
-    const comp = ComponentService.create(noop);
-    const thread = WorkThread.new();
-    const childA = h('child-element-a');
-    const childB = h('child-element-b');
-    const element = h('new-element', {}, [childA, childB]);
-
-    const update = Update.fresh(Commit.new(element), element);
-    applyUpdate(tree, comp, thread, update);
-
-    equal(thread.deltas.created.length, 1);
-    equal(thread.pendingUpdates.length, 2);
-    
-    const delta = thread.deltas.created[0];
-    const updateA = thread.pendingUpdates[0];
-    const updateB = thread.pendingUpdates[1];
-
-    equal(delta.next.element, element);
-    equal(updateA.next, childA);
-    equal(updateB.next, childB);
-  })
-  it('should create a delete delta for a node, and queue its children to be deleted', () => {
-    const tree = CommitTree.new();
-    const comp = ComponentService.create(noop);
-    const thread = WorkThread.new();
-
-    const prev = Commit.new(h('element'))
-
-    tree.commits.set(prev.id, prev);
-
-    const update = Update.remove(prev);
-
-    applyUpdate(tree, comp, thread, update);
-
-    equal(thread.deltas.removed.length, 1);
-  })
-
-})

package/effects.ts

@@ -1,49 +0,0 @@
-import { EffectCleanup, EffectConstructor, OpaqueID } from "@lukekaalim/act";
-import { WorkThread } from "./thread.ts";
-
-export type EffectID = OpaqueID<"EffectID">;
-export type EffectTask = {
-  id: EffectID,
-  task: () => void,
-}
-
-export const createEffectManager = () => {
-  const cleanups = new Map<EffectID, EffectCleanup>();
-
-  const enqueueEffect = (
-    thread: WorkThread,
-    id: EffectID,
-    effect: EffectConstructor
-  ) => {
-    thread.pendingEffects.push({
-      id,
-      task() {
-        const cleanup = cleanups.get(id);
-        if (cleanup) {
-          cleanups.delete(id);
-          cleanup();
-        }
-        cleanups.set(id, effect());
-      }
-    });
-  };
-  const enqueueTeardown = (
-    thread: WorkThread,
-    id: EffectID,
-  ) => {
-    thread.pendingEffects.push({
-      id,
-      task() {
-        const cleanup = cleanups.get(id);
-        if (cleanup) {
-          cleanups.delete(id);
-          cleanup();
-        }
-      }
-    })
-  };
-
-  return { enqueueEffect, enqueueTeardown };
-};
-
-export type EffectManager = ReturnType<typeof createEffectManager>;