@uistate/examples 1.0.0

package/eventState/028-counter-improved-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/028-counter-improved-eventTest/store.d.ts

@@ -0,0 +1,8 @@
+// Auto-generated from test assertions
+// DO NOT EDIT - regenerate by running: node tests/generateTypes.js
+
+export interface StoreState {
+  count: number;
+}
+
+export default StoreState;

package/eventState/028-counter-improved-eventTest/style.css

@@ -0,0 +1,170 @@
+body {
+    font: 14px/1.4 system-ui, sans-serif;
+    margin: 0;
+}
+
+/* Hide focus outline on route container (set programmatically for a11y) */
+[data-route-root]:focus {
+    outline: none;
+}
+
+nav {
+    padding: 10px 14px;
+    border-bottom: 1px solid #eee;
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 10;
+}
+
+nav a {
+    margin-right: 12px;
+    text-decoration: none;
+    color: #0366d6;
+}
+
+nav a.active {
+    font-weight: 600;
+}
+
+main {
+    padding: 16px;
+}
+
+.loading-badge {
+    margin-left: 8px;
+    font-size: 12px;
+    color: #666;
+    display: none;
+}
+
+html[data-transitioning="on"] .loading-badge {
+    display: inline;
+}
+
+/* 404 view demo: tint the top bar only on notfound */
+html[data-view="notfound"] nav {
+    background: #fff7f7;
+    border-bottom-color: #f5c2c2;
+}
+
+html[data-view="notfound"] nav a {
+    color: #b91c1c;
+}
+
+html[data-view="notfound"] .loading-badge {
+    color: #b91c1c;
+}
+
+/* Tabs styling (used by views/demo.js) */
+.tabs {
+    margin-top: 12px;
+}
+
+.tab-bar {
+    display: flex;
+    gap: 8px;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 6px;
+}
+
+.tab {
+    appearance: none;
+    border: 1px solid #ddd;
+    background: #fafafa;
+    border-radius: 6px;
+    padding: 6px 10px;
+    cursor: pointer;
+}
+
+.tab:hover {
+    background: #f3f4f6;
+}
+
+.tab.active {
+    background: #e5efff;
+    border-color: #bcd1ff;
+}
+
+.tab-panels {
+    padding-top: 10px;
+}
+
+.tab-panel {
+    display: none;
+}
+
+.tab-panel[data-active] {
+    display: block;
+}
+
+:root {
+    --bg: #ffffff;
+    --fg: #111111;
+    --muted: #555;
+    --card: #f6f6f6;
+    --border: #e5e5e5;
+    --btn-bg: #f8f8f8;
+    --btn-fg: #111;
+    --btn-border: #ddd;
+    --input-bg: #fff;
+    --input-fg: #222;
+    --input-border: #d6d6d6;
+}
+
+body[data-theme='dark'] {
+    --bg: #0f1115;
+    --fg: #cfd3dc;
+    --muted: #9aa3b2;
+    --card: #151923;
+    --border: #242a36;
+    --btn-bg: #1a2030;
+    --btn-fg: #cfd3dc;
+    --btn-border: #2b3242;
+    --input-bg: #1b2130;
+    --input-fg: #cfd3dc;
+    --input-border: #2b3242;
+}
+
+body {
+    background: var(--bg);
+    color: var(--fg);
+}
+
+a {
+    color: inherit;
+}
+
+nav {
+    background: var(--card);
+    border-bottom: 1px solid var(--border);
+}
+
+.btn {
+    appearance: none;
+    border: 1px solid var(--btn-border);
+    background: var(--btn-bg);
+    color: var(--btn-fg);
+    border-radius: 6px;
+    padding: 6px 10px;
+    cursor: pointer;
+}
+
+input,
+select,
+textarea {
+    background: var(--input-bg);
+    color: var(--input-fg);
+    border: 1px solid var(--input-border);
+    border-radius: 6px;
+    padding: 6px 8px;
+}
+
+input::placeholder,
+textarea::placeholder {
+    color: color-mix(in srgb, var(--input-fg) 55%, transparent);
+}
+
+.btn:hover {
+    filter: brightness(1.05);
+}

package/eventState/028-counter-improved-eventTest/tests/README.md

@@ -0,0 +1,208 @@
+# EventTest - Event-Sequence Testing
+
+Event-driven TDD for EventState applications.
+
+## Features
+
+- ✅ **Event-sequence testing** - Test state changes through event flows
+- ✅ **Type extraction** - Generate `.d.ts` files from test assertions
+- ✅ **No DOM required** - Tests run in Node.js
+- ✅ **Fluent API** - Chainable assertions
+- ✅ **Type-safe** - Tests define types, not manual definitions
+
+## Usage
+
+### Writing Tests
+
+```javascript
+import { createEventTest, test } from './eventTest.js';
+
+test('add todo', () => {
+  const t = createEventTest({
+    domain: { todos: { items: [] } }
+  });
+  
+  // Trigger intent
+  t.trigger('intent.todo.add', { text: 'Buy milk' });
+  
+  // Assert types (for .d.ts generation)
+  t.assertArrayOf('domain.todos.items', {
+    id: 'number',
+    text: 'string',
+    done: 'boolean'
+  });
+  
+  // Assert values
+  t.assertArrayLength('domain.todos.items', 1);
+});
+```
+
+### Running Tests
+
+```bash
+# Run all tests
+node tests/run.js
+
+# Or run specific test file
+node tests/todos.test.js
+```
+
+### Generating Types
+
+```bash
+# Generate store.d.ts from test assertions
+node tests/generateTypes.js
+```
+
+## API Reference
+
+### `createEventTest(initialState)`
+
+Creates a test instance with isolated store.
+
+**Returns:** Test API object
+
+### Test API
+
+#### `.trigger(path, value)`
+
+Set a value in the store (trigger state change).
+
+```javascript
+t.trigger('intent.todo.add', { text: 'Buy milk' });
+```
+
+#### `.assertPath(path, expected)`
+
+Assert exact value at path.
+
+```javascript
+t.assertPath('ui.theme', 'dark');
+```
+
+#### `.assertType(path, type)`
+
+Assert primitive type. Stores type info for `.d.ts` generation.
+
+```javascript
+t.assertType('ui.theme', 'string');
+```
+
+#### `.assertArrayOf(path, elementShape)`
+
+Assert array with element shape. Stores type info for `.d.ts` generation.
+
+```javascript
+t.assertArrayOf('domain.todos.items', {
+  id: 'number',
+  text: 'string',
+  done: 'boolean'
+});
+```
+
+#### `.assertShape(path, objectShape)`
+
+Assert object shape. Stores type info for `.d.ts` generation.
+
+```javascript
+t.assertShape('ui.route', {
+  path: 'string',
+  view: 'string'
+});
+```
+
+#### `.assertArrayLength(path, length)`
+
+Assert array length.
+
+```javascript
+t.assertArrayLength('domain.todos.items', 3);
+```
+
+#### `.assertEventFired(path, times)`
+
+Assert event fired N times.
+
+```javascript
+t.assertEventFired('domain.todos.items', 1);
+```
+
+#### `.getEventLog()`
+
+Get all captured events.
+
+```javascript
+const log = t.getEventLog();
+// [{ timestamp: 123, path: 'domain.todos.items', value: [...] }]
+```
+
+#### `.getTypeAssertions()`
+
+Get all type assertions (for type generation).
+
+```javascript
+const assertions = t.getTypeAssertions();
+// [{ path: 'domain.todos.items', type: 'array', elementShape: {...} }]
+```
+
+## Workflow
+
+### 1. Write Tests (TDD)
+
+```javascript
+// tests/todos.test.js
+test('add todo', () => {
+  const t = createEventTest({ domain: { todos: { items: [] } } });
+  t.trigger('intent.todo.add', { text: 'Buy milk' });
+  t.assertArrayOf('domain.todos.items', {
+    id: 'number',
+    text: 'string',
+    done: 'boolean'
+  });
+});
+```
+
+### 2. Implement Bridges
+
+```javascript
+// app/bridges.js
+store.subscribe('intent.todo.add', ({ text }) => {
+  const items = store.get('domain.todos.items') || [];
+  const id = items.length + 1;
+  store.set('domain.todos.items', [...items, { id, text, done: false }]);
+});
+```
+
+### 3. Generate Types
+
+```bash
+node tests/generateTypes.js
+# Creates store.d.ts with perfect types!
+```
+
+### 4. Build UI
+
+```javascript
+// Now you have autocomplete!
+const items = store.get('domain.todos.items');
+// TypeScript knows: Array<{ id: number, text: string, done: boolean }>
+```
+
+## Benefits
+
+- **Tests define behavior** - TDD workflow
+- **Types derived from tests** - No manual type definitions
+- **Perfect coverage** - Every test adds type information
+- **No DOM needed** - Fast feedback loop
+- **Deterministic** - Same tests = same types
+- **Watcher-friendly** - Auto-regenerate on test changes
+
+## Philosophy
+
+EventTest follows EventState's core principles:
+
+1. **State-first** - Tests work with state paths
+2. **Dot-paths everywhere** - No special syntax
+3. **Types are optional** - Tests work without TypeScript
+4. **Types are derived** - Not hand-written
+5. **JS-first** - Clean, readable code