@derivesome/tree 0.1.1

package/src/mount.ts~

@@ -0,0 +1,306 @@
+import { derived, isPlainObject, 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 (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);
+
+  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);
+}

package/src/props.ts

@@ -0,0 +1,99 @@
+import {
+  derived,
+  isReference,
+  LooseDict,
+  unique,
+  zipMax,
+} from "@derivesome/core";
+
+export type TreeNodeProps = LooseDict & {
+  children?: unknown;
+  style?: unknown;
+  id?: unknown;
+  key?: string | number;
+};
+
+export const FORWARDED_PROPS: Set<string> = new Set([
+  "class",
+  "style",
+  "key",
+  "id",
+]);
+
+export const isForwardedProp = (key: string): boolean => {
+  if (FORWARDED_PROPS.has(key)) return true;
+  // event handlers
+  if (key.length > 2 && key.startsWith("on")) return true;
+  return false;
+};
+
+const mergeProp = (a: unknown, b: unknown, key: string): unknown => {
+  if (typeof a === "undefined") return b;
+  if (typeof b === "undefined") return a;
+  if (a === null && b !== null) return b;
+  if (b === null && a !== null) return a;
+
+  if (key === "children") return a;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    const z = zipMax(a, b);
+    return unique(z.map(([x, y]) => mergeProp(x, y, key)));
+  }
+  if (isReference(a) && isReference(b)) {
+    return derived(() => mergeProp(a.get(), b.get(), key));
+  }
+  if (typeof a === "function" && typeof b === "function") {
+    return (...args: any[]) => mergeProp(a(...args), b(...args), key);
+  }
+
+  if (key === "class") {
+    if (typeof a === "string" && typeof b === "string") {
+      return unique([a, b]).join(" ").trim();
+    } else if (Array.isArray(a) && typeof b === "string") {
+      if (a.every((v) => typeof v === "string") || a.length <= 0) {
+        return unique([...a, b]);
+      }
+    } else if (typeof a === "string" && Array.isArray(b)) {
+      if (b.every((v) => typeof v === "string") || b.length <= 0) {
+        return unique([a, ...b]);
+      }
+    }
+  }
+
+  return a ?? b;
+};
+
+export const mergeProps = (
+  a: TreeNodeProps,
+  b: TreeNodeProps,
+): TreeNodeProps => {
+  const merged: TreeNodeProps = { ...a };
+
+  const keys = unique([...Object.keys(a), ...Object.keys(b)]);
+
+  for (const k of keys) {
+    const valueA = a[k];
+    const valueB = b[k];
+    merged[k] = mergeProp(valueA, valueB, k);
+  }
+
+  return merged;
+};
+
+export const forwardProps = (
+  a: TreeNodeProps,
+  b: TreeNodeProps,
+): TreeNodeProps => {
+  const merged: TreeNodeProps = { ...a };
+
+  const keys = unique([...Object.keys(a), ...Object.keys(b)]).filter((x) =>
+    isForwardedProp(x),
+  );
+
+  for (const k of keys) {
+    const valueA = a[k];
+    const valueB = b[k];
+    merged[k] = mergeProp(valueA, valueB, k);
+  }
+
+  return merged;
+};

package/src/props.ts~

@@ -0,0 +1,86 @@
+import {
+  derived,
+  isReference,
+  LooseDict,
+  unique,
+  zipMax,
+} from "@derivesome/core";
+
+export type TreeNodeProps = LooseDict & {
+  children?: unknown;
+  style?: unknown;
+  id?: unknown;
+  key?: string | number;
+};
+
+export const FORWARDED_PROPS: Set<string> = new Set([
+  "class",
+  "style",
+  "key",
+  "id",
+]);
+
+export const isForwardedProp = (key: string): boolean => {
+  if (FORWARDED_PROPS.has(key)) return true;
+  // event handlers
+  if (key.length > 2 && key.startsWith("on")) return true;
+  return false;
+};
+
+const mergeProp = (a: unknown, b: unknown, key: string): unknown => {
+  if (typeof a === "undefined") return b;
+  if (typeof b === "undefined") return a;
+  if (a === null && b !== null) return b;
+  if (b === null && a !== null) return a;
+
+  if (key === "children") return a;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    const z = zipMax(a, b);
+    return z.map(([x, y]) => mergeProp(x, y, key));
+  }
+  if (isReference(a) && isReference(b)) {
+    return derived(() => mergeProp(a.get(), b.get(), key));
+  }
+  if (typeof a === "function" && typeof b === "function") {
+    return (...args: any[]) => mergeProp(a(...args), b(...args), key);
+  }
+
+  if (key === "class") {
+    if (typeof a === "string" && typeof b === "string") {
+      return [a, b].join(" ").trim();
+    }
+  }
+
+  return a ?? b;
+};
+
+export const mergeProps = (
+  a: TreeNodeProps,
+  b: TreeNodeProps,
+): TreeNodeProps => {
+  const merged: TreeNodeProps = { ...a };
+
+  const keys = unique([...Object.keys(a), ...Object.keys(b)]);
+
+  for (const k of keys) {
+    const valueA = a[k];
+    const valueB = b[k];
+    merged[k] = mergeProp(valueA, valueB, k);
+  }
+
+  return merged;
+};
+
+export const forwardProps = (a: TreeNodeProps, b: TreeNodeProps): TreeNodeProps => {
+  const merged: TreeNodeProps = { ...a };
+
+  const keys = unique([...Object.keys(a), ...Object.keys(b)]).filter(x => isForwardedProp(x));
+
+  for (const k of keys) {
+    const valueA = a[k];
+    const valueB = b[k];
+    merged[k] = mergeProp(valueA, valueB, k);
+  }
+
+  return merged;
+}

package/src/renderer.ts

@@ -0,0 +1,37 @@
+export interface Renderer<N> {
+  /** Create a native element node for the given tag */
+  createElement(tag: string): N;
+
+  /** Create a native text node */
+  createText(content: string): N;
+
+  /** Create a native text node */
+  createComment(content: string): N;
+
+  /** Create an inert marker node used as anchors for dynamic ranges */
+  createMarker(name?: string): N;
+
+  /** Insert `child` before `before` in `parent`, or append if `before` is null */
+  insertBefore(parent: N, child: N, before: N | null): void;
+
+  /** Remove `child` from `parent` */
+  removeChild(parent: N, child: N): void;
+
+  /** Update a text node's string content */
+  setText(node: N, content: string): void;
+
+  /** Set a property or attribute on an element */
+  setProp(node: N, key: string, value: unknown): void;
+
+  /** Remove a property or attribute from an element */
+  removeProp(node: N, key: string): void;
+
+  /**
+   * Move a contiguous range of sibling nodes — from `startMarker` through
+   * `endMarker` inclusive, along with everything between them — to immediately
+   * before `before` in `parent`. If `before` is null, appends to `parent`.
+   *
+   * Used by the `list` reconciler to reorder keyed items without unmounting.
+   */
+  moveRange(parent: N, startMarker: N, endMarker: N, before: N | null): void;
+}

package/src/renderer.ts~

@@ -0,0 +1,37 @@
+export interface Renderer<N> {
+  /** Create a native element node for the given tag */
+  createElement(tag: string): N;
+
+  /** Create a native text node */
+  createText(content: string): N;
+
+  /** Create a native text node */
+  createComment(content: string): N;
+
+  /** Create an inert marker node used as anchors for dynamic ranges */
+  createMarker(name?: string): N;
+
+  /** Insert `child` before `before` in `parent`, or append if `before` is null */
+  insertBefore(parent: N, child: N, before: N | null): void;
+
+  /** Remove `child` from `parent` */
+  removeChild(parent: N, child: N): void;
+
+  /** Update a text node's string content */
+  setText(node: N, content: string): void;
+
+  /** Set a property or attribute on an element */
+  setProp(node: N, key: string, value: unknown): void;
+
+  /** Remove a property or attribute from an element */
+  removeProp(node: N, key: string): void;
+
+  /**
+   * Move a contiguous range of sibling nodes — from `startMarker` through
+   * `endMarker` inclusive, along with everything between them — to immediately
+   * before `before` in `parent`. If `before` is null, appends to `parent`.
+   *
+   * Used by the `list` reconciler to reorder keyed items without unmounting.
+   */
+  moveRange(parent: N, startMarker: N, endMarker: N, before: N | null): void;
+}

package/src/tree-node-like.ts

@@ -0,0 +1,8 @@
+import { TreeNodeBrand } from "./brands";
+import { TreeNodeProps } from "./props";
+
+export type TreeNodeLike = {
+  type: string;
+  [TreeNodeBrand]: true;
+  props: TreeNodeProps;
+};

package/src/tree-node-like.ts~

@@ -0,0 +1,6 @@
+import { TreeNodeBrand } from "./brands";
+
+export type TreeNodeLike = {
+  type: string;
+  [TreeNodeBrand]: true;
+}