juxscript 1.1.275 → 1.1.276

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

@@ -0,0 +1,76 @@
+interface StoreOptions {
+    db: string;
+    table: string;
+    version?: number;
+    keyPath?: string;
+    autoIncrement?: boolean;
+    indexes?: Array<{
+        name: string;
+        keyPath: string | string[];
+        unique?: boolean;
+    }>;
+    auto?: boolean;
+}
+declare class Store {
+    id: string;
+    options: StoreOptions;
+    private _db;
+    private _value;
+    private _loading;
+    private _error;
+    private _onChange;
+    private _ready;
+    constructor(id: string, options: StoreOptions);
+    private _open;
+    private _tx;
+    private _notifyChange;
+    onChange(fn: (value: any[]) => void): this;
+    getValue(): any[];
+    getLoading(): boolean;
+    getError(): string | null;
+    getCount(): number;
+    setValue(val: any[]): this;
+    getAll(): Promise<any[]>;
+    get(key: IDBValidKey): Promise<any>;
+    query(indexName: string, value: IDBValidKey): Promise<any[]>;
+    put(record: any): Promise<IDBValidKey>;
+    add(record: any): Promise<IDBValidKey>;
+    putMany(records: any[]): Promise<void>;
+    delete(key: IDBValidKey): Promise<void>;
+    clear(): Promise<void>;
+    refresh(): Promise<any[]>;
+}
+/**
+ * Create a reactive IndexedDB store that integrates with pageState.
+ *
+ * @example
+ * // Basic usage
+ * const todos = await jux.store('todos', { db: 'myapp', table: 'todos' });
+ * // pageState['todos'].value → [{ id: 1, text: 'Buy milk', done: false }, ...]
+ *
+ * // With indexes
+ * const users = await jux.store('users', {
+ *     db: 'myapp',
+ *     table: 'users',
+ *     indexes: [{ name: 'by_email', keyPath: 'email', unique: true }]
+ * });
+ *
+ * // Write
+ * await pageState['todos'].add({ text: 'New item', done: false });
+ * await pageState['todos'].put({ id: 1, text: 'Updated', done: true });
+ * await pageState['todos'].delete(1);
+ *
+ * // Query by index
+ * const results = await pageState['users'].query('by_email', 'alice@example.com');
+ *
+ * // React to changes
+ * pageState.__watch(() => {
+ *     const items = pageState['todos'].value;
+ *     if (items) {
+ *         pageState['count'].content = `${items.length} items`;
+ *     }
+ * });
+ */
+export declare function store(id: string, options: StoreOptions): Promise<Store>;
+export { Store, StoreOptions };
+//# sourceMappingURL=store.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../lib/components/store.ts"],"names":[],"mappings":"AAGA,UAAU,YAAY;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAChF,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,cAAM,KAAK;IACP,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,GAAG,CAA4B;IACvC,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAyC;IAC1D,OAAO,CAAC,MAAM,CAAgB;gBAElB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY;IAgB7C,OAAO,CAAC,KAAK;IAgCb,OAAO,CAAC,GAAG;IAOX,OAAO,CAAC,aAAa;IAUrB,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,GAAG,IAAI;IAK1C,QAAQ,IAAI,GAAG,EAAE;IACjB,UAAU,IAAI,OAAO;IACrB,QAAQ,IAAI,MAAM,GAAG,IAAI;IACzB,QAAQ,IAAI,MAAM;IAElB,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI;IAUpB,MAAM,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;IAwBxB,GAAG,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC;IAWnC,KAAK,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;IAiB5D,GAAG,CAAC,MAAM,EAAE,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC;IAetC,GAAG,CAAC,MAAM,EAAE,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC;IAetC,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAwBtC,MAAM,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAevC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAoBtB,OAAO,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;CAGlC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAsB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,CAU7E;AAED,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC"}

package/dist/lib/components/store.js

@@ -0,0 +1,234 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+class Store {
+    constructor(id, options) {
+        this._db = null;
+        this._value = [];
+        this._loading = false;
+        this._error = null;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.options = {
+            version: 1,
+            keyPath: 'id',
+            autoIncrement: true,
+            auto: true,
+            ...options
+        };
+        this._ready = this._open();
+    }
+    // ═══════════════════════════════════════════════════════════
+    // INTERNAL: Open / ensure DB
+    // ═══════════════════════════════════════════════════════════
+    _open() {
+        return new Promise((resolve, reject) => {
+            const req = indexedDB.open(this.options.db, this.options.version);
+            req.onupgradeneeded = (e) => {
+                const db = e.target.result;
+                if (!db.objectStoreNames.contains(this.options.table)) {
+                    const store = db.createObjectStore(this.options.table, {
+                        keyPath: this.options.keyPath,
+                        autoIncrement: this.options.autoIncrement
+                    });
+                    if (this.options.indexes) {
+                        for (const idx of this.options.indexes) {
+                            store.createIndex(idx.name, idx.keyPath, { unique: idx.unique ?? false });
+                        }
+                    }
+                }
+            };
+            req.onsuccess = (e) => {
+                this._db = e.target.result;
+                resolve();
+            };
+            req.onerror = (e) => {
+                this._error = `IndexedDB open failed: ${e.target.error?.message}`;
+                console.error(`❌ jux.store('${this.id}'):`, this._error);
+                reject(new Error(this._error));
+            };
+        });
+    }
+    _tx(mode) {
+        if (!this._db)
+            throw new Error('Database not open');
+        return this._db
+            .transaction(this.options.table, mode)
+            .objectStore(this.options.table);
+    }
+    _notifyChange() {
+        if (this._onChange)
+            this._onChange(this._value);
+        pageState.__notify?.(`${this.id}.value`);
+        pageState.__notify?.(`${this.id}.loading`);
+    }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    getValue() { return this._value; }
+    getLoading() { return this._loading; }
+    getError() { return this._error; }
+    getCount() { return this._value.length; }
+    setValue(val) {
+        this._value = val;
+        this._notifyChange();
+        return this;
+    }
+    // ═══════════════════════════════════════════════════════════
+    // READ
+    // ═══════════════════════════════════════════════════════════
+    async getAll() {
+        await this._ready;
+        this._loading = true;
+        this._error = null;
+        return new Promise((resolve, reject) => {
+            const req = this._tx('readonly').getAll();
+            req.onsuccess = () => {
+                this._value = req.result;
+                this._loading = false;
+                this._notifyChange();
+                resolve(this._value);
+            };
+            req.onerror = () => {
+                this._loading = false;
+                this._error = req.error?.message ?? 'getAll failed';
+                this._notifyChange();
+                reject(new Error(this._error));
+            };
+        });
+    }
+    async get(key) {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const req = this._tx('readonly').get(key);
+            req.onsuccess = () => resolve(req.result ?? null);
+            req.onerror = () => reject(new Error(req.error?.message ?? 'get failed'));
+        });
+    }
+    async query(indexName, value) {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const store = this._tx('readonly');
+            const index = store.index(indexName);
+            const req = index.getAll(value);
+            req.onsuccess = () => resolve(req.result);
+            req.onerror = () => reject(new Error(req.error?.message ?? 'query failed'));
+        });
+    }
+    // ═══════════════════════════════════════════════════════════
+    // WRITE
+    // ═══════════════════════════════════════════════════════════
+    async put(record) {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const req = this._tx('readwrite').put(record);
+            req.onsuccess = () => {
+                this.getAll(); // refresh cached value
+                resolve(req.result);
+            };
+            req.onerror = () => reject(new Error(req.error?.message ?? 'put failed'));
+        });
+    }
+    async add(record) {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const req = this._tx('readwrite').add(record);
+            req.onsuccess = () => {
+                this.getAll();
+                resolve(req.result);
+            };
+            req.onerror = () => reject(new Error(req.error?.message ?? 'add failed'));
+        });
+    }
+    async putMany(records) {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const tx = this._db.transaction(this.options.table, 'readwrite');
+            const store = tx.objectStore(this.options.table);
+            for (const record of records) {
+                store.put(record);
+            }
+            tx.oncomplete = () => {
+                this.getAll();
+                resolve();
+            };
+            tx.onerror = () => reject(new Error(tx.error?.message ?? 'putMany failed'));
+        });
+    }
+    // ═══════════════════════════════════════════════════════════
+    // DELETE
+    // ═══════════════════════════════════════════════════════════
+    async delete(key) {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const req = this._tx('readwrite').delete(key);
+            req.onsuccess = () => {
+                this.getAll();
+                resolve();
+            };
+            req.onerror = () => reject(new Error(req.error?.message ?? 'delete failed'));
+        });
+    }
+    async clear() {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const req = this._tx('readwrite').clear();
+            req.onsuccess = () => {
+                this._value = [];
+                this._notifyChange();
+                resolve();
+            };
+            req.onerror = () => reject(new Error(req.error?.message ?? 'clear failed'));
+        });
+    }
+    // ═══════════════════════════════════════════════════════════
+    // REFRESH (alias for getAll, matches data.ts pattern)
+    // ═══════════════════════════════════════════════════════════
+    async refresh() {
+        return this.getAll();
+    }
+}
+/**
+ * Create a reactive IndexedDB store that integrates with pageState.
+ *
+ * @example
+ * // Basic usage
+ * const todos = await jux.store('todos', { db: 'myapp', table: 'todos' });
+ * // pageState['todos'].value → [{ id: 1, text: 'Buy milk', done: false }, ...]
+ *
+ * // With indexes
+ * const users = await jux.store('users', {
+ *     db: 'myapp',
+ *     table: 'users',
+ *     indexes: [{ name: 'by_email', keyPath: 'email', unique: true }]
+ * });
+ *
+ * // Write
+ * await pageState['todos'].add({ text: 'New item', done: false });
+ * await pageState['todos'].put({ id: 1, text: 'Updated', done: true });
+ * await pageState['todos'].delete(1);
+ *
+ * // Query by index
+ * const results = await pageState['users'].query('by_email', 'alice@example.com');
+ *
+ * // React to changes
+ * pageState.__watch(() => {
+ *     const items = pageState['todos'].value;
+ *     if (items) {
+ *         pageState['count'].content = `${items.length} items`;
+ *     }
+ * });
+ */
+export async function store(id, options) {
+    const s = new Store(id, options);
+    pageState.__register(s);
+    if (options.auto !== false) {
+        await s.getAll();
+        pageState.__register(s);
+    }
+    return s;
+}
+export { Store };

package/dist/lib/index.d.ts

@@ -6,6 +6,7 @@ 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";
+import { store } from "./components/store.js";
 export declare const jux: {
     tag: typeof tag;
     div: typeof div;
@@ -25,6 +26,7 @@ export declare const jux: {
     checkbox: typeof checkbox;
     checkboxGroup: typeof checkboxGroup;
     data: typeof data;
+    store: typeof store;
 };
 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,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"}
+{"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;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE9C,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;CAef,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/lib/index.js

@@ -6,6 +6,7 @@ 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";
+import { store } from "./components/store.js";
 export const jux = {
     tag,
     div,
@@ -19,7 +20,8 @@ export const jux = {
     radio,
     checkbox,
     checkboxGroup,
-    data
+    data,
+    store
 };
 export { pageState };
 jux.watch = pageState.__watch;

package/package.json

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