@canlooks/statio 1.0.0

package/dist/cjs/createStore.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStore = createStore;
+const api_1 = require("./api");
+const util_1 = require("./util");
+const react_1 = require("react");
+function createStore(factory) {
+    const api = new api_1.Api(factory, state => {
+        for (const fire of listeners) {
+            fire(state);
+        }
+    });
+    function useStore(a, b, ...rest) {
+        let selector;
+        let isEqual;
+        if (typeof a !== 'undefined') {
+            if (typeof a === 'function') {
+                selector = a;
+                isEqual = b;
+            }
+            else {
+                const keys = [a, b, ...rest];
+                selector = (state) => {
+                    const select = {};
+                    keys.forEach((key) => {
+                        if (key in state) {
+                            select[key] = state[key];
+                        }
+                    });
+                    return select;
+                };
+            }
+        }
+        const symbolHelper = (0, react_1.useRef)(Symbol());
+        const cachedSnapshot = (0, react_1.useRef)(void 0);
+        if (selector) {
+            cachedSnapshot.current ||= selector(api.state);
+        }
+        const result = (0, react_1.useSyncExternalStore)(onStoreChange => {
+            const listener = (snapshot) => {
+                if (selector) {
+                    cachedSnapshot.current = snapshot;
+                }
+                else {
+                    symbolHelper.current = Symbol();
+                }
+                onStoreChange();
+            };
+            return selector
+                ? subscribe(selector, listener, { isEqual, _initSnapshot: cachedSnapshot.current })
+                : subscribe(listener);
+        }, () => selector ? cachedSnapshot.current : symbolHelper.current, () => api.serverState);
+        return typeof result === 'symbol' ? api.state : result;
+    }
+    const listeners = new Set();
+    const originListener_callback = new WeakMap();
+    function subscribe(a, b, c) {
+        const bIsFunction = typeof b === 'function';
+        const listener = bIsFunction ? b : a;
+        const selector = bIsFunction ? a : void 0;
+        const options = bIsFunction ? c : b;
+        let prevSnapshot = options?._initSnapshot;
+        const callback = () => {
+            if (!selector) {
+                listener(api.state);
+                return;
+            }
+            const snapShot = selector(api.state);
+            if (options?.isEqual) {
+                if (options.isEqual(snapShot, prevSnapshot)) {
+                    return;
+                }
+            }
+            else if (typeof snapShot === 'object' && snapShot !== null) {
+                if ((0, util_1.shallowEqual)(snapShot, prevSnapshot)) {
+                    return;
+                }
+            }
+            else if (prevSnapshot === snapShot) {
+                return;
+            }
+            listener(snapShot, prevSnapshot);
+            prevSnapshot = snapShot;
+        };
+        options?.immediate && callback();
+        listeners.add(callback);
+        originListener_callback.set(listener, callback);
+        return () => {
+            unsubscribe(listener);
+        };
+    }
+    function unsubscribe(listener) {
+        const callback = originListener_callback.get(listener);
+        if (callback) {
+            listeners.delete(callback);
+            originListener_callback.delete(listener);
+        }
+    }
+    useStore.getState = () => api.state;
+    useStore.setState = api.setState;
+    useStore.subscribe = subscribe;
+    useStore.unsubscribe = unsubscribe;
+    return useStore;
+}

package/dist/cjs/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./api"), exports);
+tslib_1.__exportStar(require("./compute"), exports);
+tslib_1.__exportStar(require("./createStore"), exports);
+tslib_1.__exportStar(require("./storage"), exports);
+tslib_1.__exportStar(require("./util"), exports);

package/dist/cjs/log.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prefix = void 0;
+exports.prefix = '[@canlooks/statio] ';

package/dist/cjs/storage.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.storage = storage;
+const util_1 = require("./util");
+const api_1 = require("./api");
+function storage(factory, options) {
+    return (set, api) => {
+        const { name, type = 'localStorage', selector = state => {
+            const selected = {};
+            const descriptors = (0, util_1.getAllPropertyDescriptors)(state);
+            for (const k in descriptors) {
+                const { value } = descriptors[k];
+                if (typeof value !== 'function' && !(value instanceof api_1.Api)) {
+                    selected[k] = value;
+                }
+            }
+            return selected;
+        }, adapter } = options;
+        const storageFactory = adapter || (typeof window !== 'undefined' ? window[type] : void 0);
+        const batchSet = (0, util_1.createBatchAction)(set, () => {
+            if (storageFactory) {
+                const state = api.getState();
+                const value = selector ? selector(state) : state;
+                storageFactory.setItem(name, JSON.stringify(value));
+            }
+        });
+        const state = (0, util_1.isClass)(factory)
+            ? new factory(batchSet, api)
+            : factory(batchSet, api);
+        api.serverState = { ...state };
+        if (storageFactory) {
+            const value = storageFactory.getItem(name);
+            if (value !== null) {
+                try {
+                    const cached = JSON.parse(value);
+                    Object.assign(state, cached);
+                }
+                catch (e) {
+                }
+            }
+        }
+        return state;
+    };
+}

package/dist/cjs/util.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAllPropertyDescriptors = getAllPropertyDescriptors;
+exports.isClass = isClass;
+exports.shallowEqual = shallowEqual;
+exports.nextTick = nextTick;
+exports.createBatchAction = createBatchAction;
+/**
+ * 得到所有属性的描述符，包括被继承的父类
+ * @param o
+ */
+function getAllPropertyDescriptors(o) {
+    const { constructor, ...desc } = Object.getOwnPropertyDescriptors(o);
+    const prototype = Object.getPrototypeOf(o);
+    if (prototype !== Object.prototype && prototype !== Array.prototype && prototype !== Function.prototype) {
+        return {
+            ...getAllPropertyDescriptors(prototype),
+            ...desc
+        };
+    }
+    return desc;
+}
+/**
+ * 判断一个函数是否为Class
+ * @param fn
+ */
+function isClass(fn) {
+    if (fn.prototype?.constructor !== fn) {
+        return false;
+    }
+    return Function.prototype.toString.call(fn).startsWith('class');
+}
+/**
+ * 浅比较，判断对象或数组是否“相等”
+ * @param a
+ * @param b
+ */
+function shallowEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (typeof a !== 'object') {
+        return false;
+    }
+    if (a === null) {
+        return b === null;
+    }
+    if (Array.isArray(a) !== Array.isArray(b)) {
+        return false;
+    }
+    const aKeys = Object.keys(a);
+    if (aKeys.length !== Object.keys(b).length) {
+        return false;
+    }
+    let isEqual = true;
+    for (let i = 0, { length } = aKeys; i < length; i++) {
+        const k = aKeys[i];
+        if (!(k in b) || a[k] !== b[k]) {
+            isEqual = false;
+            break;
+        }
+    }
+    return isEqual;
+}
+/**
+ * 下一个事件循环
+ * @param callback
+ * @param args
+ */
+function nextTick(callback, ...args) {
+    let aborted = false;
+    const promise = new Promise(resolve => {
+        if (typeof queueMicrotask === 'function') {
+            queueMicrotask(fn);
+            return;
+        }
+        if (typeof process === 'object' && process.nextTick) {
+            process.nextTick(fn, ...args);
+            return;
+        }
+        setTimeout(fn, 0, ...args);
+        function fn(...a) {
+            if (!aborted) {
+                callback?.(...a);
+                resolve(a[0]);
+            }
+        }
+    });
+    promise.abort = () => {
+        aborted = true;
+    };
+    return promise;
+}
+/**
+ * 多次同步动作仅触发一次副作用
+ * @param action
+ * @param effect
+ */
+function createBatchAction(action, effect) {
+    let prevPending;
+    return function (...args) {
+        try {
+            action.apply(this, args);
+        }
+        finally {
+            prevPending?.abort();
+            prevPending = nextTick(effect);
+        }
+    };
+}

package/dist/esm/api.js

@@ -0,0 +1,47 @@
+import { Computable } from './compute.js';
+import { getAllPropertyDescriptors, isClass } from './util.js';
+export class Api {
+    onChange;
+    serverState;
+    state;
+    computable;
+    constructor(factory, onChange) {
+        this.onChange = onChange;
+        this.state = isClass(factory)
+            ? new factory(this.setState, this)
+            : factory(this.setState, this);
+        this.bindContextAndInitComputable();
+    }
+    setState = (setStateAction, overwrite) => {
+        const newState = typeof setStateAction === 'function' ? setStateAction(this.state) : setStateAction;
+        if (overwrite) {
+            this.state = newState;
+            this.bindContextAndInitComputable();
+        }
+        else {
+            Object.assign(this.state, newState);
+        }
+        this.onChange(this.state);
+    };
+    getState = () => {
+        return this.state;
+    };
+    compute = (factory, deps) => {
+        return this.computable.get(factory, deps);
+    };
+    bindContextAndInitComputable() {
+        this.computable = new Computable(this.state);
+        const properties = getAllPropertyDescriptors(this.state);
+        for (const k in properties) {
+            const { get, value } = properties[k];
+            if (get) {
+                Object.defineProperty(this.state, k, {
+                    get: this.computable.createGetter(k, () => get.call(this.state))
+                });
+            }
+            else if (typeof value === 'function') {
+                this.state[k] = value.bind(this.state);
+            }
+        }
+    }
+}

package/dist/esm/compute.js

@@ -0,0 +1,46 @@
+import { shallowEqual } from './util.js';
+import { prefix } from './log.js';
+export function createCompute() {
+    let prevDeps = [];
+    let prevResult;
+    let hasRun = false;
+    return function (factory, deps) {
+        if (hasRun && shallowEqual(prevDeps, deps)) {
+            return prevResult;
+        }
+        hasRun = true;
+        prevDeps = [...deps];
+        return prevResult = factory.call(this);
+    };
+}
+export class Computable {
+    state;
+    constructor(state) {
+        this.state = state;
+    }
+    property_compute = new Map();
+    stack = [];
+    createGetter(key, get) {
+        return () => {
+            try {
+                this.stack.push(key);
+                return get();
+            }
+            finally {
+                this.stack.pop();
+            }
+        };
+    }
+    get(factory, deps) {
+        const key = this.stack[this.stack.length - 1];
+        if (!key) {
+            throw Error(`${prefix}"compute" method can only be used in getter properties.`);
+        }
+        let compute = this.property_compute.get(key);
+        if (!compute) {
+            compute = createCompute();
+            this.property_compute.set(key, compute);
+        }
+        return compute.call(this.state, factory, deps);
+    }
+}

package/dist/esm/createStore.js

@@ -0,0 +1,101 @@
+import { Api } from './api.js';
+import { shallowEqual } from './util.js';
+import { useRef, useSyncExternalStore } from 'react';
+export function createStore(factory) {
+    const api = new Api(factory, state => {
+        for (const fire of listeners) {
+            fire(state);
+        }
+    });
+    function useStore(a, b, ...rest) {
+        let selector;
+        let isEqual;
+        if (typeof a !== 'undefined') {
+            if (typeof a === 'function') {
+                selector = a;
+                isEqual = b;
+            }
+            else {
+                const keys = [a, b, ...rest];
+                selector = (state) => {
+                    const select = {};
+                    keys.forEach((key) => {
+                        if (key in state) {
+                            select[key] = state[key];
+                        }
+                    });
+                    return select;
+                };
+            }
+        }
+        const symbolHelper = useRef(Symbol());
+        const cachedSnapshot = useRef(void 0);
+        if (selector) {
+            cachedSnapshot.current ||= selector(api.state);
+        }
+        const result = useSyncExternalStore(onStoreChange => {
+            const listener = (snapshot) => {
+                if (selector) {
+                    cachedSnapshot.current = snapshot;
+                }
+                else {
+                    symbolHelper.current = Symbol();
+                }
+                onStoreChange();
+            };
+            return selector
+                ? subscribe(selector, listener, { isEqual, _initSnapshot: cachedSnapshot.current })
+                : subscribe(listener);
+        }, () => selector ? cachedSnapshot.current : symbolHelper.current, () => api.serverState);
+        return typeof result === 'symbol' ? api.state : result;
+    }
+    const listeners = new Set();
+    const originListener_callback = new WeakMap();
+    function subscribe(a, b, c) {
+        const bIsFunction = typeof b === 'function';
+        const listener = bIsFunction ? b : a;
+        const selector = bIsFunction ? a : void 0;
+        const options = bIsFunction ? c : b;
+        let prevSnapshot = options?._initSnapshot;
+        const callback = () => {
+            if (!selector) {
+                listener(api.state);
+                return;
+            }
+            const snapShot = selector(api.state);
+            if (options?.isEqual) {
+                if (options.isEqual(snapShot, prevSnapshot)) {
+                    return;
+                }
+            }
+            else if (typeof snapShot === 'object' && snapShot !== null) {
+                if (shallowEqual(snapShot, prevSnapshot)) {
+                    return;
+                }
+            }
+            else if (prevSnapshot === snapShot) {
+                return;
+            }
+            listener(snapShot, prevSnapshot);
+            prevSnapshot = snapShot;
+        };
+        options?.immediate && callback();
+        listeners.add(callback);
+        originListener_callback.set(listener, callback);
+        return () => {
+            unsubscribe(listener);
+        };
+    }
+    function unsubscribe(listener) {
+        const callback = originListener_callback.get(listener);
+        if (callback) {
+            listeners.delete(callback);
+            originListener_callback.delete(listener);
+        }
+    }
+    useStore.getState = () => api.state;
+    useStore.setState = api.setState;
+    useStore.subscribe = subscribe;
+    useStore.unsubscribe = unsubscribe;
+    return useStore;
+}

package/dist/esm/index.js

@@ -0,0 +1,5 @@
+export * from './api.js';
+export * from './compute.js';
+export * from './createStore.js';
+export * from './storage.js';
+export * from './util.js';

package/dist/esm/log.js

@@ -0,0 +1 @@
+export const prefix = '[@canlooks/statio] ';

package/dist/esm/storage.js

@@ -0,0 +1,41 @@
+import { createBatchAction, getAllPropertyDescriptors, isClass } from './util.js';
+import { Api } from './api.js';
+export function storage(factory, options) {
+    return (set, api) => {
+        const { name, type = 'localStorage', selector = state => {
+            const selected = {};
+            const descriptors = getAllPropertyDescriptors(state);
+            for (const k in descriptors) {
+                const { value } = descriptors[k];
+                if (typeof value !== 'function' && !(value instanceof Api)) {
+                    selected[k] = value;
+                }
+            }
+            return selected;
+        }, adapter } = options;
+        const storageFactory = adapter || (typeof window !== 'undefined' ? window[type] : void 0);
+        const batchSet = createBatchAction(set, () => {
+            if (storageFactory) {
+                const state = api.getState();
+                const value = selector ? selector(state) : state;
+                storageFactory.setItem(name, JSON.stringify(value));
+            }
+        });
+        const state = isClass(factory)
+            ? new factory(batchSet, api)
+            : factory(batchSet, api);
+        api.serverState = { ...state };
+        if (storageFactory) {
+            const value = storageFactory.getItem(name);
+            if (value !== null) {
+                try {
+                    const cached = JSON.parse(value);
+                    Object.assign(state, cached);
+                }
+                catch (e) {
+                }
+            }
+        }
+        return state;
+    };
+}

package/dist/esm/util.js

@@ -0,0 +1,103 @@
+/**
+ * 得到所有属性的描述符，包括被继承的父类
+ * @param o
+ */
+export function getAllPropertyDescriptors(o) {
+    const { constructor, ...desc } = Object.getOwnPropertyDescriptors(o);
+    const prototype = Object.getPrototypeOf(o);
+    if (prototype !== Object.prototype && prototype !== Array.prototype && prototype !== Function.prototype) {
+        return {
+            ...getAllPropertyDescriptors(prototype),
+            ...desc
+        };
+    }
+    return desc;
+}
+/**
+ * 判断一个函数是否为Class
+ * @param fn
+ */
+export function isClass(fn) {
+    if (fn.prototype?.constructor !== fn) {
+        return false;
+    }
+    return Function.prototype.toString.call(fn).startsWith('class');
+}
+/**
+ * 浅比较，判断对象或数组是否“相等”
+ * @param a
+ * @param b
+ */
+export function shallowEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (typeof a !== 'object') {
+        return false;
+    }
+    if (a === null) {
+        return b === null;
+    }
+    if (Array.isArray(a) !== Array.isArray(b)) {
+        return false;
+    }
+    const aKeys = Object.keys(a);
+    if (aKeys.length !== Object.keys(b).length) {
+        return false;
+    }
+    let isEqual = true;
+    for (let i = 0, { length } = aKeys; i < length; i++) {
+        const k = aKeys[i];
+        if (!(k in b) || a[k] !== b[k]) {
+            isEqual = false;
+            break;
+        }
+    }
+    return isEqual;
+}
+/**
+ * 下一个事件循环
+ * @param callback
+ * @param args
+ */
+export function nextTick(callback, ...args) {
+    let aborted = false;
+    const promise = new Promise(resolve => {
+        if (typeof queueMicrotask === 'function') {
+            queueMicrotask(fn);
+            return;
+        }
+        if (typeof process === 'object' && process.nextTick) {
+            process.nextTick(fn, ...args);
+            return;
+        }
+        setTimeout(fn, 0, ...args);
+        function fn(...a) {
+            if (!aborted) {
+                callback?.(...a);
+                resolve(a[0]);
+            }
+        }
+    });
+    promise.abort = () => {
+        aborted = true;
+    };
+    return promise;
+}
+/**
+ * 多次同步动作仅触发一次副作用
+ * @param action
+ * @param effect
+ */
+export function createBatchAction(action, effect) {
+    let prevPending;
+    return function (...args) {
+        try {
+            action.apply(this, args);
+        }
+        finally {
+            prevPending?.abort();
+            prevPending = nextTick(effect);
+        }
+    };
+}