reactish-state 0.8.1 → 0.9.1
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.
- package/dist/cjs/index.js +57 -40
- package/dist/es/index.js +1 -1
- package/dist/es/react/useSnapshot.js +4 -2
- package/dist/es/vanilla/selector.js +40 -31
- package/dist/es/vanilla/state.js +13 -8
- package/dist/middleware/cjs/index.js +61 -27
- package/dist/middleware/es/_virtual/_rollupPluginBabelHelpers.js +16 -0
- package/dist/middleware/es/applyMiddleware.js +11 -8
- package/dist/middleware/es/immer.js +2 -1
- package/dist/middleware/es/persist.js +7 -5
- package/dist/middleware/es/reduxDevtools.js +28 -13
- package/dist/plugin/cjs/index.js +37 -0
- package/dist/plugin/es/applyPlugin.js +9 -0
- package/dist/plugin/es/index.js +2 -0
- package/dist/plugin/es/reduxDevtools.js +26 -0
- package/package.json +8 -4
- package/types/common.d.ts +8 -2
- package/types/index.d.ts +1 -1
- package/types/middleware/applyMiddleware.d.ts +3 -1
- package/types/middleware/reduxDevtools.d.ts +4 -1
- package/types/plugin/applyPlugin.d.ts +3 -0
- package/types/plugin/index.d.ts +2 -0
- package/types/plugin/reduxDevtools.d.ts +6 -0
- package/types/react/useSnapshot.d.ts +1 -1
- package/types/vanilla/selector.d.ts +10 -6
- package/types/vanilla/state.d.ts +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -16,20 +16,25 @@ var createState = function createState(_temp) {
|
|
|
16
16
|
if (!Object.is(value, nextValue)) {
|
|
17
17
|
value = nextValue;
|
|
18
18
|
listeners.forEach(function (listener) {
|
|
19
|
-
listener();
|
|
19
|
+
return listener();
|
|
20
20
|
});
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
|
-
|
|
23
|
+
var subscribe = function subscribe(listener) {
|
|
24
|
+
listeners.add(listener);
|
|
25
|
+
return function () {
|
|
26
|
+
return listeners["delete"](listener);
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
if (middleware) set = middleware({
|
|
30
|
+
set: set,
|
|
31
|
+
get: get,
|
|
32
|
+
subscribe: subscribe
|
|
33
|
+
}, config);
|
|
24
34
|
return {
|
|
25
35
|
get: get,
|
|
26
36
|
set: set,
|
|
27
|
-
subscribe:
|
|
28
|
-
listeners.add(listener);
|
|
29
|
-
return function () {
|
|
30
|
-
listeners["delete"](listener);
|
|
31
|
-
};
|
|
32
|
-
},
|
|
37
|
+
subscribe: subscribe,
|
|
33
38
|
actions: actionCreator && actionCreator(set, get)
|
|
34
39
|
};
|
|
35
40
|
};
|
|
@@ -42,44 +47,56 @@ var isEqual = function isEqual(args1, args2) {
|
|
|
42
47
|
}
|
|
43
48
|
return true;
|
|
44
49
|
};
|
|
45
|
-
var
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
items.length = lastIndex;
|
|
52
|
-
var cache;
|
|
53
|
-
return {
|
|
54
|
-
get: function get() {
|
|
55
|
-
var args = items.map(function (item) {
|
|
56
|
-
return item.get();
|
|
57
|
-
});
|
|
58
|
-
if (cache && isEqual(args, cache.args)) return cache.ret;
|
|
59
|
-
var ret = selectorFunc.apply(void 0, args);
|
|
60
|
-
cache = {
|
|
61
|
-
args: args,
|
|
62
|
-
ret: ret
|
|
63
|
-
};
|
|
64
|
-
return ret;
|
|
65
|
-
},
|
|
66
|
-
subscribe: function subscribe(listener) {
|
|
67
|
-
var unsubscribers = items.map(function (item) {
|
|
68
|
-
return item.subscribe(listener);
|
|
69
|
-
});
|
|
70
|
-
return function () {
|
|
71
|
-
return unsubscribers.forEach(function (unsubscribe) {
|
|
72
|
-
return unsubscribe();
|
|
73
|
-
});
|
|
74
|
-
};
|
|
50
|
+
var createSelector = function createSelector(_temp) {
|
|
51
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
52
|
+
plugin = _ref.plugin;
|
|
53
|
+
return function () {
|
|
54
|
+
for (var _len = arguments.length, items = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
55
|
+
items[_key] = arguments[_key];
|
|
75
56
|
}
|
|
57
|
+
var length = items.length;
|
|
58
|
+
var cutoff = typeof items[length - 1] === 'function' ? length - 1 : length - 2;
|
|
59
|
+
var selectorFunc = items[cutoff];
|
|
60
|
+
var config = items[cutoff + 1];
|
|
61
|
+
items.length = cutoff;
|
|
62
|
+
var cache;
|
|
63
|
+
var selector = {
|
|
64
|
+
get: function get() {
|
|
65
|
+
var args = items.map(function (item) {
|
|
66
|
+
return item.get();
|
|
67
|
+
});
|
|
68
|
+
if (cache && isEqual(args, cache.args)) return cache.ret;
|
|
69
|
+
var ret = selectorFunc.apply(void 0, args);
|
|
70
|
+
cache = {
|
|
71
|
+
args: args,
|
|
72
|
+
ret: ret
|
|
73
|
+
};
|
|
74
|
+
return ret;
|
|
75
|
+
},
|
|
76
|
+
subscribe: function subscribe(listener) {
|
|
77
|
+
var unsubscribers = items.map(function (item) {
|
|
78
|
+
return item.subscribe(listener);
|
|
79
|
+
});
|
|
80
|
+
return function () {
|
|
81
|
+
return unsubscribers.forEach(function (unsubscribe) {
|
|
82
|
+
return unsubscribe();
|
|
83
|
+
});
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
plugin == null ? void 0 : plugin(selector, config);
|
|
88
|
+
return selector;
|
|
76
89
|
};
|
|
77
90
|
};
|
|
91
|
+
var selector = /*#__PURE__*/createSelector();
|
|
78
92
|
|
|
79
|
-
var useSnapshot = function useSnapshot(
|
|
80
|
-
|
|
93
|
+
var useSnapshot = function useSnapshot(_ref) {
|
|
94
|
+
var subscribe = _ref.subscribe,
|
|
95
|
+
get = _ref.get;
|
|
96
|
+
return shim.useSyncExternalStore(subscribe, get, get);
|
|
81
97
|
};
|
|
82
98
|
|
|
99
|
+
exports.createSelector = createSelector;
|
|
83
100
|
exports.createState = createState;
|
|
84
101
|
exports.selector = selector;
|
|
85
102
|
exports.state = state;
|
package/dist/es/index.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { useSyncExternalStore } from 'use-sync-external-store/shim';
|
|
2
2
|
|
|
3
|
-
var useSnapshot = function useSnapshot(
|
|
4
|
-
|
|
3
|
+
var useSnapshot = function useSnapshot(_ref) {
|
|
4
|
+
var subscribe = _ref.subscribe,
|
|
5
|
+
get = _ref.get;
|
|
6
|
+
return useSyncExternalStore(subscribe, get, get);
|
|
5
7
|
};
|
|
6
8
|
|
|
7
9
|
export { useSnapshot };
|
|
@@ -4,38 +4,47 @@ var isEqual = function isEqual(args1, args2) {
|
|
|
4
4
|
}
|
|
5
5
|
return true;
|
|
6
6
|
};
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
items.length = lastIndex;
|
|
14
|
-
var cache;
|
|
15
|
-
return {
|
|
16
|
-
get: function get() {
|
|
17
|
-
var args = items.map(function (item) {
|
|
18
|
-
return item.get();
|
|
19
|
-
});
|
|
20
|
-
if (cache && isEqual(args, cache.args)) return cache.ret;
|
|
21
|
-
var ret = selectorFunc.apply(void 0, args);
|
|
22
|
-
cache = {
|
|
23
|
-
args: args,
|
|
24
|
-
ret: ret
|
|
25
|
-
};
|
|
26
|
-
return ret;
|
|
27
|
-
},
|
|
28
|
-
subscribe: function subscribe(listener) {
|
|
29
|
-
var unsubscribers = items.map(function (item) {
|
|
30
|
-
return item.subscribe(listener);
|
|
31
|
-
});
|
|
32
|
-
return function () {
|
|
33
|
-
return unsubscribers.forEach(function (unsubscribe) {
|
|
34
|
-
return unsubscribe();
|
|
35
|
-
});
|
|
36
|
-
};
|
|
7
|
+
var createSelector = function createSelector(_temp) {
|
|
8
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
9
|
+
plugin = _ref.plugin;
|
|
10
|
+
return function () {
|
|
11
|
+
for (var _len = arguments.length, items = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
12
|
+
items[_key] = arguments[_key];
|
|
37
13
|
}
|
|
14
|
+
var length = items.length;
|
|
15
|
+
var cutoff = typeof items[length - 1] === 'function' ? length - 1 : length - 2;
|
|
16
|
+
var selectorFunc = items[cutoff];
|
|
17
|
+
var config = items[cutoff + 1];
|
|
18
|
+
items.length = cutoff;
|
|
19
|
+
var cache;
|
|
20
|
+
var selector = {
|
|
21
|
+
get: function get() {
|
|
22
|
+
var args = items.map(function (item) {
|
|
23
|
+
return item.get();
|
|
24
|
+
});
|
|
25
|
+
if (cache && isEqual(args, cache.args)) return cache.ret;
|
|
26
|
+
var ret = selectorFunc.apply(void 0, args);
|
|
27
|
+
cache = {
|
|
28
|
+
args: args,
|
|
29
|
+
ret: ret
|
|
30
|
+
};
|
|
31
|
+
return ret;
|
|
32
|
+
},
|
|
33
|
+
subscribe: function subscribe(listener) {
|
|
34
|
+
var unsubscribers = items.map(function (item) {
|
|
35
|
+
return item.subscribe(listener);
|
|
36
|
+
});
|
|
37
|
+
return function () {
|
|
38
|
+
return unsubscribers.forEach(function (unsubscribe) {
|
|
39
|
+
return unsubscribe();
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
plugin == null ? void 0 : plugin(selector, config);
|
|
45
|
+
return selector;
|
|
38
46
|
};
|
|
39
47
|
};
|
|
48
|
+
var selector = /*#__PURE__*/createSelector();
|
|
40
49
|
|
|
41
|
-
export { selector };
|
|
50
|
+
export { createSelector, selector };
|
package/dist/es/vanilla/state.js
CHANGED
|
@@ -12,20 +12,25 @@ var createState = function createState(_temp) {
|
|
|
12
12
|
if (!Object.is(value, nextValue)) {
|
|
13
13
|
value = nextValue;
|
|
14
14
|
listeners.forEach(function (listener) {
|
|
15
|
-
listener();
|
|
15
|
+
return listener();
|
|
16
16
|
});
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
|
|
19
|
+
var subscribe = function subscribe(listener) {
|
|
20
|
+
listeners.add(listener);
|
|
21
|
+
return function () {
|
|
22
|
+
return listeners["delete"](listener);
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
if (middleware) set = middleware({
|
|
26
|
+
set: set,
|
|
27
|
+
get: get,
|
|
28
|
+
subscribe: subscribe
|
|
29
|
+
}, config);
|
|
20
30
|
return {
|
|
21
31
|
get: get,
|
|
22
32
|
set: set,
|
|
23
|
-
subscribe:
|
|
24
|
-
listeners.add(listener);
|
|
25
|
-
return function () {
|
|
26
|
-
listeners["delete"](listener);
|
|
27
|
-
};
|
|
28
|
-
},
|
|
33
|
+
subscribe: subscribe,
|
|
29
34
|
actions: actionCreator && actionCreator(set, get)
|
|
30
35
|
};
|
|
31
36
|
};
|
|
@@ -2,18 +2,35 @@
|
|
|
2
2
|
|
|
3
3
|
var immer$1 = require('immer');
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
function _extends() {
|
|
6
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
7
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
8
|
+
var source = arguments[i];
|
|
9
|
+
for (var key in source) {
|
|
10
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
11
|
+
target[key] = source[key];
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
return target;
|
|
16
|
+
};
|
|
17
|
+
return _extends.apply(this, arguments);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
var applyMiddleware = function applyMiddleware(middlewares, _temp) {
|
|
21
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
22
|
+
fromRight = _ref.fromRight;
|
|
23
|
+
return function (api, config) {
|
|
24
|
+
return middlewares[fromRight ? 'reduceRight' : 'reduce'](function (set, middleware) {
|
|
25
|
+
return middleware(_extends({}, api, {
|
|
26
|
+
set: set
|
|
27
|
+
}), config);
|
|
28
|
+
}, api.set);
|
|
13
29
|
};
|
|
14
30
|
};
|
|
15
31
|
|
|
16
|
-
var immer = function immer(
|
|
32
|
+
var immer = function immer(_ref) {
|
|
33
|
+
var set = _ref.set;
|
|
17
34
|
return function (value) {
|
|
18
35
|
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
19
36
|
rest[_key - 1] = arguments[_key];
|
|
@@ -30,7 +47,9 @@ var persist = function persist(_temp) {
|
|
|
30
47
|
return localStorage;
|
|
31
48
|
} : _ref$getStorage;
|
|
32
49
|
var states = [];
|
|
33
|
-
var middleware = function middleware(
|
|
50
|
+
var middleware = function middleware(_ref2, config) {
|
|
51
|
+
var set = _ref2.set,
|
|
52
|
+
get = _ref2.get;
|
|
34
53
|
var key = (config == null ? void 0 : config.key) || '';
|
|
35
54
|
if (!key) throw new Error('[reactish-state] state should be provided with a string `key` in the config object when the `persist` middleware is used.');
|
|
36
55
|
if (prefix) key = prefix + key;
|
|
@@ -41,31 +60,46 @@ var persist = function persist(_temp) {
|
|
|
41
60
|
};
|
|
42
61
|
};
|
|
43
62
|
middleware.hydrate = function () {
|
|
44
|
-
states.forEach(function (
|
|
45
|
-
var key =
|
|
46
|
-
set =
|
|
63
|
+
states.forEach(function (_ref3) {
|
|
64
|
+
var key = _ref3[0],
|
|
65
|
+
set = _ref3[1];
|
|
47
66
|
var value = getStorage().getItem(key);
|
|
48
|
-
value && set(JSON.parse(value),
|
|
67
|
+
value && set(JSON.parse(value), "HYDRATE_" + key);
|
|
49
68
|
});
|
|
50
69
|
states.length = 0;
|
|
51
70
|
};
|
|
52
71
|
return middleware;
|
|
53
72
|
};
|
|
54
73
|
|
|
55
|
-
var reduxDevtools = function reduxDevtools(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
74
|
+
var reduxDevtools = function reduxDevtools(_temp) {
|
|
75
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
76
|
+
name = _ref.name;
|
|
77
|
+
var devtoolsExt;
|
|
78
|
+
if (typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)) return function (_ref2) {
|
|
79
|
+
var set = _ref2.set;
|
|
80
|
+
return set;
|
|
81
|
+
};
|
|
82
|
+
var devtools = devtoolsExt.connect({
|
|
83
|
+
name: name
|
|
59
84
|
});
|
|
60
|
-
|
|
61
|
-
return function (
|
|
62
|
-
set.
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
85
|
+
var mergedState = {};
|
|
86
|
+
return function (_ref3, config) {
|
|
87
|
+
var set = _ref3.set,
|
|
88
|
+
get = _ref3.get;
|
|
89
|
+
var key = config == null ? void 0 : config.key;
|
|
90
|
+
if (!key) throw new Error('[reactish-state] state should be provided with a string `key` in the config object when the `reduxDevtools` middleware is used.');
|
|
91
|
+
mergedState[key] = get();
|
|
92
|
+
devtools.init(mergedState);
|
|
93
|
+
return function (value, action) {
|
|
94
|
+
set.apply(null, arguments);
|
|
95
|
+
mergedState[key] = get();
|
|
96
|
+
devtools.send(typeof action === 'string' ? {
|
|
97
|
+
type: action
|
|
98
|
+
} : action || {
|
|
99
|
+
type: "SET_" + key,
|
|
100
|
+
value: value
|
|
101
|
+
}, mergedState);
|
|
102
|
+
};
|
|
69
103
|
};
|
|
70
104
|
};
|
|
71
105
|
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
function _extends() {
|
|
2
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
3
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
4
|
+
var source = arguments[i];
|
|
5
|
+
for (var key in source) {
|
|
6
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
7
|
+
target[key] = source[key];
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
return target;
|
|
12
|
+
};
|
|
13
|
+
return _extends.apply(this, arguments);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export { _extends as extends };
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
+
|
|
3
|
+
var applyMiddleware = function applyMiddleware(middlewares, _temp) {
|
|
4
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
5
|
+
fromRight = _ref.fromRight;
|
|
6
|
+
return function (api, config) {
|
|
7
|
+
return middlewares[fromRight ? 'reduceRight' : 'reduce'](function (set, middleware) {
|
|
8
|
+
return middleware(_extends({}, api, {
|
|
9
|
+
set: set
|
|
10
|
+
}), config);
|
|
11
|
+
}, api.set);
|
|
9
12
|
};
|
|
10
13
|
};
|
|
11
14
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { produce } from 'immer';
|
|
2
2
|
|
|
3
|
-
var immer = function immer(
|
|
3
|
+
var immer = function immer(_ref) {
|
|
4
|
+
var set = _ref.set;
|
|
4
5
|
return function (value) {
|
|
5
6
|
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
6
7
|
rest[_key - 1] = arguments[_key];
|
|
@@ -6,7 +6,9 @@ var persist = function persist(_temp) {
|
|
|
6
6
|
return localStorage;
|
|
7
7
|
} : _ref$getStorage;
|
|
8
8
|
var states = [];
|
|
9
|
-
var middleware = function middleware(
|
|
9
|
+
var middleware = function middleware(_ref2, config) {
|
|
10
|
+
var set = _ref2.set,
|
|
11
|
+
get = _ref2.get;
|
|
10
12
|
var key = (config == null ? void 0 : config.key) || '';
|
|
11
13
|
if (!key) throw new Error('[reactish-state] state should be provided with a string `key` in the config object when the `persist` middleware is used.');
|
|
12
14
|
if (prefix) key = prefix + key;
|
|
@@ -17,11 +19,11 @@ var persist = function persist(_temp) {
|
|
|
17
19
|
};
|
|
18
20
|
};
|
|
19
21
|
middleware.hydrate = function () {
|
|
20
|
-
states.forEach(function (
|
|
21
|
-
var key =
|
|
22
|
-
set =
|
|
22
|
+
states.forEach(function (_ref3) {
|
|
23
|
+
var key = _ref3[0],
|
|
24
|
+
set = _ref3[1];
|
|
23
25
|
var value = getStorage().getItem(key);
|
|
24
|
-
value && set(JSON.parse(value),
|
|
26
|
+
value && set(JSON.parse(value), "HYDRATE_" + key);
|
|
25
27
|
});
|
|
26
28
|
states.length = 0;
|
|
27
29
|
};
|
|
@@ -1,17 +1,32 @@
|
|
|
1
|
-
var reduxDevtools = function reduxDevtools(
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
var reduxDevtools = function reduxDevtools(_temp) {
|
|
2
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
3
|
+
name = _ref.name;
|
|
4
|
+
var devtoolsExt;
|
|
5
|
+
if (typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)) return function (_ref2) {
|
|
6
|
+
var set = _ref2.set;
|
|
7
|
+
return set;
|
|
8
|
+
};
|
|
9
|
+
var devtools = devtoolsExt.connect({
|
|
10
|
+
name: name
|
|
5
11
|
});
|
|
6
|
-
|
|
7
|
-
return function (
|
|
8
|
-
set.
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
var mergedState = {};
|
|
13
|
+
return function (_ref3, config) {
|
|
14
|
+
var set = _ref3.set,
|
|
15
|
+
get = _ref3.get;
|
|
16
|
+
var key = config == null ? void 0 : config.key;
|
|
17
|
+
if (!key) throw new Error('[reactish-state] state should be provided with a string `key` in the config object when the `reduxDevtools` middleware is used.');
|
|
18
|
+
mergedState[key] = get();
|
|
19
|
+
devtools.init(mergedState);
|
|
20
|
+
return function (value, action) {
|
|
21
|
+
set.apply(null, arguments);
|
|
22
|
+
mergedState[key] = get();
|
|
23
|
+
devtools.send(typeof action === 'string' ? {
|
|
24
|
+
type: action
|
|
25
|
+
} : action || {
|
|
26
|
+
type: "SET_" + key,
|
|
27
|
+
value: value
|
|
28
|
+
}, mergedState);
|
|
29
|
+
};
|
|
15
30
|
};
|
|
16
31
|
};
|
|
17
32
|
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var applyPlugin = function applyPlugin(plugins) {
|
|
4
|
+
return function (reactish, config) {
|
|
5
|
+
return plugins.forEach(function (plugin) {
|
|
6
|
+
return plugin(reactish, config);
|
|
7
|
+
});
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
var reduxDevtools = function reduxDevtools(_temp) {
|
|
12
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
13
|
+
name = _ref.name;
|
|
14
|
+
var devtoolsExt;
|
|
15
|
+
if (typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)) return function () {
|
|
16
|
+
/*do nothing*/
|
|
17
|
+
};
|
|
18
|
+
var devtools = devtoolsExt.connect({
|
|
19
|
+
name: name
|
|
20
|
+
});
|
|
21
|
+
var mergedState = {};
|
|
22
|
+
return function (_ref2, config) {
|
|
23
|
+
var get = _ref2.get,
|
|
24
|
+
subscribe = _ref2.subscribe;
|
|
25
|
+
var key = config == null ? void 0 : config.key;
|
|
26
|
+
if (!key) throw new Error('[reactish-state] state should be provided with a string `key` in the config object when the `reduxDevtools` plugin is used.');
|
|
27
|
+
var updateState = function updateState() {
|
|
28
|
+
mergedState[key] = get();
|
|
29
|
+
devtools.init(mergedState);
|
|
30
|
+
};
|
|
31
|
+
updateState();
|
|
32
|
+
subscribe(updateState);
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
exports.applyPlugin = applyPlugin;
|
|
37
|
+
exports.reduxDevtools = reduxDevtools;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
var reduxDevtools = function reduxDevtools(_temp) {
|
|
2
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
3
|
+
name = _ref.name;
|
|
4
|
+
var devtoolsExt;
|
|
5
|
+
if (typeof window === 'undefined' || !(devtoolsExt = window.__REDUX_DEVTOOLS_EXTENSION__)) return function () {
|
|
6
|
+
/*do nothing*/
|
|
7
|
+
};
|
|
8
|
+
var devtools = devtoolsExt.connect({
|
|
9
|
+
name: name
|
|
10
|
+
});
|
|
11
|
+
var mergedState = {};
|
|
12
|
+
return function (_ref2, config) {
|
|
13
|
+
var get = _ref2.get,
|
|
14
|
+
subscribe = _ref2.subscribe;
|
|
15
|
+
var key = config == null ? void 0 : config.key;
|
|
16
|
+
if (!key) throw new Error('[reactish-state] state should be provided with a string `key` in the config object when the `reduxDevtools` plugin is used.');
|
|
17
|
+
var updateState = function updateState() {
|
|
18
|
+
mergedState[key] = get();
|
|
19
|
+
devtools.init(mergedState);
|
|
20
|
+
};
|
|
21
|
+
updateState();
|
|
22
|
+
subscribe(updateState);
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export { reduxDevtools };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reactish-state",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Zheng Song",
|
|
6
6
|
"license": "MIT",
|
|
@@ -25,12 +25,13 @@
|
|
|
25
25
|
"pret": "prettier -c .",
|
|
26
26
|
"pret:fix": "prettier -w .",
|
|
27
27
|
"build": "run-s pret clean lint types bundle post-build",
|
|
28
|
+
"test": "jest",
|
|
29
|
+
"test:watch": "jest --watch",
|
|
28
30
|
"eg": "npm run dev --prefix examples"
|
|
29
31
|
},
|
|
30
32
|
"peerDependencies": {
|
|
31
|
-
"
|
|
32
|
-
"react
|
|
33
|
-
"immer": ">=6.0"
|
|
33
|
+
"immer": ">=6.0",
|
|
34
|
+
"react": "^16.8 || ^17.0 || ^18.0"
|
|
34
35
|
},
|
|
35
36
|
"peerDependenciesMeta": {
|
|
36
37
|
"immer": {
|
|
@@ -43,10 +44,13 @@
|
|
|
43
44
|
"devDependencies": {
|
|
44
45
|
"@babel/core": "^7.19.6",
|
|
45
46
|
"@babel/preset-env": "^7.19.4",
|
|
47
|
+
"@babel/preset-react": "^7.18.6",
|
|
46
48
|
"@babel/preset-typescript": "^7.18.6",
|
|
47
49
|
"@redux-devtools/extension": "^3.2.3",
|
|
48
50
|
"@rollup/plugin-babel": "^6.0.0",
|
|
49
51
|
"@rollup/plugin-node-resolve": "^15.0.0",
|
|
52
|
+
"@testing-library/jest-dom": "^5.16.5",
|
|
53
|
+
"@testing-library/react": "^13.4.0",
|
|
50
54
|
"@types/jest": "^29.1.2",
|
|
51
55
|
"@types/react": "^18.0.24",
|
|
52
56
|
"@types/use-sync-external-store": "^0.0.3",
|
package/types/common.d.ts
CHANGED
|
@@ -4,13 +4,19 @@ export declare type Setter<T> = (newValue: T | ((value: T) => T), action?: strin
|
|
|
4
4
|
[key: string]: unknown;
|
|
5
5
|
}) => void;
|
|
6
6
|
export declare type Listener = () => void;
|
|
7
|
+
export declare type Subscriber = (listener: Listener) => () => void;
|
|
7
8
|
export interface Reactish<T> {
|
|
8
9
|
get: Getter<T>;
|
|
9
|
-
subscribe:
|
|
10
|
+
subscribe: Subscriber;
|
|
10
11
|
}
|
|
11
12
|
export interface Config {
|
|
12
13
|
key?: string;
|
|
13
14
|
}
|
|
14
15
|
export interface Middleware {
|
|
15
|
-
<T>(
|
|
16
|
+
<T>(api: Reactish<T> & {
|
|
17
|
+
set: Setter<T>;
|
|
18
|
+
}, config?: Config): Setter<T>;
|
|
19
|
+
}
|
|
20
|
+
export interface Plugin {
|
|
21
|
+
<T>(reactish: Reactish<T>, config?: Config): void;
|
|
16
22
|
}
|
package/types/index.d.ts
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
import type { Reactish,
|
|
1
|
+
import type { Reactish, Plugin, Config } from '../common';
|
|
2
2
|
declare type ReactishArray = Reactish<unknown>[];
|
|
3
3
|
declare type ReactishValueArray<R extends ReactishArray> = {
|
|
4
4
|
[index in keyof R]: ReturnType<R[index]['get']>;
|
|
5
5
|
};
|
|
6
6
|
declare type SelectorFunc<R extends ReactishArray, T> = (...args: ReactishValueArray<R>) => T;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
|
|
7
|
+
interface Selector {
|
|
8
|
+
<R extends ReactishArray, T>(...items: [...R, SelectorFunc<R, T>]): Reactish<T>;
|
|
9
|
+
<R extends ReactishArray, T>(...items: [...R, SelectorFunc<R, T>, Config]): Reactish<T>;
|
|
10
|
+
}
|
|
11
|
+
declare const createSelector: ({ plugin }?: {
|
|
12
|
+
plugin?: Plugin | undefined;
|
|
13
|
+
}) => Selector;
|
|
14
|
+
declare const selector: Selector;
|
|
15
|
+
export { selector, createSelector };
|
package/types/vanilla/state.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Reactish, Setter, Config, Middleware } from '../common';
|
|
2
2
|
declare type ActionCreator<T, A> = ((set: Setter<T>, get: () => T) => A) | null | undefined;
|
|
3
3
|
interface State<T, A = unknown, C extends ActionCreator<T, A> = undefined> extends Reactish<T> {
|
|
4
4
|
set: Setter<T>;
|