@uistate/examples 1.0.0

package/eventState/030-todo-app-with-eventTest/app/store.js

@@ -0,0 +1,16 @@
+// store.js — singleton eventState store for the SPA
+import { createEventState } from '../runtime/core/eventStateNew.js';
+
+const initial = {
+  ui: {
+    route: { path: '/', view: 'home', params: {}, query: {}, transitioning: false },
+    theme: 'light'
+  },
+  todos: {
+    items: [],
+    filter: 'all'
+  }
+};
+
+const store = createEventState(initial);
+export default store;

package/eventState/030-todo-app-with-eventTest/app/views/home.js

@@ -0,0 +1,11 @@
+// views/home.js — Home route
+export async function boot({ store, el, signal }){
+  const container = document.createElement('main');
+  container.style.cssText = 'max-width: 600px; margin: 2rem auto; padding: 0 1rem;';
+  container.innerHTML = `
+    <h1>Home works!</h1>
+    <p>This is the home page of the todo app example.</p>
+    <p><a href="/todo-demo" data-link>Go to Todo App Demo →</a></p>
+  `;
+  el.appendChild(container);
+}

package/eventState/030-todo-app-with-eventTest/app/views/todoDemo.js

@@ -0,0 +1,88 @@
+// views/todoDemo.js — Minimal Todo app demo (imperative renderer, no bootstrap)
+export async function boot({ store, el, signal }){
+  const main = document.createElement('main');
+  main.innerHTML = `
+    <h1>Todo app demo</h1>
+    <section class="beh-section">
+      <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap">
+        <input id="newTodo" placeholder="New todo" />
+        <button id="addTodo" class="btn">Add</button>
+        <div style="display:flex; gap:6px; align-items:center">
+          <button id="fAll" class="btn">All</button>
+          <button id="fActive" class="btn">Active</button>
+          <button id="fCompleted" class="btn">Completed</button>
+          <button id="clearCompleted" class="btn" style="background:#b91c1c; color:white">Clear Completed</button>
+        </div>
+        <span id="filterBadge" style="padding:2px 6px; border:1px solid #888; border-radius:8px; font-size:.85em; color:#555">filter: all</span>
+      </div>
+      <ul id="todos" style="margin-top:10px; padding-left: 18px;"></ul>
+    </section>
+  `;
+  el.appendChild(main);
+
+  const input = main.querySelector('#newTodo');
+  const ul = main.querySelector('#todos');
+  const btnAdd = main.querySelector('#addTodo');
+  const btnAll = main.querySelector('#fAll');
+  const btnAct = main.querySelector('#fActive');
+  const btnDone = main.querySelector('#fCompleted');
+  const btnClear = main.querySelector('#clearCompleted');
+
+  // Direct state manipulation (no intent pattern)
+  const itemsPath = 'todos.items';
+  const filterPath = 'todos.filter';
+  
+  // Add todo
+  btnAdd?.addEventListener('click', () => {
+    const text = (input?.value || '').trim();
+    if (!text) return;
+    const items = store.get(itemsPath) || [];
+    const newTodo = { id: Date.now(), text, done: false };
+    store.set(itemsPath, [...items, newTodo]);
+    input.value = '';
+  });
+  input?.addEventListener('keydown', (e) => { if (e.key === 'Enter') btnAdd?.click(); });
+  
+  // Filter buttons
+  btnAll?.addEventListener('click', () => store.set(filterPath, 'all'));
+  btnAct?.addEventListener('click', () => store.set(filterPath, 'active'));
+  btnDone?.addEventListener('click', () => store.set(filterPath, 'completed'));
+  
+  // Clear completed
+  btnClear?.addEventListener('click', () => {
+    const items = store.get(itemsPath) || [];
+    store.set(itemsPath, items.filter(t => !t.done));
+  });
+
+  // Render
+  function render(){
+    const items = store.get(itemsPath) || [];
+    const filter = store.get(filterPath) || 'all';
+    const badge = main.querySelector('#filterBadge');
+    if (badge) badge.textContent = `filter: ${filter}`;
+    ul.replaceChildren();
+    let rows = items;
+    if (filter === 'active') rows = items.filter(t => !t.done);
+    else if (filter === 'completed') rows = items.filter(t => !!t.done);
+    rows.forEach((t) => {
+      const li = document.createElement('li');
+      li.style.display = 'flex'; li.style.gap = '8px'; li.style.alignItems = 'center';
+      const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = !!t.done;
+      cb.addEventListener('change', () => {
+        const items = store.get(itemsPath) || [];
+        const updated = items.map(item => 
+          item.id === t.id ? { ...item, done: !item.done } : item
+        );
+        store.set(itemsPath, updated);
+      });
+      const span = document.createElement('span'); span.textContent = t.text; if (t.done) span.style.textDecoration = 'line-through';
+      li.appendChild(cb); li.appendChild(span); ul.appendChild(li);
+    });
+  }
+  const off1 = store.subscribe(itemsPath, render);
+  const off2 = store.subscribe(filterPath, render);
+  render();
+
+  if (signal) signal.addEventListener('abort', () => { try { off1 && off1(); off2 && off2(); } catch {} });
+  return () => { try { off1 && off1(); off2 && off2(); } catch {} };
+}

package/eventState/030-todo-app-with-eventTest/index.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>030 Todo App with eventTest</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body data-theme="light" data-bind="data-theme: ui.theme">
+  <nav style="display:flex; gap:10px; align-items:center; padding:10px 12px;">
+    <a href="/" data-link>Home</a>
+    <a href="/todo-demo" data-link>Todo app demo</a>
+    <span style="flex:1"></span>
+    <button class="btn" title="Toggle theme" data-on="click: toggleTheme() | log('toggle theme') | logPath('ui.theme')">Theme</button>
+  </nav>
+  <div data-route-root>
+    <main style="max-width: 600px; margin: 2rem auto; padding: 0 1rem;">
+      <h1>Home works!</h1>
+      <p>This is the home page of the todo app example.</p>
+      <p><a href="/todo-demo" data-link>Go to Todo App Demo →</a></p>
+    </main>
+  </div>
+
+  <!-- Router setup -->
+  <script type="module" src="./app/router.js"></script>
+  <!-- Behaviors runtime (declarative data-bind and data-on) -->
+  <script type="module">
+    import store from './app/store.js';
+    import { installBehaviors } from './runtime/core/behaviors.runtime.js';
+    
+    // Inline actions for nav buttons
+    const registry = {
+      toggleTheme(ctx) {
+        const cur = ctx.get('ui.theme');
+        const next = (cur === 'dark') ? 'light' : 'dark';
+        ctx.set('ui.theme', next);
+      },
+      log(ctx, ...args) {
+        console.log('[action]', ...args);
+      },
+      logPath(ctx, path) {
+        console.log('[action]', String(path), ctx.get(String(path)));
+      }
+    };
+    
+    installBehaviors(store, {
+      registry,
+      root: document,
+      writablePrefixes: ['ui.', 'todos.'],
+      debug: false
+    });
+    
+    // Initialize theme
+    if (!store.get('ui.theme')) {
+      const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+      store.set('ui.theme', prefersDark ? 'dark' : 'light');
+    }
+    
+    // Persist theme to localStorage
+    store.subscribe('ui.theme', (theme) => {
+      localStorage.setItem('ui.theme', theme);
+    });
+  </script>
+</body>
+</html>

package/eventState/030-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/eventState/030-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 };