@yaasl/core 0.13.1 → 0.14.0-alpha.0

package/dist/@types/effects/index.d.ts

@@ -12,3 +12,4 @@ export { expiration } from "./expiration";
 export type { ExpirationOptions } from "./expiration";
 export { migration, createMigrationStep } from "./migration";
 export type { MigrationOptions, MigrationStep } from "./migration";
+export { sync } from "./sync";

package/dist/@types/effects/indexed-db.d.ts

@@ -1,14 +1,14 @@
 export interface IndexedDbOptions {
     /** Use your own store key. Will be `atom.name` by default. */
     key?: string;
-    /** Disable the synchronization of values over browser tabs */
-    noTabSync?: boolean;
 }
 /** Middleware to save and load atom values to an indexedDb.
  *
  *  Will use one database and store for all atoms with your `CONFIG.name`
  *  as name or `yaasl` if not set.
  *
+ *  Should be used in combination with the `sync` effect, to ensure value integrity.
+ *
  * @param {IndexedDbOptions | undefined} options
  * @param options.key Use your own store key. Will be `atom.name` by default.
  *

package/dist/@types/effects/session-storage.d.ts

@@ -15,7 +15,6 @@ export interface SessionStorageOptions {
  * @param {SessionStorageOptions | undefined} options
  * @param options.key Use your own key for the session storage.
  *   Will be "{config-name}/{atom-name}" by default.
- * @param options.noTabSync Disable the synchronization of values over browser tabs.
  * @param options.parser Custom functions to stringify and parse values. Defaults to JSON.stringify and JSON.parse. Use this when handling complex datatypes like Maps or Sets.
  *
  * @returns The effect to be used on atoms.

package/dist/@types/effects/sync.d.ts

@@ -0,0 +1,5 @@
+/** Effect to synchronize the atoms value over tabs.
+ *
+ * @returns The effect to be used on atoms.
+ **/
+export declare const sync: (...[optionsArg]: [] | [undefined]) => import("./create-effect").EffectAtomCallback<undefined, any>;

package/dist/cjs/base/create-atom.js

@@ -46,6 +46,11 @@ class Atom extends stateful_1.Stateful {
      * new value based off the previous value.
      */
     set(next) {
+        if (this.didInit !== true) {
+            throw new Error((0, utils_1.consoleMessage)("Tried to set a value during initialization. " +
+                "You are probably using an async effect. " +
+                "Use `await atom.didInit` to wait for the initialization process to be finished.", { scope: this.name }));
+        }
         const oldState = this.get();
         const newState = (0, utils_1.updater)(next, oldState);
         if (oldState === newState)

package/dist/cjs/effects/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createMigrationStep = exports.migration = exports.expiration = exports.indexedDb = exports.sessionStorage = exports.localStorage = exports.autoSort = exports.createEffect = void 0;
+exports.sync = exports.createMigrationStep = exports.migration = exports.expiration = exports.indexedDb = exports.sessionStorage = exports.localStorage = exports.autoSort = exports.createEffect = void 0;
 var create_effect_1 = require("./create-effect");
 Object.defineProperty(exports, "createEffect", { enumerable: true, get: function () { return create_effect_1.createEffect; } });
 var auto_sort_1 = require("./auto-sort");
@@ -16,3 +16,5 @@ Object.defineProperty(exports, "expiration", { enumerable: true, get: function (
 var migration_1 = require("./migration");
 Object.defineProperty(exports, "migration", { enumerable: true, get: function () { return migration_1.migration; } });
 Object.defineProperty(exports, "createMigrationStep", { enumerable: true, get: function () { return migration_1.createMigrationStep; } });
+var sync_1 = require("./sync");
+Object.defineProperty(exports, "sync", { enumerable: true, get: function () { return sync_1.sync; } });

package/dist/cjs/effects/indexed-db.js

@@ -12,37 +12,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.indexedDb = void 0;
 const create_effect_1 = require("./create-effect");
 const base_1 = require("../base");
-const get_scoped_key_1 = require("../utils/get-scoped-key");
 const idb_store_1 = require("../utils/idb-store");
 let atomDb = null;
-const createSync = (storeKey, onTabSync) => {
-    const key = (0, get_scoped_key_1.getScopedKey)(storeKey);
-    const channel = new BroadcastChannel(key);
-    let changeTrigger = null;
-    channel.onmessage = () => {
-        if (changeTrigger === "self") {
-            changeTrigger = null;
-            return;
-        }
-        changeTrigger = "sync";
-        onTabSync();
-    };
-    return {
-        pushSync: () => {
-            if (changeTrigger === "sync") {
-                changeTrigger = null;
-                return;
-            }
-            changeTrigger = "self";
-            channel.postMessage("sync");
-        },
-    };
-};
 /** Middleware to save and load atom values to an indexedDb.
  *
  *  Will use one database and store for all atoms with your `CONFIG.name`
  *  as name or `yaasl` if not set.
  *
+ *  Should be used in combination with the `sync` effect, to ensure value integrity.
+ *
  * @param {IndexedDbOptions | undefined} options
  * @param options.key Use your own store key. Will be `atom.name` by default.
  *
@@ -51,15 +29,6 @@ const createSync = (storeKey, onTabSync) => {
 exports.indexedDb = (0, create_effect_1.createEffect)(({ atom, options }) => {
     var _a;
     const key = (_a = options === null || options === void 0 ? void 0 : options.key) !== null && _a !== void 0 ? _a : atom.name;
-    const { pushSync } = (options === null || options === void 0 ? void 0 : options.noTabSync)
-        ? {}
-        : createSync(key, () => {
-            void (atomDb === null || atomDb === void 0 ? void 0 : atomDb.get(key).then(value => {
-                if (!value)
-                    return;
-                atom.set(value);
-            }));
-        });
     return {
         sort: "pre",
         init: (_a) => __awaiter(void 0, [_a], void 0, function* ({ atom, set }) {
@@ -76,11 +45,13 @@ exports.indexedDb = (0, create_effect_1.createEffect)(({ atom, options }) => {
             }
         }),
         set: ({ value, atom }) => {
-            const action = value === atom.defaultValue
-                ? atomDb === null || atomDb === void 0 ? void 0 : atomDb.delete(key)
-                : atomDb === null || atomDb === void 0 ? void 0 : atomDb.set(key, value);
-            // don't wait to set the atom value, directly pass it into the atom
-            void (action === null || action === void 0 ? void 0 : action.then(pushSync));
+            // Don't wait for promises since this would cause lag
+            if (value === atom.defaultValue) {
+                void (atomDb === null || atomDb === void 0 ? void 0 : atomDb.delete(key));
+            }
+            else {
+                void (atomDb === null || atomDb === void 0 ? void 0 : atomDb.set(key, value));
+            }
         },
     };
 });

package/dist/cjs/effects/session-storage.js

@@ -10,7 +10,6 @@ const string_storage_1 = require("../utils/string-storage");
  * @param {SessionStorageOptions | undefined} options
  * @param options.key Use your own key for the session storage.
  *   Will be "{config-name}/{atom-name}" by default.
- * @param options.noTabSync Disable the synchronization of values over browser tabs.
  * @param options.parser Custom functions to stringify and parse values. Defaults to JSON.stringify and JSON.parse. Use this when handling complex datatypes like Maps or Sets.
  *
  * @returns The effect to be used on atoms.

package/dist/cjs/effects/sync.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sync = void 0;
+const utils_1 = require("@yaasl/utils");
+const create_effect_1 = require("./create-effect");
+const base_1 = require("../base");
+const getId = () => { var _a, _b; return (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.crypto.randomUUID()) !== null && _b !== void 0 ? _b : Math.random().toString(36).slice(2, 10); };
+const getChannelName = (key) => ["yaasl", "sync-channel", base_1.CONFIG.name, key].filter(Boolean).join("/");
+class SyncChannel {
+    constructor(key) {
+        this.listeners = new Set();
+        this.channel = new BroadcastChannel(getChannelName(key));
+        this.channel.onmessage = event => {
+            const { id, data } = event.data;
+            if (id === SyncChannel.id)
+                return;
+            this.listeners.forEach(listener => listener(data));
+        };
+    }
+    push(data) {
+        this.channel.postMessage({
+            id: SyncChannel.id,
+            data,
+        });
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+}
+SyncChannel.id = getId();
+/** Effect to synchronize the atoms value over tabs.
+ *
+ * @returns The effect to be used on atoms.
+ **/
+exports.sync = (0, create_effect_1.createEffect)(({ atom }) => {
+    const channel = new SyncChannel(atom.name);
+    let skip = false;
+    return {
+        didInit: () => {
+            channel.subscribe(data => {
+                atom.set(data);
+                skip = true;
+            });
+        },
+        set: ({ value }) => {
+            if (skip) {
+                skip = false;
+                return;
+            }
+            channel.push(value);
+        },
+    };
+});

package/dist/cjs/utils/queue.js

@@ -15,7 +15,8 @@ class Queue {
         const init = this.last ? this.last.then(() => prev) : new utils_1.Thenable(prev);
         const result = this.queue.reduce((result, next) => result.then(prev => next(prev)), init);
         this.queue = [];
-        this.last = result.then(value => {
+        this.last = result;
+        result.then(value => {
             if (this.last === result) {
                 this.last = null;
             }

package/dist/esm/base/create-atom.js

@@ -1,4 +1,4 @@
-import { updater, Thenable, toVoid } from "@yaasl/utils";
+import { updater, Thenable, toVoid, consoleMessage, } from "@yaasl/utils";
 import { CONFIG } from "./config";
 import { Stateful } from "./stateful";
 import { EffectDispatcher } from "../effects/effect-dispatcher";
@@ -48,6 +48,11 @@ export class Atom extends Stateful {
      * new value based off the previous value.
      */
     set(next) {
+        if (this.didInit !== true) {
+            throw new Error(consoleMessage("Tried to set a value during initialization. " +
+                "You are probably using an async effect. " +
+                "Use `await atom.didInit` to wait for the initialization process to be finished.", { scope: this.name }));
+        }
         const oldState = this.get();
         const newState = updater(next, oldState);
         if (oldState === newState)

package/dist/esm/effects/index.js

@@ -5,3 +5,4 @@ export { sessionStorage } from "./session-storage";
 export { indexedDb } from "./indexed-db";
 export { expiration } from "./expiration";
 export { migration, createMigrationStep } from "./migration";
+export { sync } from "./sync";

package/dist/esm/effects/indexed-db.js

@@ -1,36 +1,14 @@
 import { createEffect } from "./create-effect";
 import { CONFIG } from "../base";
-import { getScopedKey } from "../utils/get-scoped-key";
 import { IdbStore } from "../utils/idb-store";
 let atomDb = null;
-const createSync = (storeKey, onTabSync) => {
-    const key = getScopedKey(storeKey);
-    const channel = new BroadcastChannel(key);
-    let changeTrigger = null;
-    channel.onmessage = () => {
-        if (changeTrigger === "self") {
-            changeTrigger = null;
-            return;
-        }
-        changeTrigger = "sync";
-        onTabSync();
-    };
-    return {
-        pushSync: () => {
-            if (changeTrigger === "sync") {
-                changeTrigger = null;
-                return;
-            }
-            changeTrigger = "self";
-            channel.postMessage("sync");
-        },
-    };
-};
 /** Middleware to save and load atom values to an indexedDb.
  *
  *  Will use one database and store for all atoms with your `CONFIG.name`
  *  as name or `yaasl` if not set.
  *
+ *  Should be used in combination with the `sync` effect, to ensure value integrity.
+ *
  * @param {IndexedDbOptions | undefined} options
  * @param options.key Use your own store key. Will be `atom.name` by default.
  *
@@ -38,15 +16,6 @@ const createSync = (storeKey, onTabSync) => {
  **/
 export const indexedDb = createEffect(({ atom, options }) => {
     const key = options?.key ?? atom.name;
-    const { pushSync } = options?.noTabSync
-        ? {}
-        : createSync(key, () => {
-            void atomDb?.get(key).then(value => {
-                if (!value)
-                    return;
-                atom.set(value);
-            });
-        });
     return {
         sort: "pre",
         init: async ({ atom, set }) => {
@@ -62,11 +31,13 @@ export const indexedDb = createEffect(({ atom, options }) => {
             }
         },
         set: ({ value, atom }) => {
-            const action = value === atom.defaultValue
-                ? atomDb?.delete(key)
-                : atomDb?.set(key, value);
-            // don't wait to set the atom value, directly pass it into the atom
-            void action?.then(pushSync);
+            // Don't wait for promises since this would cause lag
+            if (value === atom.defaultValue) {
+                void atomDb?.delete(key);
+            }
+            else {
+                void atomDb?.set(key, value);
+            }
         },
     };
 });

package/dist/esm/effects/session-storage.js

@@ -7,7 +7,6 @@ import { StringStorage } from "../utils/string-storage";
  * @param {SessionStorageOptions | undefined} options
  * @param options.key Use your own key for the session storage.
  *   Will be "{config-name}/{atom-name}" by default.
- * @param options.noTabSync Disable the synchronization of values over browser tabs.
  * @param options.parser Custom functions to stringify and parse values. Defaults to JSON.stringify and JSON.parse. Use this when handling complex datatypes like Maps or Sets.
  *
  * @returns The effect to be used on atoms.

package/dist/esm/effects/sync.js

@@ -0,0 +1,52 @@
+import { getWindow } from "@yaasl/utils";
+import { createEffect } from "./create-effect";
+import { CONFIG } from "../base";
+const getId = () => getWindow()?.crypto.randomUUID() ?? Math.random().toString(36).slice(2, 10);
+const getChannelName = (key) => ["yaasl", "sync-channel", CONFIG.name, key].filter(Boolean).join("/");
+class SyncChannel {
+    static id = getId();
+    channel;
+    listeners = new Set();
+    constructor(key) {
+        this.channel = new BroadcastChannel(getChannelName(key));
+        this.channel.onmessage = event => {
+            const { id, data } = event.data;
+            if (id === SyncChannel.id)
+                return;
+            this.listeners.forEach(listener => listener(data));
+        };
+    }
+    push(data) {
+        this.channel.postMessage({
+            id: SyncChannel.id,
+            data,
+        });
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+}
+/** Effect to synchronize the atoms value over tabs.
+ *
+ * @returns The effect to be used on atoms.
+ **/
+export const sync = createEffect(({ atom }) => {
+    const channel = new SyncChannel(atom.name);
+    let skip = false;
+    return {
+        didInit: () => {
+            channel.subscribe(data => {
+                atom.set(data);
+                skip = true;
+            });
+        },
+        set: ({ value }) => {
+            if (skip) {
+                skip = false;
+                return;
+            }
+            channel.push(value);
+        },
+    };
+});

package/dist/esm/utils/queue.js

@@ -10,7 +10,8 @@ export class Queue {
         const init = this.last ? this.last.then(() => prev) : new Thenable(prev);
         const result = this.queue.reduce((result, next) => result.then(prev => next(prev)), init);
         this.queue = [];
-        this.last = result.then(value => {
+        this.last = result;
+        result.then(value => {
             if (this.last === result) {
                 this.last = null;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yaasl/core",
-  "version": "0.13.1",
+  "version": "0.14.0-alpha.0",
   "description": "yet another atomic store library (vanilla-js)",
   "author": "PrettyCoffee",
   "license": "MIT",