@yaasl/core 0.7.0-alpha.0

package/dist/cjs/middleware/localStorage.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.localStorage = void 0;
+const middleware_1 = require("./middleware");
+const base_1 = require("../base");
+const LocalStorage_1 = require("../utils/LocalStorage");
+/** Middleware to save and load atom values to the local storage.
+ *
+ * @param {LocalStorageOptions | undefined} options
+ * @param options.key Use your own key for the local 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 middleware to be used on atoms.
+ **/
+exports.localStorage = (0, middleware_1.middleware)(({ atom, options = {} }) => {
+    const internalKey = base_1.CONFIG.name ? `${base_1.CONFIG.name}/${atom.name}` : atom.name;
+    const { key = internalKey, parser, noTabSync } = options;
+    const storage = new LocalStorage_1.LocalStorage(key, {
+        parser,
+        onTabSync: noTabSync ? undefined : value => atom.set(value),
+    });
+    return {
+        init: ({ atom }) => {
+            const existing = storage.get();
+            if (existing === null) {
+                storage.set(atom.defaultValue);
+            }
+            else {
+                atom.set(existing);
+            }
+        },
+        set: ({ value }) => {
+            storage.set(value);
+        },
+    };
+});

package/dist/cjs/middleware/middleware.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.middleware = void 0;
+/** Create middlewares to be used in combination with atoms.
+ *
+ * @param setup Middleware actions or function to create middleware actions.
+ *   Middleware actions are fired in the atom lifecycle, alongside to the subscriptions.
+ *
+ * @returns A middleware function to be used in atoms.
+ **/
+const middleware = (setup) => (...[optionsArg]) => (atom) => {
+    const options = optionsArg;
+    const actions = setup instanceof Function ? setup({ options, atom }) : setup;
+    return {
+        options,
+        actions,
+    };
+};
+exports.middleware = middleware;

package/dist/cjs/middleware/migration.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMigrationStep = exports.migration = void 0;
+const utils_1 = require("@yaasl/utils");
+const middleware_1 = require("./middleware");
+const base_1 = require("../base");
+const sortMigrations = (migrations) => {
+    const first = migrations.find(migration => migration.previous === null);
+    if (!first) {
+        utils_1.log.error("No migration with previous version null found");
+        return [];
+    }
+    return migrations.reduce(sorted => {
+        const last = sorted.at(-1);
+        const next = migrations.find(migration => migration.previous === (last === null || last === void 0 ? void 0 : last.version));
+        if (next) {
+            sorted.push(next);
+        }
+        return sorted;
+    }, [first]);
+};
+const getVersion = (atom) => {
+    const key = base_1.CONFIG.name ? `${base_1.CONFIG.name}/${atom.name}` : atom.name;
+    return localStorage.getItem(`${key}-version`);
+};
+const setVersion = (atom, version) => {
+    const key = base_1.CONFIG.name ? `${base_1.CONFIG.name}/${atom.name}` : atom.name;
+    localStorage.setItem(`${key}-version`, version);
+};
+const migrateVersion = (atom, data, migration) => {
+    if (migration.validate && !migration.validate(data)) {
+        return {
+            error: `The data of the "${atom.name}" atom does not match its version.`,
+        };
+    }
+    try {
+        return {
+            data: migration.migrate(data),
+            version: migration.version,
+        };
+    }
+    catch (_a) {
+        return {
+            error: `Something went wrong while migrating the data of the "${atom.name}" atom.`,
+        };
+    }
+};
+const performMigration = (atom, version, migrations) => {
+    const currentState = {
+        version,
+        data: atom.get(),
+    };
+    return migrations.reduce((result, migration) => {
+        const { data, version, error } = result;
+        if (error || version !== migration.previous) {
+            return result;
+        }
+        return migrateVersion(atom, data, migration);
+    }, currentState);
+};
+exports.migration = (0, middleware_1.middleware)({
+    didInit: ({ atom, options }) => {
+        var _a, _b;
+        const steps = sortMigrations(options.steps);
+        const currentVersion = getVersion(atom);
+        const isLatestVersion = currentVersion === ((_a = steps.at(-1)) === null || _a === void 0 ? void 0 : _a.version);
+        if (steps.length < 1 || isLatestVersion) {
+            return;
+        }
+        if (atom.get() === atom.defaultValue) {
+            const version = (_b = steps.at(-1)) === null || _b === void 0 ? void 0 : _b.version;
+            if (version)
+                setVersion(atom, version);
+            return;
+        }
+        const { data, version, error } = performMigration(atom, currentVersion, steps);
+        if (error) {
+            utils_1.log.error(error, {
+                version: currentVersion,
+                data: atom.get(),
+            });
+            return;
+        }
+        if (version == null)
+            return;
+        setVersion(atom, version);
+        atom.set(data);
+    },
+});
+const createMigrationStep = (migration) => migration;
+exports.createMigrationStep = createMigrationStep;

package/dist/cjs/utils/Expiration.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Expiration = void 0;
+const STORAGE = window.localStorage;
+class Expiration {
+    constructor({ key, expiresAt, expiresIn }) {
+        this.timeout = null;
+        this.dispatchExpiration = (expiresIn, onExpire) => {
+            this.timeout = setTimeout(() => {
+                onExpire();
+                this.remove();
+            }, expiresIn);
+        };
+        this.timeout = null;
+        this.key = key;
+        if (expiresAt) {
+            this.getExpiration = () => expiresAt instanceof Function ? expiresAt() : expiresAt;
+        }
+        else if (expiresIn) {
+            this.getExpiration = () => {
+                const afterMs = expiresIn instanceof Function ? expiresIn() : expiresIn;
+                return new Date(Date.now() + afterMs);
+            };
+        }
+        else {
+            this.getExpiration = null;
+        }
+    }
+    remove() {
+        STORAGE.removeItem(this.key);
+        if (this.timeout != null) {
+            clearTimeout(this.timeout);
+            this.timeout = null;
+        }
+    }
+    init(onExpire) {
+        if (!this.getExpiration)
+            return;
+        const existing = STORAGE.getItem(this.key);
+        if (!existing) {
+            this.remove();
+            return;
+        }
+        const expiresIn = Number(existing) - Date.now();
+        const isExpired = Number.isNaN(expiresIn) || expiresIn <= 0;
+        if (isExpired) {
+            onExpire();
+            this.remove();
+        }
+        else {
+            this.dispatchExpiration(expiresIn, onExpire);
+        }
+    }
+    set(onExpire) {
+        this.remove();
+        if (!this.getExpiration)
+            return;
+        const expiration = this.getExpiration();
+        const expiresIn = Number(expiration) - Date.now();
+        this.dispatchExpiration(expiresIn, onExpire);
+        STORAGE.setItem(this.key, String(expiration.valueOf()));
+    }
+}
+exports.Expiration = Expiration;

package/dist/cjs/utils/LocalStorage.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocalStorage = void 0;
+const utils_1 = require("@yaasl/utils");
+const STORAGE = window.localStorage;
+const defaultParser = {
+    parse: JSON.parse,
+    stringify: JSON.stringify,
+};
+const syncOverBrowserTabs = (observingKey, onTabSync) => window.addEventListener("storage", ({ key, newValue }) => {
+    if (observingKey !== key)
+        return;
+    onTabSync(newValue);
+});
+class LocalStorage {
+    constructor(key, options = {}) {
+        var _a;
+        this.key = key;
+        this.parser = (_a = options.parser) !== null && _a !== void 0 ? _a : defaultParser;
+        if (!options.onTabSync)
+            return;
+        syncOverBrowserTabs(key, value => {
+            var _a;
+            const newValue = value === null ? null : this.parser.parse(value);
+            if (newValue === null) {
+                this.remove();
+            }
+            else {
+                this.set(newValue);
+            }
+            (_a = options.onTabSync) === null || _a === void 0 ? void 0 : _a.call(options, newValue);
+        });
+    }
+    get() {
+        const value = STORAGE.getItem(this.key);
+        try {
+            return typeof value !== "string" ? null : this.parser.parse(value);
+        }
+        catch (_a) {
+            throw new Error((0, utils_1.consoleMessage)(`Value of local storage key "${this.key}" could not be parsed.`));
+        }
+    }
+    set(value) {
+        try {
+            if (value === null) {
+                STORAGE.removeItem(this.key);
+            }
+            else {
+                STORAGE.setItem(this.key, this.parser.stringify(value));
+            }
+        }
+        catch (_a) {
+            utils_1.log.error(`Value of atom with local storage key "${this.key}" could not be set.`, { value });
+        }
+    }
+    remove() {
+        STORAGE.removeItem(this.key);
+    }
+}
+exports.LocalStorage = LocalStorage;

package/dist/cjs/utils/Store.js

@@ -0,0 +1,50 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Store = void 0;
+const promisifyRequest = (request) => new Promise((resolve, reject) => {
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+});
+class Store {
+    constructor(name) {
+        this.name = name;
+        const openRequest = indexedDB.open(`${name}-database`);
+        this.database = promisifyRequest(openRequest);
+        openRequest.onupgradeneeded = () => {
+            const database = openRequest.result;
+            const exists = database.objectStoreNames.contains(name);
+            if (!exists) {
+                database.createObjectStore(name);
+            }
+        };
+    }
+    getStore(mode) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const database = yield this.database;
+            return database.transaction(this.name, mode).objectStore(this.name);
+        });
+    }
+    get(key) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.getStore("readonly").then(store => promisifyRequest(store.get(key)));
+        });
+    }
+    set(key, value) {
+        return this.getStore("readwrite").then((store) => __awaiter(this, void 0, void 0, function* () {
+            yield promisifyRequest(store.put(value, key));
+        }));
+    }
+    delete(key) {
+        return this.getStore("readwrite").then(store => promisifyRequest(store.delete(key)));
+    }
+}
+exports.Store = Store;

package/dist/cjs/utils/Thenable.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Thenable = void 0;
+const isPromiselike = (value) => typeof value === "object" &&
+    value !== null &&
+    "then" in value &&
+    typeof value.then === "function";
+class Thenable {
+    constructor(value) {
+        this.value = value;
+    }
+    then(onfulfilled, onrejected) {
+        try {
+            const result = !onfulfilled ? this.value : onfulfilled(this.value);
+            return isPromiselike(result) ? result : new Thenable(result);
+        }
+        catch (error) {
+            if (!onrejected)
+                throw error;
+            const result = onrejected(error);
+            return isPromiselike(result) ? result : new Thenable(result);
+        }
+    }
+}
+exports.Thenable = Thenable;

package/dist/mjs/base/Stateful.js

@@ -0,0 +1,32 @@
+export class Stateful {
+    constructor(value) {
+        this.value = value;
+        this.listeners = new Set();
+    }
+    /** Read the value of state.
+     *
+     * @returns The current value.
+     **/
+    get() {
+        return this.value;
+    }
+    /** Subscribe to value changes.
+     *
+     *  @param callback Function to use the new value.
+     *
+     *  @returns A callback to unsubscribe the passed callback.
+     */
+    subscribe(callback) {
+        this.listeners.add(callback);
+        return () => this.listeners.delete(callback);
+    }
+    emit() {
+        this.listeners.forEach(listener => listener(this.get()));
+    }
+    update(value) {
+        if (this.value !== value) {
+            this.value = value;
+            this.emit();
+        }
+    }
+}

package/dist/mjs/base/atom.js

@@ -0,0 +1,51 @@
+import { Stateful } from "./Stateful";
+import { MiddlewareDispatcher } from "../middleware/MiddlewareDispatcher";
+let key = 0;
+export class Atom extends Stateful {
+    constructor({ defaultValue, name = `atom-${++key}`, middleware, }) {
+        super(defaultValue);
+        this.didInit = false;
+        this.name = name;
+        this.defaultValue = defaultValue;
+        if (!middleware || middleware.length === 0) {
+            this.didInit = true;
+            return;
+        }
+        const { didInit } = new MiddlewareDispatcher({ atom: this, middleware });
+        if (typeof didInit === "boolean") {
+            this.didInit = didInit;
+        }
+        else {
+            this.didInit = didInit.then(() => {
+                this.didInit = true;
+            });
+        }
+    }
+    /** Set the value of the atom.
+     *
+     * @param next New value or function to create the
+     * new value based off the previous value.
+     */
+    set(next) {
+        const value = next instanceof Function ? next(this.get()) : next;
+        super.update(value);
+    }
+    /** Resolve the value of a promise and set as atom value.
+     *
+     * @param promise Promise to unwrap
+     */
+    async unwrap(promise) {
+        const value = await promise;
+        this.set(value);
+        return value;
+    }
+}
+/** Creates an atom store.
+ *
+ * @param config.defaultValue Value that will be used initially.
+ * @param config.name Name of the atom. Must be unique among all atoms. Defaults to "atom-{number}".
+ * @param config.middleware Middleware that will be applied on the atom.
+ *
+ * @returns An atom instance.
+ **/
+export const atom = (config) => new Atom(config);

package/dist/mjs/base/config.js

@@ -0,0 +1,8 @@
+/** Global configuration object to change internal behavior of yaasl.
+ *
+ *  Values should be set once in your application entrypoint,
+ *  before yaasl is being used.
+ **/
+export const CONFIG = {
+    name: undefined,
+};

package/dist/mjs/base/derive.js

@@ -0,0 +1,27 @@
+import { Stateful } from "./Stateful";
+export class Derive extends Stateful {
+    constructor(derivation) {
+        super(undefined);
+        this.derivation = derivation;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.dependencies = new Set();
+        this.value = derivation({ get: dep => this.addDependency(dep) });
+    }
+    addDependency(dependency) {
+        if (!this.dependencies.has(dependency)) {
+            dependency.subscribe(() => this.deriveUpdate());
+            this.dependencies.add(dependency);
+        }
+        return dependency.get();
+    }
+    deriveUpdate() {
+        this.update(this.derivation({ get: dep => this.addDependency(dep) }));
+    }
+}
+/** Creates a value, derived from one or more atoms or other derived values.
+ *
+ *  @param get Function to derive the new value.
+ *
+ *  @returns A derived instance.
+ **/
+export const derive = (get) => new Derive(get);

package/dist/mjs/base/index.js

@@ -0,0 +1,4 @@
+export * from "./atom";
+export * from "./derive";
+export * from "./config";
+export * from "./Stateful";

package/dist/mjs/index.js

@@ -0,0 +1,2 @@
+export * from "./base";
+export * from "./middleware";

package/dist/mjs/middleware/MiddlewareDispatcher.js

@@ -0,0 +1,30 @@
+import { Thenable } from "../utils/Thenable";
+const isPromise = (value) => value instanceof Promise;
+export class MiddlewareDispatcher {
+    constructor({ atom, middleware }) {
+        this.didInit = false;
+        this.middleware = [];
+        this.middleware = middleware.map(create => create(atom));
+        const result = this.callMiddlewareAction("init", atom)
+            .then(() => this.subscribeSetters(atom))
+            .then(() => this.callMiddlewareAction("didInit", atom))
+            .then(() => {
+            this.didInit = true;
+        });
+        if (result instanceof Promise) {
+            this.didInit = result;
+        }
+    }
+    subscribeSetters(atom) {
+        atom.subscribe(value => void this.callMiddlewareAction("set", atom, value));
+    }
+    callMiddlewareAction(action, atom, value = atom.get()) {
+        const result = this.middleware.map(middleware => {
+            const { actions, options } = middleware;
+            const actionFn = actions[action];
+            return actionFn?.({ value, atom, options });
+        });
+        const promises = result.filter(isPromise);
+        return promises.length ? Promise.all(promises) : new Thenable();
+    }
+}

package/dist/mjs/middleware/expiration.js

@@ -0,0 +1,47 @@
+import { middleware } from "./middleware";
+import { CONFIG } from "../base";
+import { Expiration } from "../utils/Expiration";
+const STORAGE = window.localStorage;
+const syncOverBrowserTabs = (observingKey, onChange) => window.addEventListener("storage", ({ key, newValue }) => {
+    if (observingKey !== key)
+        return;
+    const currentValue = STORAGE.getItem(observingKey);
+    if (currentValue === newValue)
+        return;
+    onChange(newValue);
+});
+/** Middleware to make an atom value expirable and reset to its defaulValue.
+ *
+ * __Note:__ When using `expiresAt`, a function returning the date should be prefered since using a static date might end in an infinite loop.
+ *
+ * @param {ExpirationOptions | undefined} options
+ * @param options.expiresAt Date at which the value expires
+ * @param options.expiresIn Milliseconds in which the value expires. Will be ignored if expiresAt is set.
+ *
+ * @returns The middleware to be used on atoms.
+ **/
+export const expiration = middleware(({ atom, options = {} }) => {
+    const hasExpiration = Boolean(options.expiresAt ?? options.expiresIn);
+    if (!hasExpiration)
+        return {};
+    const key = CONFIG.name ? `${CONFIG.name}/${atom.name}` : atom.name;
+    const expiration = new Expiration({
+        ...options,
+        key: `${key}-expires-at`,
+    });
+    const reset = () => {
+        expiration.remove();
+        atom.set(atom.defaultValue);
+    };
+    return {
+        init: () => {
+            expiration.init(reset);
+            syncOverBrowserTabs(key, () => expiration.init(reset));
+        },
+        set: ({ value }) => {
+            if (value === atom.defaultValue)
+                return;
+            expiration.set(reset);
+        },
+    };
+});

package/dist/mjs/middleware/index.js

@@ -0,0 +1,5 @@
+export { middleware } from "./middleware";
+export { localStorage } from "./localStorage";
+export { indexedDb } from "./indexedDb";
+export { expiration } from "./expiration";
+export { migration, createMigrationStep } from "./migration";

package/dist/mjs/middleware/indexedDb.js

@@ -0,0 +1,35 @@
+import { middleware } from "./middleware";
+import { CONFIG } from "../base";
+import { Store } from "../utils/Store";
+let atomDb = null;
+/** 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.
+ *
+ * @param {IndexedDbOptions | undefined} options
+ * @param options.key Use your own store key. Will be `atom.name` by default.
+ *
+ * @returns The middleware to be used on atoms.
+ **/
+export const indexedDb = middleware(({ atom, options }) => {
+    const key = options?.key ?? atom.name;
+    return {
+        init: ({ atom }) => {
+            if (!atomDb) {
+                atomDb = new Store(CONFIG.name ?? "yaasl");
+            }
+            return atomDb.get(key).then(async (value) => {
+                if (value !== undefined) {
+                    atom.set(value);
+                }
+                else {
+                    await atomDb?.set(key, atom.defaultValue);
+                }
+            });
+        },
+        set: ({ value }) => {
+            void atomDb?.set(key, value);
+        },
+    };
+});

package/dist/mjs/middleware/localStorage.js

@@ -0,0 +1,35 @@
+import { middleware } from "./middleware";
+import { CONFIG } from "../base";
+import { LocalStorage } from "../utils/LocalStorage";
+/** Middleware to save and load atom values to the local storage.
+ *
+ * @param {LocalStorageOptions | undefined} options
+ * @param options.key Use your own key for the local 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 middleware to be used on atoms.
+ **/
+export const localStorage = middleware(({ atom, options = {} }) => {
+    const internalKey = CONFIG.name ? `${CONFIG.name}/${atom.name}` : atom.name;
+    const { key = internalKey, parser, noTabSync } = options;
+    const storage = new LocalStorage(key, {
+        parser,
+        onTabSync: noTabSync ? undefined : value => atom.set(value),
+    });
+    return {
+        init: ({ atom }) => {
+            const existing = storage.get();
+            if (existing === null) {
+                storage.set(atom.defaultValue);
+            }
+            else {
+                atom.set(existing);
+            }
+        },
+        set: ({ value }) => {
+            storage.set(value);
+        },
+    };
+});

package/dist/mjs/middleware/middleware.js

@@ -0,0 +1,15 @@
+/** Create middlewares to be used in combination with atoms.
+ *
+ * @param setup Middleware actions or function to create middleware actions.
+ *   Middleware actions are fired in the atom lifecycle, alongside to the subscriptions.
+ *
+ * @returns A middleware function to be used in atoms.
+ **/
+export const middleware = (setup) => (...[optionsArg]) => (atom) => {
+    const options = optionsArg;
+    const actions = setup instanceof Function ? setup({ options, atom }) : setup;
+    return {
+        options,
+        actions,
+    };
+};