creo 0.0.3-dev → 0.0.4-dev

package/src/DOM/Registry.ts

@@ -0,0 +1,53 @@
+import { LinkedMap } from "../data-structures/linked-map/LinkedMap";
+import { Maybe } from "../data-structures/maybe/Maybe";
+import { IRenderCycle } from "./IRenderCycle";
+import { Node } from "./Node";
+
+export class Registry implements IRenderCycle {
+  protected needRender: LinkedMap<Node, "key"> = new LinkedMap("key");
+  protected rendering: LinkedMap<Node, "key"> = new LinkedMap("key");
+  protected register: LinkedMap<Node, "key"> = new LinkedMap("key");
+  protected mounting: LinkedMap<Node, "key"> = new LinkedMap("key");
+
+  public newNode(node: Node) {
+    this.register.put(node);
+    this.needRender.put(node);
+    this.mounting.put(node);
+  }
+
+  public willRender(node: Node) {
+    this.needRender.putFirst(node);
+    this.rendering.delete(node.key);
+  }
+
+  public isRendering(node: Node) {
+    this.needRender.delete(node.key);
+    this.rendering.put(node);
+  }
+
+  public didRender(node: Node): { justMounted: boolean } {
+    this.rendering.delete(node.key);
+    return {
+      justMounted: this.mounting.delete(node.key),
+    };
+  }
+
+  public shouldUpdateNode(node: Node): boolean {
+    return this.needRender.has(node);
+  }
+
+  public dispose(node: Node) {
+    this.register.delete(node.key);
+    this.rendering.delete(node.key);
+    this.mounting.delete(node.key);
+    this.needRender.delete(node.key);
+  }
+
+  public getNextToRender(): Maybe<Node> {
+    return this.needRender.at(0);
+  }
+
+  public getNextRendering(): Maybe<Node> {
+    return this.rendering.at(-1);
+  }
+}

package/src/creo.ts

@@ -0,0 +1,134 @@
+import { assertJust } from "./data-structures/assert/assert";
+import { Maybe } from "./data-structures/maybe/Maybe";
+import { Wildcard } from "./data-structures/wildcard/wildcard";
+import { Context } from "./DOM/Context";
+import { DomEngine, getActiveEngine } from "./DOM/DomEngine";
+import { Key } from "./DOM/Key";
+import { UINode } from "./DOM/Node";
+
+export type NodeMethods<P = void, A = void> = {
+  render(): void;
+  didMount?(): void;
+  didUpdate?(): void;
+  dispose?(): void;
+  // Return true if the component should get updated with new params
+  shouldUpdate?(pendingParams: P): boolean;
+  ext?: A extends void ? undefined : A;
+};
+
+export type NodeBuilder<P = void, A = void> = (
+  c: Context<P>,
+) => NodeMethods<P, A>;
+
+type NodeBuilderFn<P = void, A = void> = (
+  p?: P,
+  slot?: () => void,
+) => { ext: A };
+
+export function creo<P = void, A = void>(
+  ctor: NodeBuilder<P, A>,
+): NodeBuilderFn<P, A> {
+  return (params?: P, slot?: () => void) => {
+    // Get Potential pre-existing instance of the component:
+    const maybeLayout = getActiveEngine();
+    assertJust(
+      maybeLayout,
+      "Component can be initialised only inside creo rendering cycle",
+    );
+    const engine: DomEngine = maybeLayout;
+
+    // 2. Check if there is an existing component
+    let userKey: Maybe<Key>;
+    // If key is provided separately, use provided key:
+    if (
+      params != null &&
+      typeof params === "object" &&
+      "key" in params &&
+      params.key != null &&
+      (typeof params.key === "string" || typeof params.key === "number")
+    ) {
+      userKey = params.key;
+    }
+
+    // 3. Get component's parent
+    const maybeParent = engine.getParent();
+    assertJust(
+      maybeParent,
+      "There is no rendering context for currently rendering component",
+    );
+    const parent = maybeParent;
+    const node = parent.renderChild(userKey, ctor, params, slot, null);
+
+    // 4. Public component contains all the required methods
+    return node.publicApi;
+  };
+}
+
+// UI renderers
+type UINodeBuilderFn<P = void> = (
+  p?: P,
+  slot?: Maybe<() => void>,
+) => () => Maybe<HTMLElement>;
+
+type UITextNodeBuilderFn<P = void> = (
+  p?: P,
+  slot?: Maybe<() => void>,
+) => () => Maybe<Text>;
+
+function creoUI<P = void, Tag extends Maybe<string> = string>(
+  tag: Tag,
+): Tag extends "Text" ? UITextNodeBuilderFn<P> : UINodeBuilderFn<P> {
+  // @ts-ignore
+  return (params?: P, slot?: Maybe<() => void>) => {
+    // Get Potential pre-existing instance of the component:
+    const maybeLayout = getActiveEngine();
+    assertJust(
+      maybeLayout,
+      "Component can be initialised only inside creo rendering cycle",
+    );
+    const engine: DomEngine = maybeLayout;
+
+    // 2. Check if there is an existing component
+    let userKey: Maybe<Key>;
+    // If key is provided separately, use provided key:
+    if (
+      params != null &&
+      typeof params === "object" &&
+      "key" in params &&
+      params.key != null &&
+      (typeof params.key === "string" || typeof params.key === "number")
+    ) {
+      userKey = params.key;
+    }
+
+    // 3. Get component's parent
+    const maybeParent = engine.getParent();
+    assertJust(
+      maybeParent,
+      "There is no rendering context for currently rendering component",
+    );
+    const parent = maybeParent;
+    // TODO: Use separate methods to render Text and UI components
+    const node: UINode = parent.renderChild(
+      userKey,
+      uiCtor,
+      params,
+      slot,
+      tag,
+    ) as UINode;
+    // 4. Public component contains all the required methods
+    return node.publicNode;
+  };
+}
+
+const uiCtor = <P>(c: Context<P>) => ({
+  render() {
+    c.slot?.();
+  },
+});
+
+export const ui = creoUI;
+export const Button = ui<Wildcard>("button");
+export const Block = ui<Wildcard>("div");
+export const Inline = ui<Wildcard>("span");
+export const Text = ui<string>("text");

package/src/data-structures/assert/assert.ts

@@ -0,0 +1,12 @@
+/**
+ * Assert helpers for ts
+ * 
+ */
+
+import { isNone, Just, Maybe } from "../maybe/Maybe";
+
+export function assertJust<T>(maybe: Maybe<T>, errorMessage?: string): asserts maybe is Just<T> {
+  if (isNone(maybe)) {
+    throw new Error(errorMessage ?? 'Expected Just, received None as Maybe');
+  }
+}

package/src/data-structures/indexed-map/IndexedMap.ts

@@ -0,0 +1,281 @@
+import { Maybe } from "../maybe/Maybe";
+
+type LinkNode<T, K> = {
+  value: T;
+  cachedIndexValues: Map<keyof T, T[keyof T]>;
+  prev: Maybe<LinkNode<T, K>>;
+  next: Maybe<LinkNode<T, K>>;
+};
+
+// Notifies when item gets added to a particular index
+type IndexAddedSubscriber<T> = (val: T[keyof T]) => void;
+
+export class IndexedMap<T extends object, K extends keyof T>
+  implements Iterable<T>
+{
+  private head: Maybe<LinkNode<T, K>>;
+  private tail: Maybe<LinkNode<T, K>>;
+  private mapSize = 0;
+  private pk: K;
+  private map = new Map<T[K], LinkNode<T, K>>();
+  private indexes: Map<keyof T, Map<T[keyof T], Set<LinkNode<T, K>>>> =
+    new Map();
+  private indexAddedSubscribers: Map<keyof T, Set<IndexAddedSubscriber<T>>> =
+    new Map();
+
+  constructor(pk: K, indexFields: Array<keyof T> = []) {
+    this.pk = pk;
+    for (const field of indexFields) {
+      if (field === pk) continue;
+      this.indexes.set(field, new Map());
+    }
+  }
+
+  // Puts item to the end
+  // Removes previous item, if PK is matched
+  put(item: T): void {
+    const key = item[this.pk];
+    // Delete previous, if any
+    this.delete(key);
+
+    const node: LinkNode<T, K> = {
+      value: item,
+      cachedIndexValues: new Map(),
+      prev: this.tail,
+      next: null,
+    };
+    if (!this.head) {
+      this.head = node;
+    }
+    if (this.tail) {
+      this.tail.next = node;
+    }
+    this.tail = node;
+    this.map.set(key, node);
+    this.mapSize++;
+
+    // update secondary indexes
+    this.indexNewNode(node);
+  }
+
+  putBefore(targetKey: T[K], item: T): void {
+    const target = this.map.get(targetKey);
+    if (target == null) {
+      throw new Error(`Key not found: ${String(targetKey)}`);
+    }
+    const key = item[this.pk];
+    if (targetKey === key) {
+      return;
+    }
+    this.delete(key);
+
+    const node: LinkNode<T, K> = {
+      value: item,
+      cachedIndexValues: new Map(),
+      prev: target.prev,
+      next: target,
+    };
+    if (target.prev) {
+      target.prev.next = node;
+    } else {
+      this.head = node;
+    }
+    target.prev = node;
+
+    this.map.set(key, node);
+    this.mapSize++;
+    this.indexNewNode(node);
+  }
+
+  // TODO: need to make it in background, instead of making eng to call it manually
+  updateIndex(item: T) {
+    const node = this.map.get(item[this.pk]);
+    if (node == null) {
+      return;
+    }
+    for (const [field, map] of this.indexes) {
+      const newVal = node.value[field];
+      const oldVal = node.cachedIndexValues.get(field);
+      if (oldVal !== newVal) {
+        const oldSet = this.indexes
+          .get(field)
+          // We know for sure, it's okay to index on that value
+          ?.get(oldVal as T[keyof T]);
+
+        oldSet?.delete(node);
+        let set = this.indexes.get(field)?.get(newVal);
+        if (!set) {
+          set = new Set();
+          map.set(newVal, set);
+        }
+        set.add(node);
+        node.cachedIndexValues.set(field, newVal);
+        this.notifySubscribers(field, newVal);
+      }
+    }
+  }
+
+  private indexNewNode(node: LinkNode<T, K>) {
+    for (const [field, map] of this.indexes) {
+      const val = node.value[field];
+      node.cachedIndexValues.set(field, val);
+      let set = map.get(val);
+      if (!set) {
+        set = new Set();
+        map.set(val, set);
+      }
+      set.add(node);
+      this.notifySubscribers(field, val);
+    }
+  }
+
+  private notifySubscribers(field: keyof T, val: T[keyof T] | undefined) {
+    if (val === undefined) {
+      return;
+    }
+    const listeners = this.indexAddedSubscribers.get(field);
+    if (!listeners) {
+      return;
+    }
+    for (const listener of listeners) {
+      listener(val);
+    }
+  }
+
+  subscribeToIndexChange(
+    field: keyof T,
+    listener: IndexAddedSubscriber<T>,
+  ): () => void {
+    if (!this.indexes.has(field)) {
+      throw new Error(
+        `Cannot subscribe to non-indexed field "${String(field)}"`,
+      );
+    }
+    let listeners = this.indexAddedSubscribers.get(field);
+    if (!listeners) {
+      listeners = new Set();
+      this.indexAddedSubscribers.set(field, listeners);
+    }
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }
+
+  putAfter(targetKey: T[K], item: T): void {
+    const target = this.map.get(targetKey);
+    if (target == null) {
+      throw new Error(`Key not found: ${String(targetKey)}`);
+    }
+    const key = item[this.pk];
+    if (targetKey === key) {
+      return;
+    }
+
+    const node: LinkNode<T, K> = {
+      value: item,
+      cachedIndexValues: new Map(),
+      prev: target,
+      next: target.next,
+    };
+    if (target.next) {
+      target.next.prev = node;
+    } else {
+      this.tail = node;
+    }
+    target.next = node;
+
+    this.map.set(key, node);
+    this.mapSize++;
+    this.indexNewNode(node);
+  }
+
+  delete(key: T[K]): boolean {
+    const node = this.map.get(key);
+    if (node == null) {
+      return false;
+    }
+
+    // unlink from list
+    if (node.prev) {
+      node.prev.next = node.next;
+    } else {
+      this.head = node.next;
+    }
+    if (node.next) {
+      node.next.prev = node.prev;
+    } else {
+      this.tail = node.prev;
+    }
+
+    // remove from indexes
+    this.map.delete(key);
+    for (const [field, map] of this.indexes) {
+      const indexValue = node.value[field];
+      const set = map.get(indexValue);
+      if (set != null) {
+        set.delete(node);
+      }
+    }
+
+    this.mapSize--;
+    return true;
+  }
+
+  at(n: number): Maybe<T> {
+    let current: Maybe<LinkNode<T, K>>;
+    if (n >= 0) {
+      current = this.head;
+      for (let i = 0; i < n && current != null; i++) {
+        current = current.next;
+      }
+    } else {
+      current = this.tail;
+      for (let i = n; i < -1 && current != null; i++) {
+        current = current.prev;
+      }
+    }
+    return current?.value;
+  }
+
+  get(key: T[K]): Maybe<T> {
+    return this.map.get(key)?.value;
+  }
+
+  getByIndex<K extends keyof T>(field: K, val: T[keyof T]): Array<T> {
+    const map = this.indexes.get(field);
+    if (!map) {
+      throw new Error(`No index defined for field "${String(field)}"`);
+    }
+    const set = map.get(val);
+    return set ? Array.from(set.values(), (node) => node.value) : [];
+  }
+
+  // Get next item in insertion order
+  getNext(item: T): Maybe<T> {
+    return this.map.get(item[this.pk])?.next?.value;
+  }
+
+  // Get previous item in insertion order
+  getPrev(item: T): Maybe<T> {
+    return this.map.get(item[this.pk])?.prev?.value;
+  }
+
+  size(): number {
+    return this.mapSize;
+  }
+
+  [Symbol.iterator](): Iterator<T> {
+    let curr = this.head;
+    return {
+      next(): IteratorResult<T> {
+        if (!curr) {
+          return { done: true, value: undefined! };
+        }
+        const value = curr.value;
+        curr = curr.next;
+        return { done: false, value };
+      },
+    };
+  }
+}

package/src/data-structures/linked-map/LinkedMap.spec.ts

@@ -0,0 +1,67 @@
+import { expect, test } from "bun:test";
+import { LinkedMap } from "./LinkedMap";
+
+type Entry = { key: string; value: number };
+
+test("put adds items to the end", () => {
+  const map = new LinkedMap<Entry, "key">("key");
+  map.put({ key: "foo", value: 1 });
+  map.put({ key: "bar", value: 2 });
+  map.put({ key: "baz", value: 94 });
+
+  expect([...map].map((e) => [e.key, e.value])).toEqual([
+    ["foo", 1],
+    ["bar", 2],
+    ["baz", 94],
+  ]);
+});
+
+test("putBefore and putAfter work correctly", () => {
+  const map = new LinkedMap<Entry, "key">("key");
+  map.put({ key: "foo", value: 1 });
+  map.put({ key: "bar", value: 2 });
+  map.put({ key: "baz", value: 94 });
+
+  map.putBefore("bar", { key: "hey", value: 13 }); // insert before "bar"
+
+  expect([...map].map((e) => [e.key, e.value])).toEqual([
+    ["foo", 1],
+    ["hey", 13],
+    ["bar", 2],
+    ["baz", 94],
+  ]);
+
+  map.putAfter("baz", { key: "zap", value: 42 }); // insert after "baz"
+
+  expect([...map].map((e) => [e.key, e.value])).toEqual([
+    ["foo", 1],
+    ["hey", 13],
+    ["bar", 2],
+    ["baz", 94],
+    ["zap", 42],
+  ]);
+});
+
+test("map has access by key", () => {
+  const map = new LinkedMap<Entry, "key">("key");
+  map.put({ key: "foo", value: 1 });
+  map.put({ key: "bar", value: 2 });
+  map.put({ key: "hey", value: 13 });
+  map.put({ key: "baz", value: 94 });
+
+  expect(map.get("baz")?.value).toEqual(94);
+  expect(map.get("bar")?.value).toEqual(2);
+  expect(map.get("hey")?.value).toEqual(13);
+});
+
+test("map has access by index", () => {
+  const map = new LinkedMap<Entry, "key">("key");
+  map.put({ key: "foo", value: 1 });
+  map.put({ key: "bar", value: 2 });
+  map.put({ key: "hey", value: 13 });
+  map.put({ key: "baz", value: 94 });
+
+  expect(map.at(-1)?.value).toEqual(94);
+  expect(map.at(2)?.value).toEqual(13);
+  expect(map.at(0)?.value).toEqual(1);
+});