@uistate/core 5.1.1 → 5.3.0

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

@@ -1,212 +0,0 @@
-// 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 };
-};

package/examples/031-todo-app-with-eventTest/runtime/core/router.js

@@ -1,271 +0,0 @@
-// runtime/core/router.js — Generic SPA router factory for eventState stores
-// Usage:
-//   const router = createRouter({
-//     routes: [{ path: '/', view: 'home', component: HomeView }],
-//     store,
-//     rootSelector: '[data-route-root]',
-//     debug: true
-//   });
-//   router.start();
-
-export function createRouter(config) {
-  const {
-    routes = [],
-    store,
-    rootSelector = '[data-route-root]',
-    fallback = null,
-    debug = false,
-    linkSelector = 'a[data-link]',
-    navSelector = 'nav a[data-link]',
-  } = config;
-
-  // Detect base path from <base href> if present
-  const BASE_PATH = (() => {
-    const b = document.querySelector('base[href]');
-    if (!b) return '';
-    try {
-      const u = new URL(b.getAttribute('href'), location.href);
-      let p = u.pathname;
-      if (p.length > 1 && p.endsWith('/')) p = p.slice(0, -1);
-      return p;
-    } catch { return ''; }
-  })();
-
-  function stripBase(pathname) {
-    if (BASE_PATH && pathname.startsWith(BASE_PATH)) {
-      const rest = pathname.slice(BASE_PATH.length) || '/';
-      return rest.startsWith('/') ? rest : ('/' + rest);
-    }
-    return pathname;
-  }
-
-  function withBase(pathname) {
-    if (!BASE_PATH) return pathname;
-    if (pathname === '/') return BASE_PATH || '/';
-    return (BASE_PATH + (pathname.startsWith('/') ? '' : '/') + pathname);
-  }
-
-  function normalizePath(p) {
-    if (!p) return '/';
-    try {
-      if (p[0] !== '/') p = '/' + p;
-      if (p === '/index.html') return '/';
-      if (p.length > 1 && p.endsWith('/')) p = p.slice(0, -1);
-      return p;
-    } catch { return '/'; }
-  }
-
-  function resolve(pathname) {
-    const p = normalizePath(pathname);
-    const r = routes.find(r => r.path === p);
-    if (r) return { ...r, params: {} };
-    if (fallback) return { ...fallback, params: {} };
-    return null;
-  }
-
-  function getRoot() {
-    const el = document.querySelector(rootSelector);
-    if (!el) throw new Error('Route root not found: ' + rootSelector);
-    return el;
-  }
-
-  function setActiveNav(pathname) {
-    document.querySelectorAll(navSelector).forEach(a => {
-      const url = new URL(a.getAttribute('href'), location.href);
-      const linkPath = normalizePath(stripBase(url.pathname));
-      const here = normalizePath(pathname);
-      const isExact = linkPath === here;
-      const isParent = !isExact && linkPath !== '/' && here.startsWith(linkPath);
-      const active = isExact || isParent;
-      a.classList.toggle('active', active);
-      if (isExact) a.setAttribute('aria-current', 'page');
-      else a.removeAttribute('aria-current');
-    });
-  }
-
-  // State
-  let current = { viewKey: null, unboot: null, path: null, search: '' };
-  let navController = null;
-  const scrollPositions = new Map();
-  history.scrollRestoration = 'manual';
-
-  // Core navigate function
-  async function navigate(pathname, { replace = false, search = '', restoreScroll = false } = {}) {
-    const root = getRoot();
-    const appPath = normalizePath(stripBase(pathname));
-    const resolved = resolve(appPath);
-    
-    if (!resolved) {
-      if (debug) console.warn('[router] No route found for:', appPath);
-      return;
-    }
-
-    const viewKey = resolved.view;
-    const component = resolved.component;
-    const html = document.documentElement;
-    const prevViewKey = current.viewKey;
-
-    const searchStr = search && search.startsWith('?') ? search : (search ? ('?' + search) : '');
-
-    // Always log navigation for telemetry
-    console.log('[nav] navigate', { from: current.path, to: appPath, view: viewKey });
-    
-    if (debug) {
-      console.debug('[router] navigate', { pathname, appPath, searchStr, view: viewKey, params: resolved.params });
-    }
-
-    // Same-route no-op guard
-    if (current.path === appPath && current.search === searchStr) {
-      return;
-    }
-
-    // Abort in-flight boot
-    if (navController) navController.abort();
-    navController = new AbortController();
-    const { signal } = navController;
-
-    // Transition start
-    if (store) {
-      try { store.set('ui.route.transitioning', true); } catch {}
-    }
-    html.setAttribute('data-transitioning', 'on');
-
-    // Save scroll position
-    if (current.path) {
-      scrollPositions.set(current.path, { x: scrollX, y: scrollY });
-    }
-
-    // Unboot previous view
-    if (typeof current.unboot === 'function') {
-      try { await current.unboot(); } catch (_e) {}
-    }
-
-    // Clear DOM
-    root.replaceChildren();
-
-    // Boot new view
-    const unboot = await (component.boot?.({ store, el: root, signal }) || Promise.resolve(() => {}));
-    current = { viewKey, unboot, path: appPath, search: searchStr };
-
-    // Update nav active state
-    setActiveNav(appPath);
-
-    // Parse query params
-    const urlForQuery = new URL(location.origin + withBase(appPath) + searchStr);
-    const q = {};
-    urlForQuery.searchParams.forEach((v, k) => { q[k] = v; });
-
-    // Update store
-    if (store) {
-      try {
-        if (store.setMany) {
-          store.setMany({
-            'ui.route.view': viewKey,
-            'ui.route.path': appPath,
-            'ui.route.params': resolved.params || {},
-            'ui.route.query': q,
-          });
-        } else {
-          store.set('ui.route.view', viewKey);
-          store.set('ui.route.path', appPath);
-          store.set('ui.route.params', resolved.params || {});
-          store.set('ui.route.query', q);
-        }
-      } catch {}
-    }
-
-    // Update browser history
-    const useReplace = replace || (prevViewKey === viewKey);
-    if (useReplace) history.replaceState({}, '', withBase(appPath) + searchStr);
-    else history.pushState({}, '', withBase(appPath) + searchStr);
-
-    // Set view attribute
-    html.setAttribute('data-view', viewKey);
-
-    if (debug) {
-      console.debug('[router] view', { viewKey, path: appPath, query: q });
-    }
-
-    // Transition end
-    if (store) {
-      try { store.set('ui.route.transitioning', false); } catch {}
-    }
-    html.setAttribute('data-transitioning', 'off');
-
-    // Focus management
-    if (!root.hasAttribute('tabindex')) root.setAttribute('tabindex', '-1');
-    try { root.focus({ preventScroll: true }); } catch {}
-
-    // Scroll restoration
-    if (restoreScroll) {
-      const pos = scrollPositions.get(appPath);
-      if (pos) scrollTo(pos.x, pos.y);
-    } else {
-      scrollTo(0, 0);
-    }
-  }
-
-  function navigateQuery(patch = {}, { replace = true } = {}) {
-    const params = new URLSearchParams(current.search || '');
-    for (const [k, v] of Object.entries(patch)) {
-      if (v === null || v === undefined || v === '') params.delete(k);
-      else params.set(k, String(v));
-    }
-    const searchStr = params.toString();
-    const prefixed = searchStr ? ('?' + searchStr) : '';
-    const path = current.path || normalizePath(stripBase(location.pathname));
-    return navigate(path, { search: prefixed, replace });
-  }
-
-  function navigatePath(path, { replace = true } = {}) {
-    const appPath = normalizePath(stripBase(path));
-    const searchStr = current.search || '';
-    return navigate(appPath, { search: searchStr, replace });
-  }
-
-  function onClick(e) {
-    const a = e.target.closest(linkSelector);
-    if (!a) return;
-    if (e.defaultPrevented) return;
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
-    const url = new URL(a.getAttribute('href'), location.href);
-    if (url.origin !== location.origin) return;
-    e.preventDefault();
-    
-    // Log navigation click
-    console.log('[nav] click', { href: a.getAttribute('href'), text: a.textContent.trim() });
-    
-    navigate(url.pathname, { search: url.search }).catch(() => {});
-  }
-
-  function onPop() {
-    navigate(location.pathname, { replace: true, search: location.search, restoreScroll: true }).catch(() => {});
-  }
-
-  // Public API
-  return {
-    navigate,
-    navigateQuery,
-    navigatePath,
-    
-    start() {
-      window.addEventListener('click', onClick);
-      window.addEventListener('popstate', onPop);
-      navigate(location.pathname, { replace: true, search: location.search, restoreScroll: true });
-      return this;
-    },
-
-    stop() {
-      window.removeEventListener('click', onClick);
-      window.removeEventListener('popstate', onPop);
-      if (typeof current.unboot === 'function') {
-        try { current.unboot(); } catch {}
-      }
-      return this;
-    },
-
-    getCurrent() {
-      return { ...current };
-    }
-  };
-}

package/examples/031-todo-app-with-eventTest/runtime/extensions/boundary.js

@@ -1,36 +0,0 @@
-// boundary.js — Minimal boundary helper for UIstate
-// Design goals:
-// - Never throw; always resolve to a value (or undefined) so callers can remain declarative
-// - Toggle loading flags via provided setLoading(boolean)
-// - Report errors via onError(error)
-// - Optional mapError(error) to convert errors into return values
-// - Optional finally() callback invoked regardless of outcome
-
-/**
- * @template T
- * @param {() => Promise<T>} fn async function to execute within the boundary
- * @param {{
- *   setLoading?: (v:boolean)=>void,
- *   onError?: (error:any)=>void,
- *   mapError?: (error:any)=>any,
- *   finally?: ()=>void,
- * }} opts
- * @returns {Promise<T|any|undefined>}
- */
-export async function runWithBoundary(fn, opts = {}){
-  const { setLoading, onError, mapError, finally: onFinally } = opts;
-  try {
-    if (setLoading) try { setLoading(true); } catch {}
-    const out = await fn();
-    return out;
-  } catch (err) {
-    try { onError && onError(err); } catch {}
-    if (typeof mapError === 'function') {
-      try { return mapError(err); } catch { return undefined; }
-    }
-    return undefined;
-  } finally {
-    if (setLoading) try { setLoading(false); } catch {}
-    if (onFinally) try { onFinally(); } catch {}
-  }
-}

package/examples/031-todo-app-with-eventTest/runtime/extensions/converge.js

@@ -1,63 +0,0 @@
-// converge.js — last-write-wins (or last-local-wins) convergence helpers
-// Expects a store with get/set APIs.
-
-function pathKey(path) {
-  return String(path || '');
-}
-
-/**
- * Apply an inbound change if its clock is newer than the local clock.
- * @param {any} store
- * @param {{ path: string, value: any, clock: number }} change
- * @param {{ clocksPath?: string, arrayStrategy?: 'replace'|'keyedMerge', keyField?: string }} opts
- */
-export function applyConverge(store, change, opts = {}) {
-  const { path, value, clock } = change || {};
-  if (!path) return false;
-  const { clocksPath = 'clocks', arrayStrategy = 'replace', keyField = 'id' } = opts;
-
-  const ck = pathKey(path);
-  const localClock = store.get(`${clocksPath}.${ck}`) || 0;
-  if (!(clock > localClock)) return false; // reject stale or equal
-
-  // Apply the value with optional array strategy
-  if (Array.isArray(value)) {
-    if (arrayStrategy === 'replace') {
-      store.set(path, value);
-    } else {
-      const local = store.get(path) || [];
-      const result = [...local];
-      for (const inc of value) {
-        const k = inc && typeof inc === 'object' ? inc[keyField] : undefined;
-        if (k == null) { result.push(inc); continue; }
-        const sk = String(k);
-        const idx = result.findIndex((x) => x && x[keyField] != null && String(x[keyField]) === sk);
-        if (idx >= 0) {
-          const old = result[idx];
-          result[idx] = (old && typeof old === 'object' && inc && typeof inc === 'object')
-            ? { ...old, ...inc }
-            : inc;
-        } else {
-          result.push(inc);
-        }
-      }
-      store.set(path, result);
-    }
-  } else {
-    store.set(path, value);
-  }
-
-  // Update clock
-  store.set(`${clocksPath}.${ck}`, clock);
-  return true;
-}
-
-/**
- * Build an outbound change with clock and origin-id (for crossTabSync).
- */
-export function publishChange(store, path, value, { clocksPath = 'clocks', now = () => Date.now(), origin } = {}) {
-  const clock = Number(now());
-  store.set(path, value);
-  store.set(`${clocksPath}.${pathKey(path)}`, clock);
-  return { path, value, clock, origin };
-}