creo 0.0.3-dev → 0.0.4-dev

package/.env.development

@@ -0,0 +1 @@
+__DEV__=true

package/.github/workflows/main.yml

@@ -0,0 +1,24 @@
+name: CI
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use bun
+        uses: oven-sh/setup-bun@v2
+        
+      - name: install and tests
+        run: |
+          bun install
+          bun test
+        env:
+          CI: true

package/README.md

@@ -1 +1 @@
-Work in progress, stay tuned
+Work in progress, stay tuned

package/TODOS.md

@@ -0,0 +1,2 @@
+TODOS
+[ ] String errors => error codes

package/index.ts

@@ -0,0 +1 @@
+console.log("Hello via Bun!");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "creo",
-  "version": "0.0.3-dev",
+  "version": "0.0.4-dev",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,6 +10,11 @@
   "devDependencies": {
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
-    "bun-types": "latest"
+    "bun-types": "latest",
+    "@types/bun": "latest"
+  },
+  "module": "index.ts",
+  "dependencies": {
+    "csstype": "^3.1.3"
   }
 }

package/src/DOM/Context.ts

@@ -0,0 +1,36 @@
+import { Maybe } from "../data-structures/maybe/Maybe";
+import {
+  onDidUpdate,
+  record,
+  RecordOf,
+} from "../data-structures/record/Record";
+import { Node } from "./Node";
+
+export class Context<P> {
+  private subscribers: Array<() => void> = [];
+  private node: Node;
+  tracked = <T extends {}>(t: T): RecordOf<T> => {
+    const rec = record(t);
+    this.subscribers.push(
+      onDidUpdate(rec, () => {
+        this.node.invalidate();
+      }),
+    );
+    return rec;
+  };
+  p: P;
+  slot: Maybe<() => void>;
+
+  constructor(node: Node, initialParams: P, slot: Maybe<() => void>) {
+    this.node = node;
+    this.p = initialParams;
+    this.slot = slot;
+  }
+  dispose() {
+    this.subscribers.forEach((unsubscribe) => unsubscribe());
+  }
+
+  setSlot(slot: () => void): void {
+    this.slot = slot;
+  }
+}

package/src/DOM/DomEngine.ts

@@ -0,0 +1,106 @@
+/**
+ * Layout engine abstract class
+ *
+ *
+ * Ideas:
+ * [ ] Event systems
+ * [ ] Animation engine
+ */
+import { Maybe } from "../data-structures/maybe/Maybe";
+import { IRenderCycle } from "./IRenderCycle";
+import { Node, RootNode } from "./Node";
+import { Registry } from "./Registry";
+
+let $activeEngine: Maybe<DomEngine>;
+
+export class DomEngine implements IRenderCycle {
+  protected isRerenderingScheduled = true;
+  // Queue of currently rendering items
+  protected registry: Registry = new Registry();
+  protected root!: RootNode;
+  protected rootHtml: HTMLElement;
+
+  constructor(root: HTMLElement) {
+    this.rootHtml = root;
+  }
+
+  public newNode(node: Node) {
+    this.registry.newNode(node);
+  }
+
+  public willRender(node: Node) {
+    this.registry.willRender(node);
+    this.scheduleRerender();
+  }
+
+  public isRendering(node: Node) {
+    this.registry.isRendering(node);
+  }
+
+  public didRender(node: Node): { justMounted: boolean } {
+    const result = this.registry.didRender(node);
+    return result;
+  }
+
+  public dispose(node: Node) {
+    this.registry.dispose(node);
+  }
+
+  debugStatus() {
+    console.log(this.registry);
+  }
+
+  render(renderFn: () => void): void {
+    if (this.root != null) {
+      return this.forceRerender();
+    }
+    this.root = new RootNode(this.rootHtml, renderFn, this);
+    this.forceRerender();
+  }
+
+  forceRerender(): void {
+    if (this.root == null) {
+      return;
+    }
+    console.log("forcererender");
+    this.willRender(this.root);
+    this.rerender();
+  }
+
+  scheduleRerender(): void {
+    if (this.isRerenderingScheduled) {
+      return;
+    }
+    this.isRerenderingScheduled = true;
+    globalThis.requestAnimationFrame(() => {
+      this.rerender();
+    });
+  }
+
+  protected renderNextPending() {
+    this.isRerenderingScheduled = false;
+    const next = this.registry.getNextToRender();
+    if (next != null) {
+      next.render();
+    }
+  }
+
+  getParent(): Maybe<Node> {
+    return this.registry.getNextRendering();
+  }
+
+  rerender() {
+    $activeEngine = this;
+    this.renderNextPending();
+    $activeEngine = null;
+  }
+
+  shouldUpdateNode(node: Node): boolean {
+    return this.registry.shouldUpdateNode(node);
+  }
+}
+
+// TODO enhance with other engines, use DOMEngine for now
+export function getActiveEngine(): Maybe<DomEngine> {
+  return $activeEngine;
+}

package/src/DOM/IRenderCycle.ts

@@ -0,0 +1,9 @@
+import { Node } from "./Node";
+
+export interface IRenderCycle {
+  newNode(node: Node): void;
+  willRender(node: Node): void;
+  isRendering(node: Node): void;
+  didRender(node: Node): { justMounted: boolean };
+  dispose(node: Node): void;
+}

package/src/DOM/Key.ts

@@ -0,0 +1 @@
+export type Key = number | string;

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() {}
+}