@uistate/examples 1.0.0

package/eventState/028-counter-improved-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/eventState/028-counter-improved-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/028-counter-improved-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 };
+};