@evgkch/reactive-dom 0.1.0 → 0.2.0

package/examples/pages/monitor/ui/App.ts

@@ -0,0 +1,207 @@
+import * as R from "@evgkch/reactive";
+import * as UI from "@evgkch/reactive-dom";
+import {
+  barClass,
+  cpu,
+  filter,
+  fmtUptime,
+  mem,
+  tasks,
+  uptime,
+} from "../model/state.js";
+import type { TaskEntry } from "../model/state.js";
+import { TaskItem } from "./TaskItem.js";
+
+export const App = UI.Struct(
+  `<div class="monitor">
+
+    <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://TASK_MONITOR</span>
+      </div>
+      <div class="titlebar-right" data-ref="uptime">UP 00:00:00</div>
+    </div>
+
+    <div class="metrics">
+      <div class="metric">
+        <div class="metric-label">CPU</div>
+        <div class="metric-bar"><div class="metric-fill" data-ref="cpu-bar"></div></div>
+        <div class="metric-val" data-ref="cpu-val">0%</div>
+      </div>
+      <div class="metric">
+        <div class="metric-label">MEM</div>
+        <div class="metric-bar"><div class="metric-fill" data-ref="mem-bar"></div></div>
+        <div class="metric-val" data-ref="mem-val">0%</div>
+      </div>
+      <div class="metric">
+        <div class="metric-label">PROCS</div>
+        <div class="metric-bar"><div class="metric-fill" data-ref="procs-bar" style="background:#4488ff"></div></div>
+        <div class="metric-val" data-ref="procs-val">0</div>
+      </div>
+    </div>
+
+    <div class="input-row">
+      <span class="prompt">$</span>
+      <input class="new-input" data-ref="input" placeholder="spawn process..." />
+      <span class="kbd-hint">↵ enter</span>
+    </div>
+
+    <ul class="task-list" data-ref="list"></ul>
+    <p class="empty"  data-ref="empty">no processes running</p>
+
+    <div class="statusbar">
+      <div class="status-left" data-ref="stats">
+        <span>procs: <span data-ref="total">0</span></span>
+        <span>running: <span data-ref="running">0</span></span>
+        <span>done: <span data-ref="done-count">0</span></span>
+      </div>
+      <div class="filters" data-ref="filters">
+        <button data-filter="all">all</button>
+        <button data-filter="active">running</button>
+        <button data-filter="done">done</button>
+      </div>
+    </div>
+
+    <div class="hotkeys">
+      <div class="hotkey"><kbd>↵</kbd> spawn</div>
+      <div class="hotkey"><kbd>1</kbd> all</div>
+      <div class="hotkey"><kbd>2</kbd> running</div>
+      <div class="hotkey"><kbd>3</kbd> done</div>
+      <div class="hotkey"><kbd>⌫</kbd> kill last</div>
+      <div class="hotkey"><kbd>ESC</kbd> clear</div>
+    </div>
+
+  </div>`,
+  (props, refs, ctx) => {
+    const input = refs.input as HTMLInputElement;
+
+    ctx.list(refs.list, tasks, (item) => ({ item }), TaskItem, {
+      onAdd: (el: Element) =>
+        el.animate(
+          [
+            { opacity: 0, transform: "translateX(-8px)" },
+            { opacity: 1, transform: "translateX(0)" },
+          ],
+          160
+        ),
+      onRemove: (el: Element, done: () => void) =>
+        el
+          .animate(
+            [
+              { opacity: 1, transform: "translateX(0)" },
+              { opacity: 0, transform: "translateX(8px)" },
+            ],
+            130
+          )
+          .finished.then(done),
+    });
+
+    ctx.batch(() => {
+      const v = cpu.get();
+      (refs["cpu-bar"] as HTMLElement).style.width = v + "%";
+      refs["cpu-bar"].className = "metric-fill " + barClass(v);
+      refs["cpu-val"].textContent = v + "%";
+    });
+
+    ctx.batch(() => {
+      const v = mem.get();
+      (refs["mem-bar"] as HTMLElement).style.width = v + "%";
+      refs["mem-bar"].className = "metric-fill " + barClass(v);
+      refs["mem-val"].textContent = v + "%";
+    });
+
+    ctx.batch(() => {
+      const total = tasks.length;
+      (refs["procs-bar"] as HTMLElement).style.width =
+        Math.min((total / 10) * 100, 100) + "%";
+      refs["procs-val"].textContent = String(total);
+    });
+
+    ctx.batch(() => {
+      refs.uptime.textContent = "UP " + fmtUptime(uptime.get());
+    });
+
+    ctx.batch(() => {
+      let running = 0;
+      tasks.forEach((t: TaskEntry) => {
+        if (!t.done) running++;
+      });
+      const total = tasks.length;
+      const done = total - running;
+      refs.total.textContent = String(total);
+      refs.running.textContent = String(running);
+      refs["done-count"].textContent = String(done);
+      (refs.empty as HTMLElement).style.display =
+        total === 0 ? "block" : "none";
+    });
+
+    ctx.batch(() => {
+      Array.from(refs.filters.querySelectorAll("[data-filter]")).forEach(
+        (btn) => {
+          btn.className =
+            filter.get() === btn.getAttribute("data-filter") ? "active" : "";
+        }
+      );
+    });
+
+    refs.filters.addEventListener("click", (e: Event) => {
+      const f = (e.target as HTMLElement)?.getAttribute?.("data-filter");
+      if (f) filter.set(f);
+    });
+
+    function addTask() {
+      const text = input.value.trim();
+      if (!text) return;
+      tasks.push(
+        R.Struct({ text, done: false }) as unknown as TaskEntry
+      );
+      input.value = "";
+    }
+
+    input.addEventListener("keydown", (e: KeyboardEvent) => {
+      if (e.key === "Enter") addTask();
+    });
+
+    document.addEventListener("keydown", (e: KeyboardEvent) => {
+      const inInput = document.activeElement === input;
+
+      if (e.key === "Escape") {
+        input.value = "";
+        input.blur();
+        return;
+      }
+
+      if (inInput) return;
+
+      if (e.key === "1") {
+        filter.set("all");
+        return;
+      }
+      if (e.key === "2") {
+        filter.set("active");
+        return;
+      }
+      if (e.key === "3") {
+        filter.set("done");
+        return;
+      }
+
+      if (e.key === "Backspace") {
+        for (let i = tasks.length - 1; i >= 0; i--) {
+          if (!tasks[i].done) {
+            tasks.splice(i, 1);
+            break;
+          }
+        }
+        return;
+      }
+
+      if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+        input.focus();
+      }
+    });
+  }
+);

package/examples/pages/monitor/ui/TaskItem.ts

@@ -0,0 +1,41 @@
+import * as UI from "@evgkch/reactive-dom";
+import { filter, tasks } from "../model/state.js";
+import type { TaskEntry } from "../model/state.js";
+
+export const TaskItem = UI.List(
+  `<li>
+    <input type="checkbox" class="task-check" data-ref="check" />
+    <span class="task-text"  data-ref="text"></span>
+    <span class="task-status" data-ref="status"></span>
+    <button class="task-remove" data-ref="remove">kill</button>
+  </li>`,
+  (props: { item: TaskEntry }, refs, ctx) => {
+    const check = refs.check as HTMLInputElement;
+    const el = refs.el as HTMLElement;
+    const removeBtn = refs.remove as HTMLButtonElement;
+
+    ctx.batch(() => {
+      refs.text.textContent = props.item.text;
+      check.checked = props.item.done;
+      refs.el.className = props.item.done ? "done" : "";
+      refs.status.textContent = props.item.done ? "DONE" : "RUNNING";
+
+      const f = filter.get();
+      el.style.display =
+        f === "all"
+          ? ""
+          : f === "active"
+            ? props.item.done
+              ? "none"
+              : ""
+            : props.item.done
+              ? ""
+              : "none";
+    });
+
+    check.onchange = () => {
+      props.item.done = check.checked;
+    };
+    removeBtn.onclick = () => tasks.splice(tasks.indexOf(props.item), 1);
+  }
+);

package/examples/{stream/styles.css → pages/stream/index.css}

@@ -1,38 +1,4 @@
-@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;
-}
+@import url("../../shared/styles/common.css");
 
 .panel {
   width: 560px;
@@ -44,46 +10,6 @@ body {
   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;
-}
-
 .stream-toolbar {
   display: flex;
   align-items: center;

package/examples/pages/stream/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Stream — reactive-dom</title>
+  <link rel="stylesheet" href="./index.css" />
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./index.ts"></script>
+</body>
+</html>

package/examples/pages/stream/index.ts

@@ -0,0 +1,15 @@
+import { configureLogging } from "../../shared/lib/index.js";
+import { addRandomLog, logs, levelFilter } from "./model/state.js";
+import { App } from "./ui/App.js";
+
+configureLogging();
+
+if (typeof document !== "undefined" && document.getElementById("app")) {
+  setInterval(addRandomLog, 800);
+}
+
+export { App, logs, levelFilter };
+
+if (typeof document !== "undefined" && document.getElementById("app")) {
+  document.getElementById("app")!.appendChild(App({}));
+}

package/examples/pages/stream/model/state.ts

@@ -0,0 +1,45 @@
+import * as R from "@evgkch/reactive";
+
+export interface LogEntry {
+  ts: number;
+  level: string;
+  msg: string;
+}
+
+export const levelFilter = R.Value("all");
+export const logs = R.List([]) as unknown as LogEntry[] & { watch(fn: (p: unknown) => void): () => void };
+
+export const LEVELS = ["info", "warn", "err"];
+export const MESSAGES = [
+  "Connection established",
+  "Handshake complete",
+  "Buffer overflow risk",
+  "Retry attempt 3",
+  "Cache miss",
+  "Timeout after 2000ms",
+  "Invalid payload",
+  "Rate limit exceeded",
+  "Endpoint unreachable",
+  "Auth failed",
+];
+
+export function fmtTime(ts: number): string {
+  const d = new Date(ts);
+  return (
+    String(d.getHours()).padStart(2, "0") +
+    ":" +
+    String(d.getMinutes()).padStart(2, "0") +
+    ":" +
+    String(d.getSeconds()).padStart(2, "0") +
+    "." +
+    String(Math.floor(d.getMilliseconds() / 100)).padStart(1, "0")
+  );
+}
+
+export function addRandomLog(): void {
+  const level = LEVELS[Math.floor(Math.random() * LEVELS.length)];
+  const msg = MESSAGES[Math.floor(Math.random() * MESSAGES.length)];
+  logs.push(
+    R.Struct({ ts: Date.now(), level, msg }) as unknown as LogEntry
+  );
+}

package/examples/pages/stream/ui/App.ts

@@ -0,0 +1,70 @@
+import * as UI from "@evgkch/reactive-dom";
+import { levelFilter, logs } from "../model/state.js";
+import { LogLine } from "./LogLine.js";
+
+export 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://STREAM</span>
+      </div>
+      <div class="titlebar-right" data-ref="count">0 events</div>
+    </div>
+    <div class="stream-toolbar">
+      <div class="stream-filters" data-ref="filters">
+        <button data-level="all">all</button>
+        <button data-level="info">info</button>
+        <button data-level="warn">warn</button>
+        <button data-level="err">err</button>
+      </div>
+      <button class="stream-clear" data-ref="clear">clear</button>
+    </div>
+    <ul class="log-list" data-ref="list"></ul>
+    <p class="empty-logs" data-ref="empty">waiting for events...</p>
+  </div>`,
+  (props, refs, ctx) => {
+    ctx.list(refs.list, logs, (item) => ({ item }), LogLine, {
+      onAdd: (el: Element) => {
+        el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 120 });
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            refs.list.scrollTop = refs.list.scrollHeight;
+          });
+        });
+      },
+    });
+
+    function updateCount(): void {
+      refs.count.textContent =
+        logs.length + " event" + (logs.length !== 1 ? "s" : "");
+      (refs.empty as HTMLElement).style.display =
+        logs.length === 0 ? "block" : "none";
+    }
+    updateCount();
+    ctx.watch(logs, updateCount);
+
+    function updateFilters(): void {
+      const current = levelFilter.get();
+      Array.from(refs.filters.querySelectorAll("[data-level]")).forEach(
+        (btn) => {
+          btn.className =
+            current === btn.getAttribute("data-level") ? "active" : "";
+        }
+      );
+    }
+    ctx.batch(updateFilters);
+    ctx.watch(levelFilter, updateFilters);
+
+    refs.filters.addEventListener("click", (e: Event) => {
+      const level = (e.target as HTMLElement)?.getAttribute?.("data-level");
+      if (level) levelFilter.set(level);
+    });
+
+    refs.clear.addEventListener("click", () => {
+      logs.splice(0, logs.length);
+    });
+  }
+);

package/examples/pages/stream/ui/LogLine.ts

@@ -0,0 +1,27 @@
+import * as UI from "@evgkch/reactive-dom";
+import { levelFilter } from "../model/state.js";
+import type { LogEntry } from "../model/state.js";
+import { fmtTime } from "../model/state.js";
+
+export const LogLine = UI.List(
+  `<li>
+    <span class="log-ts" data-ref="ts"></span>
+    <span class="log-level" data-ref="level"></span>
+    <span class="log-msg" data-ref="msg"></span>
+  </li>`,
+  (props: { item: LogEntry }, refs, ctx) => {
+    function sync(): void {
+      const { level, msg, ts } = props.item;
+      refs.ts.textContent = fmtTime(ts);
+      refs.level.textContent = level.toUpperCase();
+      refs.level.className = "log-level " + level;
+      refs.msg.textContent = msg;
+
+      const f = levelFilter.get();
+      (refs.el as HTMLElement).style.display =
+        f === "all" ? "" : f === level ? "" : "none";
+    }
+    ctx.batch(sync);
+    ctx.watch(levelFilter, sync);
+  }
+);

package/examples/shared/lib/index.ts

@@ -0,0 +1,19 @@
+import * as R from "@evgkch/reactive";
+import * as UI from "@evgkch/reactive-dom";
+
+export function configureLogging(): void {
+  if (typeof document !== "undefined" && document.getElementById("app")) {
+    R.configure({
+      log: {
+        logger: {
+          log(msg: string, meta?: unknown) {
+            console.log(msg, meta ?? "");
+          },
+        },
+      },
+    });
+    UI.configure({ log: true });
+  }
+}
+
+export { R, UI };

package/examples/{console/styles.css → shared/styles/common.css}

@@ -34,16 +34,6 @@ body {
   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;
@@ -84,48 +74,6 @@ body {
   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;
@@ -134,29 +82,9 @@ body {
   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);
+.input-row {
+  display: flex;
+  align-items: center;
+  padding: 0 0.75rem;
+  background: var(--bg);
 }

package/examples/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": false,
+    "noImplicitAny": false,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "lib": ["ES2020", "DOM"]
+  },
+  "include": ["**/*.ts"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evgkch/reactive-dom",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "DOM bindings for @evgkch/reactive: Struct, List, Slot, ReactiveElement",
   "type": "module",
   "sideEffects": false,
@@ -19,19 +19,21 @@
   ],
   "scripts": {
     "build": "tsc",
-    "build:gh-pages": "node scripts/prepare-gh-pages.js",
-    "test": "npm run build && node --test test/*.spec.js",
-    "examples": "serve . -p 5173",
+    "build:gh-pages": "npm run build && tsc -p examples --noEmit && vite build",
+    "test": "npm run build && node --import tsx --test test/*.spec.js",
+    "examples": "vite",
+    "examples:build": "vite build",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "@evgkch/reactive": "^1.0.3"
+    "@evgkch/reactive": "^1.1.0"
   },
   "devDependencies": {
-    "@evgkch/reactive": "^1.0.3",
+    "@evgkch/reactive": "^1.1.0",
     "jsdom": "^25.0.1",
-    "serve": "^14.2.0",
-    "typescript": "^5.0.0"
+    "tsx": "^4.19.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0"
   },
   "author": "Evgenii Kucherenko",
   "license": "ISC",