@uistate/examples 1.0.0

package/eventState/030-todo-app-with-eventTest/runtime/core/eventStateNew.js

@@ -0,0 +1,149 @@
+/**
+ * EventState v2 - Optimized Path-Based State Management
+ *
+ * A lightweight, performant state management library using path-based subscriptions.
+ * Optimized for selective notifications and granular updates.
+ *
+ * Features:
+ * - Path-based get/set operations (e.g., 'user.profile.name')
+ * - Selective subscriptions (only relevant subscribers fire)
+ * - Wildcard subscriptions (e.g., 'user.*' catches all user changes)
+ * - Global subscriptions (e.g., '*' catches all changes)
+ * - Zero dependencies
+ * - ~2KB minified
+ *
+ * Performance characteristics:
+ * - 2-9x faster than Zustand for selective subscriptions
+ * - Competitive overall performance
+ * - Minimal rendering overhead (1.27x faster paint times)
+ *
+ * @example
+ * const store = createEventState({ count: 0, user: { name: 'Alice' } });
+ *
+ * // Subscribe to specific path (receives value directly)
+ * const unsub = store.subscribe('count', (value) => {
+ *   console.log('Count changed:', value);
+ * });
+ *
+ * // Update state
+ * store.set('count', 1);
+ *
+ * // Get state
+ * const count = store.get('count');
+ *
+ * // Wildcard subscription
+ * store.subscribe('user.*', ({ path, value }) => {
+ *   console.log(`User field ${path} changed to:`, value);
+ * });
+ *
+ * // Global subscription
+ * store.subscribe('*', ({ path, value }) => {
+ *   console.log(`State changed at ${path}:`, value);
+ * });
+ *
+ * // Cleanup
+ * unsub();
+ * store.destroy();
+ */
+
+export function createEventState(initial = {}) {
+  const state = JSON.parse(JSON.stringify(initial));
+  const listeners = new Map();
+  let destroyed = false;
+
+  return {
+    /**
+     * Get value at path
+     * @param {string} path - Dot-separated path (e.g., 'user.profile.name')
+     * @returns {*} Value at path, or entire state if no path provided
+     */
+    get(path) {
+      if (destroyed) throw new Error('Cannot get from destroyed store');
+      if (!path) return state;
+      return path.split(".").reduce((obj, key) => obj?.[key], state);
+    },
+
+    /**
+     * Set value at path and notify subscribers
+     * @param {string} path - Dot-separated path (e.g., 'user.profile.name')
+     * @param {*} value - New value
+     * @returns {*} The value that was set
+     */
+    set(path, value) {
+      if (destroyed) throw new Error('Cannot set on destroyed store');
+      if (!path) return value;
+
+      const parts = path.split(".");
+      const key = parts.pop();
+      let cur = state;
+
+      // Navigate to parent object, creating nested objects as needed
+      for (const p of parts) {
+        if (!cur[p]) cur[p] = {};
+        cur = cur[p];
+      }
+
+      const oldValue = cur[key];
+      cur[key] = value;
+
+      if (!destroyed) {
+        const detail = { path, value, oldValue };
+
+        // Notify exact path subscribers (pass value directly for backwards compatibility)
+        const exactListeners = listeners.get(path);
+        if (exactListeners) {
+          exactListeners.forEach(cb => cb(value));
+        }
+
+        // Notify wildcard subscribers for all parent paths (pass detail object)
+        for (let i = 0; i < parts.length; i++) {
+          const parentPath = parts.slice(0, i + 1).join('.');
+          const wildcardListeners = listeners.get(`${parentPath}.*`);
+          if (wildcardListeners) {
+            wildcardListeners.forEach(cb => cb(detail));
+          }
+        }
+
+        // Notify global subscribers (pass detail object)
+        const globalListeners = listeners.get('*');
+        if (globalListeners) {
+          globalListeners.forEach(cb => cb(detail));
+        }
+      }
+
+      return value;
+    },
+
+    /**
+     * Subscribe to changes at path
+     * @param {string} path - Path to subscribe to (supports wildcards: 'user.*', '*')
+     * @param {Function} handler - Callback function receiving { path, value, oldValue }
+     * @returns {Function} Unsubscribe function
+     */
+    subscribe(path, handler) {
+      if (destroyed) throw new Error('Cannot subscribe to destroyed store');
+      if (!path || typeof handler !== 'function') {
+        throw new TypeError('subscribe requires path and handler');
+      }
+
+      if (!listeners.has(path)) {
+        listeners.set(path, new Set());
+      }
+      listeners.get(path).add(handler);
+
+      return () => listeners.get(path)?.delete(handler);
+    },
+
+    /**
+     * Destroy store and clear all subscriptions
+     */
+    destroy() {
+      if (!destroyed) {
+        destroyed = true;
+        listeners.clear();
+      }
+    }
+  };
+}
+
+export default createEventState;

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

package/eventState/030-todo-app-with-eventTest/runtime/core/router.js

@@ -0,0 +1,271 @@
+// 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/eventState/030-todo-app-with-eventTest/store.d.ts

@@ -0,0 +1,18 @@
+// Auto-generated from test assertions
+// DO NOT EDIT - regenerate by running: node tests/generateTypes.js
+
+export interface StoreState {
+  todos: {
+    items: Array<{ id: number; text: string; done: boolean }>;
+    filter: string;
+  };
+  ui: {
+    route: {
+      path: string;
+      view: string;
+    };
+    theme: string;
+  };
+}
+
+export default StoreState;