@uistate/core 5.2.0 → 5.4.0

package/examples/031-todo-app-with-eventTest/style.css

@@ -1,170 +0,0 @@
-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/examples/031-todo-app-with-eventTest/tests/README.md

@@ -1,208 +0,0 @@
-# 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

package/examples/031-todo-app-with-eventTest/tests/eventTest.js

@@ -1,176 +0,0 @@
-/**
- * eventTest.js - Event-Sequence Testing for EventState
- * 
- * Provides TDD-style testing with type extraction capabilities
- */
-
-import { createEventState } from '../runtime/core/eventStateNew.js';
-
-export function createEventTest(initialState = {}) {
-  const store = createEventState(initialState);
-  const eventLog = [];
-  const typeAssertions = [];
-
-  // Spy on all events
-  store.subscribe('*', (detail) => {
-    const { path, value } = detail;
-    eventLog.push({ timestamp: Date.now(), path, value });
-  });
-
-  const api = {
-    store,
-
-    // Trigger a state change
-    trigger(path, value) {
-      store.set(path, value);
-      return this;
-    },
-
-    // Assert exact value
-    assertPath(path, expected) {
-      const actual = store.get(path);
-      if (JSON.stringify(actual) !== JSON.stringify(expected)) {
-        throw new Error(`Expected ${path} to be ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
-      }
-      return this;
-    },
-
-    // Assert type (for type generation)
-    assertType(path, expectedType) {
-      const actual = store.get(path);
-      const actualType = typeof actual;
-      
-      if (actualType !== expectedType) {
-        throw new Error(`Expected ${path} to be type ${expectedType}, got ${actualType}`);
-      }
-      
-      // Store for type generation
-      typeAssertions.push({ path, type: expectedType });
-      return this;
-    },
-
-    // Assert array with element shape (for type generation)
-    assertArrayOf(path, elementShape) {
-      const actual = store.get(path);
-      
-      if (!Array.isArray(actual)) {
-        throw new Error(`Expected ${path} to be an array, got ${typeof actual}`);
-      }
-      
-      // Validate first element matches shape (if array not empty)
-      if (actual.length > 0) {
-        validateShape(actual[0], elementShape, path);
-      }
-      
-      // Store for type generation
-      typeAssertions.push({ path, type: 'array', elementShape });
-      return this;
-    },
-
-    // Assert object shape (for type generation)
-    assertShape(path, objectShape) {
-      const actual = store.get(path);
-      
-      if (typeof actual !== 'object' || actual === null || Array.isArray(actual)) {
-        throw new Error(`Expected ${path} to be an object, got ${typeof actual}`);
-      }
-      
-      validateShape(actual, objectShape, path);
-      
-      // Store for type generation
-      typeAssertions.push({ path, type: 'object', shape: objectShape });
-      return this;
-    },
-
-    // Assert array length
-    assertArrayLength(path, expectedLength) {
-      const actual = store.get(path);
-      
-      if (!Array.isArray(actual)) {
-        throw new Error(`Expected ${path} to be an array`);
-      }
-      
-      if (actual.length !== expectedLength) {
-        throw new Error(`Expected ${path} to have length ${expectedLength}, got ${actual.length}`);
-      }
-      
-      return this;
-    },
-
-    // Assert event fired N times
-    assertEventFired(path, times) {
-      const count = eventLog.filter(e => e.path === path).length;
-      if (times !== undefined && count !== times) {
-        throw new Error(`Expected ${path} to fire ${times} times, fired ${count}`);
-      }
-      return this;
-    },
-
-    // Get event log
-    getEventLog() {
-      return [...eventLog];
-    },
-
-    // Get type assertions (for type generation)
-    getTypeAssertions() {
-      return [...typeAssertions];
-    }
-  };
-
-  return api;
-}
-
-// Helper to validate object shape
-function validateShape(actual, shape, path) {
-  for (const [key, expectedType] of Object.entries(shape)) {
-    if (!(key in actual)) {
-      throw new Error(`Expected ${path} to have property ${key}`);
-    }
-    
-    const actualValue = actual[key];
-    
-    // Handle nested objects
-    if (typeof expectedType === 'object' && !Array.isArray(expectedType)) {
-      validateShape(actualValue, expectedType, `${path}.${key}`);
-    } else {
-      // Primitive type check
-      const actualType = typeof actualValue;
-      if (actualType !== expectedType) {
-        throw new Error(`Expected ${path}.${key} to be type ${expectedType}, got ${actualType}`);
-      }
-    }
-  }
-}
-
-// Simple test runner
-export function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    return true;
-  } catch (error) {
-    console.error(`✗ ${name}`);
-    console.error(`  ${error.message}`);
-    return false;
-  }
-}
-
-// Run multiple tests
-export function runTests(tests) {
-  console.log('\n🧪 Running tests...\n');
-  
-  let passed = 0;
-  let failed = 0;
-  
-  for (const [name, fn] of Object.entries(tests)) {
-    if (test(name, fn)) {
-      passed++;
-    } else {
-      failed++;
-    }
-  }
-  
-  console.log(`\n📊 Results: ${passed} passed, ${failed} failed\n`);
-  
-  return { passed, failed };
-}