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

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @lukekaalim/act-recon
 
+## 3.0.0
+
+### Major Changes
+
+- 6658c01: Internal Refactor!
+- afd247e: Another major refactor! So everything is broken. Good luck!
+- b3f6c49: Added debug capabilities and protocol
+
+### Patch Changes
+
+- fdf1557: Fixed issue with multiple changes (where changes after first were children of first) being ignored due to "MustVisit" being misinput each time
+- 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.
+- 2984273: Check if immediate child update is already handlded by some other system (avoiding double-rendering)
+- c5e8775: Fix context updates not actually being pushed to the MustRender list
+- Updated dependencies [6658c01]
+- Updated dependencies [afd247e]
+  - @lukekaalim/act@4.0.0
+
 ## 3.0.0-alpha.4
 
 ### Patch Changes

package/algorithms.ts

@@ -1,50 +1,64 @@
 import { MagicError } from "@lukekaalim/act";
 
-export type ChangeReport = {
-  /** Index for Next that didnt exist in Prev */
-  created: number[],
-  /** Index for Prev that didnt exist in Next */
-  removed: number[],
-  
-  /** Index for elements that are the same previously and next */
-  nextToPrev: number[],
-};
+/**
+ * ChangeReport
+ */
+export class ChangeReport2 {
+  /**
+   * The indices of elements that were removed
+   */
+  removed: number[] = [];
+  /**
+   * The indices of the previous position that an element
+   * was in, or -1 if it didn't exist in the "prevs" array.
+   */
+  transform: number[] = [];
 
-export type ChangeEqualityTest<Prev, Next> = (prev: Prev, next: Next, prevIndex: number, nextIndex: number) => boolean;
+  /**
+   * A (hopefully) faster single-entry report generator
+   * @param prev 
+   * @param next 
+   * @param equalityTest 
+   * @returns 
+   */
+  static generateSingles<Prev, Next>(prev: Prev, next: Next, equalityTest: ChangeEqualityTest<Prev, Next>) {
+    const report = new ChangeReport2();
+
+    if (equalityTest(prev, next, 0, 0)) {
+      report.transform.push(0);
+    } else {
+      report.transform.push(-1);
+      report.removed.push(0);
+    }
 
-export const calculateChangedElements = <Prev, Next>(
-  prevs: Prev[],
-  nexts: Next[],
-  isEqual: ChangeEqualityTest<Prev, Next>,
-): ChangeReport => {
-  const report: ChangeReport = {
-    created: [],
-    removed: [],
-    nextToPrev: [],
+    return report;
   }
-  report.nextToPrev = nexts.map((next, nextIndex) => {
-    const prevIndex = prevs.findIndex((prev, prevIndex) => isEqual(prev, next, prevIndex, nextIndex));
-    if (prevIndex === -1)
-      report.created.push(nextIndex);
-    return prevIndex;
-  });
-  report.removed = prevs
-    .map((_, index) => {
-      return report.nextToPrev.indexOf(index) !== -1 ? -1 : index;
-    })
-    .filter((index) => index !== -1)
-  
-  return report;
-}
 
-export type SortedChangeReport = ChangeReport & {
-  /** Index for elements that moved around, but were equal */
-  moved: [number, number][],
-};
-export const calculateSortedChangedElements = (): SortedChangeReport => {
-  throw new MagicError();
+  static generate<Prev, Next>(prevs: Prev[], nexts: Next[], equalityTest: ChangeEqualityTest<Prev, Next>) {
+    if (prevs.length === 0 && nexts.length === 0)
+      return ChangeReport2.generateSingles(prevs[0], nexts[0], equalityTest);
+
+    const report = new ChangeReport2();
+    const visited = new Set();
+
+    for (let nextIndex = 0; nextIndex < nexts.length; nextIndex++) {
+      const next = nexts[nextIndex];
+      const prevIndex = prevs.findIndex((prev, prevIndex) => equalityTest(prev, next, prevIndex, nextIndex));
+      report.transform.push(prevIndex);
+      if (prevIndex !== -1)
+        visited.add(prevIndex);
+    }
+    for (let i = 0; i < prevs.length; i++) {
+      if (!visited.has(i))
+        report.removed.push(i);
+    }
+
+    return report;
+  }
 }
 
+export type ChangeEqualityTest<Prev, Next> = (prev: Prev, next: Next, prevIndex: number, nextIndex: number) => boolean;
+
 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];
@@ -55,11 +69,11 @@ export const first = <X, Y>(array: ReadonlyArray<X>, func: (value: X, index: num
   return null;
 }
 
-export const last = <X, Y>(array: ReadonlyArray<X>, func: (value: X, index: number) => Y | null): Y | null => {
+export const last = <X, Y extends {}>(array: ReadonlyArray<X>, func: (value: X, index: number) => Y | null | false | undefined | 0): Y | null => {
   for (let i = array.length - 1; i > 0; i--) {
     const value = array[i];
     const result = func(value, i);
-    if (result !== null)
+    if (result)
       return result;
   }
   return null;

package/commit.ts

@@ -1,17 +1,11 @@
-import { createId, Element, OpaqueID } from "@lukekaalim/act";
+import { createId, Element, OpaqueID, specialNodeTypes, SuspendProps } from "@lukekaalim/act";
+import { createObjectPool } from "./pool";
 
 /**
  * A single consistent id representing a commit in the act tree.
  * Does not change.
  */
 export type CommitID = OpaqueID<"CommitID">;
-/**
- * A array of **CommitID**'s, starting at the "root" id and "descending"
- * until reaching (including) the subject's ID. Useful for efficiently
- * descending the tree to find a specific change.
- * Does not change.
- */
-export type CommitPath = readonly CommitID[];
 /**
  * A ID for a particular _state_ a **Commit** is in - every time it or its
  * children change, a commit with the same Id but a new CommitVersion
@@ -19,61 +13,110 @@ export type CommitPath = readonly CommitID[];
  */
 export type CommitVersion = OpaqueID<"CommitVersion">;
 
-/**
- * Structure for quick lookup and identification of a commit
- */
-export type CommitRef = {
+export class CommitRef2 {
   id: CommitID;
-  path: CommitPath;
-};
-export const CommitRef = {
-  from(path: CommitPath) {
-    return {
-      path,
-      id: path[path.length - 1],
+  parent: null | CommitRef2;
+  length: number;
+
+  private constructor(id: CommitID, parent: CommitRef2 | null) {
+    this.id = id;
+    this.parent = parent;
+    if (parent)
+      this.length = parent.length + 1;
+    else
+      this.length = 1;
+  }
+
+  /*
+  [Symbol.iterator]() {
+    return this.ancestors();
+  }
+    */
+  
+  /**
+   * Iterate though all "parent" commit refs,
+   * including itself as the first entry.
+   * 
+   * @returns Iterator<CommitRef2>
+   */
+  *ancestors() {
+    let ref: CommitRef2 | null = this;
+
+    while (ref) {
+      yield ref;
+      ref = ref.parent;
     }
-  },
-  new(path: CommitPath = []) {
-    const id = createId<'CommitID'>();
-    return {
-      path: [...path, id],
-      id,
+  }
+
+  /**
+   * 
+   * @param climber A function that receives every ancestor commit ref,
+   * including this one. Return "true" to stop climbing early.
+   */
+  climb(climber: (ref: CommitRef2) => boolean | void) {
+    let ref: CommitRef2 | null = this;
+    while (ref) {
+      if (climber(ref))
+        return;
+
+      ref = ref.parent;
     }
-  },
+  }
+
+  find<T>(test: (id: CommitRef2) => T | null | undefined | false): T | null {
+    let result: T | null = null;
+    this.climb(ref => {
+      const currentResult = test(ref);
+      if (currentResult) {
+        result = currentResult
+        return true;
+      }
+    })
+    return result;
+  }
+
+  static fresh(parent: CommitRef2 | null) {
+    return new CommitRef2(createId('CommitID'), parent);
+  }
 }
 
-/**
- * Representing an entry in the act "Tree"
- */
-export type Commit = CommitRef & {
-  version: CommitVersion;
-  element: Element;
-  children: CommitRef[];
-};
-
-export const updateCommit = (
-  ref: CommitRef,
-  element: Element,
-  children: CommitRef[]
-): Commit => ({
-  ...ref,
-  element,
-  children,
-  version: createId(),
-});
-
-export const Commit = {
-  new(element: Element, path: CommitPath = [], children: CommitRef[] = []): Commit {
-    return {
-      ...CommitRef.new(path),
-      version: createId(),
-      children,
-      element,
+export class Commit2 {
+  static pool = () => createObjectPool<Commit2, ConstructorParameters<typeof Commit2>>(
+    function alloc (ref, el, ch) { return new Commit2(ref, el, ch) },
+    function reassign(c, ref, el, ch) {
+      c.ref = ref;
+      c.element = el;
+      c.children = ch;
+      c.version = createId('CommitVersion');
     }
-  },
-  update: updateCommit,
-  version: (commit: Commit): Commit => ({
-    ...commit,
-    version: createId(),
-  }),
-}
+  )
+
+  ref: CommitRef2;
+
+  element: Element;
+  children: CommitRef2[];
+
+  version: CommitVersion = createId('CommitVersion');
+
+  constructor(ref: CommitRef2, element: Element, children: CommitRef2[]) {
+    this.ref = ref;
+    this.element = element;
+    this.children = children;
+  }
+
+  update(element: null | Element = null, children: null | CommitRef2[] = null) {
+    this.version = createId('CommitVersion');
+    
+    if (element)
+      this.element = element;
+    if (children)
+      this.children = children;
+  }
+
+  isSuspended() {
+    return (
+      this.element.type === specialNodeTypes.suspend
+      && (this.element.props as SuspendProps).suspended
+    );
+  }
+}

package/delta.ts

@@ -1,47 +1,77 @@
-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, moved: boolean };
-export type RemoveDelta = { ref: CommitRef, prev: Commit };
-export type SkipDelta =   { next: Commit };
-
-export type DeltaSet = {
-  created: CreateDelta[],
-  updated: UpdateDelta[],
-  skipped: SkipDelta[],
-  removed: RemoveDelta[],
-};
+import { Element } from "@lukekaalim/act";
+import { Commit2, CommitID } from "./commit.ts";
+import { EffectID, EffectTask } from "./state.ts";
 
 /**
- * Apply a deltaset to a tree, modifying it's commit list
- * to match the changes produced by the thread.
+ * The Delta class represents an accumulation
+ * of changes over time.
+ * 
+ * A WorkThread may do several "passes" over the CommitTree,
+ * but all of those changes are written to the same Delta.
+ * 
+ * The Delta keeps track of only the immediately prior state (the
+ * last one that was sent to the Renderer), and the final state.
+ * 
+ * If a pass causes a component to be rendered/updated several times,
+ * it will only be recorded in the delta once for it's final state. Similarly,
+ * if an element is create in one pass, but removed in a another, then it will
+ * be entirely excluded from the delta - and the renderer will never know it existed.
  * 
- * @param thread 
- * @param tree 
+ * The Delta records Commits as well as Effects this way.
  */
-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 class Delta {
+  fresh: Map<CommitID, Commit2> = new Map();
+  changed: Map<CommitID, { prev: Element, next: Commit2, moved: boolean }> = new Map();
+  removed: Map<CommitID, Commit2> = new Map();
+
+  effects: Map<EffectID, EffectTask> = new Map();
+  cleanups: Map<EffectID, EffectTask> = new Map();
+
+  get size() {
+    return (
+      + this.fresh.size
+      + this.changed.size
+      + this.removed.size
+    )
+  }
+
+  add(commit: Commit2) {
+    this.fresh.set(commit.ref.id, commit)
+  }
+  update(prev: Element, next: Commit2, moved: boolean) {
+    if (this.fresh.has(next.ref.id)) {
+      this.fresh.set(next.ref.id, next);
+    } else {
+      const change = this.changed.get(next.ref.id);
+      if (change) {
+        change.next = next;
+      } else {
+        this.changed.set(next.ref.id, { prev, next, moved });
+      }
+    }
+  }
+  delete(commit: Commit2) {
+    if (this.fresh.has(commit.ref.id)) {
+      this.fresh.delete(commit.ref.id);
+    }
+    else {
+      if (this.changed.has(commit.ref.id))
+        this.changed.delete(commit.ref.id);
+
+      this.removed.set(commit.ref.id, commit);
+    }
+  }
 
-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,
-}
+  addEffects(tasks: EffectTask[]) {
+    for (const task of tasks) {
+      this.effects.set(task.id, task);
+    }
+  }
 
+  addCleanups(tasks: EffectTask[]) {
+    for (const task of tasks) {
+      this.effects.delete(task.id);
+      this.cleanups.set(task.id, task);
+    }
+  }
+}