juxscript 1.1.28 → 1.1.30

package/lib/components/history/StateHistory.ts

@@ -0,0 +1,200 @@
+/**
+ * State History Tracker
+ * Tracks all state mutations for time-travel debugging and undo/redo
+ */
+
+export interface StateSnapshot<T = any> {
+    timestamp: number;
+    componentId: string;
+    property: string;
+    oldValue: T;
+    newValue: T;
+    stackTrace?: string;
+}
+
+export interface EventSnapshot {
+    timestamp: number;
+    componentId: string;
+    eventType: 'bind' | 'sync' | 'callback' | 'trigger';
+    eventName: string;
+    details: Record<string, any>;
+}
+
+export class StateHistory {
+    private stateSnapshots: StateSnapshot[] = [];
+    private eventSnapshots: EventSnapshot[] = [];
+    private maxHistory: number = 100;
+    private currentIndex: number = -1;
+    private isReplaying: boolean = false;
+
+    /**
+     * Record a state change
+     */
+    recordStateChange<T>(
+        componentId: string,
+        property: string,
+        oldValue: T,
+        newValue: T
+    ): void {
+        if (this.isReplaying) return; // Don't record during replay
+
+        const snapshot: StateSnapshot<T> = {
+            timestamp: Date.now(),
+            componentId,
+            property,
+            oldValue,
+            newValue,
+            stackTrace: new Error().stack
+        };
+
+        // Trim future history if we're not at the end
+        if (this.currentIndex < this.stateSnapshots.length - 1) {
+            this.stateSnapshots = this.stateSnapshots.slice(0, this.currentIndex + 1);
+        }
+
+        this.stateSnapshots.push(snapshot);
+        this.currentIndex = this.stateSnapshots.length - 1;
+
+        // Trim if exceeds max
+        if (this.stateSnapshots.length > this.maxHistory) {
+            this.stateSnapshots.shift();
+            this.currentIndex--;
+        }
+    }
+
+    /**
+     * Record an event (bind, sync, callback, trigger)
+     */
+    recordEvent(
+        componentId: string,
+        eventType: 'bind' | 'sync' | 'callback' | 'trigger',
+        eventName: string,
+        details: Record<string, any> = {}
+    ): void {
+        const snapshot: EventSnapshot = {
+            timestamp: Date.now(),
+            componentId,
+            eventType,
+            eventName,
+            details
+        };
+
+        this.eventSnapshots.push(snapshot);
+
+        // Trim if exceeds max
+        if (this.eventSnapshots.length > this.maxHistory) {
+            this.eventSnapshots.shift();
+        }
+    }
+
+    /**
+     * Get timeline of all changes and events
+     */
+    getTimeline(): Array<StateSnapshot | EventSnapshot> {
+        return [...this.stateSnapshots, ...this.eventSnapshots]
+            .sort((a, b) => a.timestamp - b.timestamp);
+    }
+
+    /**
+     * Get state snapshots for a specific component
+     */
+    getComponentHistory(componentId: string): StateSnapshot[] {
+        return this.stateSnapshots.filter(s => s.componentId === componentId);
+    }
+
+    /**
+     * Get event snapshots for a specific component
+     */
+    getComponentEvents(componentId: string): EventSnapshot[] {
+        return this.eventSnapshots.filter(s => s.componentId === componentId);
+    }
+
+    /**
+     * Check if we can roll back
+     */
+    canRollback(): boolean {
+        return this.currentIndex > 0;
+    }
+
+    /**
+     * Check if we can roll forward
+     */
+    canRollforward(): boolean {
+        return this.currentIndex < this.stateSnapshots.length - 1;
+    }
+
+    /**
+     * Get the current snapshot (for rollback)
+     */
+    getCurrentSnapshot(): StateSnapshot | null {
+        if (this.currentIndex >= 0 && this.currentIndex < this.stateSnapshots.length) {
+            return this.stateSnapshots[this.currentIndex];
+        }
+        return null;
+    }
+
+    /**
+     * Move index for rollback
+     */
+    moveBack(): StateSnapshot | null {
+        if (this.canRollback()) {
+            this.currentIndex--;
+            return this.stateSnapshots[this.currentIndex];
+        }
+        return null;
+    }
+
+    /**
+     * Move index for rollforward
+     */
+    moveForward(): StateSnapshot | null {
+        if (this.canRollforward()) {
+            this.currentIndex++;
+            return this.stateSnapshots[this.currentIndex];
+        }
+        return null;
+    }
+
+    /**
+     * Mark as replaying to prevent recursive recording
+     */
+    startReplay(): void {
+        this.isReplaying = true;
+    }
+
+    /**
+     * End replay mode
+     */
+    endReplay(): void {
+        this.isReplaying = false;
+    }
+
+    /**
+     * Clear all history
+     */
+    clear(): void {
+        this.stateSnapshots = [];
+        this.eventSnapshots = [];
+        this.currentIndex = -1;
+    }
+
+    /**
+     * Get summary statistics
+     */
+    getStats() {
+        return {
+            totalStateChanges: this.stateSnapshots.length,
+            totalEvents: this.eventSnapshots.length,
+            currentIndex: this.currentIndex,
+            canRollback: this.canRollback(),
+            canRollforward: this.canRollforward(),
+            components: new Set([
+                ...this.stateSnapshots.map(s => s.componentId),
+                ...this.eventSnapshots.map(s => s.componentId)
+            ]).size
+        };
+    }
+}
+
+// Global singleton
+export const stateHistory = new StateHistory();

package/lib/components/registry.d.ts

@@ -1,59 +1,33 @@
 /**
- * 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';
 declare class ComponentRegistry {
     private components;
-    /**
-     * Register a component instance
-     */
     register(component: BaseComponent<any>): void;
-    /**
-     * Unregister a component
-     */
     unregister(id: string): void;
     /**
-     * Get a component by ID
-     */
-    get<T extends BaseComponent<any>>(id: string): T | undefined;
-    /**
-     * Check if component exists
+     * Get component by index or ID
      */
-    has(id: string): boolean;
+    get(indexOrId: number | string): BaseComponent<any> | undefined;
     /**
-     * List all registered component IDs
+     * Print indexed list to console
      */
-    list(): string[];
+    list(): void;
     /**
-     * Find components by partial ID match
+     * Show component tree with state, history, events
      */
-    find(pattern: string): BaseComponent<any>[];
+    tree(indexOrId?: number | string): void;
+    private _printTree;
     /**
      * Get all components
      */
     all(): BaseComponent<any>[];
     /**
-     * Get components by type (constructor name)
-     */
-    byType(typeName: string): BaseComponent<any>[];
-    /**
-     * Clear all registered components
+     * Clear registry
      */
     clear(): void;
-    /**
-     * Get registry stats
-     */
-    stats(): {
-        total: number;
-        types: Record<string, number>;
-    };
 }
 export declare const registry: ComponentRegistry;
 export {};

package/lib/components/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,cAAM,iBAAiB;IACnB,OAAO,CAAC,UAAU,CAA8C;IAEhE;;OAEG;IACH,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAK7C;;OAEG;IACH,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAK5B;;OAEG;IACH,GAAG,CAAC,CAAC,SAAS,aAAa,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS;IAI5D;;OAEG;IACH,GAAG,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAIxB;;OAEG;IACH,IAAI,IAAI,MAAM,EAAE;IAIhB;;OAEG;IACH,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,EAAE;IAM3C;;OAEG;IACH,GAAG,IAAI,aAAa,CAAC,GAAG,CAAC,EAAE;IAI3B;;OAEG;IACH,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,EAAE;IAK9C;;OAEG;IACH,KAAK,IAAI,IAAI;IAKb;;OAEG;IACH,KAAK,IAAI;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE;CAa5D;AAGD,eAAO,MAAM,QAAQ,mBAA0B,CAAC"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["registry.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGxD,cAAM,iBAAiB;IACnB,OAAO,CAAC,UAAU,CAA4B;IAE9C,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAO7C,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAI5B;;OAEG;IACH,GAAG,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS;IAO/D;;OAEG;IACH,IAAI,IAAI,IAAI;IAaZ;;OAEG;IACH,IAAI,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAkBvC,OAAO,CAAC,UAAU;IAkClB;;OAEG;IACH,GAAG,IAAI,aAAa,CAAC,GAAG,CAAC,EAAE;IAI3B;;OAEG;IACH,KAAK,IAAI,IAAI;CAIhB;AAED,eAAO,MAAM,QAAQ,mBAA0B,CAAC"}

package/lib/components/registry.js

@@ -1,146 +1,163 @@
 /**
- * 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 { stateHistory } from './history/StateHistory.js';
 class ComponentRegistry {
     constructor() {
-        this.components = new Map();
+        this.components = [];
     }
-    /**
-     * Register a component instance
-     */
     register(component) {
-        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) {
-        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(id) {
-        return this.components.get(id);
-    }
-    /**
-     * Check if component exists
-     */
-    has(id) {
-        return this.components.has(id);
+    get(indexOrId) {
+        if (typeof indexOrId === 'number') {
+            return this.components[indexOrId];
+        }
+        return this.components.find(c => c._id === indexOrId);
     }
     /**
-     * List all registered component IDs
+     * Print indexed list to console
      */
     list() {
-        return Array.from(this.components.keys());
+        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`);
     }
     /**
-     * Find components by partial ID match
+     * Show component tree with state, history, events
      */
-    find(pattern) {
-        const regex = new RegExp(pattern, 'i');
-        return Array.from(this.components.values())
-            .filter(comp => regex.test(comp._id));
+    tree(indexOrId) {
+        let comp;
+        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);
+    }
+    _printTree(comp, index) {
+        const idx = index !== undefined ? `[${index}]` : '';
+        const stateChanges = stateHistory.getComponentHistory(comp._id);
+        const events = stateHistory.getComponentEvents(comp._id);
+        const syncCount = comp._syncBindings?.length || 0;
+        const bindCount = comp._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() {
-        return Array.from(this.components.values());
-    }
-    /**
-     * Get components by type (constructor name)
-     */
-    byType(typeName) {
-        return Array.from(this.components.values())
-            .filter(comp => comp.constructor.name === typeName);
+        return this.components;
     }
     /**
-     * Clear all registered components
+     * Clear registry
      */
     clear() {
-        this.components.clear();
-        console.debug('[Jux Registry] Cleared all components');
-    }
-    /**
-     * Get registry stats
-     */
-    stats() {
-        const types = {};
-        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.__jux = {
-        get: (id) => registry.get(id),
+    window._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) => registry.get(indexOrId),
+        /**
+         * List all components with indices
+         * @example
+         *   _jux.list()
+         *   // [0] hero-1 → Hero
+         *   // [1] nav-main → Nav
+         */
         list: () => registry.list(),
-        find: (pattern) => 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) => registry.tree(indexOrId),
+        /**
+         * Get all components
+         */
         all: () => registry.all(),
-        byType: (type) => registry.byType(type),
-        stats: () => registry.stats(),
+        /**
+         * Clear all components and history
+         */
         clear: () => registry.clear(),
-        // Factory helpers for creating components from console
-        create: (type, id, options) => {
-            const jux = window.jux;
-            if (!jux || !jux[type]) {
-                console.error(`Component type "${type}" not found`);
-                return null;
-            }
-            return jux[type](id, options);
-        },
-        // Debug helper
-        debug: (id) => {
-            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!
+🎨 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
 
-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
+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
 
-Example:
-  const h = __jux.get('hero-1')
-  h.state.title = 'Changed from console!'
-  h.hide()
-  h.show()
+History:
+  _jux.history.stats()     Global statistics
+  _jux.history.timeline()  Complete timeline
     `);
 }