feat: add reactive insert, setAttr, and on functions

Author: pavanscales

examples/10k-todos-stress.jsx

@@ -0,0 +1,61 @@
+// Direct JSX file, no framework — runs with your runtime
+import { signal, effect } from "../runtime/signals.js"
+import { insert, createElement, setProp } from "../runtime/dom.js"
+
+// Core signals
+const todos = signal([])
+const filter = signal("all")
+const input = signal("")
+
+// Add 10,000 todos initially
+for (let i = 0; i < 10000; i++) {
+  todos.value.push({ id: i, text: `Task #${i}`, done: false })
+}
+
+// Reactive rendering
+effect(() => {
+  const root = document.getElementById("app")
+  root.innerHTML = ""
+
+  const visible = todos.value.filter(todo => {
+    if (filter.value === "done") return todo.done
+    if (filter.value === "active") return !todo.done
+    return true
+  })
+
+  for (const todo of visible) {
+    const div = createElement("div")
+    div.className = "todo"
+    div.style = `padding:2px;border-bottom:1px solid #eee`
+    div.onclick = () => {
+      todo.done = !todo.done
+      todos.value = [...todos.value] // trigger update
+    }
+    div.textContent = `${todo.done ? "✅" : "⬜️"} ${todo.text}`
+    insert(root, div)
+  }
+})
+
+// Input UI
+window.onload = () => {
+  const inputBox = document.getElementById("input")
+  const filterAll = document.getElementById("filter-all")
+  const filterDone = document.getElementById("filter-done")
+  const filterActive = document.getElementById("filter-active")
+  const addButton = document.getElementById("add")
+
+  inputBox.oninput = (e) => input.value = e.target.value
+  addButton.onclick = () => {
+    if (!input.value.trim()) return
+    todos.value = [
+      ...todos.value,
+      { id: todos.value.length, text: input.value, done: false }
+    ]
+    input.value = ""
+    inputBox.value = ""
+  }
+
+  filterAll.onclick = () => filter.value = "all"
+  filterDone.onclick = () => filter.value = "done"
+  filterActive.onclick = () => filter.value = "active"
+}

runtime/dom.js

@@ -1,11 +1,8 @@
-import { effect } from './signals.js';
+import { effect, onCleanup } from './signals.js';
 
-// TEXT NODE POOL TO REUSE NODES
+// Text node reuse pool
 const pool = [];
 
-/**
- * Insert reactive or static content.
- */
 export function insert(parent, value) {
   if (typeof value === 'function') {
     const node = pool.pop() || document.createTextNode('');
@@ -19,14 +16,47 @@ export function insert(parent, value) {
         node.textContent = next == null ? '' : next;
       }
     });
+  } else if (Array.isArray(value)) {
+    insertArray(parent, value);
+  } else if (value instanceof Node) {
+    parent.appendChild(value);
   } else {
     parent.appendChild(document.createTextNode(value ?? ''));
   }
 }
 
-/**
- * Set attribute reactively.
- */
+function insertArray(parent, items) {
+  const nodes = [];
+
+  for (let item of items) {
+    if (typeof item === 'function') {
+      const node = document.createTextNode('');
+      parent.appendChild(node);
+      nodes.push(node);
+      let prev = null;
+
+      effect(() => {
+        const next = item();
+        if (next !== prev) {
+          prev = next;
+          node.textContent = next == null ? '' : next;
+        }
+      });
+    } else if (item instanceof Node) {
+      parent.appendChild(item);
+      nodes.push(item);
+    } else {
+      const node = document.createTextNode(item ?? '');
+      parent.appendChild(node);
+      nodes.push(node);
+    }
+  }
+
+  onCleanup(() => {
+    for (const node of nodes) node.remove();
+  });
+}
+
 export function setAttr(el, name, value) {
   if (typeof value === 'function') {
     let prev = null;
@@ -42,9 +72,38 @@ export function setAttr(el, name, value) {
   }
 }
 
-/**
- * Set event listeners.
- */
 export function on(el, event, handler) {
   el.addEventListener(event, handler);
+  onCleanup(() => el.removeEventListener(event, handler));
+}
+
+export function insertHTML(parent, html) {
+  parent.innerHTML = html;
+}
+
+export function clear(parent) {
+  while (parent.firstChild) {
+    parent.removeChild(parent.firstChild);
+  }
+}
+
+// 🔥 JSX helper: auto wraps elements with props and children
+export function createElement(tag, props, ...children) {
+  const el = typeof tag === 'function' ? tag(props || {}) : document.createElement(tag);
+
+  if (props) {
+    for (let [key, value] of Object.entries(props)) {
+      if (key.startsWith('on')) {
+        on(el, key.slice(2).toLowerCase(), value);
+      } else {
+        setAttr(el, key, value);
+      }
+    }
+  }
+
+  for (let child of children) {
+    insert(el, child);
+  }
+
+  return el;
 }

runtime/index.js

@@ -0,0 +1,8 @@
+// runtime/index.js
+import * as dom from './dom.js';
+import * as signals from './signals.js';
+
+export {
+  dom,
+  signals
+};

runtime/signals.js

@@ -0,0 +1,43 @@
+// runtime/signals.js
+
+export function signal(initial) {
+  let value = initial;
+  const subs = new Set();
+
+  const read = () => {
+    if (currentSubscriber) subs.add(currentSubscriber);
+    return value;
+  };
+
+  const write = newValue => {
+    if (newValue === value) return;
+    value = newValue;
+    for (const sub of subs) sub();
+  };
+
+  return [read, write];
+}
+
+let currentSubscriber = null;
+
+/**
+ * Tracks a reactive function.
+ * @param {Function} fn - effect that uses signals
+ */
+export function effect(fn) {
+  const wrapped = () => {
+    cleanup(wrapped);
+    currentSubscriber = wrapped;
+    fn();
+    currentSubscriber = null;
+  };
+  wrapped.deps = [];
+  wrapped();
+}
+
+function cleanup(effectFn) {
+  for (const dep of effectFn.deps || []) {
+    dep.delete(effectFn);
+  }
+  effectFn.deps = [];
+}