juxscript 1.1.262 → 1.1.264

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

@@ -0,0 +1,53 @@
+interface DataOptions {
+    url?: string;
+    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    headers?: Record<string, string>;
+    body?: any;
+    transform?: (raw: any) => any;
+    auto?: boolean;
+}
+declare class Data {
+    id: string;
+    options: DataOptions;
+    private _value;
+    private _loading;
+    private _error;
+    private _onChange;
+    constructor(id: string, options?: DataOptions);
+    url(value: string): this;
+    method(value: DataOptions['method']): this;
+    headers(value: Record<string, string>): this;
+    body(value: any): this;
+    transform(fn: (raw: any) => any): this;
+    onChange(fn: (value: any) => void): this;
+    getValue(): any;
+    getLoading(): boolean;
+    getError(): string | null;
+    setValue(val: any): this;
+    fetch(urlOverride?: string): Promise<any>;
+}
+/**
+ * Create a data source that integrates with pageState.
+ *
+ * @example
+ * // Auto-fetch on creation
+ * const api = await jux.data('api', { url: '/api/test' });
+ * // pageState['api'].value → { users: [...], posts: [...] }
+ *
+ * // With transform
+ * const users = await jux.data('users', {
+ *     url: '/api/test',
+ *     transform: raw => raw.users
+ * });
+ * // pageState['users'].value → [{ id: 1, name: 'Alice' }, ...]
+ *
+ * // Manual fetch
+ * const manual = jux.data('manual', { url: '/api/test', auto: false });
+ * await manual.fetch(); // fetch later
+ *
+ * // Re-fetch
+ * await pageState['api'].component.fetch();
+ */
+export declare function data(id: string, options?: DataOptions): Promise<Data>;
+export { Data, DataOptions };
+//# sourceMappingURL=data.d.ts.map

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

@@ -0,0 +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"}

package/dist/lib/components/data.js

@@ -0,0 +1,119 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+class Data {
+    constructor(id, options = {}) {
+        this._value = null;
+        this._loading = false;
+        this._error = null;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.options = { method: 'GET', auto: true, ...options };
+    }
+    // Fluent API
+    url(value) { this.options.url = value; return this; }
+    method(value) { this.options.method = value; return this; }
+    headers(value) { this.options.headers = value; return this; }
+    body(value) { this.options.body = value; return this; }
+    transform(fn) { this.options.transform = fn; return this; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    // Getters for pageState integration
+    getValue() { return this._value; }
+    getLoading() { return this._loading; }
+    getError() { return this._error; }
+    setValue(val) {
+        this._value = val;
+        if (this._onChange)
+            this._onChange(val);
+        return this;
+    }
+    async fetch(urlOverride) {
+        const fetchUrl = urlOverride || this.options.url;
+        if (!fetchUrl) {
+            this._error = 'No URL provided';
+            return null;
+        }
+        this._loading = true;
+        this._error = null;
+        // Notify pageState of loading change
+        if (pageState.__notify) {
+            pageState.__notify(`${this.id}.loading`);
+        }
+        try {
+            const fetchOptions = {
+                method: this.options.method,
+                headers: this.options.headers,
+            };
+            if (this.options.body && this.options.method !== 'GET') {
+                fetchOptions.body = typeof this.options.body === 'string'
+                    ? this.options.body
+                    : JSON.stringify(this.options.body);
+                if (!this.options.headers?.['Content-Type']) {
+                    fetchOptions.headers = {
+                        'Content-Type': 'application/json',
+                        ...fetchOptions.headers
+                    };
+                }
+            }
+            const res = await globalThis.fetch(fetchUrl, fetchOptions);
+            if (!res.ok) {
+                throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+            }
+            const contentType = res.headers.get('content-type') || '';
+            let raw;
+            if (contentType.includes('application/json')) {
+                raw = await res.json();
+            }
+            else {
+                raw = await res.text();
+            }
+            this._value = this.options.transform ? this.options.transform(raw) : raw;
+            this._loading = false;
+            this._error = null;
+            if (this._onChange)
+                this._onChange(this._value);
+            return this._value;
+        }
+        catch (err) {
+            this._loading = false;
+            this._error = err.message || 'Fetch failed';
+            console.error(`❌ jux.data('${this.id}') fetch error:`, err.message);
+            return null;
+        }
+    }
+}
+/**
+ * Create a data source that integrates with pageState.
+ *
+ * @example
+ * // Auto-fetch on creation
+ * const api = await jux.data('api', { url: '/api/test' });
+ * // pageState['api'].value → { users: [...], posts: [...] }
+ *
+ * // With transform
+ * const users = await jux.data('users', {
+ *     url: '/api/test',
+ *     transform: raw => raw.users
+ * });
+ * // pageState['users'].value → [{ id: 1, name: 'Alice' }, ...]
+ *
+ * // Manual fetch
+ * const manual = jux.data('manual', { url: '/api/test', auto: false });
+ * await manual.fetch(); // fetch later
+ *
+ * // Re-fetch
+ * await pageState['api'].component.fetch();
+ */
+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
+        pageState.__register(d);
+    }
+    return d;
+}
+export { Data };

package/dist/lib/index.d.ts

@@ -4,6 +4,7 @@ import { input } from "./components/input.js";
 import { select } from "./components/select.js";
 import { radio } from "./components/radio.js";
 import { checkbox, checkboxGroup } from "./components/checkbox.js";
+import { data } from "./components/data.js";
 import { pageState } from "./state/pageState.js";
 export declare const jux: {
     tag: typeof tag;
@@ -23,6 +24,7 @@ export declare const jux: {
     radio: typeof radio;
     checkbox: typeof checkbox;
     checkboxGroup: typeof checkboxGroup;
+    data: typeof data;
 };
 export { pageState };
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;CAaf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;CAcf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/lib/index.js

@@ -4,6 +4,7 @@ import { input } from "./components/input.js";
 import { select } from "./components/select.js";
 import { radio } from "./components/radio.js";
 import { checkbox, checkboxGroup } from "./components/checkbox.js";
+import { data } from "./components/data.js";
 import { pageState } from "./state/pageState.js";
 export const jux = {
     tag,
@@ -17,8 +18,8 @@ export const jux = {
     select,
     radio,
     checkbox,
-    checkboxGroup
+    checkboxGroup,
+    data
 };
 export { pageState };
-// Convenience: also put watch on jux
 jux.watch = pageState.__watch;

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

@@ -26,6 +26,7 @@ declare class PageState {
      */
     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;;IA4BpC,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;CAGlC;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;;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"}

package/dist/lib/state/pageState.js

@@ -12,6 +12,8 @@ class PageState {
                     return this._watch.bind(this);
                 if (id === '__unregister')
                     return this._unregister.bind(this);
+                if (id === '__notify')
+                    return this._notify.bind(this);
                 if (id === '__keys')
                     return () => Array.from(this._registry.keys());
                 const entry = this._registry.get(id);
@@ -186,6 +188,13 @@ class PageState {
     getProxy() {
         return this._proxy;
     }
+    __notify(depKey) {
+        for (const [reaction, deps] of reactionDeps.entries()) {
+            if (deps.has(depKey)) {
+                reaction();
+            }
+        }
+    }
 }
 // Singleton
 const _instance = new PageState();

package/machinery/serve.js

@@ -112,7 +112,7 @@ app.get('/favicon.png', (req, res) => res.status(204).end());
 app.get('/api/test', (_req, res) => {
   const fruits = ['apple', 'banana', 'orange', 'mango', 'strawberry', 'grape', 'watermelon', 'pineapple', 'kiwi', 'peach'];
   const randomFruit = fruits[Math.floor(Math.random() * fruits.length)];
-  
+
   res.json({
     randomFruit,
     users: [
@@ -142,7 +142,11 @@ app.get('/__jux_sources.json', (req, res) => {
 // API ROUTES — must come BEFORE static middleware and catch-all
 // ═══════════════════════════════════════════════════════════════
 app.get('/api/test', (req, res) => {
+  const fruits = ['apple', 'banana', 'orange', 'mango', 'strawberry', 'grape', 'watermelon', 'pineapple', 'kiwi', 'peach'];
+  const randomFruit = fruits[Math.floor(Math.random() * fruits.length)];
+
   res.json({
+    randomFruit,
     users: [
       { id: 1, name: 'Alice', email: 'alice@example.com' },
       { id: 2, name: 'Bob', email: 'bob@example.com' },

package/package.json

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