react-better-model 0.1.0

package/lib/index.d.ts

@@ -0,0 +1,17 @@
+import { Context } from 'react';
+export declare class Model<S, E> {
+    state: S;
+    private subs;
+    private updateSubscribers;
+    constructor(state?: S);
+    eventListeners: Map<keyof E, Set<(eventData: E[keyof E]) => void>>;
+    evtDataTypes: E;
+    onStateChange: (k: keyof S, cb: (v: S[keyof S]) => void) => () => void;
+    setState(delta: Partial<S>): void;
+    onEvent: (evt: keyof typeof this.evtDataTypes, cb: (eventData: E[keyof E]) => void) => () => void;
+    emitEvent: (evt: keyof E, data: E[keyof E]) => void;
+}
+export declare function useModelInstanceState<M extends Model<M['state'], M['evtDataTypes']>>(viewModel: M, key: keyof M['state']): (M["state"][keyof M["state"]] | ((v: any) => void))[];
+export declare function useModelCtxState<M extends Model<M['state'], M['evtDataTypes']>>(ctx: Context<M>, key: keyof M['state']): (M["state"][keyof M["state"]] | ((v: any) => void))[];
+export declare function useModelInstanceEvent<M extends Model<M['state'], M['evtDataTypes']>, NS extends keyof M['evtDataTypes']>(viewModel: M, ns: NS, cb?: (eventData: M['evtDataTypes'][NS]) => void): (data: M['evtDataTypes'][NS]) => void;
+export declare function useModelCtxEvent<M extends Model<M['state'], M['evtDataTypes']>, NS extends keyof M['evtDataTypes']>(ctx: Context<M>, ns: NS, cb?: (eventData: M['evtDataTypes'][NS]) => void): (data: M["evtDataTypes"][NS]) => void;

package/lib/index.js

@@ -0,0 +1,103 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModelCtxEvent = exports.useModelInstanceEvent = exports.useModelCtxState = exports.useModelInstanceState = exports.Model = void 0;
+var react_1 = require("react");
+var Model = /** @class */ (function () {
+    function Model(state) {
+        var _this = this;
+        if (state === void 0) { state = {}; }
+        this.state = state;
+        this.subs = new Map();
+        this.updateSubscribers = function (delta) {
+            var keyVals = Object.entries(delta);
+            var _loop_1 = function (key, val) {
+                if (_this.subs.has(key)) {
+                    _this.subs.get(key).forEach(function (cb) {
+                        cb(val);
+                    });
+                }
+            };
+            for (var _i = 0, _a = keyVals; _i < _a.length; _i++) {
+                var _b = _a[_i], key = _b[0], val = _b[1];
+                _loop_1(key, val);
+            }
+        };
+        this.eventListeners = new Map();
+        this.evtDataTypes = {};
+        this.onStateChange = function (k, cb) {
+            var keySubs = _this.subs.get(k);
+            if (!keySubs) {
+                keySubs = new Set();
+                _this.subs.set(k, keySubs);
+            }
+            keySubs.add(cb);
+            return function () {
+                keySubs.delete(cb);
+            };
+        };
+        this.onEvent = function (evt, cb) {
+            var listeners = _this.eventListeners.get(evt);
+            if (!listeners) {
+                listeners = new Set();
+                _this.eventListeners.set(evt, listeners);
+            }
+            listeners.add(cb);
+            return function () {
+                listeners.delete(cb);
+            };
+        };
+        this.emitEvent = function (evt, data) {
+            if (_this.eventListeners.has(evt)) {
+                _this.eventListeners.get(evt).forEach(function (cb) {
+                    cb(data);
+                });
+            }
+        };
+    }
+    Model.prototype.setState = function (delta) {
+        this.state = __assign(__assign({}, this.state), delta);
+        this.updateSubscribers(delta);
+    };
+    return Model;
+}());
+exports.Model = Model;
+function useModelInstanceState(viewModel, key) {
+    var _a = (0, react_1.useState)(viewModel.state[key]), value = _a[0], setValue = _a[1];
+    (0, react_1.useEffect)(function () { return viewModel.onStateChange(key, setValue); }, []);
+    var setter = (0, react_1.useCallback)(function (v) {
+        var _a;
+        viewModel.setState((_a = {}, _a[key] = v, _a));
+    }, [key]);
+    return [value, setter];
+}
+exports.useModelInstanceState = useModelInstanceState;
+function useModelCtxState(ctx, key) {
+    var viewModel = (0, react_1.useContext)(ctx);
+    return useModelInstanceState(viewModel, key);
+}
+exports.useModelCtxState = useModelCtxState;
+function useModelInstanceEvent(viewModel, ns, cb) {
+    (0, react_1.useEffect)(function () {
+        if (cb) {
+            return viewModel.onEvent(ns, cb);
+        }
+    }, [cb]);
+    return function (data) { return viewModel.emitEvent(ns, data); };
+}
+exports.useModelInstanceEvent = useModelInstanceEvent;
+function useModelCtxEvent(ctx, ns, cb) {
+    var viewModel = (0, react_1.useContext)(ctx);
+    return useModelInstanceEvent(viewModel, ns, cb);
+}
+exports.useModelCtxEvent = useModelCtxEvent;

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "react-better-model",
+  "version": "0.1.0",
+  "description": "",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:ingvardm/react-model-hooks.git"
+  },
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "npx tsc",
+    "prepare": "yarn build"
+  },
+  "author": "igor poughtach <ingvardm@gmail.com>",
+  "license": "GPL-3.0",
+  "peerDependencies": {
+    "react": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.34",
+    "typescript": "^4.4.4"
+  },
+  "dependencies": {},
+  "private": false
+}