creo 0.0.2 → 0.0.4-dev

package/src/DOM/Node.ts

@@ -0,0 +1,472 @@
+/**
+ *  Represents physical node for UI rendering engine
+ *  In charge of:
+ *  1. UI changes
+ *  2. Animations
+ *  3. GC when gets destroyed
+ */
+
+import { NodeBuilder, NodeMethods } from "../creo";
+import { assertJust } from "../data-structures/assert/assert";
+import { IndexedMap } from "../data-structures/indexed-map/IndexedMap";
+import { Maybe, None } from "../data-structures/maybe/Maybe";
+import { generateNextKey } from "../data-structures/simpleKey/simpleKey";
+import { Wildcard } from "../data-structures/wildcard/wildcard";
+import { Context } from "./Context";
+import { DomEngine } from "./DomEngine";
+import { IRenderCycle } from "./IRenderCycle";
+import { Key } from "./Key";
+
+export enum NodeStatus {
+  DIRTY,
+  UPDATING,
+  CLEAR,
+}
+
+export enum UpdateDirectiveEnum {
+  // Change element position
+  MOVE,
+  // No component, just create a new
+  NEW,
+  // Matched component, update existing item
+  REUSE,
+  // Matched key, but different component
+  REPLACE,
+}
+
+type UpdateDirective = {
+  updateDirective: UpdateDirectiveEnum;
+  node: Maybe<Node>;
+};
+
+export class Node implements IRenderCycle {
+  public publicApi: {
+    ext: Wildcard;
+  };
+  public c: Context<Wildcard>;
+
+  public children: IndexedMap<Node, "key"> = new IndexedMap("key");
+  public pendingChildrenState!: IndexedMap<Node, "key">;
+  public renderCursor: Maybe<Node>;
+
+  public lifecycle: NodeMethods<Wildcard, Wildcard>;
+
+  constructor(
+    public userKey: Maybe<Key>,
+    public key: Key,
+    p: Wildcard,
+    public slot: Maybe<() => void>,
+    public ctor: NodeBuilder<Wildcard, Wildcard>,
+    public parent: Node,
+    public parentUI: UINode,
+    public engine: DomEngine,
+  ) {
+    this.c = new Context(this, p, slot);
+    const { ext, ...lifecycle } = this.ctor(this.c);
+    this.lifecycle = lifecycle;
+    this.publicApi = {
+      ext,
+    }; //new Node(extension, this);
+    this.newNode(this);
+  }
+
+  newNode(_node: Node): void {
+    this.engine.newNode(this);
+  }
+
+  // sets status to dirty for the node
+  invalidate() {
+    this.willRender();
+  }
+
+  applyNewParams(newParams: Wildcard) {
+    if (this.shouldUpdate(newParams)) {
+      this.willRender();
+    }
+    this.c.p = newParams;
+  }
+
+  willRender() {
+    this.engine.willRender(this);
+  }
+
+  isRendering() {
+    this.engine.isRendering(this);
+    this.pendingChildrenState = new IndexedMap("key", ["userKey"]);
+    this.renderCursor = this.children.at(0);
+  }
+
+  didRender(): { justMounted: boolean } {
+    // When the rendering cycle ends, all items starting
+    // from this.renderingCursor were not used and hence, need to be deleted
+    while (this.renderCursor != null) {
+      this.renderCursor.dispose();
+      this.renderCursor = this.children.getNext(this.renderCursor);
+    }
+    // At the end of the cycle, we replace children with pending children (this.renderingChildren)
+    this.children = this.pendingChildrenState;
+    this.pendingChildrenState = new IndexedMap("key");
+    return this.engine.didRender(this);
+  }
+
+  render() {
+    __DEV__ && console.log("Render:", this.key);
+    this.isRendering();
+    this.lifecycle.render();
+    const { justMounted } = this.didRender();
+    if (justMounted) {
+      this.lifecycle.didMount?.();
+    }
+    {
+      this.lifecycle.didUpdate?.();
+    }
+  }
+
+  shouldUpdate(pendingParams: Wildcard): boolean {
+    if (this.lifecycle.shouldUpdate != null) {
+      return this.lifecycle.shouldUpdate(pendingParams);
+    }
+    return true;
+  }
+
+  generateUpdateDirective(
+    userKey: Maybe<Key>,
+    ctor: NodeBuilder<Wildcard, Wildcard>,
+    tag: Maybe<string>,
+  ): UpdateDirective {
+    const expectedChild: Maybe<Node> = this.renderCursor;
+    let expectedTag: Maybe<string> = null;
+    if (expectedChild instanceof UINode) {
+      expectedTag = expectedChild.tag;
+    }
+    if (
+      expectedChild != null &&
+      expectedChild.ctor === ctor &&
+      expectedTag == tag &&
+      // TODO: We should respect & identify artificially generated keys too
+      (userKey == null || userKey === expectedChild.userKey)
+    ) {
+      return {
+        updateDirective: UpdateDirectiveEnum.REUSE,
+        node: expectedChild,
+      };
+    }
+
+    // Unhappy path exploration.
+    const maybeKeyedMatchedChildren: Node[] =
+      userKey != null ? this.children.getByIndex("userKey", userKey) : [];
+
+    if (maybeKeyedMatchedChildren.length > 1) {
+      throw new Error("Spotted duplicate keys for the node");
+    }
+    const maybeKeyedMatchedChild: Maybe<Node> = maybeKeyedMatchedChildren[0];
+
+    // Case 1: Key, no next component, but matched key: something went wrong
+    if (
+      expectedChild == null &&
+      userKey != null &&
+      maybeKeyedMatchedChild != null
+    ) {
+      throw new Error(`Detected key duplication: ${userKey}`);
+    }
+
+    // Case 2: Key, matched key, not matched next element
+    if (
+      expectedChild != null &&
+      userKey != null &&
+      maybeKeyedMatchedChild != null
+    ) {
+      // We have matched key, but their constructors are different
+      // In theory that process is REPLACE, but for external usages, it works exactly the same way as NEW
+      // The difference is purely internal
+      if (maybeKeyedMatchedChild.ctor !== ctor || expectedTag != tag) {
+        return {
+          updateDirective: UpdateDirectiveEnum.REPLACE,
+          node: maybeKeyedMatchedChild,
+        };
+      }
+      // TODO detect potential key duplication?
+      // Everything is fine, we just need to move that item to different place
+      return {
+        updateDirective: UpdateDirectiveEnum.MOVE,
+        node: maybeKeyedMatchedChild,
+      };
+    }
+
+    // Default outcome: Component creation
+    // Cases:
+    // 1. No key, component mismatch or no component
+    // 2. Key, no next component, no matched key
+    return {
+      updateDirective: UpdateDirectiveEnum.NEW,
+      node: null,
+    };
+  }
+
+  renderChild<Tag extends Maybe<string>>(
+    userKey: Maybe<Key>,
+    ctor: NodeBuilder<Wildcard, Wildcard>,
+    params: Maybe<Wildcard>,
+    slot: Maybe<() => void>,
+    tag: Tag,
+  ): Tag extends None ? Node : UINode {
+    const directive = this.generateUpdateDirective(userKey, ctor, tag);
+
+    let newNode: Node;
+
+    switch (directive.updateDirective) {
+      case UpdateDirectiveEnum.REUSE: {
+        // TODO: MAYBE update SLOT
+        assertJust(directive.node, "Cannot re-use null node");
+        newNode = directive.node;
+        this.pendingChildrenState.put(newNode);
+        this.renderCursor =
+          this.renderCursor != null
+            ? this.children.getNext(this.renderCursor)
+            : null;
+        this.children.delete(newNode.key);
+        // The component can decide on its own if the component needs to get updated
+        directive.node.applyNewParams(params);
+        break;
+      }
+      case UpdateDirectiveEnum.MOVE: {
+        // TODO: move all DOM children which are connected to the top-level
+        throw new Error("Not implemented");
+      }
+      case UpdateDirectiveEnum.NEW: {
+        newNode = this.createNewNode(userKey, ctor, params, slot, tag);
+        break;
+      }
+      case UpdateDirectiveEnum.REPLACE: {
+        assertJust(directive.node, "Cannot replace null component");
+        const toReplace = directive.node;
+        if (this.renderCursor === toReplace) {
+          this.renderCursor = this.children.getNext(this.renderCursor);
+        }
+        // Delete conflicting element, as they should not exist anymore
+        this.children.delete(toReplace.key);
+        // Cleanup the component:
+        toReplace.dispose();
+        newNode = this.createNewNode(userKey, ctor, params, slot, tag);
+        break;
+      }
+    }
+    if (this.engine.shouldUpdateNode(newNode)) {
+      newNode.render();
+    }
+    return newNode;
+  }
+
+  protected createNewNode(
+    userKey: Maybe<Key>,
+    ctor: NodeBuilder<Wildcard, Wildcard>,
+    params: Maybe<Wildcard>,
+    slot: Maybe<() => void>,
+    tag: Maybe<string>,
+  ): Node {
+    let node: Node;
+    if (tag == null) {
+      node = new Node(
+        userKey,
+        generateNextKey(this.pendingChildrenState.size()),
+        params,
+        slot,
+        ctor,
+        this,
+        this.parentUI,
+        this.engine,
+      );
+    } else {
+      node = new UINode(
+        userKey,
+        generateNextKey(this.pendingChildrenState.size()),
+        params,
+        slot,
+        ctor,
+        this,
+        this.parentUI,
+        this.engine,
+        tag,
+      );
+    }
+
+    this.pendingChildrenState.put(node);
+    return node;
+  }
+
+  dispose(): void {
+    // delete any DOM / whatever nodes we have
+    // Propagate removal of data to all children
+
+    // Remove subscriptions
+    this.c.dispose();
+
+    // Parent component should alredy not to have children, but we can have sanity check there
+    for (const child of this.children) {
+      child.dispose();
+    }
+
+    // Mark component as not dirty, as there is no point in keeping that item anymore
+    this.engine.dispose(this);
+  }
+}
+
+export class UINode extends Node {
+  public uiChildren: IndexedMap<UINode, "key"> = new IndexedMap("key", [
+    "userKey",
+  ]);
+  public pendingUIChildrenState!: IndexedMap<UINode, "key">;
+  protected domNode: Maybe<HTMLElement>;
+  protected domText: Maybe<Text>;
+  public publicNode: () => Maybe<HTMLElement | Text>;
+  constructor(
+    userKey: Maybe<Key>,
+    internalKey: Key,
+    p: Wildcard,
+    slot: Maybe<() => void>,
+    ctor: NodeBuilder<Wildcard, Wildcard>,
+    parent: Node,
+    parentUI: UINode,
+    engine: DomEngine,
+    public tag: string,
+  ) {
+    super(userKey, internalKey, p, slot, ctor, parent, parentUI, engine);
+    this.publicNode = () => {
+      return (this.domNode ?? this.domText) as Maybe<HTMLElement | Text>;
+    };
+    // Root element does not have parentUI
+    this.parentUI?.appendUIChild(this);
+  }
+
+  appendUIChild(node: UINode) {
+    this.uiChildren.put(node);
+  }
+
+  protected createNewNode(
+    userKey: Maybe<Key>,
+    ctor: NodeBuilder<Wildcard, Wildcard>,
+    params: Maybe<Wildcard>,
+    slot: Maybe<() => void>,
+    tag: Maybe<string>,
+  ): Node {
+    let node: Node;
+    if (tag == null) {
+      node = new Node(
+        userKey,
+        generateNextKey(this.pendingChildrenState.size()),
+        params,
+        slot,
+        ctor,
+        this,
+        this,
+        this.engine,
+      );
+    } else {
+      node = new UINode(
+        userKey,
+        generateNextKey(this.pendingChildrenState.size()),
+        params,
+        slot,
+        ctor,
+        this,
+        this,
+        this.engine,
+        tag,
+      );
+    }
+
+    this.pendingChildrenState.put(node);
+    return node;
+  }
+
+  renderUI() {
+    // rerender
+    if (this.domText != null) {
+      const params = this.c.p;
+      if (typeof params === "string" && this.domText.textContent != params) {
+        const newItem = document.createTextNode(params);
+        this.parentUI.domNode?.replaceChild(newItem, this.domText);
+        this.domText = newItem;
+      }
+      return;
+    }
+    if (this.domNode != null) {
+      const params = this.c.p;
+      const element = this.domNode;
+      if (typeof params === "object") {
+        for (const key in params) {
+          if (element.getAttribute(key) !== params[key]) {
+            element.setAttribute(key, params[key]);
+          }
+        }
+      }
+      return;
+    }
+    // mount
+    if (this.tag === "text") {
+      this.domText = document.createTextNode(this.c.p);
+      this.parentUI.domNode?.appendChild(this.domText);
+      return;
+    } else {
+      this.domNode = document.createElement(this.tag);
+      const params = this.c.p;
+      const element = this.domNode;
+      if (typeof params === "object") {
+        for (const key in params) {
+          if (element.getAttribute(key) !== params[key]) {
+            element.setAttribute(key, params[key]);
+          }
+        }
+      }
+      this.parentUI.domNode?.appendChild(this.domNode);
+    }
+  }
+
+  render() {
+    this.isRendering();
+    __DEV__ && console.log("UI render:", this.tag, this.key);
+    this.renderUI();
+    //this.layoutNode = this.layout.renderNode(this);
+    this.lifecycle.render();
+    const { justMounted } = this.didRender();
+    if (justMounted) {
+      this.lifecycle.didMount?.();
+    } else {
+      this.lifecycle.didUpdate?.();
+    }
+  }
+
+  dispose(): void {
+    super.dispose();
+    const toDelete = this.domNode ?? this.domText;
+    if (toDelete != null && this.parentUI != null) {
+      this.parentUI.domNode?.removeChild(toDelete);
+    }
+    this.domNode = null;
+    this.domText = null;
+  }
+}
+
+export class RootNode extends UINode {
+  constructor(htmlElement: HTMLElement, slot: () => void, engine: DomEngine) {
+    super(
+      null,
+      "root",
+      null,
+      slot,
+      /* ctor */ (c) => ({
+        render() {
+          c.slot?.();
+        },
+      }),
+      // @ts-ignore
+      /* parent */ null,
+      /* parentUI */ null,
+      engine,
+      /* tag */ null,
+    );
+    this.domNode = htmlElement;
+  }
+
+  renderUI() {}
+}

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');
+  }
+}