usestore-react/dist/index.js

A simple state management library for React using hooks

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSelector = exports.useStore = exports.deleteAllStores = exports.deleteStore = exports.hasStore = exports.getStore = exports.createStore = void 0;
var react_1 = require("react");
var stores = {};
var createStore = function (name, defaultState) {
    if (stores[name]) {
        console.warn("[usestore-react] Store with name '".concat(name, "' already exists. Overriding"));
    }
    var store = {
        name: name,
        defaultState: defaultState,
        state: defaultState,
        setters: [],
        getState: function () { return store.state; },
        setState: function (setStateAction) {
            store.state =
                typeof setStateAction === 'function'
                    ? setStateAction(store.state)
                    : setStateAction;
            store.setters.forEach(function (setter) { return setter(store.state); });
            return store.state;
        },
        useStore: function () { return (0, exports.useStore)(name); },
        useSelector: function (selector) {
            return (0, exports.useSelector)(name, selector);
        },
        subscribe: function (listener) {
            return store.setters.unshift(listener);
        },
        unsubscribe: function (listener) {
            store.setters = store.setters.filter(function (setter) { return setter !== listener; });
        },
        reset: function () { return store.setState(defaultState); },
    };
    stores[name] = store;
    var returnValue = [
        store.getState,
        store.setState,
        store.useStore,
    ];
    returnValue.name = name;
    returnValue.getState = store.getState;
    returnValue.setState = store.setState;
    returnValue.useStore = store.useStore;
    returnValue.useSelector = store.useSelector;
    returnValue.reset = store.reset;
    return returnValue;
};
exports.createStore = createStore;
var getStore = function (name) {
    if (!stores[name]) {
        console.debug("[usestore-react] Store named \"".concat(name, "\" does not exist. Creating one"));
        (0, exports.createStore)(name, undefined);
    }
    return stores[name];
};
exports.getStore = getStore;
var hasStore = function (name) { return !!stores[name]; };
exports.hasStore = hasStore;
var deleteStore = function (name) {
    delete stores[name];
};
exports.deleteStore = deleteStore;
var deleteAllStores = function () { return Object.keys(stores).forEach(exports.deleteStore); };
exports.deleteAllStores = deleteAllStores;
var useStore = function (name) {
    var store = (0, exports.getStore)(name);
    // setState is only used for rerenders because we always want to serve the latest state from the store
    var _a = (0, react_1.useState)(store.state), setState = _a[1];
    (0, react_1.useLayoutEffect)(function () {
        store.subscribe(setState);
        return function () { return store.unsubscribe(setState); };
    }, [name]);
    return [store.state, store.setState];
};
exports.useStore = useStore;
var useSelector = function (name, selectorFn, equalityFunction) {
    if (equalityFunction === void 0) { equalityFunction = function (a, b) {
        return JSON.stringify(a) === JSON.stringify(b);
    }; }
    var store = (0, exports.getStore)(name);
    var _a = (0, react_1.useState)(selectorFn(store.state)), value = _a[0], setValue = _a[1];
    (0, react_1.useLayoutEffect)(function () {
        var selector = function (state) {
            return setValue(function (value) {
                var newValue = selectorFn(state);
                return equalityFunction(value, newValue) ? value : newValue;
            });
        };
        store.subscribe(selector);
        return function () { return store.unsubscribe(selector); };
    }, [name, selectorFn]);
    return value;
};
exports.useSelector = useSelector;
//# sourceMappingURL=index.js.map