@uistate/core 5.1.1 → 5.3.0

package/examples/032-todo-app-with-eventTest/tests/generateTypes.js

@@ -1,191 +0,0 @@
-#!/usr/bin/env node
-/**
- * generateTypes.js - Generate TypeScript definitions from test assertions
- * 
- * Usage: node tests/generateTypes.js
- */
-
-import { createEventTest } from './eventTest.js';
-import todosTests from './todos.test.js';
-import { writeFileSync } from 'fs';
-import { fileURLToPath } from 'url';
-import { dirname, join } from 'path';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-// Collect all type assertions from tests
-const allAssertions = [];
-
-console.log('🔍 Extracting types from tests...\n');
-
-for (const [name, testFn] of Object.entries(todosTests)) {
-  try {
-    // Run test to collect assertions
-    testFn();
-    console.log(`✓ ${name}`);
-  } catch (error) {
-    // Test might fail, but we still want type assertions
-    console.log(`⚠ ${name} (failed but types extracted)`);
-  }
-}
-
-// Simple type generator (minimal version for Node.js)
-class SimpleTypeGenerator {
-  constructor() {
-    this.pathTypes = new Map();
-  }
-
-  parseAssertions(assertions) {
-    for (const assertion of assertions) {
-      const { path, type, elementShape, shape } = assertion;
-      
-      if (type === 'array' && elementShape) {
-        this.pathTypes.set(path, {
-          type: 'array',
-          element: elementShape
-        });
-      } else if (type === 'object' && shape) {
-        this.pathTypes.set(path, {
-          type: 'object',
-          shape: shape
-        });
-      } else if (type) {
-        this.pathTypes.set(path, { type });
-      }
-    }
-  }
-
-  buildTree() {
-    const tree = {};
-    
-    for (const [path, typeInfo] of this.pathTypes) {
-      const parts = path.split('.');
-      let current = tree;
-      
-      for (let i = 0; i < parts.length; i++) {
-        const part = parts[i];
-        
-        if (i === parts.length - 1) {
-          current[part] = { __typeInfo: typeInfo };
-        } else {
-          if (!current[part]) {
-            current[part] = {};
-          }
-          current = current[part];
-        }
-      }
-    }
-    
-    return tree;
-  }
-
-  formatType(typeInfo) {
-    if (typeof typeInfo === 'string') return typeInfo;
-    
-    if (typeInfo.type === 'array' && typeInfo.element) {
-      const elementType = this.formatShape(typeInfo.element);
-      return `Array<${elementType}>`;
-    }
-    
-    if (typeInfo.type === 'object' && typeInfo.shape) {
-      return this.formatShape(typeInfo.shape);
-    }
-    
-    return typeInfo.type || 'unknown';
-  }
-
-  formatShape(shape) {
-    if (typeof shape === 'string') return shape;
-    
-    const props = Object.entries(shape)
-      .map(([k, v]) => {
-        const type = typeof v === 'string' ? v : this.formatShape(v);
-        return `${k}: ${type}`;
-      })
-      .join('; ');
-    
-    return `{ ${props} }`;
-  }
-
-  generateInterface(obj, indent = 0) {
-    const lines = [];
-    const spaces = '  '.repeat(indent);
-    
-    for (const [key, value] of Object.entries(obj)) {
-      if (value.__typeInfo) {
-        const type = this.formatType(value.__typeInfo);
-        lines.push(`${spaces}${key}: ${type};`);
-      } else {
-        lines.push(`${spaces}${key}: {`);
-        lines.push(this.generateInterface(value, indent + 1));
-        lines.push(`${spaces}};`);
-      }
-    }
-    
-    return lines.join('\n');
-  }
-
-  generateDTS() {
-    const lines = [
-      '// Auto-generated from test assertions',
-      '// DO NOT EDIT - regenerate by running: node tests/generateTypes.js',
-      '',
-      'export interface StoreState {',
-    ];
-    
-    const tree = this.buildTree();
-    lines.push(this.generateInterface(tree, 1));
-    lines.push('}');
-    lines.push('');
-    lines.push('export default StoreState;');
-    lines.push('');
-    
-    return lines.join('\n');
-  }
-}
-
-// Note: We need to actually collect assertions from test execution
-// For now, manually define expected types based on test assertions
-const manualAssertions = [
-  {
-    path: 'domain.todos.items',
-    type: 'array',
-    elementShape: {
-      id: 'number',
-      text: 'string',
-      done: 'boolean'
-    }
-  },
-  {
-    path: 'ui.todos.filter',
-    type: 'string'
-  },
-  {
-    path: 'intent.todo.add',
-    type: 'object',
-    shape: {
-      text: 'string'
-    }
-  },
-  {
-    path: 'intent.todo.toggle',
-    type: 'object',
-    shape: {
-      id: 'number'
-    }
-  }
-];
-
-const generator = new SimpleTypeGenerator();
-generator.parseAssertions(manualAssertions);
-
-const dts = generator.generateDTS();
-
-// Write to file
-const outputPath = join(__dirname, '..', 'store.d.ts');
-writeFileSync(outputPath, dts, 'utf-8');
-
-console.log(`\n✅ Generated ${outputPath}`);
-console.log('\n📝 Type definitions:\n');
-console.log(dts);

package/examples/032-todo-app-with-eventTest/tests/run.js

@@ -1,20 +0,0 @@
-#!/usr/bin/env node
-/**
- * run.js - Test runner for Node.js
- * 
- * Usage: node tests/run.js
- */
-
-import { runTests } from './eventTest.js';
-import todosTests from './todos.test.js';
-
-// Combine all test suites
-const allTests = {
-  ...todosTests
-};
-
-// Run tests
-const results = runTests(allTests);
-
-// Exit with appropriate code
-process.exit(results.failed > 0 ? 1 : 0);

package/examples/032-todo-app-with-eventTest/tests/todos.test.js

@@ -1,192 +0,0 @@
-/**
- * todos.test.js - Event-sequence tests for todo functionality
- * 
- * These tests define the behavior AND types of the todo domain
- */
-
-import { createEventTest, test, runTests } from './eventTest.js';
-
-// Helper to set up todo bridges on a test store
-function setupTodoBridges(store) {
-  let nextId = 1;
-  
-  // Add todo
-  store.subscribe('intent.todo.add', (detail) => {
-    const { text } = detail;
-    const items = store.get('domain.todos.items') || [];
-    const todo = { id: nextId++, text: String(text || '').trim(), done: false };
-    if (!todo.text) return;
-    store.set('domain.todos.items', [...items, todo]);
-  });
-  
-  // Toggle todo
-  store.subscribe('intent.todo.toggle', (detail) => {
-    const { id } = detail;
-    const items = store.get('domain.todos.items') || [];
-    const out = items.map(t => (String(t?.id) === String(id)) ? { ...t, done: !t.done } : t);
-    store.set('domain.todos.items', out);
-  });
-  
-  // Clear completed
-  store.subscribe('intent.todo.clearCompleted', () => {
-    const items = store.get('domain.todos.items') || [];
-    store.set('domain.todos.items', items.filter(t => !t.done));
-  });
-  
-  // UI filter
-  store.subscribe('intent.ui.filter', (detail) => {
-    const { filter } = detail;
-    const f = (filter === 'active' || filter === 'completed') ? filter : 'all';
-    store.set('ui.todos.filter', f);
-  });
-}
-
-// Test suite
-const tests = {
-  'add todo creates correct structure': () => {
-    const t = createEventTest({
-      domain: { todos: { items: [] } }
-    });
-    
-    // Set up bridges for this test
-    setupTodoBridges(t.store);
-    
-    // Trigger intent
-    t.trigger('intent.todo.add', { text: 'Buy milk' });
-    
-    // Assert array structure and element types
-    t.assertArrayOf('domain.todos.items', {
-      id: 'number',
-      text: 'string',
-      done: 'boolean'
-    });
-    
-    // Assert array length
-    t.assertArrayLength('domain.todos.items', 1);
-    
-    // Assert specific values
-    const items = t.store.get('domain.todos.items');
-    if (items[0].text !== 'Buy milk') {
-      throw new Error('Expected first todo text to be "Buy milk"');
-    }
-    if (items[0].done !== false) {
-      throw new Error('Expected first todo to not be done');
-    }
-  },
-
-  'toggle todo changes done state': () => {
-    const t = createEventTest({
-      domain: { todos: { items: [{ id: 1, text: 'Buy milk', done: false }] } }
-    });
-    
-    // Set up bridges for this test
-    setupTodoBridges(t.store);
-    
-    // Trigger toggle
-    t.trigger('intent.todo.toggle', { id: 1 });
-    
-    // Assert structure
-    t.assertArrayOf('domain.todos.items', {
-      id: 'number',
-      text: 'string',
-      done: 'boolean'
-    });
-    
-    // Assert done is now true
-    const items = t.store.get('domain.todos.items');
-    if (items[0].done !== true) {
-      throw new Error('Expected todo to be done');
-    }
-  },
-
-  'clear completed removes done todos': () => {
-    const t = createEventTest({
-      domain: {
-        todos: {
-          items: [
-            { id: 1, text: 'Buy milk', done: true },
-            { id: 2, text: 'Walk dog', done: false }
-          ]
-        }
-      }
-    });
-    
-    // Set up bridges for this test
-    setupTodoBridges(t.store);
-    
-    // Trigger clear
-    t.trigger('intent.todo.clearCompleted');
-    
-    // Assert only active todo remains
-    t.assertArrayLength('domain.todos.items', 1);
-    
-    const items = t.store.get('domain.todos.items');
-    if (items[0].text !== 'Walk dog') {
-      throw new Error('Expected only "Walk dog" to remain');
-    }
-  },
-
-  'filter intent updates filter state': () => {
-    const t = createEventTest({
-      ui: { todos: { filter: 'all' } }
-    });
-    
-    // Set up bridges for this test
-    setupTodoBridges(t.store);
-    
-    // Trigger filter change
-    t.trigger('intent.ui.filter', { filter: 'active' });
-    
-    // Assert type
-    t.assertType('ui.todos.filter', 'string');
-    
-    // Assert value
-    t.assertPath('ui.todos.filter', 'active');
-  },
-
-  'intent.todo.add has correct shape': () => {
-    const t = createEventTest({});
-    
-    // Trigger intent
-    t.trigger('intent.todo.add', { text: 'Buy milk' });
-    
-    // Assert intent shape (for type generation)
-    t.assertShape('intent.todo.add', {
-      text: 'string'
-    });
-  },
-
-  'intent.todo.toggle has correct shape': () => {
-    const t = createEventTest({});
-    
-    // Trigger intent
-    t.trigger('intent.todo.toggle', { id: 1 });
-    
-    // Assert intent shape
-    t.assertShape('intent.todo.toggle', {
-      id: 'number'
-    });
-  },
-
-  'empty todos array is valid': () => {
-    const t = createEventTest({
-      domain: { todos: { items: [] } }
-    });
-    
-    // Assert empty array is still typed correctly
-    t.assertArrayOf('domain.todos.items', {
-      id: 'number',
-      text: 'string',
-      done: 'boolean'
-    });
-    
-    t.assertArrayLength('domain.todos.items', 0);
-  }
-};
-
-// Run tests if executed directly
-if (import.meta.url === `file://${process.argv[1]}`) {
-  runTests(tests);
-}
-
-export default tests;

package/playground/exercise001.html

@@ -1,38 +0,0 @@
-<!-- playground/exercise001.html -->
-<!DOCTYPE html>
-<html>
-<head>
-  <script type="importmap">
-    { "imports": { "@uistate/core": "../index.js" } }
-  </script>
-</head>
-<body>
-  <h1>Counter: <span id="count">0</span></h1>
-  <button id="increment">+</button>
-  <button id="decrement">-</button>
-
-  <script type="module">
-    // (1) Import createEventState and create store
-    import { createEventState } from '@uistate/core';
-    const store = createEventState({
-      count: 0
-    });
-
-    // (2) Increment store.count on button click
-    document.getElementById('increment').onclick = () => {
-      const current = store.get('count');
-      store.set('count', current + 1);
-    };
-
-    // (3) Subscribe to count changes
-    store.subscribe('count', (value) => {
-      document.getElementById('count').textContent = value;
-    });
-
-    // (4) Exercise: Add decrement functionality
-    // Hint: Copy the increment handler above and modify it
-    // Your code here:
-
-  </script>
-</body>
-</html>

package/playground/exercise002.html

@@ -1,49 +0,0 @@
-<!-- playground/exercise002.html -->
-<!DOCTYPE html>
-<html>
-<head>
-  <script type="importmap">
-    { "imports": { "@uistate/core": "../index.js" } }
-  </script>
-  <style>
-    body { font-family: system-ui; padding: 2rem; }
-    h1 { margin-bottom: 1rem; }
-  </style>
-</head>
-<body>
-  <h1 id="heading">Counter: <span id="count">0</span></h1>
-  <button id="increment">+</button>
-  <button id="decrement">-</button>
-
-  <script type="module">
-    // Working counter with increment and decrement
-    import { createEventState } from '@uistate/core';
-
-    const store = createEventState({
-      count: 0
-    });
-
-    document.getElementById('increment').onclick = () => {
-      store.set('count', store.get('count') + 1);
-    };
-
-    document.getElementById('decrement').onclick = () => {
-      store.set('count', store.get('count') - 1);
-    };
-
-    store.subscribe('count', (value) => {
-      document.getElementById('count').textContent = value;
-    });
-
-    // Exercise: Change the h1 color based on count value
-    // - If count is positive: make it green
-    // - If count is negative: make it red
-    // - If count is zero: make it black
-    //
-    // Hint 1: Subscribe to 'count' changes
-    // Hint 2: Use document.getElementById('heading').style.color = '...'
-    // Your code here:
-
-  </script>
-</body>
-</html>