@derivesome/tree-web 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,6 @@
+import { mount as mountTree, tnu } from "@derivesome/tree";
+import { renderer } from "./renderer";
+
+export function mount(node: unknown, parent: Node): () => void {
+  return mountTree(tnu.normalizeOne(node), renderer, parent);
+}

package/src/mount.ts~

@@ -0,0 +1,10 @@
+import { mount as mountTree, tnu } from '@derivesome/tree';
+import { renderer } from './renderer';
+
+
+export function mount(
+  node: unknown,
+  parent: Node,
+): (() => void) {
+  return mountTree(tnu.normalizeOne(node), renderer, parent);
+}

package/src/renderer.ts

@@ -0,0 +1,133 @@
+import { makeGlobalPrefixed } from "@derivesome/core";
+import { type Renderer } from "@derivesome/tree";
+import { cssPropsToString } from "./css";
+
+const eventPropRe = /^on([A-Z][a-zA-Z]*)/;
+
+function propToEventName(key: string): string | null {
+  const m = eventPropRe.exec(key);
+  return m ? m[1]!.toLowerCase() : null;
+}
+
+export const renderer: Renderer<Node> = {
+  createComment: (content) => document.createComment(content),
+  createText: (content) => document.createTextNode(content),
+  createElement: (tag) => document.createElement(tag),
+  createMarker: (name) => document.createComment(name || "?"),
+  insertBefore: (parent, child, before) => parent.insertBefore(child, before),
+  removeChild: (parent, child) => parent.removeChild(child),
+  setText: (node, text) => ((node as Text).data = text),
+  moveRange: (parent, startMarker, endMarker, before) => {
+    const list = Array.from(parent.childNodes) as Node[];
+    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);
+  },
+
+  setProp(node: globalThis.Node, key: string, value: unknown): void {
+    if (!(node instanceof Element)) return;
+
+    const eventName = propToEventName(key);
+    if (eventName !== null) {
+      // Store listener on the element so we can clean it up
+      const stored = getStoredListeners(node);
+      const prev = stored.get(key);
+      if (prev) node.removeEventListener(eventName, prev);
+      const listener = value as EventListenerOrEventListenerObject;
+      node.addEventListener(eventName, listener);
+      stored.set(key, listener);
+      return;
+    }
+
+    if (key === "class" || key === "className") {
+      node.setAttribute("class", String(value));
+      return;
+    }
+
+    if (key === "style") {
+      if (typeof value === "string") {
+        (node as HTMLElement).style.cssText = value;
+      } else if (typeof value === "object" && value !== null) {
+        (node as Element).setAttribute(key, cssPropsToString(value));
+      }
+      return;
+    }
+
+    if (key in node) {
+      // Prefer IDL attribute (e.g. value, checked, disabled)
+      (node as unknown as Record<string, unknown>)[key] = value;
+    } else {
+      node.setAttribute(key, String(value));
+    }
+  },
+
+  removeProp(node: globalThis.Node, key: string): void {
+    if (!(node instanceof Element)) return;
+
+    const eventName = propToEventName(key);
+    if (eventName !== null) {
+      const stored = getStoredListeners(node);
+      const prev = stored.get(key);
+      if (prev) {
+        node.removeEventListener(eventName, prev);
+        stored.delete(key);
+      }
+      return;
+    }
+
+    if (key === "class" || key === "className") {
+      node.removeAttribute("class");
+      return;
+    }
+
+    if (key === "style") {
+      (node as HTMLElement).removeAttribute("style");
+      return;
+    }
+
+    if (key in node) {
+      (node as unknown as Record<string, unknown>)[key] = null;
+    } else {
+      node.removeAttribute(key);
+    }
+  },
+  //moveRange(
+  //  parent: globalThis.Node,
+  //  startMarker: globalThis.Node,
+  //  endMarker: globalThis.Node,
+  //  before: globalThis.Node | null,
+  //): void {
+  //  // Collect nodes from startMarker to endMarker inclusive
+  //  const nodes: globalThis.Node[] = [];
+  //  let current: globalThis.ChildNode | null =
+  //    startMarker as globalThis.ChildNode;
+  //  while (current !== null) {
+  //    nodes.push(current);
+  //    if (current === endMarker) break;
+  //    current = current.nextSibling;
+  //  }
+  //  // Re-insert in collected order before the target position
+  //  for (const n of nodes) {
+  //    parent.insertBefore(n, before);
+  //  }
+  //},
+};
+
+const listenerMap = makeGlobalPrefixed(
+  new WeakMap<Element, Map<string, EventListenerOrEventListenerObject>>(),
+  "EventListenerMap",
+);
+
+function getStoredListeners(
+  el: Element,
+): Map<string, EventListenerOrEventListenerObject> {
+  let m = listenerMap.get(el);
+  if (!m) {
+    m = new Map();
+    listenerMap.set(el, m);
+  }
+  return m;
+}

package/src/renderer.ts~

@@ -0,0 +1,133 @@
+import { makeGlobalPrefixed } from "@derivesome/core";
+import { type Renderer } from "@derivesome/tree";
+import { cssPropsToString } from "./css";
+
+const eventPropRe = /^on([A-Z][a-zA-Z]*)/;
+
+function propToEventName(key: string): string | null {
+  const m = eventPropRe.exec(key);
+  return m ? m[1]!.toLowerCase() : null;
+}
+
+export const renderer: Renderer<Node> = {
+  createComment: (content) => document.createComment(content),
+  createText: (content) => document.createTextNode(content),
+  createElement: (tag) => document.createElement(tag),
+  createMarker: (name) => document.createComment(name || "?"),
+  insertBefore: (parent, child, before) => parent.insertBefore(child, before),
+  removeChild: (parent, child) => parent.removeChild(child),
+  setText: (node, text) => ((node as Text).data = text),
+  moveRange: (parent, startMarker, endMarker, before) => {
+    const list = Array.from(parent.childNodes) as Node[];
+    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);
+  },
+
+  setProp(node: globalThis.Node, key: string, value: unknown): void {
+    if (!(node instanceof Element)) return;
+
+    const eventName = propToEventName(key);
+    if (eventName !== null) {
+      // Store listener on the element so we can clean it up
+      const stored = getStoredListeners(node);
+      const prev = stored.get(key);
+      if (prev) node.removeEventListener(eventName, prev);
+      const listener = value as EventListenerOrEventListenerObject;
+      node.addEventListener(eventName, listener);
+      stored.set(key, listener);
+      return;
+    }
+
+    if (key === "class" || key === "className") {
+      node.setAttribute("class", String(value));
+      return;
+    }
+
+    if (key === "style") {
+      if (typeof value === "string") {
+        (node as HTMLElement).style.cssText = value;
+      } else if (typeof value === "object" && value !== null) {
+        (node as Element).setAttribute(key, cssPropsToString(value));
+      }
+      return;
+    }
+
+    if (key in node) {
+      // Prefer IDL attribute (e.g. value, checked, disabled)
+      (node as unknown as Record<string, unknown>)[key] = value;
+    } else {
+      node.setAttribute(key, String(value));
+    }
+  },
+
+  removeProp(node: globalThis.Node, key: string): void {
+    if (!(node instanceof Element)) return;
+
+    const eventName = propToEventName(key);
+    if (eventName !== null) {
+      const stored = getStoredListeners(node);
+      const prev = stored.get(key);
+      if (prev) {
+        node.removeEventListener(eventName, prev);
+        stored.delete(key);
+      }
+      return;
+    }
+
+    if (key === "class" || key === "className") {
+      node.removeAttribute("class");
+      return;
+    }
+
+    if (key === "style") {
+      (node as HTMLElement).removeAttribute("style");
+      return;
+    }
+
+    if (key in node) {
+      (node as unknown as Record<string, unknown>)[key] = null;
+    } else {
+      node.removeAttribute(key);
+    }
+  },
+  //moveRange(
+  //  parent: globalThis.Node,
+  //  startMarker: globalThis.Node,
+  //  endMarker: globalThis.Node,
+  //  before: globalThis.Node | null,
+  //): void {
+  //  // Collect nodes from startMarker to endMarker inclusive
+  //  const nodes: globalThis.Node[] = [];
+  //  let current: globalThis.ChildNode | null =
+  //    startMarker as globalThis.ChildNode;
+  //  while (current !== null) {
+  //    nodes.push(current);
+  //    if (current === endMarker) break;
+  //    current = current.nextSibling;
+  //  }
+  //  // Re-insert in collected order before the target position
+  //  for (const n of nodes) {
+  //    parent.insertBefore(n, before);
+  //  }
+  //},
+};
+
+const listenerMap = makeGlobalPrefixed(new WeakMap<
+  Element,
+  Map<string, EventListenerOrEventListenerObject>
+>(), 'EventListenerMap');
+
+function getStoredListeners(
+  el: Element,
+): Map<string, EventListenerOrEventListenerObject> {
+  let m = listenerMap.get(el);
+  if (!m) {
+    m = new Map();
+    listenerMap.set(el, m);
+  }
+  return m;
+}