juxscript 1.1.265 → 1.1.268

package/dist/lib/components/data.d.ts

@@ -24,6 +24,11 @@ declare class Data {
     getLoading(): boolean;
     getError(): string | null;
     setValue(val: any): this;
+    /**
+     * Re-fetch the data and notify pageState.
+     * Triggers all watchers that depend on this data's value.
+     */
+    refresh(): Promise<any>;
     fetch(urlOverride?: string): Promise<any>;
 }
 /**
@@ -46,7 +51,7 @@ declare class Data {
  * await manual.fetch(); // fetch later
  *
  * // Re-fetch
- * await pageState['api'].component.fetch();
+ * await pageState['api'].refresh();
  */
 export declare function data(id: string, options?: DataOptions): Promise<Data>;
 export { Data, DataOptions };

package/dist/lib/components/data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../lib/components/data.ts"],"names":[],"mappings":"AAGA,UAAU,WAAW;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAuC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAMjD,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACxB,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG,IAAI;IAC1C,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAC5C,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IACtB,SAAS,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI;IAEtC,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,GAAG,IAAI;IAMxC,QAAQ,IAAI,GAAG;IACf,UAAU,IAAI,OAAO;IACrB,QAAQ,IAAI,MAAM,GAAG,IAAI;IAEzB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IAMlB,KAAK,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC;CA+DlD;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAW/E;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../lib/components/data.ts"],"names":[],"mappings":"AAGA,UAAU,WAAW;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAuC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAMjD,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACxB,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG,IAAI;IAC1C,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAC5C,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IACtB,SAAS,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI;IAEtC,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,GAAG,IAAI;IAMxC,QAAQ,IAAI,GAAG;IACf,UAAU,IAAI,OAAO;IACrB,QAAQ,IAAI,MAAM,GAAG,IAAI;IAEzB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IAMxB;;;OAGG;IACG,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC;IAQvB,KAAK,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC;CA+DlD;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAW/E;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC"}

package/dist/lib/components/data.js

@@ -29,6 +29,17 @@ class Data {
             this._onChange(val);
         return this;
     }
+    /**
+     * Re-fetch the data and notify pageState.
+     * Triggers all watchers that depend on this data's value.
+     */
+    async refresh() {
+        const result = await this.fetch();
+        // Notify pageState so watchers re-run
+        pageState.__notify(`${this.id}.value`);
+        pageState.__notify(`${this.id}.loading`);
+        return result;
+    }
     async fetch(urlOverride) {
         const fetchUrl = urlOverride || this.options.url;
         if (!fetchUrl) {
@@ -104,14 +115,14 @@ class Data {
  * await manual.fetch(); // fetch later
  *
  * // Re-fetch
- * await pageState['api'].component.fetch();
+ * await pageState['api'].refresh();
  */
 export async function data(id, options = {}) {
     const d = new Data(id, options);
     pageState.__register(d);
     if (options.auto !== false && options.url) {
         await d.fetch();
-        // Re-register after fetch so pageState has the value
+        // Re-register so pageState picks up the fetched value
         pageState.__register(d);
     }
     return d;

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;IA4D7B;;;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":"AAaA,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;IAQf,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

@@ -19,11 +19,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,36 +34,33 @@ 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];
                 }
-                // Fallback to component method/property
                 const comp = entry.component;
-                if (prop === 'component')
-                    return comp;
-                if (typeof comp[`get${prop.charAt(0).toUpperCase()}${prop.slice(1)}`] === 'function') {
-                    return comp[`get${prop.charAt(0).toUpperCase()}${prop.slice(1)}`]();
+                if (typeof comp[prop] === 'function') {
+                    return comp[prop].bind(comp);
+                }
+                const getterName = `get${prop.charAt(0).toUpperCase()}${prop.slice(1)}`;
+                if (typeof comp[getterName] === 'function') {
+                    return comp[getterName]();
                 }
                 if (prop in comp) {
-                    return typeof comp[prop] === 'function' ? comp[prop].bind(comp) : comp[prop];
+                    return comp[prop];
                 }
                 return undefined;
             },
             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') {
@@ -74,18 +69,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)
@@ -96,7 +85,6 @@ class PageState {
             events: {},
             listeners: new Map()
         };
-        // Seed initial props from component
         if (component.getValue)
             entry.props.value = component.getValue();
         if (component.getValues)
@@ -112,7 +100,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) => {
@@ -120,6 +107,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`);
@@ -128,31 +119,53 @@ 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)) {
@@ -160,19 +173,8 @@ class PageState {
             }
         }
     }
-    /**
-     * 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 {
@@ -182,20 +184,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.265",
+  "version": "1.1.268",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",