juxscript 1.1.28 → 1.1.30

package/lib/components/registry.ts

@@ -1,164 +1,193 @@
 /**
- * Global component registry for debugging and console access
- * All rendered components are automatically registered here
- * 
- * Usage in console:
- *   __jux.get('hero-1').state.title = 'New Title'
- *   __jux.list()
- *   __jux.find('hero')
- *   __jux.create('button', 'btn-1', { label: 'Click Me' }).render()
+ * Simplified JUX Component Registry
+ * Lean console debugging interface
  */
 
 import { BaseComponent } from './base/BaseComponent.js';
+import { stateHistory } from './history/StateHistory.js';
 
 class ComponentRegistry {
-    private components: Map<string, BaseComponent<any>> = new Map();
+    private components: BaseComponent<any>[] = [];
 
-    /**
-     * Register a component instance
-     */
     register(component: BaseComponent<any>): void {
-        this.components.set(component._id, component);
-        console.debug(`[Jux Registry] Registered: ${component._id}`);
+        // Avoid duplicates
+        if (!this.components.find(c => c._id === component._id)) {
+            this.components.push(component);
+        }
     }
 
-    /**
-     * Unregister a component
-     */
     unregister(id: string): void {
-        this.components.delete(id);
-        console.debug(`[Jux Registry] Unregistered: ${id}`);
+        this.components = this.components.filter(c => c._id !== id);
     }
 
     /**
-     * Get a component by ID
+     * Get component by index or ID
      */
-    get<T extends BaseComponent<any>>(id: string): T | undefined {
-        return this.components.get(id) as T;
+    get(indexOrId: number | string): BaseComponent<any> | undefined {
+        if (typeof indexOrId === 'number') {
+            return this.components[indexOrId];
+        }
+        return this.components.find(c => c._id === indexOrId);
     }
 
     /**
-     * Check if component exists
+     * Print indexed list to console
      */
-    has(id: string): boolean {
-        return this.components.has(id);
+    list(): void {
+        if (this.components.length === 0) {
+            console.log('📭 No components registered');
+            return;
+        }
+
+        console.log('\n📋 Registered Components:\n');
+        this.components.forEach((comp, idx) => {
+            console.log(`  [${idx}] ${comp._id} → ${comp.constructor.name}`);
+        });
+        console.log(`\n💡 Access via: _jux.get(${0}) or _jux.get('${this.components[0]._id}')\n`);
     }
 
     /**
-     * List all registered component IDs
+     * Show component tree with state, history, events
      */
-    list(): string[] {
-        return Array.from(this.components.keys());
+    tree(indexOrId?: number | string): void {
+        let comp: BaseComponent<any> | undefined;
+
+        if (indexOrId === undefined) {
+            // Show all components
+            this.components.forEach((c, idx) => this._printTree(c, idx));
+            return;
+        }
+
+        comp = this.get(indexOrId);
+        if (!comp) {
+            console.error(`❌ Component not found: ${indexOrId}`);
+            return;
+        }
+
+        this._printTree(comp, typeof indexOrId === 'number' ? indexOrId : undefined);
     }
 
-    /**
-     * Find components by partial ID match
-     */
-    find(pattern: string): BaseComponent<any>[] {
-        const regex = new RegExp(pattern, 'i');
-        return Array.from(this.components.values())
-            .filter(comp => regex.test(comp._id));
+    private _printTree(comp: BaseComponent<any>, index?: number): void {
+        const idx = index !== undefined ? `[${index}]` : '';
+        const stateChanges = stateHistory.getComponentHistory(comp._id);
+        const events = stateHistory.getComponentEvents(comp._id);
+        const syncCount = (comp as any)._syncBindings?.length || 0;
+        const bindCount = (comp as any)._bindings?.length || 0;
+
+        console.group(`🌳 ${idx} ${comp._id} (${comp.constructor.name})`);
+
+        console.log('📊 State:', comp.state);
+
+        if (stateChanges.length > 0) {
+            console.log(`📜 History: ${stateChanges.length} changes`);
+            console.log('   Last 3:', stateChanges.slice(-3).map(s =>
+                `${s.property}: ${s.oldValue} → ${s.newValue}`
+            ));
+        }
+
+        if (syncCount > 0) {
+            console.log(`🔗 Syncs: ${syncCount} active`);
+        }
+
+        if (bindCount > 0 || events.length > 0) {
+            console.log(`⚡ Events: ${bindCount} binds, ${events.length} fired`);
+        }
+
+        console.log(`\n💡 Commands:`);
+        console.log(`   _jux.get(${index ?? `'${comp._id}'`}).state.prop = value`);
+        console.log(`   _jux.get(${index ?? `'${comp._id}'`}).rollback()`);
+        console.log(`   _jux.get(${index ?? `'${comp._id}'`}).timeline()`);
+
+        console.groupEnd();
     }
 
     /**
      * Get all components
      */
     all(): BaseComponent<any>[] {
-        return Array.from(this.components.values());
-    }
-
-    /**
-     * Get components by type (constructor name)
-     */
-    byType(typeName: string): BaseComponent<any>[] {
-        return Array.from(this.components.values())
-            .filter(comp => comp.constructor.name === typeName);
+        return this.components;
     }
 
     /**
-     * Clear all registered components
+     * Clear registry
      */
     clear(): void {
-        this.components.clear();
-        console.debug('[Jux Registry] Cleared all components');
-    }
-
-    /**
-     * Get registry stats
-     */
-    stats(): { total: number; types: Record<string, number> } {
-        const types: Record<string, number> = {};
-
-        this.components.forEach(comp => {
-            const type = comp.constructor.name;
-            types[type] = (types[type] || 0) + 1;
-        });
-
-        return {
-            total: this.components.size,
-            types
-        };
+        this.components = [];
+        stateHistory.clear();
     }
 }
 
-// Global singleton instance
 export const registry = new ComponentRegistry();
 
-// Expose to window for console access
+// ✅ Expose lean console interface
 if (typeof window !== 'undefined') {
-    (window as any).__jux = {
-        get: (id: string) => registry.get(id),
+    (window as any)._jux = {
+        /**
+         * Get component by index or ID
+         * @example
+         *   const h = _jux.get(0)           // Get first component
+         *   const h = _jux.get('hero-1')    // Get by ID
+         *   h.state.title = 'New Title'     // Direct mutation
+         *   h.rollback()                    // Undo last change
+         */
+        get: (indexOrId: number | string) => registry.get(indexOrId),
+
+        /**
+         * List all components with indices
+         * @example
+         *   _jux.list()
+         *   // [0] hero-1 → Hero
+         *   // [1] nav-main → Nav
+         */
         list: () => registry.list(),
-        find: (pattern: string) => registry.find(pattern),
+
+        /**
+         * Show component tree (state, history, events, syncs)
+         * @example
+         *   _jux.tree()           // Show all
+         *   _jux.tree(0)          // Show first component
+         *   _jux.tree('hero-1')   // Show specific component
+         */
+        tree: (indexOrId?: number | string) => registry.tree(indexOrId),
+
+        /**
+         * Get all components
+         */
         all: () => registry.all(),
-        byType: (type: string) => registry.byType(type),
-        stats: () => registry.stats(),
+
+        /**
+         * Clear all components and history
+         */
         clear: () => registry.clear(),
 
-        // Factory helpers for creating components from console
-        create: (type: string, id: string, options?: any) => {
-            const jux = (window as any).jux;
-            if (!jux || !jux[type]) {
-                console.error(`Component type "${type}" not found`);
-                return null;
-            }
-            return jux[type](id, options);
-        },
-
-        // Debug helper
-        debug: (id: string) => {
-            const comp = registry.get(id);
-            if (!comp) {
-                console.error(`Component "${id}" not found`);
-                return;
-            }
-            console.group(`🔍 Component: ${id}`);
-            console.log('Type:', comp.constructor.name);
-            console.log('State:', comp.state);
-            console.log('Props:', comp.props);
-            console.log('Container:', comp.container);
-            console.log('Instance:', comp);
-            console.groupEnd();
+        /**
+         * Access global state history
+         */
+        history: {
+            stats: () => stateHistory.getStats(),
+            timeline: () => stateHistory.getTimeline(),
+            clear: () => stateHistory.clear()
         }
     };
 
     console.log(`
-🎨 Jux DevTools Available!
-
-Available commands:
-  __jux.get('id')          Get component instance
-  __jux.list()             List all component IDs
-  __jux.find('pattern')    Search components by ID
-  __jux.all()              Get all components
-  __jux.byType('Hero')     Get components by type
-  __jux.stats()            Show registry statistics
-  __jux.debug('id')        Debug component details
-  __jux.create('hero', 'h1', {...})  Create component from console
-
-Example:
-  const h = __jux.get('hero-1')
-  h.state.title = 'Changed from console!'
-  h.hide()
-  h.show()
+🎨 JUX DevTools Ready!
+
+Quick Commands:
+  _jux.list()              List all components with indices
+  _jux.tree()              Show component tree (state, history, events)
+  _jux.get(0)              Get first component
+  _jux.get('hero-1')       Get component by ID
+
+Direct Manipulation:
+  const h = _jux.get(0)
+  h.state.title = 'New!'   Mutate state directly
+  h.rollback()             Undo last change
+  h.rollforward()          Redo change
+  h.timeline()             View full history
+
+History:
+  _jux.history.stats()     Global statistics
+  _jux.history.timeline()  Complete timeline
     `);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.28",
+  "version": "1.1.30",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",