juxscript 1.1.266 → 1.1.269

package/dist/lib/state/pageState.d.ts

@@ -1,32 +1,16 @@
 declare class PageState {
     private _registry;
     private _proxy;
+    static readonly WIRE_EVENTS: readonly ["blur", "focus", "click", "dblclick", "change", "input", "keydown", "keyup", "keypress", "mouseenter", "mouseleave", "submit"];
     constructor();
     private _createComponentProxy;
-    /**
-     * Register a component with pageState.
-     * Called automatically by jux components on creation.
-     */
     private _register;
     private _wireEvent;
+    private _findElement;
     private _unregister;
-    /**
-     * Notify all reactive blocks that depend on this key
-     */
     private _notify;
-    /**
-     * Create a reactive block that re-runs when its dependencies change.
-     *
-     * Usage:
-     *   pageState.__watch(() => {
-     *       if (pageState['input1'].value === 'blueberry') {
-     *           pageState['input2'].value = 'raspberry';
-     *       }
-     *   });
-     */
     private _watch;
     getProxy(): Record<string, any>;
-    __notify(depKey: string): void;
 }
 export declare const pageState: Record<string, any>;
 export { PageState };

package/dist/lib/state/pageState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pageState.d.ts","sourceRoot":"","sources":["../../../lib/state/pageState.ts"],"names":[],"mappings":"AAaA,cAAM,SAAS;IACX,OAAO,CAAC,SAAS,CAA0C;IAC3D,OAAO,CAAC,MAAM,CAAsB;;IA6BpC,OAAO,CAAC,qBAAqB;IAkE7B;;;OAGG;IACH,OAAO,CAAC,SAAS;IA4CjB,OAAO,CAAC,UAAU;IAkBlB,OAAO,CAAC,WAAW;IAInB;;OAEG;IACH,OAAO,CAAC,OAAO;IAQf;;;;;;;;;OASG;IACH,OAAO,CAAC,MAAM;IAgBd,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAI/B,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;CAOjC;AAID,eAAO,MAAM,SAAS,qBAAuB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"pageState.d.ts","sourceRoot":"","sources":["../../../lib/state/pageState.ts"],"names":[],"mappings":"AAeA,cAAM,SAAS;IACX,OAAO,CAAC,SAAS,CAA0C;IAC3D,OAAO,CAAC,MAAM,CAAsB;IAEpC,MAAM,CAAC,QAAQ,CAAC,WAAW,2IAOhB;;IA2BX,OAAO,CAAC,qBAAqB;IAyD7B,OAAO,CAAC,SAAS;IA6CjB,OAAO,CAAC,UAAU;IAwBlB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,MAAM;IAcd,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;CAGlC;AAID,eAAO,MAAM,SAAS,qBAAuB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/lib/state/pageState.js

@@ -1,6 +1,8 @@
 // Tracks which reactive block is currently running so we can record dependencies
 let activeReaction = null;
 const reactionDeps = new Map();
+let notifyQueue = [];
+let isNotifying = false;
 class PageState {
     constructor() {
         this._registry = new Map();
@@ -19,11 +21,9 @@ class PageState {
                 const entry = this._registry.get(id);
                 if (!entry)
                     return undefined;
-                // Return a proxy for the component's state slice
                 return this._createComponentProxy(id, entry);
             },
             set: (_, id, value) => {
-                // pageState['input1'] = someComponent — register it
                 if (value && typeof value === 'object' && value.id) {
                     this._register(value);
                     return true;
@@ -36,27 +36,22 @@ class PageState {
         return new Proxy({}, {
             get: (_, prop) => {
                 const depKey = `${id}.${prop}`;
-                // Track dependency if inside a reactive block
                 if (activeReaction) {
                     if (!reactionDeps.has(activeReaction)) {
                         reactionDeps.set(activeReaction, new Set());
                     }
                     reactionDeps.get(activeReaction).add(depKey);
                 }
-                // Event flags (blur, focus, hover, etc.)
                 if (prop in entry.events) {
                     return entry.events[prop];
                 }
-                // Component props (value, disabled, checked, etc.)
                 if (prop in entry.props) {
                     return entry.props[prop];
                 }
-                // ✅ Expose component methods directly (refresh, fetch, etc.)
                 const comp = entry.component;
                 if (typeof comp[prop] === 'function') {
                     return comp[prop].bind(comp);
                 }
-                // Fallback: try getter pattern
                 const getterName = `get${prop.charAt(0).toUpperCase()}${prop.slice(1)}`;
                 if (typeof comp[getterName] === 'function') {
                     return comp[getterName]();
@@ -68,7 +63,6 @@ class PageState {
             },
             set: (_, prop, value) => {
                 const depKey = `${id}.${prop}`;
-                // Update component via fluent API or setter
                 const comp = entry.component;
                 const setterName = `set${prop.charAt(0).toUpperCase()}${prop.slice(1)}`;
                 if (typeof comp[setterName] === 'function') {
@@ -77,18 +71,12 @@ class PageState {
                 else if (typeof comp[prop] === 'function') {
                     comp[prop](value);
                 }
-                // Update tracked props
                 entry.props[prop] = value;
-                // Notify listeners
                 this._notify(depKey);
                 return true;
             }
         });
     }
-    /**
-     * Register a component with pageState.
-     * Called automatically by jux components on creation.
-     */
     _register(component) {
         const id = component.id;
         if (!id)
@@ -99,7 +87,6 @@ class PageState {
             events: {},
             listeners: new Map()
         };
-        // Seed initial props from component
         if (component.getValue)
             entry.props.value = component.getValue();
         if (component.getValues)
@@ -115,7 +102,6 @@ class PageState {
         }
         entry.props.id = id;
         this._registry.set(id, entry);
-        // Wire component onChange to update pageState
         if (typeof component.onChange === 'function') {
             const originalOnChange = component._onChange;
             component.onChange((val, e) => {
@@ -123,6 +109,10 @@ class PageState {
                     entry.props.values = val;
                     this._notify(`${id}.values`);
                 }
+                else if (typeof val === 'boolean') {
+                    entry.props.checked = val;
+                    this._notify(`${id}.checked`);
+                }
                 else {
                     entry.props.value = val;
                     this._notify(`${id}.value`);
@@ -131,51 +121,75 @@ class PageState {
                     originalOnChange(val, e);
             });
         }
-        // Wire common DOM events as boolean flags
-        this._wireEvent(id, entry, 'blur');
-        this._wireEvent(id, entry, 'focus');
+        for (const eventName of PageState.WIRE_EVENTS) {
+            this._wireEvent(id, entry, eventName);
+        }
     }
     _wireEvent(id, entry, eventName) {
         entry.events[eventName] = false;
-        // Find the DOM element
-        const el = entry.component._element || entry.component.getElement?.();
-        if (!el || !(el instanceof HTMLElement))
+        const el = this._findElement(entry.component);
+        if (!el)
             return;
-        el.addEventListener(eventName, () => {
+        el.addEventListener(eventName, (e) => {
             entry.events[eventName] = true;
+            if ((eventName === 'input' || eventName === 'change') && el instanceof HTMLInputElement) {
+                entry.props.value = el.value;
+            }
+            if ((eventName === 'input' || eventName === 'change') && el instanceof HTMLSelectElement) {
+                entry.props.value = el.value;
+            }
             this._notify(`${id}.${eventName}`);
-            // Reset after reactions run
             queueMicrotask(() => {
                 entry.events[eventName] = false;
             });
         });
     }
+    _findElement(component) {
+        if (component._element instanceof HTMLElement)
+            return component._element;
+        if (typeof component.getElement === 'function') {
+            const el = component.getElement();
+            if (el instanceof HTMLElement)
+                return el;
+        }
+        if (component._wrapper instanceof HTMLElement) {
+            const input = component._wrapper.querySelector('input, select, textarea, button');
+            if (input)
+                return input;
+            return component._wrapper;
+        }
+        if (component.id && typeof document !== 'undefined') {
+            const el = document.getElementById(component.id);
+            if (el)
+                return el;
+        }
+        return null;
+    }
     _unregister(id) {
         this._registry.delete(id);
     }
-    /**
-     * Notify all reactive blocks that depend on this key
-     */
     _notify(depKey) {
-        for (const [reaction, deps] of reactionDeps.entries()) {
-            if (deps.has(depKey)) {
-                reaction();
+        notifyQueue.push(depKey);
+        // Prevent re-entrant notification loops
+        if (isNotifying)
+            return;
+        isNotifying = true;
+        try {
+            while (notifyQueue.length > 0) {
+                const key = notifyQueue.shift();
+                for (const [reaction, deps] of reactionDeps.entries()) {
+                    if (deps.has(key)) {
+                        reaction();
+                    }
+                }
             }
         }
+        finally {
+            isNotifying = false;
+        }
     }
-    /**
-     * Create a reactive block that re-runs when its dependencies change.
-     *
-     * Usage:
-     *   pageState.__watch(() => {
-     *       if (pageState['input1'].value === 'blueberry') {
-     *           pageState['input2'].value = 'raspberry';
-     *       }
-     *   });
-     */
     _watch(fn) {
         const reaction = () => {
-            // Clear old deps, track new ones during execution
             reactionDeps.set(reaction, new Set());
             activeReaction = reaction;
             try {
@@ -185,20 +199,20 @@ class PageState {
                 activeReaction = null;
             }
         };
-        // Run once immediately to collect initial dependencies
         reaction();
     }
     getProxy() {
         return this._proxy;
     }
-    __notify(depKey) {
-        for (const [reaction, deps] of reactionDeps.entries()) {
-            if (deps.has(depKey)) {
-                reaction();
-            }
-        }
-    }
 }
+PageState.WIRE_EVENTS = [
+    'blur', 'focus',
+    'click', 'dblclick',
+    'change', 'input',
+    'keydown', 'keyup', 'keypress',
+    'mouseenter', 'mouseleave',
+    'submit'
+];
 // Singleton
 const _instance = new PageState();
 export const pageState = _instance.getProxy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.266",
+  "version": "1.1.269",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",