@uistate/examples 1.0.0

package/eventState/032-todo-app-with-eventTest/app/actions/index.js

@@ -0,0 +1,153 @@
+// actions/index.js - minimal action registry (10 core ops)
+// Each action is a pure function: (ctx, ...args) => any
+// ctx: { store, get(path), set(path, value), event, el }
+
+export function set(ctx, path, value){
+  ctx.set(String(path), value);
+}
+
+export function inc(ctx, path, by = 1){
+  const v = Number(ctx.get(String(path)) || 0);
+  ctx.set(String(path), v + Number(by));
+}
+
+export function dec(ctx, path, by = 1){
+  const v = Number(ctx.get(String(path)) || 0);
+  ctx.set(String(path), v - Number(by));
+}
+
+export function toggle(ctx, path){
+  const v = !!ctx.get(String(path));
+  ctx.set(String(path), !v);
+}
+
+export function clamp(ctx, path, min, max){
+  let v = Number(ctx.get(String(path)) || 0);
+  if (min != null) v = Math.max(v, Number(min));
+  if (max != null) v = Math.min(v, Number(max));
+  ctx.set(String(path), v);
+}
+
+export function push(ctx, path, value){
+  const arr = Array.isArray(ctx.get(String(path))) ? ctx.get(String(path)) : [];
+  ctx.set(String(path), [...arr, value]);
+}
+
+export function pushFrom(ctx, toArrayPath, fromPath){
+  const arr = Array.isArray(ctx.get(String(toArrayPath))) ? ctx.get(String(toArrayPath)) : [];
+  const v = ctx.get(String(fromPath));
+  ctx.set(String(toArrayPath), [...arr, v]);
+}
+
+export function pushFromIfNotEmpty(ctx, toArrayPath, fromPath){
+  const arr = Array.isArray(ctx.get(String(toArrayPath))) ? ctx.get(String(toArrayPath)) : [];
+  let v = ctx.get(String(fromPath));
+  if (v == null) return;
+  v = String(v).trim();
+  if (v.length === 0) return;
+  ctx.set(String(toArrayPath), [...arr, v]);
+}
+
+export function removeAt(ctx, path, index){
+  const arr = Array.isArray(ctx.get(String(path))) ? ctx.get(String(path)) : [];
+  const i = Number(index);
+  if (i >= 0 && i < arr.length){
+    const next = arr.slice(0, i).concat(arr.slice(i + 1));
+    ctx.set(String(path), next);
+  }
+}
+
+export function pop(ctx, path){
+  const arr = Array.isArray(ctx.get(String(path))) ? ctx.get(String(path)) : [];
+  if (arr.length === 0) return;
+  ctx.set(String(path), arr.slice(0, -1));
+}
+
+export function sortBy(ctx, path, key){
+  const arr = Array.isArray(ctx.get(String(path))) ? ctx.get(String(path)) : [];
+  let next;
+  if (key == null || key === ''){
+    next = [...arr].sort();
+  } else {
+    next = [...arr].sort((a,b) => {
+      const av = a?.[key]; const bv = b?.[key];
+      if (av < bv) return -1; if (av > bv) return 1; return 0;
+    });
+  }
+  ctx.set(String(path), next);
+}
+
+export function lengthTo(ctx, fromPath, toPath){
+  const v = ctx.get(String(fromPath));
+  const len = Array.isArray(v) || typeof v === 'string' ? v.length : (v && typeof v === 'object' ? Object.keys(v).length : 0);
+  ctx.set(String(toPath), len);
+}
+
+export function setFrom(ctx, path, eventField){
+  // eventField like 'target.value' or 'detail.value'
+  let cur = ctx.event;
+  for (const part of String(eventField).split('.')){
+    if (cur == null) break;
+    cur = cur[part];
+  }
+  ctx.set(String(path), cur);
+}
+
+export function fetchJson(ctx, url, toPath){
+  // minimal fire-and-forget; caller can chain a separate set if desired
+  fetch(String(url), { signal: ctx.event?.signal }).then(r => r.json()).then(data => {
+    if (toPath) ctx.set(String(toPath), data);
+  }).catch(() => {});
+}
+
+// Demo-only: mutate the global behaviors whitelist array (shared by installer)
+export function guardWhitelist(ctx, ...patterns){
+  const arr = (window && window.behaviorsWhitelist) || [];
+  arr.splice(0, arr.length, ...patterns.map(String));
+  try { ctx.set('ui.guard.whitelist', patterns.map(String)); } catch {}
+}
+
+export function clearWhitelist(){
+  const arr = (window && window.behaviorsWhitelist) || [];
+  arr.splice(0, arr.length);
+  try { window.stateTrackerStore?.set?.('ui.guard.whitelist', []); } catch {}
+}
+
+export function resetWhitelist(){
+  const def = (window && window.behaviorsWhitelistDefault) || [];
+  const arr = (window && window.behaviorsWhitelist) || [];
+  arr.splice(0, arr.length, ...def.map(String));
+  try { window.stateTrackerStore?.set?.('ui.guard.whitelist', [...def]); } catch {}
+}
+
+export function mergeWhitelist(ctx, ...patterns){
+  const arr = (window && window.behaviorsWhitelist) || [];
+  const set = new Set(arr.map(String));
+  patterns.map(String).forEach(p => set.add(p));
+  const next = Array.from(set);
+  arr.splice(0, arr.length, ...next);
+  try { window.stateTrackerStore?.set?.('ui.guard.whitelist', [...next]); } catch {}
+}
+
+export function toggleTheme(ctx){
+  try {
+    const cur = ctx.get('ui.theme');
+    const next = (cur === 'dark') ? 'light' : 'dark';
+    ctx.set('ui.theme', next);
+    console.log('[beh] theme ->', next);
+  } catch {}
+}
+
+// Diagnostics
+export function log(ctx, ...args){
+  try { console.log('[beh]', ...args); } catch {}
+}
+
+export function logPath(ctx, path){
+  try { console.log('[beh]', String(path), ctx.get(String(path))); } catch {}
+}
+
+export const registry = {
+  set, inc, dec, toggle, clamp, push, pushFrom, pushFromIfNotEmpty, removeAt, pop, sortBy, setFrom, fetchJson, lengthTo,
+  guardWhitelist, clearWhitelist, resetWhitelist, mergeWhitelist, toggleTheme, log, logPath,
+};

package/eventState/032-todo-app-with-eventTest/app/bridges.js

@@ -0,0 +1,113 @@
+// bridges.app.js
+// App-level intent → domain bridges and derived wildcard bridges
+// Mirrors patterns proven in examples 300d (intent bridge) and 300e (derived wildcard).
+
+import store from './store.js';
+
+// ------------------------------
+// Selection: intent → domain
+// ------------------------------
+store.subscribe('intent.selection.toggle', (payload) => {
+  const cur = store.get('ui.selection.ids') || [];
+  const set = new Set(Array.isArray(cur) ? cur : []);
+  let id, checked;
+  if (payload && typeof payload === 'object') { id = payload.id; checked = payload.checked; }
+  else { id = payload; checked = undefined; }
+  const key = String(id);
+  if (checked === undefined) {
+    // toggle membership
+    if (set.has(key)) set.delete(key); else set.add(key);
+  } else {
+    if (checked) set.add(key); else set.delete(key);
+  }
+  const next = Array.from(set);
+  store.set('ui.selection.ids', next);
+});
+
+// Derived: selection count
+store.subscribe('ui.selection.ids', () => {
+  const ids = store.get('ui.selection.ids') || [];
+  const next = Array.isArray(ids) ? ids.length : 0;
+  if (store.get('ui.selection.count') !== next) store.set('ui.selection.count', next);
+});
+
+// ------------------------------
+// Quotes: async fetch with last-request-wins
+// ------------------------------
+let quotesReqId = 0;
+store.subscribe('intent.quotes.load', ({ url, ttlMs }) => {
+  quotesReqId += 1;
+  const myId = quotesReqId;
+  store.set('ui.quotes.loading', true);
+  store.set('ui.quotes.error', null);
+
+  const doFetch = (globalThis.fetch ? globalThis.fetch(String(url)) : Promise.reject(new Error('fetch unavailable')));
+  doFetch
+    .then(async (res) => {
+      if (myId !== quotesReqId) return; // stale
+      if (!res.ok) throw new Error('HTTP ' + (res.status || 'error'));
+      const data = await res.json();
+      store.set('ui.quotes.data', data);
+    })
+    .catch((err) => {
+      if (myId !== quotesReqId) return; // stale
+      store.set('ui.quotes.error', String(err && err.message || err));
+    })
+    .finally(() => {
+      if (myId !== quotesReqId) return; // stale
+      store.set('ui.quotes.loading', false);
+    });
+});
+
+// Derived: quotes empty
+const updateQuotesEmpty = () => {
+  const d = store.get('ui.quotes?.data') ?? store.get('ui.quotes.data');
+  const empty = Array.isArray(d) ? d.length === 0 : (d == null);
+  if (store.get('ui.quotes.empty') !== empty) store.set('ui.quotes.empty', empty);
+};
+store.subscribe('ui.quotes.data', updateQuotesEmpty);
+store.subscribe('ui.quotes.error', updateQuotesEmpty);
+
+// ------------------------------
+// Items: derived helpers for repeaters
+// ------------------------------
+const updateItemsMeta = () => {
+  const items = store.get('ui.items');
+  const count = Array.isArray(items) ? items.length : 0;
+  if (store.get('ui.itemsCount') !== count) store.set('ui.itemsCount', count);
+  const empty = count === 0;
+  if (store.get('ui.empty') !== empty) store.set('ui.empty', empty);
+};
+store.subscribe('ui.items', updateItemsMeta);
+try { updateItemsMeta(); } catch {}
+
+// ------------------------------
+// Todos: imperative renderer-friendly bridges
+// ------------------------------
+// Add todo
+store.subscribe('intent.todo.add', ({ text }) => {
+  const items = store.get('domain.todos.items') || [];
+  const nextId = items.reduce((m, t) => Math.max(m, Number(t?.id || 0)), 0) + 1;
+  const todo = { id: nextId, text: String(text || '').trim(), done: false };
+  if (!todo.text) return;
+  store.set('domain.todos.items', [...items, todo]);
+});
+
+// Toggle todo
+store.subscribe('intent.todo.toggle', ({ id }) => {
+  const items = store.get('domain.todos.items') || [];
+  const out = items.map(t => (String(t?.id) === String(id)) ? { ...t, done: !t.done } : t);
+  store.set('domain.todos.items', out);
+});
+
+// Clear completed
+store.subscribe('intent.todo.clearCompleted', () => {
+  const items = store.get('domain.todos.items') || [];
+  store.set('domain.todos.items', items.filter(t => !t.done));
+});
+
+// UI filter
+store.subscribe('intent.ui.filter', ({ filter }) => {
+  const f = (filter === 'active' || filter === 'completed') ? filter : 'all';
+  store.set('ui.todos.filter', f);
+});

package/eventState/032-todo-app-with-eventTest/app/router.js

@@ -0,0 +1,26 @@
+// app/router.js — App-specific router configuration
+import { createRouter } from '../runtime/core/router.js';
+import { upgradeEventState } from '../runtime/extensions/eventState.plus.js';
+import store from './store.js';
+import * as Home from './views/home.js';
+import * as TodoDemo from './views/todoDemo.js';
+
+// Upgrade store for setMany support
+const storePlus = upgradeEventState(store);
+
+// Create and start router
+const router = createRouter({
+  routes: [
+    { path: '/', view: 'home', component: Home },
+    { path: '/todo-demo', view: 'todo-demo', component: TodoDemo },
+  ],
+  store: storePlus,
+  rootSelector: '[data-route-root]',
+  fallback: { path: '/', view: 'home', component: Home },
+  debug: import.meta?.env?.DEV || false,
+});
+
+router.start();
+
+// Export router API
+export const { navigate, navigateQuery, navigatePath } = router;

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

@@ -0,0 +1,15 @@
+// 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 },
+    todos: { filter: 'all' },
+  },
+  domain: {
+    todos: { items: [] },
+  },
+};
+
+const store = createEventState(initial);
+export default store;

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

@@ -0,0 +1,46 @@
+// views/home.js — Home route
+export async function boot({ store, el, signal }){
+  // Artificial 1-second delay to show the loader
+  await new Promise(resolve => setTimeout(resolve, 1000));
+
+  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>
+    
+    <hr style="margin: 2rem 0;">
+    
+    <h2>Telemetry Test</h2>
+    <p>Counter: <strong id="counter-display">0</strong></p>
+    <button id="increment-btn" class="btn">Increment Counter</button>
+  `;
+  el.appendChild(container);
+
+  // Initialize counter in store
+  if (store.get('ui.test.counter') === undefined) {
+    store.set('ui.test.counter', 0);
+  }
+
+  // Counter display subscription
+  const counterDisplay = container.querySelector('#counter-display');
+  const updateDisplay = () => {
+    const count = store.get('ui.test.counter') || 0;
+    counterDisplay.textContent = count;
+  };
+  const unsub = store.subscribe('ui.test.counter', updateDisplay);
+  updateDisplay();
+
+  // Increment button
+  const incrementBtn = container.querySelector('#increment-btn');
+  incrementBtn.addEventListener('click', () => {
+    const current = store.get('ui.test.counter') || 0;
+    console.log('[TEST] Incrementing counter from', current, 'to', current + 1);
+    store.set('ui.test.counter', current + 1);
+  });
+
+  // Cleanup on navigation
+  if (signal) signal.addEventListener('abort', () => { unsub(); });
+  return () => { unsub(); };
+}

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

@@ -0,0 +1,69 @@
+// 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');
+
+  // Intents from UI
+  btnAdd?.addEventListener('click', () => {
+    const text = (input?.value || '').trim();
+    if (!text) return; store.set('intent.todo.add', { text }); input.value = '';
+  });
+  input?.addEventListener('keydown', (e) => { if (e.key === 'Enter') btnAdd?.click(); });
+  btnAll?.addEventListener('click', () => store.set('intent.ui.filter', { filter: 'all' }));
+  btnAct?.addEventListener('click', () => store.set('intent.ui.filter', { filter: 'active' }));
+  btnDone?.addEventListener('click', () => store.set('intent.ui.filter', { filter: 'completed' }));
+  btnClear?.addEventListener('click', () => store.set('intent.todo.clearCompleted'));
+
+  // Render
+  const itemsPath = 'domain.todos.items';
+  const filterPath = 'ui.todos.filter';
+  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', () => store.set('intent.todo.toggle', { id: t.id }));
+      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/032-todo-app-with-eventTest/devtools/dock.js

@@ -0,0 +1,41 @@
+// dev-dock.dev.js — shared dev dock for buttons (DEV only)
+// if (import.meta && import.meta.env && import.meta.env.DEV) {
+  const DOCK_ID = 'dev-dock-root';
+  const STYLE_ID = 'dev-dock-style';
+  const CSS = `
+  #${DOCK_ID} { position: fixed; left: 10px; bottom: 10px; z-index: 2147483200; pointer-events: auto;
+    display: inline-flex; flex-direction: row; gap: 6px; align-items: center; background: rgba(17,17,17,.85);
+    border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
+  #${DOCK_ID} .dock-btn { appearance: none; border: 1px solid rgba(255,255,255,.15); background: #222; color: #eee;
+    font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
+  #${DOCK_ID} .dock-btn:hover { background: #2a2a2a; }
+  #${DOCK_ID} > button { cursor: pointer; }
+  #${DOCK_ID} .dock-sep { width: 1px; height: 18px; background: rgba(255,255,255,.12); margin: 0 4px; }
+  `;
+
+  // Style
+  let style = document.getElementById(STYLE_ID);
+  if (!style){ style = document.createElement('style'); style.id = STYLE_ID; style.textContent = CSS; document.head.appendChild(style); }
+
+  // Root
+  let root = document.getElementById(DOCK_ID);
+  if (!root){ root = document.createElement('div'); root.id = DOCK_ID; document.body.appendChild(root); }
+
+  const registry = new Map();
+  function register({ id, label, title = '', onClick }){
+    // De-dup by id (helps during HMR)
+    try { const exist = root.querySelector(`[data-dock-id="${id}"]`); if (exist) exist.remove(); } catch {}
+    const btn = document.createElement('button');
+    btn.type = 'button'; btn.className = 'dock-btn'; btn.textContent = label; if (title) btn.title = title;
+    btn.setAttribute('data-dock-id', id);
+    btn.addEventListener('click', (e) => { try { onClick?.(e); } catch (err) { console.warn('[dev-dock] button error', err); } });
+    root.appendChild(btn);
+    registry.set(id, btn);
+    return () => { try { btn.remove(); } catch{}; registry.delete(id); };
+  }
+  function separator(){ const sep = document.createElement('div'); sep.className = 'dock-sep'; root.appendChild(sep); return () => sep.remove(); }
+
+  window.__devdock = { register, separator, root };
+  // Notify listeners that the dock is ready
+  try { window.dispatchEvent(new CustomEvent('devdock:ready')); } catch {}
+// }

package/eventState/032-todo-app-with-eventTest/devtools/stateTracker.dock.js

@@ -0,0 +1,10 @@
+// stateTracker.dock.dev.js — register a State toggle in dev dock and hide pill (DEV only)
+// if (import.meta && import.meta.env && import.meta.env.DEV) {
+  const st = window.stateTracker?.instance;
+  const dock = window.__devdock;
+  if (dock && st) {
+    // Hide the pill; dev dock becomes the control surface
+    try { st.elements?.pill?.style && (st.elements.pill.style.display = 'none'); } catch {}
+    dock.register({ id: 'state-tracker', label: 'State', title: 'Toggle State Tracker', onClick: () => st.toggle() });
+  }
+// }