@derivesome/tree 0.1.1

package/src/mount.test.ts~

@@ -0,0 +1,375 @@
+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]}`);
+    }
+
+    console.log(F.toHTML(ul, '  '));
+
+  });
+
+  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);
+  });
+})

package/src/mount.ts

@@ -0,0 +1,332 @@
+import { derived, isReference } from "@derivesome/core";
+import { TreeContext, withCleanupScope } from "./context";
+import { Renderer } from "./renderer";
+import {
+  tnu,
+  TreeNode,
+  TreeNodeElement,
+  TreeNodeFunction,
+  TreeNodeList,
+  TreeNodeValue,
+  TreeNodeVoid,
+} from "./tree";
+import { forwardProps, TreeNodeProps } from "./props";
+
+type Cleanup = () => void;
+const noop: Cleanup = () => {};
+
+type MountContext = {
+  forwardedProps: TreeNodeProps | null;
+};
+
+const createMountContext = (): MountContext => ({
+  forwardedProps: null,
+});
+
+function isEventKey(key: string): boolean {
+  return key.length > 2 && key.startsWith("on") && /^[A-Z]/.test(key[2]!);
+}
+
+function applyProp<N>(
+  renderer: Renderer<N>,
+  el: N,
+  key: string,
+  value: unknown,
+): void {
+  if (value === null || value === undefined || value === false) {
+    renderer.removeProp(el, key);
+  } else {
+    renderer.setProp(el, key, value);
+  }
+}
+
+function setupProp<N>(
+  renderer: Renderer<N>,
+  el: N,
+  key: string,
+  value: unknown,
+): Cleanup | null {
+  if (key === "children") return null;
+  if (key === "ref") return null;
+  if (isReference(value)) {
+    const r = value;
+    applyProp(renderer, el, key, r.peek());
+    return r.observe((val) => applyProp(renderer, el, key, val));
+  }
+
+  if (Array.isArray(value)) {
+    const cleanups = value
+      .map((x) => setupProp(renderer, el, key, x))
+      .filter((v) => v !== null);
+    return () => {
+      cleanups.forEach((fn) => fn());
+    };
+  }
+
+  if (typeof value === "function" && !isEventKey(key)) {
+    // Computed prop — wrap in derived so dependency tracking works
+    const d = derived(value as () => unknown);
+    return d.observe((val) => applyProp(renderer, el, key, val), {
+      immediate: true,
+    });
+  }
+
+  // Static value or event handler
+  applyProp(renderer, el, key, value);
+  return null;
+}
+
+function mountElement<N>(
+  ctx: MountContext,
+  node: TreeNodeElement,
+  renderer: Renderer<N>,
+  parent: N,
+  before: N | null,
+): Cleanup {
+  const props = ctx.forwardedProps
+    ? forwardProps(node.props, ctx.forwardedProps)
+    : node.props;
+
+  const el = renderer.createElement(node.tag);
+  const cleanups: Cleanup[] = [];
+
+  for (const [key, value] of Object.entries(props)) {
+    const cleanup = setupProp(renderer, el, key, value);
+    if (cleanup) cleanups.push(cleanup);
+  }
+
+  cleanups.push(
+    mountChildren(
+      { ...ctx, forwardedProps: null },
+      node.children,
+      renderer,
+      el,
+      null,
+    ),
+  );
+  renderer.insertBefore(parent, el, before);
+
+  if (typeof props["ref"] === "function") {
+    (props["ref"] as (el: N) => void)(el);
+  }
+
+  return () => {
+    cleanups.forEach((c) => c());
+    renderer.removeChild(parent, el);
+  };
+}
+
+type ItemState<N> = {
+  itemStart: N;
+  itemEnd: N;
+  cleanup: Cleanup;
+  node: TreeNode;
+};
+
+function mountList<N>(
+  ctx: MountContext,
+  node: TreeNodeList,
+  renderer: Renderer<N>,
+  parent: N,
+  before: N | null,
+): Cleanup {
+  const startMarker = renderer.createMarker("each");
+  const endMarker = renderer.createMarker("/each");
+  renderer.insertBefore(parent, startMarker, before);
+  renderer.insertBefore(parent, endMarker, before);
+
+  const itemMap = new Map<string | number, ItemState<N>>();
+
+  const update = (list: TreeNode[]): void => {
+    const newKeys = list.map((item, i) => {
+      const k = item.props.key;
+      return typeof k === "string" || typeof k === "number" ? k : i;
+    });
+    const newKeySet = new Set(newKeys);
+
+    // Remove items that dropped out of the list
+    for (const [key, state] of itemMap) {
+      if (!newKeySet.has(key)) {
+        state.cleanup();
+        renderer.removeChild(parent, state.itemStart);
+        renderer.removeChild(parent, state.itemEnd);
+        itemMap.delete(key);
+      }
+    }
+
+    // Create newly-appeared items (appended before endMarker for now; reordered below)
+    for (let i = 0; i < list.length; i++) {
+      const key = newKeys[i]!;
+      const item = list[i]!;
+      if (!itemMap.has(key)) {
+        const itemStart = renderer.createMarker(`[${String(key)}]`);
+        const itemEnd = renderer.createMarker(`[/${String(key)}]`);
+        renderer.insertBefore(parent, itemStart, endMarker);
+        renderer.insertBefore(parent, itemEnd, endMarker);
+        const cleanup = mountNode(ctx, item, renderer, parent, itemEnd);
+        itemMap.set(key, { itemStart, itemEnd, cleanup, node: item });
+      } else {
+        // Index-based keys (no explicit key prop) mean the same position may
+        // now hold different content. Remount so the DOM stays in sync.
+        const isIndexKey = key === i;
+        if (isIndexKey) {
+          const state = itemMap.get(key)!;
+          if (state.node !== item) {
+            state.cleanup();
+            state.cleanup = mountNode(
+              ctx,
+              item,
+              renderer,
+              parent,
+              state.itemEnd,
+            );
+            state.node = item;
+          }
+        }
+      }
+    }
+
+    // Reorder to match the new key sequence.
+    // Process from the end so we can use each item's start marker as the
+    // insertion cursor for the preceding item.
+    let cursor: N = endMarker;
+    for (let i = newKeys.length - 1; i >= 0; i--) {
+      const key = newKeys[i]!;
+      const state = itemMap.get(key)!;
+      renderer.moveRange(parent, state.itemStart, state.itemEnd, cursor);
+      cursor = state.itemStart;
+    }
+  };
+
+  const unsub = node.items.observe(update, { immediate: true });
+
+  return () => {
+    unsub();
+    for (const [, state] of itemMap) {
+      state.cleanup();
+      renderer.removeChild(parent, state.itemStart);
+      renderer.removeChild(parent, state.itemEnd);
+    }
+    itemMap.clear();
+    renderer.removeChild(parent, startMarker);
+    renderer.removeChild(parent, endMarker);
+  };
+}
+
+function resolveText(content: unknown): string {
+  if (typeof content === "boolean") return "";
+  if (isReference(content)) return String(content.peek());
+  if (typeof content === "function")
+    return String((content as () => string | number | boolean)());
+  return String(content);
+}
+
+function mountValue<N>(
+  _ctx: MountContext,
+  node: TreeNodeValue,
+  renderer: Renderer<N>,
+  parent: N,
+  before: N | null,
+): Cleanup {
+  const domText = renderer.createText(resolveText(node.value));
+  renderer.insertBefore(parent, domText, before);
+
+  let unsub: Cleanup | null = null;
+
+  const content = node.value;
+
+  if (isReference(content)) {
+    unsub = content.observe((val) => {
+      renderer.setText(domText, typeof val === "boolean" ? "" : String(val));
+    });
+  } else if (typeof content === "function") {
+    const d = derived(content as () => string | number | boolean);
+    unsub = d.observe((val) => {
+      renderer.setText(domText, typeof val === "boolean" ? "" : String(val));
+    });
+  }
+
+  return () => {
+    unsub?.();
+    renderer.removeChild(parent, domText);
+  };
+}
+
+function mountFn<N>(
+  ctx: MountContext,
+  node: TreeNodeFunction,
+  renderer: Renderer<N>,
+  parent: N,
+  before: N | null,
+): Cleanup {
+  return TreeContext.scoped(() => {
+    const [childNode, scopeCleanup] = withCleanupScope(() =>
+      tnu.normalizeOne(node.fn(node.props)),
+    );
+    const mountCleanup = mountNode(
+      { ...ctx, forwardedProps: forwardProps({}, node.props) },
+      childNode,
+      renderer,
+      parent,
+      before,
+    );
+    return () => {
+      mountCleanup();
+      scopeCleanup();
+    };
+  });
+}
+
+function mountVoid<N>(
+  _ctx: MountContext,
+  _node: TreeNodeVoid,
+  _renderer: Renderer<N>,
+  _parent: N,
+  _before: N | null,
+): Cleanup {
+  return noop;
+}
+
+function mountChildren<N>(
+  ctx: MountContext,
+  children: TreeNode[],
+  renderer: Renderer<N>,
+  parent: N,
+  before: N | null,
+): Cleanup {
+  const cleanups = children.map((child) =>
+    mountNode(ctx, child, renderer, parent, before),
+  );
+  return () => cleanups.forEach((c) => c());
+}
+
+function mountNode<N>(
+  ctx: MountContext,
+  node: TreeNode,
+  renderer: Renderer<N>,
+  parent: N,
+  before: N | null,
+): Cleanup {
+  switch (node.type) {
+    case "element":
+      return mountElement(ctx, node, renderer, parent, before);
+    case "list":
+      return mountList(ctx, node, renderer, parent, before);
+    case "value":
+      return mountValue(ctx, node, renderer, parent, before);
+    case "function":
+      return mountFn(ctx, node, renderer, parent, before);
+    case "void":
+      return mountVoid(ctx, node, renderer, parent, before);
+  }
+}
+
+export function mount<N>(
+  node: TreeNode,
+  renderer: Renderer<N>,
+  parent: N,
+): Cleanup {
+  const ctx = createMountContext();
+
+  return mountNode(ctx, node, renderer, parent, null);
+}