@evgkch/reactive-dom 0.1.0

package/dist/list.js

@@ -0,0 +1,79 @@
+import { createElement } from "./create-element.js";
+import { parseTemplate } from "./create-element.js";
+import { logListAdd, logListMount, logListRemove } from "./log.js";
+import { unmount } from "./unmount.js";
+/**
+ * Mount reactive list into container. Patches via Watch.
+ * On remove: unmount(el), then onRemove(el, done) or el.remove().
+ */
+export function mountList(container, source, factory, hooks) {
+    const nodes = new Map();
+    function addItem(item, ref, runOnAdd = true) {
+        const el = factory(item);
+        nodes.set(item, el);
+        container.insertBefore(el, ref);
+        if (runOnAdd) {
+            logListAdd(el);
+            hooks?.onAdd?.(el);
+        }
+        return el;
+    }
+    function removeItem(item) {
+        const el = nodes.get(item);
+        if (!el)
+            return;
+        nodes.delete(item);
+        logListRemove(el);
+        unmount(el);
+        if (hooks?.onRemove) {
+            hooks.onRemove(el, () => el.remove());
+        }
+        else {
+            el.remove();
+        }
+    }
+    logListMount(container);
+    // Initial mount: no onAdd so items are visible immediately (onAdd often animates from opacity 0)
+    source.forEach((item) => addItem(item, null, false));
+    const stopWatch = source.watch(({ start, removed, added }) => {
+        removed.forEach((item) => removeItem(item));
+        let ref = container.children[start] ?? null;
+        for (let i = added.length - 1; i >= 0; i--) {
+            ref = addItem(added[i], ref);
+        }
+    });
+    const stop = () => {
+        stopWatch();
+        nodes.forEach((el) => {
+            unmount(el);
+            el.remove();
+        });
+        nodes.clear();
+    };
+    return stop;
+}
+function isElement(x) {
+    return typeof x === "object" && x !== null && x.nodeType === 1;
+}
+function isWatchable(x) {
+    return typeof x === "object" && x !== null && typeof x.watch === "function" && typeof x.forEach === "function";
+}
+/**
+ * List(html, setup) returns a dual-purpose function:
+ * - (props) => Element — create one item (for use in ctx.list as itemFactory)
+ * - (container, source, propsFactory, hooks?) => () => void — mount list, returns stop
+ */
+export function List(html, setup) {
+    const tmpl = parseTemplate(html);
+    function listComponent(...args) {
+        if (args.length >= 2 && isElement(args[0]) && isWatchable(args[1])) {
+            const container = args[0];
+            const source = args[1];
+            const propsFactory = (args[2] ?? ((x) => ({ item: x })));
+            const hooks = args[3];
+            return mountList(container, source, (item) => listComponent(propsFactory(item)), hooks);
+        }
+        return createElement(tmpl, setup, args[0]);
+    }
+    return listComponent;
+}

package/dist/log.d.ts

@@ -0,0 +1,18 @@
+export type LogLevel = false | true | "verbose";
+export declare function setLogLevel(level: LogLevel): void;
+export interface ConfigureOptions {
+    log?: LogLevel;
+}
+export declare function configure(opts?: ConfigureOptions): void;
+export declare function getLogLevel(): LogLevel;
+/** Stable id for a component root element — use in console to find references. */
+export declare function getComponentId(el: Element): string;
+export declare function logMount(el: Element): void;
+export declare function logUnmount(el: Element): void;
+export declare function logListMount(container: Element): void;
+export declare function logListAdd(el: Element): void;
+export declare function logListRemove(el: Element): void;
+export declare function logSlotMount(container: Element): void;
+export declare function logSlotSwap(container: Element, prev: Element | null, next: Element | null): void;
+export declare function logSlotStop(container: Element): void;
+//# sourceMappingURL=log.d.ts.map

package/dist/log.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"log.d.ts","sourceRoot":"","sources":["../src/log.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;AAOhD,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI,CAEjD;AAED,MAAM,WAAW,gBAAgB;IAC7B,GAAG,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,wBAAgB,SAAS,CAAC,IAAI,GAAE,gBAAqB,GAAG,IAAI,CAE3D;AAED,wBAAgB,WAAW,IAAI,QAAQ,CAEtC;AAED,kFAAkF;AAClF,wBAAgB,cAAc,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,CAOlD;AAUD,wBAAgB,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAK1C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAI5C;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,CAIrD;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAI5C;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAI/C;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,CAIrD;AAED,wBAAgB,WAAW,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAMhG;AAED,wBAAgB,WAAW,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,CAIpD"}

package/dist/log.js

@@ -0,0 +1,84 @@
+const PREFIX = "[reactive-dom]";
+let logLevel = false;
+const componentIds = new WeakMap();
+let nextId = 0;
+export function setLogLevel(level) {
+    logLevel = level;
+}
+export function configure(opts = {}) {
+    if (opts.log !== undefined)
+        setLogLevel(opts.log);
+}
+export function getLogLevel() {
+    return logLevel;
+}
+/** Stable id for a component root element — use in console to find references. */
+export function getComponentId(el) {
+    let id = componentIds.get(el);
+    if (id === undefined) {
+        id = `c${++nextId}`;
+        componentIds.set(el, id);
+    }
+    return id;
+}
+function log(msg, id, extra) {
+    if (!logLevel)
+        return;
+    const parts = [PREFIX, msg];
+    if (id)
+        parts.push(id);
+    if (extra)
+        parts.push(extra);
+    console.log(parts.join(" "));
+}
+export function logMount(el) {
+    if (!logLevel)
+        return;
+    const id = getComponentId(el);
+    const tag = el.tagName.toLowerCase();
+    log("mount", id, `<${tag}>`);
+}
+export function logUnmount(el) {
+    if (!logLevel)
+        return;
+    const id = getComponentId(el);
+    log("unmount", id);
+}
+export function logListMount(container) {
+    if (!logLevel)
+        return;
+    const id = getComponentId(container);
+    log("list mount", id);
+}
+export function logListAdd(el) {
+    if (!logLevel)
+        return;
+    const id = getComponentId(el);
+    log("list add", id);
+}
+export function logListRemove(el) {
+    if (!logLevel)
+        return;
+    const id = getComponentId(el);
+    log("list remove", id);
+}
+export function logSlotMount(container) {
+    if (!logLevel)
+        return;
+    const id = getComponentId(container);
+    log("slot mount", id);
+}
+export function logSlotSwap(container, prev, next) {
+    if (!logLevel)
+        return;
+    const id = getComponentId(container);
+    const prevId = prev ? getComponentId(prev) : "-";
+    const nextId = next ? getComponentId(next) : "-";
+    log("slot swap", id, `${prevId} → ${nextId}`);
+}
+export function logSlotStop(container) {
+    if (!logLevel)
+        return;
+    const id = getComponentId(container);
+    log("slot stop", id);
+}

package/dist/slot.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Conditional slot. Getter returns Element | null.
+ * On change — unmount old, insert new. Anchor Comment fixes position.
+ */
+export declare function Slot(container: Element, getter: () => Element | null): () => void;
+//# sourceMappingURL=slot.d.ts.map

package/dist/slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../src/slot.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAgB,IAAI,CAChB,SAAS,EAAE,OAAO,EAClB,MAAM,EAAE,MAAM,OAAO,GAAG,IAAI,GAC7B,MAAM,IAAI,CAgCZ"}

package/dist/slot.js

@@ -0,0 +1,38 @@
+import { Batch } from "@evgkch/reactive";
+import { logSlotMount, logSlotStop, logSlotSwap } from "./log.js";
+import { unmount } from "./unmount.js";
+/**
+ * Conditional slot. Getter returns Element | null.
+ * On change — unmount old, insert new. Anchor Comment fixes position.
+ */
+export function Slot(container, getter) {
+    const anchor = document.createComment("slot");
+    container.appendChild(anchor);
+    logSlotMount(container);
+    let current = null;
+    const stopBatch = Batch(() => {
+        const next = getter();
+        if (next === current)
+            return;
+        if (current) {
+            unmount(current);
+            current.remove();
+        }
+        if (next) {
+            container.insertBefore(next, anchor);
+        }
+        logSlotSwap(container, current, next);
+        current = next;
+    });
+    const stop = () => {
+        stopBatch();
+        logSlotStop(container);
+        if (current) {
+            unmount(current);
+            current.remove();
+            current = null;
+        }
+        anchor.remove();
+    };
+    return stop;
+}

package/dist/struct.d.ts

@@ -0,0 +1,11 @@
+import type { Refs } from "./ctx.js";
+import type { Context } from "./ctx.js";
+export type { Refs } from "./ctx.js";
+export { Context } from "./ctx.js";
+export type StructSetup<P> = (props: P, refs: Refs, ctx: Context) => void;
+/**
+ * Struct(html, setup) → factory. Template parsed once; each call clones and runs setup(props, refs, ctx).
+ * Stop stored in WeakMap; use UI.unmount(el) to teardown.
+ */
+export declare function Struct<P>(html: string, setup: StructSetup<P>): (props: P) => Element;
+//# sourceMappingURL=struct.d.ts.map

package/dist/struct.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"struct.d.ts","sourceRoot":"","sources":["../src/struct.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAExC,YAAY,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;AAE1E;;;GAGG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAGpF"}

package/dist/struct.js

@@ -0,0 +1,10 @@
+import { createElement, parseTemplate } from "./create-element.js";
+export { Context } from "./ctx.js";
+/**
+ * Struct(html, setup) → factory. Template parsed once; each call clones and runs setup(props, refs, ctx).
+ * Stop stored in WeakMap; use UI.unmount(el) to teardown.
+ */
+export function Struct(html, setup) {
+    const tmpl = parseTemplate(html);
+    return (props) => createElement(tmpl, setup, props);
+}

package/dist/unmount.d.ts

@@ -0,0 +1,6 @@
+export declare function setComponentStop(el: Element, stop: () => void): void;
+/** Unsubscribe component and all its child Batch/List/Slot. */
+export declare function unmount(el: Element): void;
+/** Unmount and remove element in one call. */
+export declare function remove(el: Element): void;
+//# sourceMappingURL=unmount.d.ts.map

package/dist/unmount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unmount.d.ts","sourceRoot":"","sources":["../src/unmount.ts"],"names":[],"mappings":"AAOA,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,IAAI,CAEpE;AAED,+DAA+D;AAC/D,wBAAgB,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAOzC;AAED,8CAA8C;AAC9C,wBAAgB,MAAM,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAGxC"}

package/dist/unmount.js

@@ -0,0 +1,22 @@
+import { logUnmount } from "./log.js";
+/**
+ * WeakMap: Element → stop. No leak — GC collects with the element.
+ */
+const componentMap = new WeakMap();
+export function setComponentStop(el, stop) {
+    componentMap.set(el, stop);
+}
+/** Unsubscribe component and all its child Batch/List/Slot. */
+export function unmount(el) {
+    const stop = componentMap.get(el);
+    if (stop) {
+        logUnmount(el);
+        stop();
+        componentMap.delete(el);
+    }
+}
+/** Unmount and remove element in one call. */
+export function remove(el) {
+    unmount(el);
+    el.remove();
+}

package/examples/base.css

@@ -0,0 +1,7 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}

package/examples/console/app.js

@@ -0,0 +1,97 @@
+import * as R from "@evgkch/reactive";
+import * as UI from "@evgkch/reactive-dom";
+
+if (typeof document !== "undefined" && document.getElementById("app")) {
+  R.configure({ log: true });
+  UI.configure({ log: true });
+}
+
+// Reactive state: list of { type: 'in'|'out'|'err', text }
+const lines = R.List([
+  R.Struct({ type: "out", text: "Welcome. Type help, ping, or echo <msg>." }),
+]);
+
+const replies = {
+  help: "Commands: help, ping, echo <msg>, clear.",
+  ping: "pong",
+  clear: "",
+};
+
+function respond(cmd) {
+  const t = cmd.trim().toLowerCase();
+  if (t === "clear") return null;
+  if (t === "help") return replies.help;
+  if (t === "ping") return replies.ping;
+  if (t.startsWith("echo ")) return cmd.slice(5).trim() || "(empty)";
+  return `Unknown: ${cmd}`;
+}
+
+const LineItem = UI.List(
+  `<div class="line"></div>`,
+  (props, refs, ctx) => {
+    ctx.batch(() => {
+      const { type, text } = props.item;
+      refs.el.textContent = text;
+      refs.el.className = "line " + type;
+    });
+  }
+);
+
+const App = UI.Struct(
+  `<div class="panel">
+    <div class="titlebar">
+      <div class="titlebar-left">
+        <span class="dot dot-red"></span>
+        <span class="dot dot-yellow"></span>
+        <span class="dot dot-green"></span>
+        <span class="titlebar-title">SYS://CONSOLE</span>
+      </div>
+      <div class="titlebar-right" data-ref="count">0 lines</div>
+    </div>
+    <div class="output" data-ref="output"></div>
+    <div class="input-row">
+      <span class="prompt">$</span>
+      <input class="console-input" data-ref="input" placeholder="command..." />
+    </div>
+  </div>`,
+  (props, refs, ctx) => {
+    const input = refs.input;
+
+    ctx.list(refs.output, lines, (item) => ({ item }), LineItem, {
+      onAdd: () => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            refs.output.scrollTop = refs.output.scrollHeight;
+          });
+        });
+      },
+    });
+
+    ctx.batch(() => {
+      refs.count.textContent = lines.length + " line" + (lines.length !== 1 ? "s" : "");
+    });
+
+    function submit() {
+      const text = input.value.trim();
+      if (!text) return;
+      lines.push(R.Struct({ type: "in", text }));
+      input.value = "";
+      const out = respond(text);
+      if (out !== null) {
+        lines.push(R.Struct({ type: "out", text: out }));
+      } else {
+        lines.splice(0, lines.length);
+        lines.push(R.Struct({ type: "out", text: "Welcome. Type help, ping, or echo <msg>." }));
+      }
+    }
+
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") submit();
+    });
+  }
+);
+
+export { App, lines };
+if (typeof document !== "undefined" && document.getElementById("app")) {
+  document.getElementById("app").appendChild(App({}));
+}

package/examples/console/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Console — reactive-dom</title>
+  <script type="importmap">
+  {
+    "imports": {
+      "@evgkch/reactive": "/node_modules/@evgkch/reactive/dist/index.js",
+      "@evgkch/reactive-dom": "/dist/index.js"
+    }
+  }
+  </script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./app.js"></script>
+</body>
+</html>

package/examples/console/styles.css

@@ -0,0 +1,162 @@
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg: #080808;
+  --surface: #0f0f0f;
+  --border: #2a2a2a;
+  --ink: #d0d0d0;
+  --muted: #666;
+  --dim: #444;
+  --accent: #39ff14;
+  --red: #ff3333;
+  --yellow: #ffcc00;
+  --blue: #4488ff;
+}
+
+body {
+  font-family: "JetBrains Mono", monospace;
+  background: var(--bg);
+  color: var(--ink);
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.panel {
+  width: 560px;
+  max-width: 100%;
+  height: 400px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  display: flex;
+  flex-direction: column;
+}
+
+.titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.4rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.titlebar-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.dot-red { background: var(--red); }
+.dot-yellow { background: var(--yellow); }
+.dot-green { background: var(--accent); }
+
+.titlebar-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--ink);
+  letter-spacing: 0.1em;
+  margin-left: 0.5rem;
+}
+
+.titlebar-right {
+  font-size: 10px;
+  color: var(--muted);
+  letter-spacing: 0.05em;
+}
+
+.output {
+  flex: 1;
+  min-height: 0;
+  overflow-y: scroll;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.line {
+  padding: 0.2rem 0;
+  font-size: 12px;
+  word-break: break-word;
+}
+
+.line.in {
+  color: var(--accent);
+}
+
+.line.in::before {
+  content: "> ";
+  color: var(--muted);
+}
+
+.line.out {
+  color: var(--ink);
+}
+
+.line.out::before {
+  content: "  ";
+}
+
+.line.err {
+  color: var(--red);
+}
+
+.input-row {
+  display: flex;
+  align-items: center;
+  padding: 0 0.75rem;
+  background: var(--bg);
+}
+
+.prompt {
+  color: var(--accent);
+  font-weight: 700;
+  margin-right: 0.5rem;
+  flex-shrink: 0;
+  font-size: 12px;
+}
+
+.console-input {
+  flex: 1;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+  background: transparent;
+  border: none;
+  padding: 0.55rem 0;
+  color: var(--ink);
+  outline: none;
+  caret-color: var(--accent);
+}
+
+.console-input::placeholder {
+  color: var(--dim);
+}
+
+.empty {
+  padding: 0.5rem 0;
+  font-size: 11px;
+  color: var(--dim);
+}
+
+.empty::before {
+  content: "// type a command and press Enter";
+  color: var(--border);
+}

package/examples/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>reactive-dom examples</title>
+  <link rel="stylesheet" href="./base.css">
+  <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+  <h1>Examples</h1>
+  <p>From repo root: <code>npm run build && npm run examples</code>, then open the links below.</p>
+  <ul>
+    <li>
+      <a href="./monitor/">Monitor</a>
+      <span>Fake process monitor: list, add, toggle, kill, CPU/MEM/procs, hotkeys</span>
+    </li>
+    <li>
+      <a href="./console/">Console</a>
+      <span>REPL-style console: type help, ping, echo &lt;msg&gt;, clear</span>
+    </li>
+    <li>
+      <a href="./stream/">Stream</a>
+      <span>Live log stream: filter by level (info/warn/err), clear</span>
+    </li>
+  </ul>
+</body>
+</html>