@uistate/renderer 1.0.0 → 1.0.2

package/README.md

@@ -33,9 +33,9 @@ A reactive counter. No React. No Babel. No bundler. No innerHTML. Just HTML attr
 
 ## Three Primitives
 
-### 1. Delegated Actions (DOM → Store)
+### 1. Delegated Actions (DOM -> Store)
 
-Attach store writes to user events. Three delegated listeners on the root handle everything — they survive DOM mutations and never need re-wiring.
+Attach store writes to user events. Three delegated listeners on the root handle everything; they survive DOM mutations and never need re-wiring.
 
 | Attribute | Event | Example |
 |---|---|---|
@@ -58,9 +58,9 @@ Attach store writes to user events. Three delegated listeners on the root handle
 | `set="flag:false"` | `store.set('flag', false)` |
 | `set="val:null"` | `store.set('val', null)` |
 
-### 2. Direct Node Binding (Store → DOM)
+### 2. Direct Node Binding (Store -> DOM)
 
-Bind store paths directly to DOM node properties. Each binding creates one EventState subscription and performs surgical updates — no re-rendering, no diffing.
+Bind store paths directly to DOM node properties. Each binding creates one EventState subscription and performs surgical updates; no re-rendering, no diffing.
 
 | Attribute | What it does | Example |
 |---|---|---|
@@ -124,16 +124,16 @@ const cleanup = mount(store);
 import { parseSetExpr, evalExpr, parsePush } from '@uistate/renderer';
 
 parseSetExpr('count:increment');
-// → { path: 'count', expr: 'increment' }
+// -> { path: 'count', expr: 'increment' }
 
 evalExpr('increment', 5);
-// → 6
+// -> 6
 
 parsePush('push(draft)');
-// → { source: 'draft' }
+// -> { source: 'draft' }
 ```
 
-These are the same functions the renderer uses internally. Because they're pure, they run in Node with zero dependencies — enabling the self-test.
+These are the same functions the renderer uses internally. Because they're pure, they run in Node with zero dependencies, enabling the self-test.
 
 ## Testing
 
@@ -171,11 +171,11 @@ HTML is the skeleton. The store is the brain. Bindings are the nerves.
 
 ## Philosophy
 
-The renderer exists to prove that **the state layer is the real product**. The same `@uistate/core` store works with React, Vue, Svelte, Angular — or with this 268-line renderer that needs nothing but a browser.
+The renderer exists to prove that **the state layer is the real product**. The same `@uistate/core` store works with React, Vue, Svelte, Angular, or with this 268-line renderer that needs nothing but a browser.
 
 ```
-A React Component (for comparison):     f(props, ownState, lifecycle, hooks, context, memo, refs) → VDOM → DOM
-A UIstate Renderer (for comparison):     mount(store) → bind-text="path" → textContent
+A React Component (for comparison):     f(props, ownState, lifecycle, hooks, context, memo, refs) -> VDOM -> DOM
+A UIstate Renderer (for comparison):     mount(store) -> bind-text="path" -> textContent
 ```
 
 ## Author

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uistate/renderer",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Direct-binding reactive renderer for @uistate/core. Zero build step.",
   "type": "module",
   "main": "index.js",

package/renderer.js

@@ -1,18 +1,18 @@
 /**
- * @uistate/renderer — Direct-binding reactive renderer for EventState
+ * @uistate/renderer: Direct-binding reactive renderer for EventState
  *
  * Copyright (c) 2025 Ajdin Imsirovic
  *
  * Three primitives:
- *   1. Delegated Actions (DOM → Store): set, set-blur, set-enter
- *   2. Direct Node Binding (Store → DOM): bind-text, bind-value, bind-data-*, bind-focus
+ *   1. Delegated Actions (DOM -> Store): set, set-blur, set-enter
+ *   2. Direct Node Binding (Store -> DOM): bind-text, bind-value, bind-data-*, bind-focus
  *   3. Keyed Collections: each="path" + <template>
  *
  * No templates. No innerHTML. No interpolation. No diffing.
  * Event delegation survives DOM mutations. Bindings are surgical.
  */
 
-// ── Pure helpers ──────────────────────────────────────────────────────
+// -- Pure helpers ------------------------------------------------------
 
 const BOUND = Symbol('r2');
 
@@ -43,12 +43,12 @@ export function parsePush(expr) {
   return m ? { source: m[1].trim() } : null;
 }
 
-// ── Mount ─────────────────────────────────────────────────────────────
+// -- Mount -------------------------------------------------------------
 
 export function mount(store, root = document.body) {
   const subs = []; // { node, unsub }
 
-  // ── Binding helpers ──
+  // -- Binding helpers --
 
   function addBinding(path, node, updateFn) {
     updateFn(store.get(path));
@@ -65,7 +65,7 @@ export function mount(store, root = document.body) {
     }
   }
 
-  // ── Scan for bind-* attributes ──
+  // -- Scan for bind-* attributes --
 
   function scanBindings(el) {
     const nodes = el instanceof Element ? [el, ...el.querySelectorAll('*')] : [];
@@ -108,7 +108,7 @@ export function mount(store, root = document.body) {
         });
       }
 
-      // bind-data-* → dataset, bind-attr-* → setAttribute
+      // bind-data-* -> dataset, bind-attr-* -> setAttribute
       for (const attr of Array.from(node.attributes)) {
         if (attr.name.startsWith('bind-data-')) {
           const dName = attr.name.slice(10);
@@ -128,7 +128,7 @@ export function mount(store, root = document.body) {
     }
   }
 
-  // ── Delegated action execution ──
+  // -- Delegated action execution --
 
   function executeSet(raw) {
     const { path, expr } = parseSetExpr(raw);
@@ -174,7 +174,7 @@ export function mount(store, root = document.body) {
     store.set(path, evalExpr(expr, store.get(path)));
   }
 
-  // ── Step 1: Event delegation (once, never re-wired) ──
+  // -- Step 1: Event delegation (once, never re-wired) --
 
   root.addEventListener('click', e => {
     const t = e.target.closest('[set]');
@@ -195,7 +195,7 @@ export function mount(store, root = document.body) {
     }
   });
 
-  // ── Step 3: Keyed collections ──
+  // -- Step 3: Keyed collections --
 
   function setupCollection(container) {
     const collPath = container.getAttribute('each');
@@ -203,7 +203,7 @@ export function mount(store, root = document.body) {
     if (!collPath || !tpl) return;
 
     const templateHTML = tpl.innerHTML.trim();
-    const rendered = new Map(); // key → element
+    const rendered = new Map(); // key -> element
     let lastKeyStr = '';
 
     function resolve(html, key) {
@@ -257,7 +257,7 @@ export function mount(store, root = document.body) {
     reconcile();
   }
 
-  // ── Init ──
+  // -- Init --
 
   root.querySelectorAll('[each]').forEach(setupCollection);
   scanBindings(root);

package/self-test.js

@@ -1,5 +1,5 @@
 /**
- * @uistate/renderer — self-test
+ * @uistate/renderer: self-test
  *
  * Standalone test of pure functions. No dependencies beyond renderer.js.
  * Runs on `node self-test.js` or as a postinstall hook.
@@ -17,21 +17,21 @@ let failed = 0;
 function assert(name, condition) {
   if (condition) {
     passed++;
+    console.log(`  ✓ ${name}`);
   } else {
     failed++;
     console.error(`  ✗ ${name}`);
   }
 }
 
-// ── parseSetExpr ────────────────────────────────────────────────────
-
+console.log('\n1. parseSetExpr');
 const p1 = parseSetExpr('count:increment');
 assert('parseSetExpr: path', p1.path === 'count');
 assert('parseSetExpr: expr', p1.expr === 'increment');
 
 const p2 = parseSetExpr('count');
 assert('parseSetExpr: path only', p2.path === 'count');
-assert('parseSetExpr: no expr → null', p2.expr === null);
+assert('parseSetExpr: no expr -> null', p2.expr === null);
 
 const p3 = parseSetExpr('user.name:Bob');
 assert('parseSetExpr: dotted path', p3.path === 'user.name');
@@ -60,15 +60,14 @@ const p9 = parseSetExpr('  count : increment  ');
 assert('parseSetExpr: trims whitespace path', p9.path === 'count');
 assert('parseSetExpr: trims whitespace expr', p9.expr === 'increment');
 
-// ── evalExpr ────────────────────────────────────────────────────────
-
+console.log('\n2. evalExpr');
 assert('evalExpr: increment', evalExpr('increment', 5) === 6);
 assert('evalExpr: increment from 0', evalExpr('increment', 0) === 1);
 assert('evalExpr: increment from null', evalExpr('increment', null) === 1);
 assert('evalExpr: decrement', evalExpr('decrement', 5) === 4);
 assert('evalExpr: decrement from 0', evalExpr('decrement', 0) === -1);
-assert('evalExpr: toggle true→false', evalExpr('toggle', true) === false);
-assert('evalExpr: toggle false→true', evalExpr('toggle', false) === true);
+assert('evalExpr: toggle true->false', evalExpr('toggle', true) === false);
+assert('evalExpr: toggle false->true', evalExpr('toggle', false) === true);
 assert('evalExpr: number 42', evalExpr('42', 0) === 42);
 assert('evalExpr: number 0', evalExpr('0', 99) === 0);
 assert('evalExpr: negative number', evalExpr('-5', 0) === -5);
@@ -76,25 +75,24 @@ assert('evalExpr: boolean true', evalExpr('true', 0) === true);
 assert('evalExpr: boolean false', evalExpr('false', 1) === false);
 assert('evalExpr: null keyword', evalExpr('null', 'x') === null);
 assert('evalExpr: plain string', evalExpr('hello', '') === 'hello');
-assert('evalExpr: null expr → returns current', evalExpr(null, 7) === 7);
-assert('evalExpr: undefined expr → returns current', evalExpr(undefined, 7) === 7);
-
-// ── parsePush ───────────────────────────────────────────────────────
+assert('evalExpr: null expr -> returns current', evalExpr(null, 7) === 7);
+assert('evalExpr: undefined expr -> returns current', evalExpr(undefined, 7) === 7);
 
+console.log('\n3. parsePush');
 const pp1 = parsePush('push');
-assert('parsePush: bare push → source null', pp1 !== null && pp1.source === null);
+assert('parsePush: bare push -> source null', pp1 !== null && pp1.source === null);
 
 const pp2 = parsePush('push(draft)');
-assert('parsePush: push(draft) → source "draft"', pp2 !== null && pp2.source === 'draft');
+assert('parsePush: push(draft) -> source "draft"', pp2 !== null && pp2.source === 'draft');
 
 const pp3 = parsePush('push(form.data)');
-assert('parsePush: push(form.data) → source "form.data"', pp3 !== null && pp3.source === 'form.data');
+assert('parsePush: push(form.data) -> source "form.data"', pp3 !== null && pp3.source === 'form.data');
 
 assert('parsePush: non-push returns null', parsePush('increment') === null);
 assert('parsePush: null returns null', parsePush(null) === null);
 assert('parsePush: empty string returns null', parsePush('') === null);
 
-// ── Results ─────────────────────────────────────────────────────────
+// -- Results ---------------------------------------------------------
 
 console.log(`\n@uistate/renderer v1.0.0 — self-test`);
 console.log(`✓ ${passed} assertions passed${failed ? `, ✗ ${failed} failed` : ''}\n`);