@derivesome/tree 0.1.1

package/src/brands.ts

@@ -0,0 +1,2 @@
+export const TreeNodeBrand = "TreeNode" as const;
+export type TreeNodeBrand = typeof TreeNodeBrand;

package/src/context.ts

@@ -0,0 +1,61 @@
+import { makeGlobalPrefixed, Stack } from "@derivesome/core";
+
+export const TreeScope = makeGlobalPrefixed(
+  class TreeScope {
+    cleanups: Set<() => void> = new Set();
+  },
+  "TreeScope",
+);
+export type TreeScope = InstanceType<typeof TreeScope>;
+
+export const TreeContext = makeGlobalPrefixed(
+  class TreeContext {
+    static scopes: Stack<TreeScope> = new Stack([new TreeScope()]);
+
+    static get scope(): TreeScope {
+      return this.scopes.current;
+    }
+
+    static push(): TreeScope {
+      const scope = new TreeScope();
+      this.scopes.push(scope);
+      return scope;
+    }
+
+    static pop() {
+      this.scopes.pop();
+    }
+
+    static scoped<T>(fn: (scope: TreeScope) => T): T {
+      const scope = this.push();
+      const ret = fn(scope);
+      this.pop();
+      return ret;
+    }
+  },
+  "TreeContext",
+);
+
+export type TreeContext = InstanceType<typeof TreeContext>;
+
+/**
+ * Register a teardown callback for the currently-mounting component.
+ * Must be called synchronously during component setup.
+ */
+export function onCleanup(fn: () => void): void {
+  TreeContext.scope.cleanups.add(fn);
+}
+
+/**
+ * Run `fn` inside a cleanup-collection scope.
+ * Returns `[result, dispose]` where `dispose()` calls every `onCleanup`
+ * registered during `fn`'s execution.
+ */
+export function withCleanupScope<T>(
+  fn: () => T,
+): [result: T, dispose: () => void] {
+  return TreeContext.scoped<[result: T, dispose: () => void]>((scope) => {
+    const result = fn();
+    return [result, () => scope.cleanups.forEach((c) => c())];
+  });
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./tree";
+export * from "./renderer";
+export * from "./context";
+export * from "./mount";
+export * from "./props";

package/src/index.ts~

@@ -0,0 +1,4 @@
+export * from './tree';
+export * from './renderer';
+export * from './context';
+export * from './mount';

package/src/mount.test.ts

@@ -0,0 +1,405 @@
+import * as F from "./velement";
+import { Renderer } from "./renderer";
+import { describe, expect, assert } from "vitest";
+import { mount } from "./mount";
+import { tn } from "./tree";
+import { derived, ref } from "@derivesome/core";
+
+type BrowserEnv = {
+  doc: F.VDocument;
+  root: F.VElement;
+  renderer: Renderer<F.VNode>;
+};
+
+const createEnv = (): BrowserEnv => {
+  const doc = F.createDocument();
+  const root = doc.createElement("div");
+
+  const renderer: Renderer<F.VNode> = {
+    createComment: (content) => doc.createComment(content),
+    createText: (content) => doc.createTextNode(content),
+    createElement: (tag) => doc.createElement(tag),
+    createMarker: (name) => doc.createComment(name || "?"),
+    insertBefore: (parent, child, before) => parent.insertBefore(child, before),
+    removeChild: (parent, child) => parent.removeChild(child),
+    setProp: (node, key, value) =>
+      (node as F.VElement).setAttribute(key, value + ""),
+    removeProp: (node, key) => (node as F.VElement).removeAttribute(key),
+    setText: (node, text) => ((node as F.VText).data = text),
+    moveRange: (parent, startMarker, endMarker, before) => {
+      const list = parent.childNodes;
+      const startIdx = list.indexOf(startMarker);
+      const endIdx = list.indexOf(endMarker);
+      if (startIdx === -1 || endIdx === -1) return;
+      const range = list.splice(startIdx, endIdx - startIdx + 1);
+      const insertAt = before === null ? list.length : list.indexOf(before);
+      list.splice(insertAt, 0, ...range);
+    },
+  };
+
+  return {
+    doc,
+    renderer,
+    root,
+  };
+};
+
+describe("mount", (it) => {
+  it("mounts simple text node", () => {
+    const env = createEnv();
+    mount(tn.value("foobar"), env.renderer, env.root);
+
+    expect(env.root.childNodes.length === 1);
+    const child = env.root.childNodes[0]!;
+    expect(child).toBeInstanceOf(F.VText);
+    expect(child).toMatchObject({ data: "foobar" });
+  });
+
+  it("mounts simple number node", () => {
+    const env = createEnv();
+    mount(tn.value(203), env.renderer, env.root);
+
+    expect(env.root.childNodes.length === 1);
+    const child = env.root.childNodes[0]!;
+    expect(child).toBeInstanceOf(F.VText);
+    expect(child).toMatchObject({ data: "203" });
+  });
+
+  it("mounts simple true node", () => {
+    const env = createEnv();
+    mount(tn.value(true), env.renderer, env.root);
+
+    expect(env.root.childNodes.length === 1);
+    const child = env.root.childNodes[0]!;
+    expect(child).toBeInstanceOf(F.VText);
+    expect(child).toMatchObject({ data: "" });
+  });
+
+  it("mounts simple false node", () => {
+    const env = createEnv();
+    mount(tn.value(false), env.renderer, env.root);
+
+    expect(env.root.childNodes.length === 1);
+    const child = env.root.childNodes[0]!;
+    expect(child).toBeInstanceOf(F.VText);
+    expect(child).toMatchObject({ data: "" });
+  });
+
+  it("mounts reactive number and response to updates", () => {
+    const env = createEnv();
+    const count = ref<number>(0);
+    mount(tn.value(count), env.renderer, env.root);
+
+    expect(env.root.childNodes.length === 1);
+    expect(env.root.childNodes[0]!).toBeInstanceOf(F.VText);
+    expect(env.root.childNodes[0]!).toMatchObject({ data: "0" });
+
+    count.set((x) => x + 1);
+
+    expect(env.root.childNodes[0]!).toMatchObject({ data: "1" });
+
+    count.set((x) => x + 1);
+
+    expect(env.root.childNodes[0]!).toMatchObject({ data: "2" });
+
+    count.set((x) => x + 1);
+
+    expect(env.root.childNodes[0]!).toMatchObject({ data: "3" });
+  });
+
+  it("mounts a list", () => {
+    const env = createEnv();
+    mount(
+      tn.element("ul", {
+        children: [
+          tn.element("li", { children: "item 1", key: 0 }),
+          tn.element("li", { children: "item 2", key: 1 }),
+          tn.element("li", { children: "item 3", key: 2 }),
+          tn.element("li", { children: "item 4", key: 3 }),
+        ],
+      }),
+      env.renderer,
+      env.root,
+    );
+    expect(env.root.childNodes.length === 1);
+    const child = env.root.childNodes[0]!;
+    expect(child).toBeInstanceOf(F.VElement);
+  });
+
+  it("mounts a reactive list", () => {
+    const env = createEnv();
+
+    let idCounter: number = 1;
+    type TodoItem = { title: string; id: number };
+    const todos = ref<TodoItem[]>([]);
+
+    const makeTodo = () =>
+      todos.set((items) => [
+        ...items,
+        { title: `Todo number ${idCounter}`, id: idCounter++ },
+      ]);
+    const removeTodo = (id: number) =>
+      todos.set((items) => items.filter((x) => x.id !== id));
+
+    mount(
+      tn.element("ul", {
+        children: tn.list(todos, (todo) =>
+          tn.element("li", { children: todo.title }),
+        ),
+      }),
+      env.renderer,
+      env.root,
+    );
+    expect(env.root.childNodes.length === 1);
+    const child = env.root.childNodes[0]!;
+    expect(child).toBeInstanceOf(F.VElement);
+    const ul = child as F.VElement;
+
+    expect(ul.childNodes.length === 0);
+    makeTodo();
+    expect(ul.childNodes.length === 1);
+    makeTodo();
+    expect(ul.childNodes.length === 2);
+    makeTodo();
+    expect(ul.childNodes.length === 3);
+
+    // The expected sequence of todo id's right now is [1, 2, 3] (since id's start at 1)
+    const expectedIds: number[] = [1, 2, 3];
+    for (let i = 0; i < ul.children.length; i++) {
+      const el = ul.children[i]!;
+      expect(el.textContent).toBe(`Todo number ${expectedIds[i]}`);
+    }
+
+    removeTodo(2);
+
+    expect(ul.childNodes.length === 2);
+
+    // The expected sequence of todo id's right now is [1, 3] (since we removed 2)
+    const nextExpectedIds: number[] = [1, 3];
+    for (let i = 0; i < ul.children.length; i++) {
+      const el = ul.children[i]!;
+      expect(el.textContent).toBe(`Todo number ${nextExpectedIds[i]}`);
+    }
+  });
+
+  it("infers a reactive list from a derived and mounts", () => {
+    const env = createEnv();
+
+    let idCounter: number = 1;
+    type TodoItem = { title: string; id: number };
+    const todos = ref<TodoItem[]>([]);
+
+    const makeTodo = () =>
+      todos.set((items) => [
+        ...items,
+        { title: `Todo number ${idCounter}`, id: idCounter++ },
+      ]);
+    const removeTodo = (id: number) =>
+      todos.set((items) => items.filter((x) => x.id !== id));
+
+    mount(
+      tn.element("ul", {
+        children: derived(() =>
+          todos.get().map((todo) => tn.element("li", { children: todo.title })),
+        ),
+      }),
+      env.renderer,
+      env.root,
+    );
+    expect(env.root.childNodes.length === 1);
+    const child = env.root.childNodes[0]!;
+    expect(child).toBeInstanceOf(F.VElement);
+    const ul = child as F.VElement;
+
+    expect(ul.childNodes.length === 0);
+    makeTodo();
+    expect(ul.childNodes.length === 1);
+    makeTodo();
+    expect(ul.childNodes.length === 2);
+    makeTodo();
+    expect(ul.childNodes.length === 3);
+
+    // The expected sequence of todo id's right now is [1, 2, 3] (since id's start at 1)
+    const expectedIds: number[] = [1, 2, 3];
+    for (let i = 0; i < ul.children.length; i++) {
+      const el = ul.children[i]!;
+      expect(el.textContent).toBe(`Todo number ${expectedIds[i]}`);
+    }
+
+    removeTodo(2);
+
+    expect(ul.childNodes.length === 2);
+
+    // The expected sequence of todo id's right now is [1, 3] (since we removed 2)
+    const nextExpectedIds: number[] = [1, 3];
+    for (let i = 0; i < ul.children.length; i++) {
+      const el = ul.children[i]!;
+      expect(el.textContent).toBe(`Todo number ${nextExpectedIds[i]}`);
+    }
+  });
+
+  it("sets static element attributes", () => {
+    const env = createEnv();
+    mount(
+      tn.element("a", { href: "https://example.com", id: "link" }),
+      env.renderer,
+      env.root,
+    );
+
+    const el = env.root.childNodes[0]! as F.VElement;
+    expect(el).toBeInstanceOf(F.VElement);
+    expect(el.getAttribute("href")).toBe("https://example.com");
+    expect(el.getAttribute("id")).toBe("link");
+  });
+
+  it("updates reactive element attribute when ref changes", () => {
+    const env = createEnv();
+    const disabled = ref<boolean | null>(null);
+    mount(tn.element("button", { disabled }), env.renderer, env.root);
+
+    const el = env.root.childNodes[0]! as F.VElement;
+    expect(el.hasAttribute("disabled")).toBe(false);
+
+    disabled.set(true);
+    expect(el.getAttribute("disabled")).toBe("true");
+
+    disabled.set(null);
+    expect(el.hasAttribute("disabled")).toBe(false);
+  });
+
+  it("mounts nested elements", () => {
+    const env = createEnv();
+    mount(
+      tn.element("div", {
+        children: tn.element("p", {
+          children: tn.element("span", { children: "hello" }),
+        }),
+      }),
+      env.renderer,
+      env.root,
+    );
+
+    const div = env.root.childNodes[0]! as F.VElement;
+    expect(div).toBeInstanceOf(F.VElement);
+    const p = div.children[0]!;
+    expect(p.tagName).toBe("P");
+    const span = p.children[0]!;
+    expect(span.tagName).toBe("SPAN");
+    expect(span.textContent).toBe("hello");
+  });
+
+  it("mounts a void node without adding children", () => {
+    const env = createEnv();
+    mount(tn.none(), env.renderer, env.root);
+    expect(env.root.childNodes.length).toBe(0);
+  });
+
+  it("mounts a function component", () => {
+    const env = createEnv();
+    const Greeting = (props: { name: string }) =>
+      tn.element("span", { children: `Hello, ${props.name}` });
+
+    mount(tn.fn(Greeting as any, { name: "world" }), env.renderer, env.root);
+
+    const span = env.root.childNodes[0]! as F.VElement;
+    expect(span).toBeInstanceOf(F.VElement);
+    expect(span.textContent).toBe("Hello, world");
+  });
+
+  it("cleanup removes mounted nodes from the DOM", () => {
+    const env = createEnv();
+    const cleanup = mount(
+      tn.element("p", { children: "bye" }),
+      env.renderer,
+      env.root,
+    );
+
+    expect(env.root.childNodes.length).toBe(1);
+    cleanup();
+    expect(env.root.childNodes.length).toBe(0);
+  });
+
+  it("cleanup stops reactive updates", () => {
+    const env = createEnv();
+    const count = ref(0);
+    const cleanup = mount(tn.value(count), env.renderer, env.root);
+
+    const textNode = env.root.childNodes[0]! as F.VText;
+    expect(textNode.data).toBe("0");
+
+    count.set(1);
+    expect(textNode.data).toBe("1");
+
+    cleanup();
+    expect(env.root.childNodes.length).toBe(0);
+
+    // Updating the ref after cleanup should not throw and should not
+    // affect the (already removed) text node.
+    count.set(2);
+    expect(textNode.data).toBe("1");
+  });
+
+  it("reorders list items when source order changes (explicit keys)", () => {
+    const env = createEnv();
+    type Item = { id: number; label: string };
+    const items = ref<Item[]>([
+      { id: 1, label: "A" },
+      { id: 2, label: "B" },
+      { id: 3, label: "C" },
+    ]);
+
+    mount(
+      tn.element("ul", {
+        children: tn.list(items, (item) =>
+          tn.element("li", { children: item.label, key: item.id }),
+        ),
+      }),
+      env.renderer,
+      env.root,
+    );
+
+    const ul = env.root.childNodes[0]! as F.VElement;
+    const labelsOf = () => ul.children.map((c) => c.textContent);
+
+    expect(labelsOf()).toEqual(["A", "B", "C"]);
+
+    // Reverse the order
+    items.set([
+      { id: 3, label: "C" },
+      { id: 1, label: "A" },
+      { id: 2, label: "B" },
+    ]);
+
+    expect(labelsOf()).toEqual(["C", "A", "B"]);
+  });
+
+  it("preserves existing DOM nodes when prepending to a keyed list", () => {
+    const env = createEnv();
+    type Item = { id: number; label: string };
+    const items = ref<Item[]>([{ id: 2, label: "B" }]);
+
+    mount(
+      tn.element("ul", {
+        children: tn.list(items, (item) =>
+          tn.element("li", { children: item.label, key: item.id }),
+        ),
+      }),
+      env.renderer,
+      env.root,
+    );
+
+    const ul = env.root.childNodes[0]! as F.VElement;
+    const originalB = ul.children[0]!;
+
+    items.set([
+      { id: 1, label: "A" },
+      { id: 2, label: "B" },
+    ]);
+
+    expect(ul.children.length).toBe(2);
+    expect(ul.children[0]!.textContent).toBe("A");
+    expect(ul.children[1]!.textContent).toBe("B");
+    // The B element should be the same DOM node (not recreated)
+    expect(ul.children[1]).toBe(originalB);
+  });
+});