@evgkch/reactive-dom 0.1.0

package/examples/stream/app.js

@@ -0,0 +1,136 @@
+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 });
+}
+
+const levelFilter = R.Value("all");
+const logs = R.List([]);
+
+const LEVELS = ["info", "warn", "err"];
+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",
+];
+
+function fmtTime(ts) {
+  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")
+  );
+}
+
+function addRandomLog() {
+  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 }));
+}
+
+let timer;
+if (typeof document !== "undefined" && document.getElementById("app")) {
+  timer = setInterval(addRandomLog, 800);
+}
+
+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, refs, ctx) => {
+    ctx.batch(() => {
+      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.style.display =
+        f === "all" ? "" : f === level ? "" : "none";
+    });
+  }
+);
+
+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) => {
+        el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 120 });
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            const list = refs.list;
+            list.scrollTop = list.scrollHeight;
+          });
+        });
+      },
+    });
+
+    // React to list changes only (count, empty) — Watch fires on push/splice, no Batch on every add
+    function updateCount() {
+      refs.count.textContent = logs.length + " event" + (logs.length !== 1 ? "s" : "");
+      refs.empty.style.display = logs.length === 0 ? "block" : "none";
+    }
+    updateCount();
+    ctx.watch(logs, updateCount);
+
+    ctx.batch(() => {
+      const current = levelFilter.get();
+      for (const btn of refs.filters.querySelectorAll("[data-level]")) {
+        btn.className = current === btn.getAttribute("data-level") ? "active" : "";
+      }
+    });
+
+    refs.filters.addEventListener("click", (e) => {
+      const level = e.target?.getAttribute?.("data-level");
+      if (level) levelFilter.set(level);
+    });
+
+    refs.clear.addEventListener("click", () => {
+      logs.splice(0, logs.length);
+    });
+  }
+);
+
+export { App, logs, levelFilter };
+if (typeof document !== "undefined" && document.getElementById("app")) {
+  document.getElementById("app").appendChild(App({}));
+}

package/examples/stream/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>Stream — 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/stream/styles.css

@@ -0,0 +1,192 @@
+@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;
+}
+
+.stream-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.35rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.stream-filters {
+  display: flex;
+  gap: 0;
+}
+
+.stream-filters button {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 10px;
+  background: none;
+  border: 1px solid transparent;
+  color: var(--muted);
+  cursor: pointer;
+  padding: 0.15rem 0.5rem;
+  letter-spacing: 0.05em;
+  transition: color 0.1s, border-color 0.1s;
+}
+
+.stream-filters button:hover {
+  color: var(--ink);
+}
+
+.stream-filters button.active {
+  color: var(--accent);
+  border-color: var(--border);
+}
+
+.stream-clear {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 10px;
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--muted);
+  cursor: pointer;
+  padding: 0.15rem 0.5rem;
+}
+
+.stream-clear:hover {
+  color: var(--red);
+}
+
+.log-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: scroll;
+  list-style: none;
+}
+
+.log-list li {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  padding: 0.35rem 0.75rem;
+  border-bottom: 1px solid #1a1a1a;
+  font-size: 11px;
+  visibility: visible;
+  opacity: 1;
+}
+
+.log-list li:last-child {
+  border-bottom: none;
+}
+
+.log-ts {
+  color: var(--dim);
+  flex-shrink: 0;
+  width: 72px;
+}
+
+.log-level {
+  flex-shrink: 0;
+  width: 42px;
+  text-align: right;
+  font-weight: 700;
+  font-size: 10px;
+  letter-spacing: 0.05em;
+}
+
+.log-level.info { color: var(--blue); }
+.log-level.warn { color: var(--yellow); }
+.log-level.err { color: var(--red); }
+
+.log-msg {
+  flex: 1;
+  word-break: break-word;
+  color: var(--ink);
+}
+
+.empty-logs {
+  padding: 1.25rem 0.75rem;
+  font-size: 11px;
+  color: var(--dim);
+}
+
+.empty-logs::before {
+  content: "// waiting for events...";
+  color: var(--border);
+}

package/examples/styles.css

@@ -0,0 +1,81 @@
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");
+
+:root {
+  --bg: #080808;
+  --surface: #0f0f0f;
+  --border: #2a2a2a;
+  --ink: #d0d0d0;
+  --muted: #666;
+  --dim: #444;
+  --accent: #39ff14;
+}
+
+body {
+  font-family: "JetBrains Mono", monospace;
+  background: var(--bg);
+  color: var(--ink);
+  max-width: 32rem;
+  margin: 2rem auto;
+  padding: 0 1rem;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+h1 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  color: var(--muted);
+  font-size: 11px;
+  margin-bottom: 1rem;
+}
+
+p code {
+  background: var(--border);
+  padding: 0.15rem 0.4rem;
+  border-radius: 2px;
+  font-size: 11px;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+ul li {
+  margin: 0.5rem 0;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 2px;
+}
+
+ul li a {
+  display: block;
+  padding: 0.6rem 0.75rem;
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
+  transition: background 0.1s, color 0.1s;
+}
+
+ul li a:hover {
+  background: #131313;
+  color: var(--ink);
+}
+
+ul li a::before {
+  content: "→ ";
+  color: var(--muted);
+}
+
+ul li span {
+  display: block;
+  font-size: 11px;
+  color: var(--muted);
+  margin-top: 0.2rem;
+  padding-left: 1rem;
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@evgkch/reactive-dom",
+  "version": "0.1.0",
+  "description": "DOM bindings for @evgkch/reactive: Struct, List, Slot, ReactiveElement",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "examples"
+  ],
+  "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",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@evgkch/reactive": "^1.0.3"
+  },
+  "devDependencies": {
+    "@evgkch/reactive": "^1.0.3",
+    "jsdom": "^25.0.1",
+    "serve": "^14.2.0",
+    "typescript": "^5.0.0"
+  },
+  "author": "Evgenii Kucherenko",
+  "license": "ISC",
+  "engines": {
+    "node": ">=18"
+  }
+}