react-better-model 0.1.2 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/lib/Model.d.ts +23 -0
  2. package/lib/Model.d.ts.map +1 -0
  3. package/lib/Model.js +108 -0
  4. package/lib/Model.js.map +1 -0
  5. package/lib/decorators/WithModelHooks.d.ts +3 -0
  6. package/lib/decorators/WithModelHooks.d.ts.map +1 -0
  7. package/lib/decorators/WithModelHooks.js +18 -0
  8. package/lib/decorators/WithModelHooks.js.map +1 -0
  9. package/lib/hooks/event-hooks.d.ts +6 -0
  10. package/lib/hooks/event-hooks.d.ts.map +1 -0
  11. package/lib/hooks/event-hooks.js +19 -0
  12. package/lib/hooks/event-hooks.js.map +1 -0
  13. package/lib/hooks/model-hooks.d.ts +4 -0
  14. package/lib/hooks/model-hooks.d.ts.map +1 -0
  15. package/lib/hooks/model-hooks.js +9 -0
  16. package/lib/hooks/model-hooks.js.map +1 -0
  17. package/lib/hooks/state-hooks.d.ts +5 -0
  18. package/lib/hooks/state-hooks.d.ts.map +1 -0
  19. package/lib/hooks/state-hooks.js +19 -0
  20. package/lib/hooks/state-hooks.js.map +1 -0
  21. package/lib/index.d.ts +9 -24
  22. package/lib/index.d.ts.map +1 -0
  23. package/lib/index.js +18 -113
  24. package/lib/index.js.map +1 -0
  25. package/lib/types.d.ts +13 -0
  26. package/lib/types.d.ts.map +1 -0
  27. package/lib/types.js +3 -0
  28. package/lib/types.js.map +1 -0
  29. package/lib/utils/compose-providers.d.ts +3 -0
  30. package/lib/utils/compose-providers.d.ts.map +1 -0
  31. package/lib/utils/compose-providers.js +19 -0
  32. package/lib/utils/compose-providers.js.map +1 -0
  33. package/lib/utils/create-model.d.ts +21 -0
  34. package/lib/utils/create-model.d.ts.map +1 -0
  35. package/lib/utils/create-model.js +84 -0
  36. package/lib/utils/create-model.js.map +1 -0
  37. package/lib/utils/js-event-types.d.ts +6 -0
  38. package/lib/utils/js-event-types.d.ts.map +1 -0
  39. package/lib/utils/js-event-types.js +9 -0
  40. package/lib/utils/js-event-types.js.map +1 -0
  41. package/package.json +9 -2
  42. package/readme.md +87 -63
package/lib/Model.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { Sub, Subs } from './types';
2
+ export declare class Model<S = {}, E = {}> {
3
+ state: S;
4
+ events: E;
5
+ protected initialState: S;
6
+ protected subs: Subs<S>;
7
+ protected listeners: Subs<E>;
8
+ protected updateSingleSubscriber: <K extends keyof S>(k: K, v: S[K]) => void;
9
+ protected updateSubscribers: (delta: Partial<S>) => void;
10
+ protected updateEventListeners: <K extends keyof E>(k: K, data?: (E[K] extends undefined ? never : E[K]) | undefined) => void;
11
+ constructor(state: S, events?: E);
12
+ onStateChange: <K extends keyof S>(k: K, cb: Sub<S>) => () => void;
13
+ setState: (delta: Partial<S>) => void;
14
+ setValue: <K extends keyof S>(key: K, value: S[K]) => void;
15
+ reduce: (reducer: (state: S) => Partial<S>) => void;
16
+ reset: () => void;
17
+ onEvent: <K extends keyof E>(k: K, cb: Sub<E>) => () => void;
18
+ dispatch: <K extends keyof E>(key: K, data?: (E[K] extends undefined ? never : E[K]) | undefined) => void;
19
+ awaitEvent: <K extends keyof E>(key: K) => Promise<E[K]>;
20
+ useState: <K extends keyof S>(key: K) => [this["state"][K], (data: this["state"][K]) => void];
21
+ useEvent: <K extends keyof E>(ns: K, cb?: Sub<E, K> | undefined) => (data?: (E[K] extends undefined ? never : E[K]) | undefined) => void;
22
+ }
23
+ //# sourceMappingURL=Model.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Model.d.ts","sourceRoot":"","sources":["../src/Model.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,qBAAa,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE;IA0BxB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IA1BjB,SAAS,CAAC,YAAY,IAAA;IACtB,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAY;IACnC,SAAS,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAY;IAGxC,SAAS,CAAC,sBAAsB,6CAE/B;IAED,SAAS,CAAC,iBAAiB,UAAW,QAAQ,CAAC,CAAC,UAQ/C;IAED,SAAS,CAAC,oBAAoB,gGAE7B;gBAIO,KAAK,EAAE,CAAC,EACR,MAAM,GAAE,CAAW;IAM3B,aAAa,gCAAiC,IAAI,CAAC,CAAC,gBAanD;IAED,QAAQ,UAAW,QAAQ,CAAC,CAAC,UAO5B;IAED,QAAQ,mDAIP;IAED,MAAM,oBAAqB,CAAC,KAAK,QAAQ,CAAC,CAAC,UAI1C;IAED,KAAK,aAEJ;IAID,OAAO,gCAAiC,IAAI,CAAC,CAAC,gBAa7C;IAED,QAAQ,kGAEP;IAED,UAAU,+CAOT;IAID,QAAQ,sFAEP;IAED,QAAQ,iIAEP;CAED"}
package/lib/Model.js ADDED
@@ -0,0 +1,108 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ Object.defineProperty(exports, "__esModule", { value: true });
14
+ exports.Model = void 0;
15
+ var event_hooks_1 = require("./hooks/event-hooks");
16
+ var state_hooks_1 = require("./hooks/state-hooks");
17
+ var Model = /** @class */ (function () {
18
+ //#endregion updaters
19
+ function Model(state, events) {
20
+ var _this = this;
21
+ if (events === void 0) { events = {}; }
22
+ this.state = state;
23
+ this.events = events;
24
+ this.subs = new Map();
25
+ this.listeners = new Map();
26
+ //#region updaters
27
+ this.updateSingleSubscriber = function (k, v) {
28
+ var _a;
29
+ (_a = _this.subs.get(k)) === null || _a === void 0 ? void 0 : _a.forEach(function (cb) { return cb(v); });
30
+ };
31
+ this.updateSubscribers = function (delta) {
32
+ var keyVals = Object.entries(delta);
33
+ for (var _i = 0, _a = keyVals; _i < _a.length; _i++) {
34
+ var _b = _a[_i], key = _b[0], val = _b[1];
35
+ if (_this.subs.has(key)) {
36
+ _this.updateSingleSubscriber(key, val);
37
+ }
38
+ }
39
+ };
40
+ this.updateEventListeners = function (k, data) {
41
+ var _a;
42
+ (_a = _this.listeners.get(k)) === null || _a === void 0 ? void 0 : _a.forEach(function (cb) { return cb(data); });
43
+ };
44
+ //#region state
45
+ this.onStateChange = function (k, cb) {
46
+ var keySubs = _this.subs.get(k);
47
+ if (!keySubs) {
48
+ keySubs = new Set();
49
+ _this.subs.set(k, keySubs);
50
+ }
51
+ keySubs.add(cb);
52
+ return function () {
53
+ keySubs.delete(cb);
54
+ };
55
+ };
56
+ this.setState = function (delta) {
57
+ _this.state = __assign(__assign({}, _this.state), delta);
58
+ _this.updateSubscribers(delta);
59
+ };
60
+ this.setValue = function (key, value) {
61
+ _this.state[key] = value;
62
+ _this.updateSingleSubscriber(key, value);
63
+ };
64
+ this.reduce = function (reducer) {
65
+ var nextState = reducer(_this.state);
66
+ _this.setState(nextState);
67
+ };
68
+ this.reset = function () {
69
+ _this.setState(_this.initialState);
70
+ };
71
+ //#endregion state
72
+ //#region events
73
+ this.onEvent = function (k, cb) {
74
+ var nsListeners = _this.listeners.get(k);
75
+ if (!nsListeners) {
76
+ nsListeners = new Set();
77
+ _this.listeners.set(k, nsListeners);
78
+ }
79
+ nsListeners.add(cb);
80
+ return function () {
81
+ nsListeners.delete(cb);
82
+ };
83
+ };
84
+ this.dispatch = function (key, data) {
85
+ _this.updateEventListeners(key, data);
86
+ };
87
+ this.awaitEvent = function (key) {
88
+ return new Promise(function (resolve) {
89
+ var remove = _this.onEvent(key, function (data) {
90
+ remove();
91
+ resolve(data);
92
+ });
93
+ });
94
+ };
95
+ //#endregion events
96
+ //#region instance hooks
97
+ this.useState = function (key) {
98
+ return (0, state_hooks_1.useModelInstanceState)(_this, key);
99
+ };
100
+ this.useEvent = function (ns, cb) {
101
+ return (0, event_hooks_1.useModelInstanceEvent)(_this, ns, cb);
102
+ };
103
+ this.initialState = __assign({}, state);
104
+ }
105
+ return Model;
106
+ }());
107
+ exports.Model = Model;
108
+ //# sourceMappingURL=Model.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Model.js","sourceRoot":"","sources":["../src/Model.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,3 @@
1
+ import { Model } from "../Model";
2
+ export declare function WithModelHooks(): <M extends Model<M["state"], M["events"]>>(ctor: new () => M) => new () => M;
3
+ //# sourceMappingURL=WithModelHooks.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"WithModelHooks.d.ts","sourceRoot":"","sources":["../../src/decorators/WithModelHooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGhC,wBAAgB,cAAc,iFAY7B"}
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.WithModelHooks = void 0;
4
+ var create_model_1 = require("../utils/create-model");
5
+ function WithModelHooks() {
6
+ return function (ctor) {
7
+ var stuff = (0, create_model_1.createModel)(ctor);
8
+ for (var _i = 0, _a = Object.entries(stuff); _i < _a.length; _i++) {
9
+ var _b = _a[_i], property = _b[0], descriptor = _b[1];
10
+ if (descriptor) {
11
+ Object.defineProperty(ctor, property, descriptor);
12
+ }
13
+ }
14
+ return ctor;
15
+ };
16
+ }
17
+ exports.WithModelHooks = WithModelHooks;
18
+ //# sourceMappingURL=WithModelHooks.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"WithModelHooks.js","sourceRoot":"","sources":["../../src/decorators/WithModelHooks.ts"],"names":[],"mappings":";;;AACA,sDAAmD;AAEnD,SAAgB,cAAc;IAC7B,OAAO,UAA2C,IAAiB;QAClE,IAAM,KAAK,GAAG,IAAA,0BAAW,EAAC,IAAI,CAAC,CAAA;QAE/B,KAAqC,UAAqB,EAArB,KAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAArB,cAAqB,EAArB,IAAqB,EAAC;YAAhD,IAAA,WAAsB,EAArB,QAAQ,QAAA,EAAE,UAAU,QAAA;YAC/B,IAAG,UAAU,EAAC;gBACb,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAA;aACjD;SACD;QAED,OAAO,IAAI,CAAA;IACZ,CAAC,CAAA;AACF,CAAC;AAZD,wCAYC"}
@@ -0,0 +1,6 @@
1
+ import { Context } from 'react';
2
+ import { Model } from '../Model';
3
+ import { Sub } from '../types';
4
+ export declare function useModelInstanceEvent<K extends keyof M['events'], D extends M['events'], M extends Model<M['state'], M['events']>>(viewModel: M, ns: K, cb?: Sub<D, K>): (data?: (D[K] extends undefined ? never : D[K]) | undefined) => void;
5
+ export declare function useModelCtxEvent<K extends keyof M['events'], D extends M['events'], M extends Model<M['state'], M['events']>>(ctx: Context<M>, ns: K, cb?: (eventData: D[K]) => void): (data?: (D[K] extends undefined ? never : D[K]) | undefined) => void;
6
+ //# sourceMappingURL=event-hooks.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"event-hooks.d.ts","sourceRoot":"","sources":["../../src/hooks/event-hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAyB,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAE9B,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EACjI,SAAS,EAAE,CAAC,EACZ,EAAE,EAAE,CAAC,EACL,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,wEASd;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAC5H,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,EACf,EAAE,EAAE,CAAC,EACL,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,wEAK9B"}
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useModelCtxEvent = exports.useModelInstanceEvent = void 0;
4
+ var react_1 = require("react");
5
+ function useModelInstanceEvent(viewModel, ns, cb) {
6
+ (0, react_1.useEffect)(function () {
7
+ if (cb) {
8
+ return viewModel.onEvent(ns, cb);
9
+ }
10
+ }, [cb]);
11
+ return function (data) { return viewModel.dispatch(ns, data); };
12
+ }
13
+ exports.useModelInstanceEvent = useModelInstanceEvent;
14
+ function useModelCtxEvent(ctx, ns, cb) {
15
+ var viewModel = (0, react_1.useContext)(ctx);
16
+ return useModelInstanceEvent(viewModel, ns, cb);
17
+ }
18
+ exports.useModelCtxEvent = useModelCtxEvent;
19
+ //# sourceMappingURL=event-hooks.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"event-hooks.js","sourceRoot":"","sources":["../../src/hooks/event-hooks.ts"],"names":[],"mappings":";;;AAAA,+BAAsD;AAKtD,SAAgB,qBAAqB,CACpC,SAAY,EACZ,EAAK,EACL,EAAc;IAEd,IAAA,iBAAS,EAAC;QACT,IAAI,EAAE,EAAE;YACP,OAAO,SAAS,CAAC,OAAO,CAAC,EAAE,EAAE,EAAsB,CAAC,CAAA;SACpD;IACF,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAER,OAAO,UAAC,IAA4C,IAAK,OAAA,SAAS,CAAC,QAAQ,CAAC,EAAE,EAAE,IAAK,CAAC,EAA7B,CAA6B,CAAA;AACvF,CAAC;AAZD,sDAYC;AAED,SAAgB,gBAAgB,CAC/B,GAAe,EACf,EAAK,EACL,EAA8B;IAE9B,IAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,GAAG,CAAC,CAAA;IAEjC,OAAO,qBAAqB,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;AAChD,CAAC;AARD,4CAQC"}
@@ -0,0 +1,4 @@
1
+ import { Context } from 'react';
2
+ import { Model } from '../Model';
3
+ export declare function useModelCtx<M extends Model<M['state'], M['events']>>(ctx: Context<M>): M;
4
+ //# sourceMappingURL=model-hooks.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"model-hooks.d.ts","sourceRoot":"","sources":["../../src/hooks/model-hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAc,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,wBAAgB,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EACnE,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,KAGf"}
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useModelCtx = void 0;
4
+ var react_1 = require("react");
5
+ function useModelCtx(ctx) {
6
+ return (0, react_1.useContext)(ctx);
7
+ }
8
+ exports.useModelCtx = useModelCtx;
9
+ //# sourceMappingURL=model-hooks.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"model-hooks.js","sourceRoot":"","sources":["../../src/hooks/model-hooks.ts"],"names":[],"mappings":";;;AAAA,+BAA2C;AAI3C,SAAgB,WAAW,CAC1B,GAAe;IAEf,OAAO,IAAA,kBAAU,EAAC,GAAG,CAAC,CAAA;AACvB,CAAC;AAJD,kCAIC"}
@@ -0,0 +1,5 @@
1
+ import { Context } from 'react';
2
+ import { Model } from '../Model';
3
+ export declare function useModelInstanceState<K extends keyof M['state'], M extends Model<M['state'], M['events']>>(viewModel: M, key: K): [M['state'][K], (data: M['state'][K]) => void];
4
+ export declare function useModelCtxState<K extends keyof M['state'], M extends Model<M['state'], M['events']>>(ctx: Context<M>, key: K): [M["state"][K], (data: M["state"][K]) => void];
5
+ //# sourceMappingURL=state-hooks.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"state-hooks.d.ts","sourceRoot":"","sources":["../../src/hooks/state-hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,OAAO,EAKP,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGhC,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EACzG,SAAS,EAAE,CAAC,EACZ,GAAG,EAAE,CAAC,GACJ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAUhD;AAED,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EACpG,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,EACf,GAAG,EAAE,CAAC,kDAKN"}
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useModelCtxState = exports.useModelInstanceState = void 0;
4
+ var react_1 = require("react");
5
+ function useModelInstanceState(viewModel, key) {
6
+ var _a = (0, react_1.useState)(viewModel.state[key]), value = _a[0], setValue = _a[1];
7
+ (0, react_1.useEffect)(function () { return viewModel.onStateChange(key, setValue); }, []);
8
+ var setter = (0, react_1.useCallback)(function (v) {
9
+ viewModel.setValue(key, v);
10
+ }, [key]);
11
+ return [value, setter];
12
+ }
13
+ exports.useModelInstanceState = useModelInstanceState;
14
+ function useModelCtxState(ctx, key) {
15
+ var viewModel = (0, react_1.useContext)(ctx);
16
+ return useModelInstanceState(viewModel, key);
17
+ }
18
+ exports.useModelCtxState = useModelCtxState;
19
+ //# sourceMappingURL=state-hooks.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"state-hooks.js","sourceRoot":"","sources":["../../src/hooks/state-hooks.ts"],"names":[],"mappings":";;;AAAA,+BAMc;AAKd,SAAgB,qBAAqB,CACpC,SAAY,EACZ,GAAM;IAEA,IAAA,KAAoB,IAAA,gBAAQ,EAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAjD,KAAK,QAAA,EAAE,QAAQ,QAAkC,CAAA;IAExD,IAAA,iBAAS,EAAC,cAAM,OAAA,SAAS,CAAC,aAAa,CAAC,GAAG,EAAE,QAA2B,CAAC,EAAzD,CAAyD,EAAE,EAAE,CAAC,CAAA;IAE9E,IAAM,MAAM,GAAG,IAAA,mBAAW,EAAC,UAAC,CAAC;QAC5B,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;AACvB,CAAC;AAbD,sDAaC;AAED,SAAgB,gBAAgB,CAC/B,GAAe,EACf,GAAM;IAEN,IAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,GAAG,CAAC,CAAA;IAEjC,OAAO,qBAAqB,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA;AAC7C,CAAC;AAPD,4CAOC"}
package/lib/index.d.ts CHANGED
@@ -1,24 +1,9 @@
1
- import { Context } from 'react';
2
- declare type Sub<S, K extends keyof S = keyof S> = (v: S[K]) => void;
3
- export declare class Model<S, E = {}> {
4
- state: S;
5
- events: E;
6
- private subs;
7
- private listeners;
8
- private updateSingleSubscriber;
9
- private updateSubscribers;
10
- private updateEventListeners;
11
- private initialState;
12
- constructor(state?: S, events?: E);
13
- onStateChange: <K extends keyof S>(k: K, cb: Sub<S>) => () => void;
14
- setState: (delta: Partial<S>) => void;
15
- setValue: <K extends keyof S>(key: K, value: S[K]) => void;
16
- onEvent: <K extends keyof E>(k: K, cb: Sub<E>) => () => void;
17
- dispatch: <K extends keyof E>(key: K, data?: (E[K] extends undefined ? never : E[K]) | undefined) => void;
18
- reset: () => void;
19
- }
20
- export declare function useModelInstanceState<K extends keyof M['state'], M extends Model<M['state'], M['events']>>(viewModel: M, key: K): [M['state'][K], (data: M['state'][K]) => void];
21
- export declare function useModelCtxState<K extends keyof M['state'], M extends Model<M['state'], M['events']>>(ctx: Context<M>, key: K): [M["state"][K], (data: M["state"][K]) => void];
22
- export declare function useModelInstanceEvent<K extends keyof M['events'], D extends M['events'], M extends Model<M['state'], M['events']>>(viewModel: M, ns: K, cb?: Sub<D, K>): (data?: (D[K] extends undefined ? never : D[K]) | undefined) => void;
23
- export declare function useModelCtxEvent<K extends keyof M['events'], D extends M['events'], M extends Model<M['state'], M['events']>>(ctx: Context<M>, ns: K, cb?: (eventData: D[K]) => void): (data?: (D[K] extends undefined ? never : D[K]) | undefined) => void;
24
- export {};
1
+ export * from './types';
2
+ export * from './hooks/event-hooks';
3
+ export * from './hooks/state-hooks';
4
+ export * from './hooks/model-hooks';
5
+ export * from './Model';
6
+ export * from './utils/compose-providers';
7
+ export * from './utils/js-event-types';
8
+ export * from './utils/create-model';
9
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,SAAS,CAAA;AACvB,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA"}
package/lib/index.js CHANGED
@@ -1,116 +1,21 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
10
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
12
11
  };
13
12
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.useModelCtxEvent = exports.useModelInstanceEvent = exports.useModelCtxState = exports.useModelInstanceState = exports.Model = void 0;
15
- var react_1 = require("react");
16
- var Model = /** @class */ (function () {
17
- function Model(state, events) {
18
- var _this = this;
19
- if (state === void 0) { state = {}; }
20
- if (events === void 0) { events = {}; }
21
- this.state = state;
22
- this.events = events;
23
- this.subs = new Map();
24
- this.listeners = new Map();
25
- this.updateSingleSubscriber = function (k, v) {
26
- var _a;
27
- (_a = _this.subs.get(k)) === null || _a === void 0 ? void 0 : _a.forEach(function (cb) { return cb(v); });
28
- };
29
- this.updateSubscribers = function (delta) {
30
- var keyVals = Object.entries(delta);
31
- var _loop_1 = function (key, val) {
32
- if (_this.subs.has(key)) {
33
- _this.subs.get(key).forEach(function (cb) {
34
- cb(val);
35
- });
36
- }
37
- };
38
- for (var _i = 0, _a = keyVals; _i < _a.length; _i++) {
39
- var _b = _a[_i], key = _b[0], val = _b[1];
40
- _loop_1(key, val);
41
- }
42
- };
43
- this.updateEventListeners = function (k, data) {
44
- var _a;
45
- (_a = _this.listeners.get(k)) === null || _a === void 0 ? void 0 : _a.forEach(function (cb) { return cb(data); });
46
- };
47
- this.initialState = {};
48
- this.onStateChange = function (k, cb) {
49
- var keySubs = _this.subs.get(k);
50
- if (!keySubs) {
51
- keySubs = new Set();
52
- _this.subs.set(k, keySubs);
53
- }
54
- keySubs.add(cb);
55
- return function () {
56
- keySubs.delete(cb);
57
- };
58
- };
59
- this.setState = function (delta) {
60
- _this.state = __assign(__assign({}, _this.state), delta);
61
- _this.updateSubscribers(delta);
62
- };
63
- this.setValue = function (key, value) {
64
- _this.state[key] = value;
65
- _this.updateSingleSubscriber(key, value);
66
- };
67
- this.onEvent = function (k, cb) {
68
- var nsListeners = _this.listeners.get(k);
69
- if (!nsListeners) {
70
- nsListeners = new Set();
71
- _this.listeners.set(k, nsListeners);
72
- }
73
- nsListeners.add(cb);
74
- return function () {
75
- nsListeners.delete(cb);
76
- };
77
- };
78
- this.dispatch = function (key, data) {
79
- _this.updateEventListeners(key, data);
80
- };
81
- this.reset = function () {
82
- _this.setState(_this.initialState);
83
- };
84
- this.initialState = state;
85
- }
86
- return Model;
87
- }());
88
- exports.Model = Model;
89
- function useModelInstanceState(viewModel, key) {
90
- var _a = (0, react_1.useState)(viewModel.state[key]), value = _a[0], setValue = _a[1];
91
- (0, react_1.useEffect)(function () { return viewModel.onStateChange(key, setValue); }, []);
92
- var setter = (0, react_1.useCallback)(function (v) {
93
- viewModel.setValue(key, v);
94
- }, [key]);
95
- return [value, setter];
96
- }
97
- exports.useModelInstanceState = useModelInstanceState;
98
- function useModelCtxState(ctx, key) {
99
- var viewModel = (0, react_1.useContext)(ctx);
100
- return useModelInstanceState(viewModel, key);
101
- }
102
- exports.useModelCtxState = useModelCtxState;
103
- function useModelInstanceEvent(viewModel, ns, cb) {
104
- (0, react_1.useEffect)(function () {
105
- if (cb) {
106
- return viewModel.onEvent(ns, cb);
107
- }
108
- }, [cb]);
109
- return function (data) { return viewModel.dispatch(ns, data); };
110
- }
111
- exports.useModelInstanceEvent = useModelInstanceEvent;
112
- function useModelCtxEvent(ctx, ns, cb) {
113
- var viewModel = (0, react_1.useContext)(ctx);
114
- return useModelInstanceEvent(viewModel, ns, cb);
115
- }
116
- exports.useModelCtxEvent = useModelCtxEvent;
13
+ __exportStar(require("./types"), exports);
14
+ __exportStar(require("./hooks/event-hooks"), exports);
15
+ __exportStar(require("./hooks/state-hooks"), exports);
16
+ __exportStar(require("./hooks/model-hooks"), exports);
17
+ __exportStar(require("./Model"), exports);
18
+ __exportStar(require("./utils/compose-providers"), exports);
19
+ __exportStar(require("./utils/js-event-types"), exports);
20
+ __exportStar(require("./utils/create-model"), exports);
21
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,0CAAuB;AACvB,sDAAmC;AACnC,sDAAmC;AACnC,sDAAmC;AACnC,0CAAuB;AACvB,4DAAyC;AACzC,yDAAsC;AACtC,uDAAoC"}
package/lib/types.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { ProviderProps } from 'react';
2
+ import { Model } from './Model';
3
+ export declare type Sub<S, K extends keyof S = keyof S> = (v: S[K]) => void;
4
+ export declare type Subs<S> = Map<keyof S, Set<Sub<S>>>;
5
+ export declare type CreateModelOptions = {
6
+ globalInstance?: Model;
7
+ createGlobalInstance?: boolean;
8
+ };
9
+ export declare type ModelProviderProps<M extends Model> = Omit<ProviderProps<M>, 'value'> & {
10
+ value?: M;
11
+ initialState?: M['state'];
12
+ };
13
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,oBAAY,GAAG,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;AAEnE,oBAAY,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAE/C,oBAAY,kBAAkB,GAAG;IAChC,cAAc,CAAC,EAAE,KAAK,CAAA;IACtB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAA;AAED,oBAAY,kBAAkB,CAAC,CAAC,SAAS,KAAK,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAAG;IACnF,KAAK,CAAC,EAAE,CAAC,CAAA;IACT,YAAY,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAA;CACzB,CAAA"}
package/lib/types.js ADDED
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,3 @@
1
+ import { FC } from 'react';
2
+ export declare function composeProviders(providers: FC[]): FC;
3
+ //# sourceMappingURL=compose-providers.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"compose-providers.d.ts","sourceRoot":"","sources":["../../src/utils/compose-providers.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE,CAWpD"}
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.composeProviders = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ function composeProviders(providers) {
9
+ return providers.reduce(function (Parent, Child) { return function (_a) {
10
+ var children = _a.children;
11
+ return react_1.default.createElement(Parent, null,
12
+ react_1.default.createElement(Child, null, children));
13
+ }; }, function (_a) {
14
+ var children = _a.children;
15
+ return react_1.default.createElement(react_1.default.Fragment, null, children);
16
+ });
17
+ }
18
+ exports.composeProviders = composeProviders;
19
+ //# sourceMappingURL=compose-providers.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"compose-providers.js","sourceRoot":"","sources":["../../src/utils/compose-providers.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAiC;AAEjC,SAAgB,gBAAgB,CAAC,SAAe;IAC/C,OAAO,SAAS,CAAC,MAAM,CACtB,UAAC,MAAU,EAAE,KAAS,IAAK,OAAA,UAAC,EAAY;YAAV,QAAQ,cAAA;QACrC,OAAO,8BAAC,MAAM;YACb,8BAAC,KAAK,QACH,QAAQ,CACH,CACA,CAAA;IACV,CAAC,EAN0B,CAM1B,EACD,UAAC,EAAY;YAAV,QAAQ,cAAA;QAAO,OAAA,8DAAI,QAAQ,CAAK;IAAjB,CAAiB,CACnC,CAAA;AACF,CAAC;AAXD,4CAWC"}
@@ -0,0 +1,21 @@
1
+ import React, { FC } from 'react';
2
+ import { Model } from '../Model';
3
+ import { ModelProviderProps } from '../types';
4
+ declare type Ctor<M extends Model<M['state'], M['events']>> = new (initialState: M['state'], events?: M['events']) => M;
5
+ export declare function createModel<K extends keyof M['state'], E extends keyof M['events'], M extends Model<M['state'], M['events']>>(CName: Ctor<M>): {
6
+ Ctx: React.Context<M>;
7
+ Provider: ({ value, initialState, ...props }: ModelProviderProps<M>) => JSX.Element;
8
+ withProvider<T extends {}>(fc: React.FC<T & {
9
+ model: M;
10
+ }>): (props: T & {
11
+ initialState?: Partial<M["state"]> | undefined;
12
+ }) => JSX.Element;
13
+ withModel<T_1 extends {}>(fc: React.FC<T_1 & {
14
+ model: M;
15
+ }>): (props: T_1) => React.ReactElement<any, any> | null;
16
+ useModel(): M;
17
+ useState(key: K): [M["state"][K], (data: M["state"][K]) => void];
18
+ useEvent(key: E): (data?: (M["events"][E] extends undefined ? never : M["events"][E]) | undefined) => void;
19
+ };
20
+ export {};
21
+ //# sourceMappingURL=create-model.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"create-model.d.ts","sourceRoot":"","sources":["../../src/utils/create-model.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,EAAE,EAAW,MAAM,OAAO,CAAA;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAIhC,OAAO,EAAsB,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAIjE,aAAK,IAAI,CAAC,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAE/G,wBAAgB,WAAW,CAC1B,CAAC,SAAS,MAAM,CAAC,CAAC,OAAO,CAAC,EAC1B,CAAC,SAAS,MAAM,CAAC,CAAC,QAAQ,CAAC,EAC3B,CAAC,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EACvC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;;kDAGsC,mBAAmB,CAAC,CAAC;;eAS1B,CAAC;;;;;eASJ,CAAC;;;kBAU/B,CAAC;kBAGD,CAAC;EAIhB"}
@@ -0,0 +1,84 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
16
+ }) : (function(o, m, k, k2) {
17
+ if (k2 === undefined) k2 = k;
18
+ o[k2] = m[k];
19
+ }));
20
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
21
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
22
+ }) : function(o, v) {
23
+ o["default"] = v;
24
+ });
25
+ var __importStar = (this && this.__importStar) || function (mod) {
26
+ if (mod && mod.__esModule) return mod;
27
+ var result = {};
28
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
29
+ __setModuleDefault(result, mod);
30
+ return result;
31
+ };
32
+ var __rest = (this && this.__rest) || function (s, e) {
33
+ var t = {};
34
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
35
+ t[p] = s[p];
36
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
37
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
38
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
39
+ t[p[i]] = s[p[i]];
40
+ }
41
+ return t;
42
+ };
43
+ Object.defineProperty(exports, "__esModule", { value: true });
44
+ exports.createModel = void 0;
45
+ var react_1 = __importStar(require("react"));
46
+ var event_hooks_1 = require("../hooks/event-hooks");
47
+ var model_hooks_1 = require("../hooks/model-hooks");
48
+ var state_hooks_1 = require("../hooks/state-hooks");
49
+ var DEFAULT_OPTIONS = {};
50
+ function createModel(CName) {
51
+ var Ctx = (0, react_1.createContext)({});
52
+ function Provider(_a) {
53
+ var value = _a.value, initialState = _a.initialState, props = __rest(_a, ["value", "initialState"]);
54
+ var viewModel = (0, react_1.useMemo)(function () { return value || new CName(initialState); }, []);
55
+ return react_1.default.createElement(Ctx.Provider, __assign({}, props, { value: viewModel }));
56
+ }
57
+ return {
58
+ Ctx: Ctx,
59
+ Provider: Provider,
60
+ withProvider: function (fc) {
61
+ return function (props) {
62
+ var model = (0, react_1.useMemo)(function () { return new CName(props.initialState); }, []);
63
+ return react_1.default.createElement(Provider, { value: model }, fc(__assign(__assign({}, props), { model: model })));
64
+ };
65
+ },
66
+ withModel: function (fc) {
67
+ return function (props) {
68
+ var model = (0, model_hooks_1.useModelCtx)(Ctx);
69
+ return fc(__assign(__assign({}, props), { model: model }));
70
+ };
71
+ },
72
+ useModel: function () {
73
+ return (0, model_hooks_1.useModelCtx)(Ctx);
74
+ },
75
+ useState: function (key) {
76
+ return (0, state_hooks_1.useModelCtxState)(Ctx, key);
77
+ },
78
+ useEvent: function (key) {
79
+ return (0, event_hooks_1.useModelCtxEvent)(Ctx, key);
80
+ },
81
+ };
82
+ }
83
+ exports.createModel = createModel;
84
+ //# sourceMappingURL=create-model.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"create-model.js","sourceRoot":"","sources":["../../src/utils/create-model.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAyD;AAGzD,oDAA8E;AAC9E,oDAAkD;AAClD,oDAA8E;AAG9E,IAAM,eAAe,GAAuB,EAAE,CAAA;AAI9C,SAAgB,WAAW,CAIzB,KAAc;IACf,IAAM,GAAG,GAAG,IAAA,qBAAa,EAAI,EAAO,CAAC,CAAA;IAErC,SAAS,QAAQ,CAAC,EAAwD;QAAtD,IAAA,KAAK,WAAA,EAAE,YAAY,kBAAA,EAAK,KAAK,cAA/B,yBAAiC,CAAF;QAChD,IAAM,SAAS,GAAG,IAAA,eAAO,EAAC,cAAM,OAAA,KAAK,IAAI,IAAI,KAAK,CAAC,YAAY,CAAC,EAAhC,CAAgC,EAAE,EAAE,CAAC,CAAA;QAErE,OAAO,8BAAC,GAAG,CAAC,QAAQ,eAAK,KAAK,IAAE,KAAK,EAAE,SAAS,IAAI,CAAA;IACrD,CAAC;IAED,OAAO;QACN,GAAG,KAAA;QACH,QAAQ,UAAA;QACR,YAAY,EAAZ,UAA2B,EAAwB;YAClD,OAAO,UAAC,KAAiD;gBACxD,IAAM,KAAK,GAAG,IAAA,eAAO,EAAC,cAAM,OAAA,IAAI,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAA7B,CAA6B,EAAE,EAAE,CAAC,CAAA;gBAE9D,OAAO,8BAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAC3B,EAAE,uBAAK,KAAK,KAAE,KAAK,OAAA,IAAE,CACZ,CAAA;YACZ,CAAC,CAAA;QACF,CAAC;QACD,SAAS,EAAT,UAAwB,EAAwB;YAC/C,OAAO,UAAC,KAAQ;gBACf,IAAM,KAAK,GAAG,IAAA,yBAAW,EAAC,GAAG,CAAC,CAAA;gBAE9B,OAAO,EAAE,uBAAK,KAAK,KAAE,KAAK,OAAA,IAAG,CAAA;YAC9B,CAAC,CAAA;QACF,CAAC;QACD,QAAQ;YACP,OAAO,IAAA,yBAAW,EAAC,GAAG,CAAC,CAAA;QACxB,CAAC;QACD,QAAQ,EAAR,UAAS,GAAM;YACd,OAAO,IAAA,8BAAgB,EAAC,GAAG,EAAE,GAAG,CAAC,CAAA;QAClC,CAAC;QACD,QAAQ,EAAR,UAAS,GAAM;YACd,OAAO,IAAA,8BAAgB,EAAC,GAAG,EAAE,GAAG,CAAC,CAAA;QAClC,CAAC;KACD,CAAA;AACF,CAAC;AA1CD,kCA0CC"}
@@ -0,0 +1,6 @@
1
+ export declare const EventTypes: {
2
+ number: number;
3
+ string: string;
4
+ boolean: boolean;
5
+ };
6
+ //# sourceMappingURL=js-event-types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"js-event-types.d.ts","sourceRoot":"","sources":["../../src/utils/js-event-types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;CAItB,CAAA"}
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.EventTypes = void 0;
4
+ exports.EventTypes = {
5
+ number: 0,
6
+ string: '',
7
+ boolean: false,
8
+ };
9
+ //# sourceMappingURL=js-event-types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"js-event-types.js","sourceRoot":"","sources":["../../src/utils/js-event-types.ts"],"names":[],"mappings":";;;AAAa,QAAA,UAAU,GAAG;IACzB,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,KAAK;CACd,CAAA"}
package/package.json CHANGED
@@ -1,9 +1,16 @@
1
1
  {
2
2
  "name": "react-better-model",
3
- "version": "0.1.2",
3
+ "version": "0.2.0",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
7
+ "keywords": [
8
+ "React",
9
+ "Shared",
10
+ "Model",
11
+ "Store",
12
+ "Events"
13
+ ],
7
14
  "repository": {
8
15
  "type": "git",
9
16
  "url": "git@github.com:ingvardm/react-model-hooks.git"
@@ -18,7 +25,7 @@
18
25
  "author": "igor poughtach <ingvardm@gmail.com>",
19
26
  "license": "GPL-3.0",
20
27
  "peerDependencies": {
21
- "react": "^17.0.2"
28
+ "react": "*"
22
29
  },
23
30
  "devDependencies": {
24
31
  "@types/react": "^17.0.34",
package/readme.md CHANGED
@@ -14,88 +14,112 @@ yarn add react-better-model
14
14
 
15
15
  Usage
16
16
  ===
17
- ```typescript
18
- // CounterModel.ts
19
- export const initialState = {
20
- count: 0,
21
- }
17
+ Minimal working example
18
+ ```ts
19
+ import { useCallback } from "react"
20
+ import { createModel, Model } from "react-better-model"
22
21
 
23
- export const defaultEventData = {
24
- click: undefined,
22
+ // initial state
23
+ const helloWorldModelInitialState = {
24
+ count: 0,
25
25
  }
26
26
 
27
- // create context
28
- export const CounterModelCtx = createContext(new Model(initialState, defaultEventData))
27
+ // model state type (usefull later)
28
+ type HelloWorldModelState = typeof helloWorldModelInitialState
29
29
 
30
- ```
31
-
32
- ```typescript
33
- // CounterText.tsx
34
- const CounterText = () => {
35
- const [count, setCount] = useModelCtxState(CounterModelCtx, 'count')
30
+ // model event types (optional, if you want to use events)
31
+ type HelloWorldModelEvents = {
32
+ click: number
33
+ }
36
34
 
37
- return <p>{count}</p>
35
+ // create your model class
36
+ class HelloWorldModelClass extends Model<HelloWorldModelState, HelloWorldModelEvents> {
37
+ constructor(state = helloWorldModelInitialState){
38
+ super(state)
39
+ }
38
40
  }
39
- ```
40
41
 
41
- ```typescript
42
- // CounterIncrementButton.tsx
43
- const CounterIncrementButton = () => {
44
- const [count, setCount] = useModelCtxState(CounterModelCtx, 'count')
42
+ // create object that will contain hooks and refferences
43
+ // that you can use in your code
44
+ const HWM = createModel(HelloWorldModelClass)
45
+
46
+ // component with button that listens to and sets 'count' value
47
+ const ButtonAdd = HWM.withModel(({ model, ...props }) => {
48
+ const [count, setCount] = model.useState('count')
45
49
 
46
50
  const onClick = useCallback(() => {
47
51
  setCount(count + 1)
48
52
  }, [count])
49
53
 
50
- return <button onClick={onClick}>Press me!</button>
51
- }
52
- ```
54
+ // this is just an example of listening and setting value.
55
+ // a better way (without listening) would be:
56
+ // const onClick = useCallback(() => {
57
+ // model.reduce((state) => {
58
+ // return {
59
+ // count: state.count + 1
60
+ // }
61
+ // })
62
+ // }, [])
53
63
 
54
- ```typescript
55
- // CounterClearButton.tsx
56
- const CounterClearButton = () => {
57
- const dispatchClear = useModelCtxEvent(CounterModelCtx, 'clear')
64
+ return <button onClick={onClick}>increment count</button>
65
+ })
58
66
 
59
- const onClick = useCallback(() => {
60
- dispatchClear()
61
- }, [])
67
+ // Button that uses an event dispatcher
68
+ const ButtonClickEvent = HWM.withModel(({ model, ...props }) => {
69
+ const [count] = model.useState('count')
62
70
 
63
- return <button onClick={onClick}>Clear</button>
64
- }
65
- ```
71
+ const dispatchClearEvent = model.useEvent('click')
66
72
 
67
- ```typescript
68
- // Counter.tsx
69
- const Counter = () => {
70
- const model = useMemo(() => {
71
- return new Model(initialState, defaultEventData)
72
- }, [])
73
+ const clear = useCallback(() => {
74
+ dispatchClearEvent(count)
75
+ }, [count])
73
76
 
74
- const [count, setCount] = useModelInstanceState(model, 'count')
77
+ return <button onClick={clear}>click to dispatch 'click' event</button>
78
+ })
75
79
 
76
- const onClear = useCallback(() => {
77
- setCount(0)
78
- }, [])
80
+ // label with the current count value
81
+ const CountLabel = HWM.withModel(({ model, ...props }) => {
82
+ const [count] = model.useState('count')
79
83
 
80
- useModelInstanceEvent(model, 'clear', onClear)
84
+ return <p>current count is: {count}</p>
85
+ })
81
86
 
82
- return <div>
83
- <CounterModelCtx.Provider value={model}>
84
- <CounterText />
85
- <CounterIncrementButton />
86
- <CounterClearButton />
87
- </CounterModelCtx.Provider>
88
- </div>
89
- }
87
+ // convinience component to handle model events in one place
88
+ const EventHandler = HWM.withModel(({ model, ...props }) => {
89
+ const handleClickEvent = useCallback((x: HelloWorldModelEvents['click']) => {
90
+ alert(`clicked ${x} times`)
91
+ }, [])
92
+
93
+ model.useEvent('click', handleClickEvent)
94
+
95
+ return null
96
+ })
97
+
98
+ // the widget itself wrapped in HelloWorldModel Provider
99
+ // any consumers (HWM.withModel(...)) rendered here
100
+ // are inside the same context.
101
+ // they can still use other models via useState hook
102
+ // created with createModel()
103
+ export const HelloWorldWidget = HWM.withProvider(({
104
+ model,
105
+ ...props
106
+ }) => {
107
+ return <>
108
+ <EventHandler/> {/* Event handling component */}
109
+ <CountLabel /> {/* Label that displays updated count */}
110
+ <ButtonAdd/> {/* Button that increases the count */}
111
+ <ButtonClickEvent/> {/* Button that dispatches 'click' event */}
112
+ </>
113
+ })
90
114
  ```
91
115
 
92
- ```typescript
93
- // app.js
94
- const App = () => {
95
- return <div>
96
- <Counter />
97
- <Counter />
98
- <Counter />
99
- </div>
100
- }
101
- ```
116
+ Documentation
117
+ ===
118
+ [Model creation](model_creation.md)<br>
119
+ [Global models](global_model.md)<br>
120
+ [State](state.md)<br>
121
+ [Events](events.md)<br>
122
+
123
+ Example
124
+ ===
125
+ [Example project](https://github.com/ingvardm/react-model-hooks-example)