@uistate/core 4.1.2 → 5.0.0

package/examples/032-todo-app-with-eventTest/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "uistate-010-001-true-spa",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:unit": "vitest run vitest/todoDemo.spec.js",
+    "test:events": "vitest run vitest/todoDemo.eventtest.js",
+    "test:e2e": "playwright test",
+    "test:all": "npm run test:unit && npm run test:events && npm run test:e2e",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.48.0",
+    "@vitest/ui": "^2.1.9",
+    "jsdom": "^25.0.0",
+    "vite": "^5.4.0",
+    "vitest": "^2.0.5"
+  }
+}

package/examples/032-todo-app-with-eventTest/runtime/core/behaviors.runtime.js

@@ -0,0 +1,282 @@
+// behaviors.runtime.js — minimal parser + dispatcher for data-on/data-bind
+// Install with: installBehaviors(store, { registry, root, writablePrefixes })
+
+export function installBehaviors(store, { registry = {}, root = document, writablePrefixes = ['ui.'], writableWhitelist = [], debug = false, onStep = null } = {}){
+  const subsByPath = new Map();
+  const repeaters = [];
+  const trackOff = (el, off) => { const arr = subsByPath.get(el) || []; arr.push(off); subsByPath.set(el, arr); };
+  const unbindNode = (node) => {
+    // Unsubscribe any subs registered for this node and its descendants
+    const cleanup = (n) => {
+      const offs = subsByPath.get(n);
+      if (offs) { offs.forEach(off => { try { off(); } catch{} }); subsByPath.delete(n); }
+      n.childNodes && n.childNodes.forEach && n.childNodes.forEach(cleanup);
+    };
+    try { cleanup(node); } catch {}
+  };
+
+  const bindEl = (el) => {
+    // data-bind: "text: ui.counter; value: ui.name"
+    const bindAttr = el.getAttribute?.('data-bind');
+    if (bindAttr){
+      for (const part of bindAttr.split(';')){
+        const seg = part.trim(); if (!seg) continue;
+        const [propRaw, pathRaw] = seg.split(':');
+        const prop = (propRaw||'').trim();
+        const path = (pathRaw||'').trim();
+        const render = () => {
+          const v = store.get(path);
+          if (prop === 'text') el.textContent = v ?? '';
+          else if (prop === 'value') el.value = v ?? '';
+          else el.setAttribute(prop, v ?? '');
+        };
+        render();
+        const off = store.subscribe(path, render);
+        trackOff(el, off);
+      }
+    }
+
+    // data-on: "click: inc(ui.counter,1) | set(ui.last,'clicked'); input: setFrom(ui.name,target.value)"
+    const onAttr = el.getAttribute?.('data-on');
+    if (onAttr){
+      for (const rule of onAttr.split(';')){
+        const seg = rule.trim(); if (!seg) continue;
+        // Split only at the first ':' to avoid breaking on URLs like https://
+        const colonAt = seg.indexOf(':');
+        if (colonAt === -1) continue;
+        const evt = seg.slice(0, colonAt).trim();
+        const pipeRaw = seg.slice(colonAt + 1);
+        const steps = String(pipeRaw||'').split('|').map(s=>s.trim()).filter(Boolean);
+        el.addEventListener(evt, (event) => {
+          for (const step of steps){
+            const m = step.match(/^(\w+)\((.*)\)$/);
+            const name = m ? m[1] : step;
+            const argsStr = m ? m[2] : '';
+            const args = parseArgs(argsStr);
+            const fn = registry[name]; if (!fn) { if (console && console.warn) console.warn('[behaviors] missing action', name); continue; }
+            const ctx = {
+              store,
+              el,
+              event,
+              get: (p) => store.get(p),
+              set: (p, v) => {
+                // writable guards: prefixes AND optional whitelist patterns
+                const path = String(p);
+                const okPrefix = writablePrefixes.some(pref => path === pref.slice(0, -1) || path.startsWith(pref));
+                const okWhitelist = !writableWhitelist.length || writableWhitelist.some(pat => matchPattern(pat, path));
+                if (!(okPrefix && okWhitelist)) {
+                  if (debug) console.warn('[behaviors] blocked write', { path, reason: 'guard' });
+                  try { onStep && onStep({ el, event, name, args, phase: 'blocked', blocked: true, write: path, reason: 'guard' }); } catch{}
+                  return;
+                }
+                store.set(p, v);
+                // annotate successful write
+                try { onStep && onStep({ el, event, name, args, phase: 'applied', blocked: false, write: path }); } catch{}
+              },
+            };
+            try {
+              try { onStep && onStep({ el, event, name, args, phase: 'started', blocked: false }); } catch{}
+              fn(ctx, ...args);
+            } catch (e) { console.warn('[behaviors] action error', name, e); }
+          }
+        });
+      }
+    }
+
+    // data-repeat: very small, read-only repeater with simple scope for item.*
+    // Example:
+    // <li data-repeat="item in ui.items" data-key="item.id"><span class="txt" data-bind="text: item.name"></span></li>
+    // <li data-repeat-empty>Empty</li>
+    const repExpr = el.getAttribute?.('data-repeat');
+    if (repExpr) {
+      const parsed = parseRepeat(repExpr);
+      if (!parsed) return;
+      const { itemName, idxName, listPath, keyExpr } = parsed;
+      // Detach template and install renderer anchored by a comment
+      const parent = el.parentNode;
+      if (!parent) return;
+      const anchor = document.createComment('repeat-anchor');
+      parent.insertBefore(anchor, el);
+      parent.removeChild(el);
+
+      const emptyEl = parent.querySelector?.('[data-repeat-empty]') || null;
+
+      // State for keyed reconciliation
+      const nodesByKey = new Map();
+
+      const renderList = () => {
+        const list = store.get(listPath) || [];
+        // Toggle empty placeholder
+        if (emptyEl) {
+          try {
+            const isEmpty = !Array.isArray(list) || list.length === 0;
+            if (isEmpty) { emptyEl.removeAttribute('hidden'); emptyEl.style && (emptyEl.style.display = ''); }
+            else { emptyEl.setAttribute('hidden', ''); emptyEl.style && (emptyEl.style.display = 'none'); }
+          } catch {}
+        }
+
+        if (!Array.isArray(list)) return;
+
+        // Build a fragment in order with keyed clones
+        const frag = document.createDocumentFragment();
+        const nextNodesByKey = new Map();
+
+        for (let idx = 0; idx < list.length; idx++) {
+          const item = list[idx];
+          const key = resolveKey(item, idx, keyExpr);
+          let node = nodesByKey.get(key);
+          if (!node) {
+            node = el.cloneNode(true);
+            // Simple scoped binding for common cases used in tests:
+            // - text: item.name
+            // - attributes with {{item.id}}
+            // Apply text bindings manually
+            node.querySelectorAll?.('[data-bind]').forEach((n) => {
+              const bindAttr = n.getAttribute('data-bind') || '';
+              bindAttr.split(';').map(s => s.trim()).filter(Boolean).forEach((seg) => {
+                const [propRaw, pathRaw] = seg.split(':');
+                const prop = (propRaw||'').trim();
+                const pth = (pathRaw||'').trim();
+                let val;
+                if (pth === idxName && idxName) {
+                  val = idx;
+                } else if (pth.startsWith(itemName + '.')) {
+                  val = getByPath(item, pth.slice(itemName.length + 1));
+                }
+                if (pth === itemName) val = item; // not deeply rendered, but allow truthy check
+                if (val !== undefined) {
+                  if (prop === 'text') n.textContent = val ?? '';
+                  else if (prop === 'value') n.value = val ?? '';
+                  else n.setAttribute(prop, val ?? '');
+                }
+              });
+              // Prevent behaviors runtime from also binding this node to store paths like "item.*"
+              n.removeAttribute('data-bind');
+            });
+            // Interpolate {{item.*}} in attributes used by tests (e.g., data-id)
+            node.querySelectorAll('*').forEach((n) => {
+              for (const attr of Array.from(n.attributes || [])){
+                const m = /\{\{\s*(?:item\.(.+?)|(idx))\s*\}\}/g;
+                if (m.test(attr.value)){
+                  const replaced = attr.value.replace(/\{\{\s*(?:item\.(.+?)|(idx))\s*\}\}/g, (_, pItem, pIdx) => {
+                    if (pIdx && idxName) return String(idx);
+                    const v = getByPath(item, pItem);
+                    return v == null ? '' : String(v);
+                  });
+                  n.setAttribute(attr.name, replaced);
+                }
+              }
+            });
+          }
+          nextNodesByKey.set(key, node);
+          frag.appendChild(node);
+        }
+
+        // Replace current range (between anchor and next non-render node) with frag
+        // Simple strategy: remove all nodes after anchor until a repeat-empty (which we keep)
+        let cursor = anchor.nextSibling;
+        while (cursor && cursor !== emptyEl) {
+          const next = cursor.nextSibling;
+          parent.removeChild(cursor);
+          cursor = next;
+        }
+        parent.insertBefore(frag, emptyEl || null);
+        nodesByKey.clear();
+        nextNodesByKey.forEach((v,k)=>nodesByKey.set(k,v));
+      };
+
+      renderList();
+      const off = store.subscribe(listPath, renderList);
+      repeaters.push({ off });
+      trackOff(el, off);
+    }
+  };
+
+  // initial scan
+  const all = root.querySelectorAll?.('[data-bind], [data-on], [data-repeat]') || [];
+  all.forEach(bindEl);
+
+  // observe new nodes
+  const mo = new MutationObserver((mutList) => {
+    for (const m of mutList){
+      m.addedNodes && m.addedNodes.forEach(node => {
+        if (node.nodeType !== 1) return;
+        if (node.matches?.('[data-bind], [data-on], [data-repeat]')) bindEl(node);
+        node.querySelectorAll?.('[data-bind], [data-on], [data-repeat]').forEach(bindEl);
+      });
+      // cleanup removed
+      m.removedNodes && m.removedNodes.forEach(node => {
+        if (node.nodeType !== 1) return;
+        unbindNode(node);
+      });
+    }
+  });
+  if (root && root instanceof Document) mo.observe(document.body, { childList: true, subtree: true });
+
+  return () => {
+    mo.disconnect();
+    subsByPath.forEach(offs => offs.forEach(off => { try { off(); } catch{} }));
+    subsByPath.clear();
+  };
+}
+
+function parseArgs(s){
+  if (!s.trim()) return [];
+  // split by commas not inside quotes
+  const parts = s.split(',').map(p=>p.trim());
+  return parts.map(coerceArg);
+}
+
+function coerceArg(x){
+  if (x === '') return '';
+  if ((x.startsWith('"') && x.endsWith('"')) || (x.startsWith("'") && x.endsWith("'"))) return x.slice(1,-1);
+  if (x === 'true') return true;
+  if (x === 'false') return false;
+  if (x === 'null') return null;
+  if (!Number.isNaN(Number(x))) return Number(x);
+  return x; // pass path strings etc.
+}
+
+function matchPattern(pattern, path){
+  // Very small wildcard: '*' matches a single segment, '**' matches the rest
+  if (pattern === path) return true;
+  const pSegs = String(pattern).split('.');
+  const sSegs = String(path).split('.');
+  let i = 0, j = 0;
+  while (i < pSegs.length && j < sSegs.length){
+    const part = pSegs[i];
+    if (part === '**'){ return true; }
+    if (part === '*' || part === sSegs[j]){ i++; j++; continue; }
+    return false;
+  }
+  // Allow trailing '**'
+  while (i < pSegs.length && pSegs[i] === '**') i++;
+  return i === pSegs.length && j === sSegs.length;
+}
+
+// Dev-only explicit export to support unit tests in 010-005
+export { matchPattern };
+
+function parseRepeat(expr){
+  // "item in ui.items" or "(item, idx) in ui.items"
+  const m = String(expr).match(/^\s*\(?\s*([a-zA-Z_$][\w$]*)\s*(?:,\s*([a-zA-Z_$][\w$]*))?\s*\)?\s+in\s+([\w$.]+)\s*$/);
+  if (!m) return null;
+  const itemName = m[1];
+  const idxName = m[2] || null;
+  const listPath = m[3];
+  // Optional data-key attribute is read from element attribute when rendering
+  return { itemName, idxName, listPath, keyExpr: `${itemName}.id` };
+}
+
+function resolveKey(item, idx, keyExpr){
+  // For now only support item.id; fallback to index
+  const v = (item && (item.id != null)) ? item.id : idx;
+  return String(v);
+}
+
+function getByPath(obj, path){
+  const segs = String(path).split('.');
+  let cur = obj;
+  for (const s of segs){ if (cur == null) return undefined; cur = cur[s]; }
+  return cur;
+}

package/examples/032-todo-app-with-eventTest/runtime/core/eventState.js

@@ -0,0 +1,100 @@
+/**
+ * UIstate - Event-based hierarchical state management module
+ * Part of the UIstate declarative state management system
+ * Uses DOM events for pub/sub with hierarchical path support
+ */
+
+const createEventState = (initial = {}) => {
+    // // Clone the initial state to avoid direct mutations to the passed object
+    const store = JSON.parse(JSON.stringify(initial));
+
+    // // Create a dedicated DOM element to use as an event bus
+    // const bus = document.createElement("x-store");
+
+    // // Optional: Keep the bus element off the actual DOM for better encapsulation
+    // // but this isn't strictly necessary for functionality
+    // bus.style.display = "none";
+    // document.documentElement.appendChild(bus);
+
+    const bus = new EventTarget();
+    return {
+        // get a value from the store by path
+        get: (path) => {
+            if (!path) return store;
+            return path
+                .split(".")
+                .reduce(
+                    (obj, prop) =>
+                        obj && obj[prop] !== undefined ? obj[prop] : undefined,
+                    store
+                );
+        },
+
+        // set a value in the store by path
+        set: (path, value) => {
+            if(!path) return;
+
+            // Update the store
+            let target = store;
+            const parts = path.split(".");
+            const last = parts.pop();
+
+            // Create the path if it doesn't exist
+            parts.forEach((part) => {
+                if (!target[part] || typeof target[part] !== "object") {
+                    target[part] = {};
+                }
+                target = target[part];
+            });
+
+            // Set the value
+            target[last] = value;
+
+            // Notify subscribers with a DOM event
+            bus.dispatchEvent(new CustomEvent(path, { detail: value }));
+
+            // Also dispatch events for parent paths to support wildcards
+            if (parts.length > 0) {
+                let parentPath = "";
+                for (const part of parts) {
+                    parentPath = parentPath ? `${parentPath}.${part}` : part;
+                    bus.dispatchEvent(
+                        new CustomEvent(`${parentPath}.*`, {
+                            detail: { path, value },
+                        })
+                    );
+                }
+
+                // Dispatch root wildcard for any state change
+                bus.dispatchEvent(
+                    new CustomEvent("*", {
+                        detail: { path, value},
+                    })
+                );
+            }
+
+            return value;
+        },
+
+        // Subscribe to changes on a path
+        subscribe: (path, callback) => {
+            if (!path || typeof callback !== "function") return () => {};
+
+            const handler = (e) => callback(e.detail, path);
+            bus.addEventListener(path, handler);
+
+            return () => bus.removeEventListener(path, handler);
+        },
+
+        // Optional method to clean up resources
+        destroy: () => {
+            if (bus.parentNode) {
+                bus.parentNode.removeChild(bus);
+            }
+        },
+
+    };
+};
+
+export default createEventState;
+export { createEventState };

package/examples/032-todo-app-with-eventTest/runtime/core/helpers.js

@@ -0,0 +1,212 @@
+// helpers.js
+export const intent = (store, name, payload = true) => store.set(`intent.${name}`, payload);
+
+export const bindIntentClicks = (root, store, payloadFromEvent) => {
+  root.addEventListener('click', (e) => {
+    const t = e.target.closest('[data-intent]');
+    if (!t) return;
+    const name = t.dataset.intent;
+    const payload = payloadFromEvent ? payloadFromEvent(e, t) : true;
+    store.set(`intent.${name}`, payload);
+  });
+};
+
+export const mount = (a, b) => {
+  // Overloads:
+  // - mount(selectorsMap) -> root defaults to document
+  // - mount(root, selectorsMap)
+  let root, selectors;
+  if (typeof b === 'undefined') {
+    selectors = a;
+    root = document;
+  } else {
+    root = a;
+    selectors = b;
+  }
+  const entries = Object.entries(selectors).map(([k, sel]) => {
+    const el = typeof sel === 'string' ? root.querySelector(sel) : sel;
+    return [k, el];
+  });
+  return Object.fromEntries(entries);
+};
+
+export const renderJson = (el, getSnapshot) => {
+  try { el.textContent = JSON.stringify(getSnapshot(), null, 2); }
+  catch { el.textContent = String(getSnapshot()); }
+};
+
+// Simple plug-and-play state panel. Attempts to use a provided target (selector or element),
+// then '#state' if present, otherwise creates a floating <pre> panel in the bottom-right.
+export const showStatePanel = (store, target) => {
+  let el = null;
+  if (typeof target === 'string') {
+    el = document.querySelector(target);
+  } else if (target && target.nodeType === 1) {
+    el = target; // DOM Element
+  }
+  if (!el) {
+    el = document.querySelector('#state');
+  }
+  if (!el) {
+    el = document.createElement('pre');
+    el.setAttribute('id', 'state');
+    Object.assign(el.style, {
+      position: 'fixed', right: '8px', bottom: '8px',
+      minWidth: '240px', maxWidth: '40vw', maxHeight: '40vh', overflow: 'auto',
+      padding: '8px', background: 'rgba(0,0,0,0.7)', color: '#0f0',
+      font: '12px/1.4 monospace', borderRadius: '6px', zIndex: 99999,
+      boxShadow: '0 2px 12px rgba(0,0,0,0.35)'
+    });
+    document.body.appendChild(el);
+  }
+  const render = () => {
+    try { el.textContent = JSON.stringify(store.get(), null, 2); }
+    catch { el.textContent = String(store.get()); }
+  };
+  store.subscribe('*', render);
+  render();
+  return el;
+};
+
+// Subscribe multiple path/handler pairs at once. Returns a SubGroup with:
+// - dispose(): unsubscribe all
+// - unsubs: individual unsubscribe functions (in pair order)
+// - byPath: Record<string, Function[]> to selectively dispose by path
+// - size: number of subscriptions created
+export const groupSubs = (store, ...args) => {
+  if (args.length % 2 !== 0) {
+    throw new Error('groupSubs expects alternating path/handler pairs');
+  }
+  const unsubs = [];
+  const byPath = Object.create(null);
+  for (let i = 0; i < args.length; i += 2) {
+    const path = args[i];
+    const handler = args[i + 1];
+    const unsub = store.subscribe(path, handler);
+    unsubs.push(unsub);
+    (byPath[path] || (byPath[path] = [])).push(unsub);
+  }
+  const dispose = () => {
+    for (let i = unsubs.length - 1; i >= 0; i--) {
+      try { unsubs[i](); } catch (_) { /* noop */ }
+    }
+  };
+  return { dispose, unsubs, byPath, size: unsubs.length };
+};
+
+// Console logger for state changes; subscribes to '*' wildcard and logs path/value.
+// Optional custom formatter receives the event object `{ path, value }`.
+export const consoleLogState = (store, formatter) => {
+  const handler = (evt) => {
+    const payload = evt && typeof evt === 'object' && 'path' in evt ? evt : { path: '*', value: store.get() };
+    if (formatter) return formatter(payload);
+    console.log('[state]', payload.path, payload.value);
+  };
+  return store.subscribe('*', handler);
+};
+
+// JS-only wiring helpers (no DOM data-* exposure)
+export const onClick = (el, handler) => {
+  el.addEventListener('click', handler);
+  return () => el.removeEventListener('click', handler);
+};
+
+export const bump = (store, path, delta = 1) => {
+  const n = (store.get(path) || 0) + delta;
+  store.set(path, n);
+};
+export const inc = (store, path) => bump(store, path, 1);
+export const dec = (store, path) => bump(store, path, -1);
+
+// Intent wiring without using data-* attributes
+export const bindIntent = (store, el, name, payloadFromEvent) => {
+  const listener = (e) => {
+    const payload = payloadFromEvent ? payloadFromEvent(e, el) : true;
+    store.set(`intent.${name}`, payload);
+  };
+  el.addEventListener('click', listener);
+  return () => el.removeEventListener('click', listener);
+};
+
+export const bindIntents = (store, tuples) => {
+  const unsubs = tuples.map(([el, name, payloadFromEvent]) => bindIntent(store, el, name, payloadFromEvent));
+  return () => { for (let i = unsubs.length - 1; i >= 0; i--) { try { unsubs[i](); } catch (_) {} } };
+};
+
+// Orchestrator: initialize a view by mounting elements, subscribing handlers, wiring events, and optional dev tools.
+// API:
+// initView({
+//   store,                         // required
+//   mount: selectors | [root, selectors],
+//   paths: { ALIAS: 'a.b.c' },     // optional path aliases
+//   view: [ ['path', (value, els, store, p) => { /* render */ }], ... ],
+//   dev: { log: true, panel: true },
+//   events: (els, store, p) => [ /* array of unsubs */ ],
+// })
+export const initView = (cfg) => {
+  if (!cfg || !cfg.store) throw new Error('initView: cfg.store is required');
+  const store = cfg.store;
+  const mountCfg = cfg.mount;
+  const p = Object.assign({}, cfg.paths || {});
+  const dev = cfg.dev || {};
+
+  // Resolve elements once
+  const els = Array.isArray(mountCfg) ? mount(mountCfg[0], mountCfg[1]) : mount(mountCfg || {});
+
+  // Build grouped subscriptions from view tuples, wrapping to inject (els, store, p)
+  const viewTuples = (cfg.view || []).flatMap(([path, handler]) => {
+    let wrapped;
+    if (typeof handler === 'string') {
+      const key = handler;
+      wrapped = (value) => {
+        const el = els[key];
+        if (el) el.textContent = String(value);
+      };
+    } else {
+      wrapped = (value) => handler && handler(value, els, store, p);
+    }
+    return [path, wrapped];
+  });
+  const subs = viewTuples.length ? groupSubs(store, ...viewTuples) : { dispose(){} };
+
+  // Dev tools
+  const devUnsubs = [];
+  if (dev.log) {
+    try { devUnsubs.push(consoleLogState(store)); } catch (_) {}
+  }
+  let panelEl = null;
+  if (dev.panel) {
+    try { panelEl = showStatePanel(store); } catch (_) {}
+  }
+
+  // Events wiring
+  let eventUnsubs = [];
+  if (typeof cfg.events === 'function') {
+    try { eventUnsubs = cfg.events(els, store, p) || []; } catch (_) { eventUnsubs = []; }
+  } else if (cfg.events && typeof cfg.events === 'object') {
+    // Sugar: events map { elKey: (store, paths, el) => void | unsub }
+    const map = cfg.events;
+    eventUnsubs = Object.entries(map).map(([key, fn]) => {
+      const el = els[key];
+      if (!el || typeof fn !== 'function') return () => {};
+      // Default to click wiring; allow handler to return its own unsub.
+      const handler = () => fn(store, p, el);
+      el.addEventListener('click', handler);
+      return () => el.removeEventListener('click', handler);
+    });
+  }
+
+  // Unified disposer
+  const dispose = () => {
+    try { subs && subs.dispose && subs.dispose(); } catch (_) {}
+    for (let i = eventUnsubs.length - 1; i >= 0; i--) {
+      try { eventUnsubs[i] && eventUnsubs[i](); } catch (_) {}
+    }
+    for (let i = devUnsubs.length - 1; i >= 0; i--) {
+      try { devUnsubs[i] && devUnsubs[i](); } catch (_) {}
+    }
+    // Note: showStatePanel returns an element; we do not auto-remove it by default.
+  };
+
+  return { els, paths: p, subs, eventUnsubs, devUnsubs, dispose };
+};