react-3ducks/lib/index.js

Simple state management library for React

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var auto_bind_1 = __importDefault(require("auto-bind"));
var StateStore = (function () {
    function StateStore(initialState) {
        this.listeners = new Map();
        this._state = Object.freeze(initialState);
        auto_bind_1.default(this);
    }
    Object.defineProperty(StateStore.prototype, "state", {
        get: function () {
            return this._state;
        },
        set: function (_) {
            throw new Error("use setState or store actions to mutate the state");
        },
        enumerable: true,
        configurable: true
    });
    StateStore.prototype.fireListeners = function (newState) {
        var _this = this;
        var keys = Object.keys(newState);
        var filtered = [];
        keys.forEach(function (k) {
            var keyListeners = _this.listeners.get(k);
            if (keyListeners) {
                filtered = filtered.concat(Array.from(keyListeners.values()));
            }
        });
        new Set(filtered).forEach(function (l) { return l(); });
    };
    StateStore.prototype.setState = function (newState) {
        this._state = Object.freeze(__assign(__assign({}, this._state), newState));
        this.fireListeners(newState);
    };
    StateStore.prototype.subscribe = function (key, callback) {
        var keyListeners = this.listeners.get(key);
        if (keyListeners) {
            keyListeners.add(callback);
        }
        else {
            this.listeners.set(key, new Set([callback]));
        }
    };
    StateStore.prototype.unsubscribe = function (callback) {
        Array.from(this.listeners.values()).forEach(function (l) { return l.delete(callback); });
    };
    return StateStore;
}());
exports.default = StateStore;
var StoresContext = react_1.createContext({});
exports._StoresContext = global.__DEV__ ? StoresContext : undefined;
exports.root = function (RootComponent, stores) { return function (props) {
    return react_1.createElement(StoresContext.Provider, { value: stores }, react_1.createElement(RootComponent, __assign({}, props)));
}; };
function container(ContainerComponent, mapState) {
    return (function (_super) {
        __extends(class_1, _super);
        function class_1() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.stores = {};
            _this.updateState = function () {
                _this.forceUpdate();
            };
            return _this;
        }
        class_1.prototype.componentWillUnmount = function () {
            var _this = this;
            this.stores &&
                Object.keys(this.stores).forEach(function (k) {
                    _this.stores[k].unsubscribe(_this.updateState);
                });
        };
        class_1.prototype.getStateProxy = function (store) {
            var _this = this;
            var proxy = new Proxy(store.state, {
                get: function (target, name) {
                    store.subscribe(name, _this.updateState);
                    return target[name];
                }
            });
            return proxy;
        };
        class_1.prototype.getStoreProxy = function (store) {
            var _this = this;
            return new Proxy(store, {
                get: function (target, name) {
                    if (name !== "state")
                        return target[name];
                    else
                        return _this.getStateProxy(store);
                }
            });
        };
        class_1.prototype.render = function () {
            var _this = this;
            return react_1.createElement(StoresContext.Consumer, {
                children: function (stores) {
                    var proxies = {};
                    _this.stores = stores;
                    Object.keys(stores).forEach(function (k) {
                        stores[k].unsubscribe(_this.updateState);
                        proxies[k] = _this.getStoreProxy(stores[k]);
                    });
                    var newState = mapState
                        ? mapState(proxies, _this.props)
                        : proxies;
                    var mergedProps = __assign(__assign({}, newState), _this.props);
                    return react_1.createElement(ContainerComponent, mergedProps);
                }
            });
        };
        return class_1;
    }(react_1.Component));
}
exports.container = container;
//# sourceMappingURL=index.js.map