@uistate/examples 1.0.0

package/eventState/031-todo-app-with-eventTest/devtools/typeGenerator.js

@@ -0,0 +1,339 @@
+// typeGenerator.js — Generate TypeScript definitions from telemetry
+// Analyzes runtime telemetry to extract state shape and generate .d.ts files
+
+import store from '../app/store.js';
+
+class TypeGenerator {
+  constructor() {
+    this.pathTypes = new Map(); // path → type info
+    this.pathSamples = new Map(); // path → sample values
+  }
+
+  /**
+   * Observe a state change and infer its type
+   */
+  observe(path, value) {
+    const type = this.inferType(value);
+    
+    // Store sample for complex types
+    if (typeof value === 'object' && value !== null) {
+      if (!this.pathSamples.has(path)) {
+        this.pathSamples.set(path, []);
+      }
+      const samples = this.pathSamples.get(path);
+      if (samples.length < 10) {
+        samples.push(value);
+      }
+    }
+    
+    // Merge with existing type info
+    if (this.pathTypes.has(path)) {
+      const existing = this.pathTypes.get(path);
+      this.pathTypes.set(path, this.mergeTypes(existing, type));
+    } else {
+      this.pathTypes.set(path, type);
+    }
+  }
+
+  /**
+   * Infer TypeScript type from a value
+   */
+  inferType(value) {
+    if (value === null) return 'null';
+    if (value === undefined) return 'undefined';
+    
+    if (Array.isArray(value)) {
+      if (value.length === 0) return 'Array<unknown>';
+      
+      // Sample first few elements and merge their types
+      const samples = value.slice(0, 10);
+      let mergedElementType = null;
+      
+      for (const sample of samples) {
+        const elementType = this.inferType(sample);
+        if (mergedElementType === null) {
+          mergedElementType = elementType;
+        } else {
+          mergedElementType = this.mergeTypes(mergedElementType, elementType);
+        }
+      }
+      
+      return `Array<${this.typeToString(mergedElementType)}>`;
+    }
+    
+    if (typeof value === 'object') {
+      // Infer object shape
+      const shape = {};
+      for (const [key, val] of Object.entries(value)) {
+        shape[key] = this.inferType(val);
+      }
+      return shape;
+    }
+    
+    // Primitives
+    if (typeof value === 'string') return 'string';
+    if (typeof value === 'number') return 'number';
+    if (typeof value === 'boolean') return 'boolean';
+    
+    return 'unknown';
+  }
+
+  /**
+   * Convert type representation to string
+   */
+  typeToString(type) {
+    if (typeof type === 'string') return type;
+    
+    if (typeof type === 'object' && !Array.isArray(type)) {
+      const props = Object.entries(type)
+        .map(([k, v]) => `${k}: ${this.typeToString(v)}`)
+        .join('; ');
+      return `{ ${props} }`;
+    }
+    
+    return 'unknown';
+  }
+
+  /**
+   * Merge two type definitions (for union types)
+   */
+  mergeTypes(type1, type2) {
+    // Normalize for comparison
+    const str1 = this.normalizeType(type1);
+    const str2 = this.normalizeType(type2);
+    
+    if (str1 === str2) return type1;
+    
+    // Handle string types
+    if (typeof type1 === 'string' && typeof type2 === 'string') {
+      if (type1 === type2) return type1;
+      // Avoid duplicate unions
+      if (type1.includes(type2)) return type1;
+      if (type2.includes(type1)) return type2;
+      return `${type1} | ${type2}`;
+    }
+    
+    // Handle object merging (merge properties, not create union)
+    if (typeof type1 === 'object' && typeof type2 === 'object' && 
+        !Array.isArray(type1) && !Array.isArray(type2)) {
+      const merged = { ...type1 };
+      for (const [key, val] of Object.entries(type2)) {
+        if (key in merged) {
+          merged[key] = this.mergeTypes(merged[key], val);
+        } else {
+          merged[key] = val;
+        }
+      }
+      return merged;
+    }
+    
+    // Mixed types: create union
+    if (typeof type1 === 'string' && typeof type2 === 'object') {
+      return `${type1} | ${this.typeToString(type2)}`;
+    }
+    if (typeof type1 === 'object' && typeof type2 === 'string') {
+      return `${this.typeToString(type1)} | ${type2}`;
+    }
+    
+    return type1; // Default: keep first type
+  }
+
+  /**
+   * Normalize type for comparison
+   */
+  normalizeType(type) {
+    if (typeof type === 'string') return type;
+    return JSON.stringify(type, Object.keys(type).sort());
+  }
+
+  /**
+   * Build hierarchical tree from flat paths
+   */
+  buildTree() {
+    const tree = {};
+    
+    for (const [path, type] 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) {
+          // Leaf node
+          current[part] = { __type: type };
+        } else {
+          // Branch node
+          if (!current[part]) {
+            current[part] = {};
+          }
+          current = current[part];
+        }
+      }
+    }
+    
+    return tree;
+  }
+
+  /**
+   * Generate TypeScript interface from type info
+   */
+  generateInterface(obj, indent = 0) {
+    const lines = [];
+    const spaces = '  '.repeat(indent);
+    
+    for (const [key, value] of Object.entries(obj)) {
+      if (value.__type !== undefined) {
+        // Leaf node with type
+        const type = this.formatType(value.__type);
+        lines.push(`${spaces}${key}: ${type};`);
+      } else {
+        // Nested object
+        lines.push(`${spaces}${key}: {`);
+        lines.push(this.generateInterface(value, indent + 1));
+        lines.push(`${spaces}};`);
+      }
+    }
+    
+    return lines.join('\n');
+  }
+
+  /**
+   * Format type for TypeScript output
+   */
+  formatType(type) {
+    if (typeof type === 'string') {
+      return type;
+    }
+    
+    if (typeof type === 'object' && !Array.isArray(type)) {
+      // Inline object type
+      const props = Object.entries(type)
+        .map(([k, v]) => `${k}: ${this.formatType(v)}`)
+        .join('; ');
+      return `{ ${props} }`;
+    }
+    
+    return 'unknown';
+  }
+
+  /**
+   * Generate complete .d.ts file
+   */
+  generateDTS() {
+    const lines = [
+      '// Auto-generated from runtime telemetry',
+      '// DO NOT EDIT - regenerate by using the app and clicking "Generate Types"',
+      '',
+      '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');
+  }
+
+  /**
+   * Parse telemetry buffer and extract types
+   */
+  parseBuffer(buffer) {
+    for (const entry of buffer) {
+      if (entry.level !== 'log') continue;
+      
+      const args = entry.args;
+      if (!args || args.length < 2) continue;
+      
+      const tag = args[0];
+      
+      // Parse [state] entries
+      if (typeof tag === 'string' && tag.startsWith('[state]')) {
+        const path = tag.replace('[state] ', '');
+        const value = args[1];
+        this.observe(path, value);
+      }
+      
+      // Parse [intent] entries
+      if (typeof tag === 'string' && tag.startsWith('[intent]')) {
+        const intentName = tag.replace('[intent] ', '');
+        const path = `intent.${intentName}`;
+        const value = args[1];
+        this.observe(path, value);
+      }
+    }
+  }
+
+  /**
+   * Parse test assertions and extract types
+   */
+  parseTestAssertions(assertions) {
+    for (const assertion of assertions) {
+      const { path, type, elementShape, shape } = assertion;
+      
+      if (type === 'array' && elementShape) {
+        // Array type with element shape
+        this.pathTypes.set(path, `Array<${this.typeToString(elementShape)}>`);
+      } else if (type === 'object' && shape) {
+        // Object type with shape
+        this.pathTypes.set(path, shape);
+      } else if (type) {
+        // Primitive type
+        this.pathTypes.set(path, type);
+      }
+    }
+  }
+
+  /**
+   * Save .d.ts file (browser download)
+   */
+  save(filename = 'store.d.ts') {
+    const dts = this.generateDTS();
+    const blob = new Blob([dts], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+}
+
+// Create and expose type generator
+const typeGenerator = new TypeGenerator();
+window.__typeGenerator = typeGenerator;
+
+// Subscribe to all state changes for live type inference
+if (store && store.subscribe) {
+  store.subscribe('*', (detail) => {
+    const { path, value } = detail;
+    typeGenerator.observe(path, value);
+  });
+  
+  console.info('[typeGenerator] Live type inference enabled');
+}
+
+// Register with dev dock
+if (window.__devdock && typeof window.__devdock.register === 'function') {
+  window.__devdock.register({
+    id: 'generate-types',
+    label: 'Types',
+    title: 'Generate TypeScript definitions',
+    onClick: () => {
+      // Also parse telemetry buffer for historical data
+      if (window.__telemetry) {
+        const buffer = window.__telemetry.get();
+        typeGenerator.parseBuffer(buffer);
+      }
+      
+      typeGenerator.save('store.d.ts');
+      console.info('[typeGenerator] Generated store.d.ts');
+    }
+  });
+}
+
+export default typeGenerator;
+export { TypeGenerator };

package/eventState/031-todo-app-with-eventTest/index.html

@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>009 Todo App with eventTest</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body data-theme="dark" data-bind="data-theme: ui.theme">
+  <nav style="display:flex; gap:10px; align-items:center; padding:10px 12px;">
+    <a href="/" data-link>Home</a>
+    <a href="/todo-demo" data-link>Todo app demo</a>
+    <span class="loading-badge" aria-live="polite">Loading…</span>
+    <span style="flex:1"></span>
+    <button class="btn" title="Toggle theme" data-on="click: toggleTheme() | log('toggle theme') | logPath('ui.theme')">Theme</button>
+  </nav>
+  <div data-route-root></div>
+
+  <script type="module" src="./app/router.js"></script>
+  <!-- Expose the store globally so stateTracker (optional) can bind without tight coupling -->
+  <script type="module">
+    import store from './app/store.js';
+    window.stateTrackerStore = store;
+    
+    // Bind loading badge to route transitioning state (after DOM ready)
+    requestAnimationFrame(() => {
+      const badge = document.querySelector('.loading-badge');
+      if (badge) {
+        store.subscribe('ui.route.transitioning', (isTransitioning) => {
+          badge.style.display = isTransitioning ? 'inline' : 'none';
+        });
+        // Set initial state (default hidden in CSS)
+        badge.style.display = store.get('ui.route.transitioning') ? 'inline' : 'none';
+      }
+    });
+  </script>
+  <!-- Install behaviors runtime with inline actions (no separate registry file) -->
+  <script type="module">
+    import store from './app/store.js';
+    import { installBehaviors } from './runtime/core/behaviors.runtime.js';
+    
+    // Inline action registry - just the actions used in this example
+    const registry = {
+      toggleTheme(ctx) {
+        const cur = ctx.get('ui.theme');
+        const next = (cur === 'dark') ? 'light' : 'dark';
+        ctx.set('ui.theme', next);
+        console.log('[action] theme ->', next);
+      },
+      log(ctx, ...args) {
+        console.log('[action]', ...args);
+      },
+      logPath(ctx, path) {
+        console.log('[action]', String(path), ctx.get(String(path)));
+      }
+    };
+    
+    window.behaviorsWhitelistDefault = ['ui.counter', 'ui.name', 'ui.items', 'ui.newItem', 'ui.itemsCount', 'ui.guard.whitelist', 'ui.theme', 'intent.**'];
+    window.behaviorsWhitelist = [...window.behaviorsWhitelistDefault];
+    const recUn = window.__recorder?.install?.(store);
+    window.behaviorsUninstall = installBehaviors(store, {
+      registry,
+      root: document,
+      writablePrefixes: ['ui.','intent.'],
+      writableWhitelist: window.behaviorsWhitelist,
+      debug: true,
+      onStep: (e) => { 
+        try { window.__recorder?.onStep?.(e); } catch{}
+        // Log all behavior steps to telemetry
+        try {
+          if (e.phase === 'started') {
+            console.log(`[action] ${e.name}(${e.args?.join(', ') || ''})`, { event: e.event?.type, element: e.el?.tagName });
+          }
+          if (e.phase === 'applied' && e.write) {
+            console.log(`[write] ${e.write}`, store.get(e.write));
+          }
+          if (e.phase === 'blocked') {
+            console.warn(`[blocked] ${e.name} tried to write ${e.write}`, e.reason);
+          }
+        } catch{}
+      },
+    });
+    try { store.set('ui.guard.whitelist', [...window.behaviorsWhitelist]); } catch {}
+    try {
+      const cur = store.get('ui.theme');
+      if (!cur) {
+        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        store.set('ui.theme', prefersDark ? 'dark' : 'light');
+      }
+      try { store.subscribe && store.subscribe('ui.theme', () => { try { localStorage.setItem('ui.theme', store.get('ui.theme')); } catch {} }); } catch {}
+    } catch {}
+  </script>
+  <script type="module" src="./devtools/stateTracker.js"></script>
+  <!-- Dev dock MUST load first so __devdock is available -->
+  <script type="module" src="./devtools/dock.js"></script>
+  <!-- Now load tools that register with the dock -->
+  <script type="module" src="./devtools/telemetry.js"></script>
+  <script type="module" src="./devtools/typeGenerator.js"></script>
+  <script type="module" src="./devtools/stateTracker.dock.js"></script>
+  <!-- App bridges: intent→domain and derived wildcards -->
+  <script type="module" src="./app/bridges.js"></script>
+</body>
+</html>