",
32 | "license": "ISC",
33 | "repository": {
34 | "type": "git",
35 | "url": "https://github.com/rm-rf-etc/simple-shared-state"
36 | },
37 | "devDependencies": {
38 | "@babel/core": "^7.0.0",
39 | "@babel/plugin-transform-object-assign": "^7.7.4",
40 | "@babel/preset-env": "^7.7.7",
41 | "@size-limit/preset-small-lib": "^3.0.0",
42 | "babel-loader": "^8.0.6",
43 | "docdash": "^1.2.0",
44 | "esm": "^3.2.25",
45 | "jest": "^24.9.0",
46 | "jsdoc": "^3.6.3",
47 | "redux": "^4.0.5",
48 | "taffydb": "^2.7.3",
49 | "webpack": "^4.41.5",
50 | "webpack-cli": "^3.3.10"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/packages/react-test-ground/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import "./App.css";
3 | import store from "./store";
4 | import useSharedState from "use-simple-shared-state";
5 |
6 | const selectors = [
7 | (state) => state.counters.count1,
8 | (state) => state.todos,
9 | ];
10 |
11 | const {
12 | setCounter1,
13 | incrementCounter1,
14 | decrementCounter1,
15 | pushTodo,
16 | popTodo,
17 | removeTodo,
18 | } = store.actions;
19 |
20 | const App = () => {
21 | const [count1, todos] = useSharedState(store, selectors);
22 | const [field1, setField1] = useState(0);
23 | const [field3, setField3] = useState("");
24 |
25 | return (
26 |
27 |
28 |
{count1}
29 |
+
30 |
-
31 |
32 | setCounter1(field1)}>Set
34 |
35 |
36 |
37 | { pushTodo(field3); setField3(""); }}>Add To-Do
39 | Remove To-Do
40 |
41 |
42 |
43 | {todos.map((todo) => (
44 |
45 | {todo.label}
46 | removeTodo(todo.key)}>×
47 |
48 | ))}
49 |
50 |
51 |
React App
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/packages/redux-comparison/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React App
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
33 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/packages/react-test-ground/src/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Simple Shared State
2 |
3 | Redux is verbose. SimpleSharedState is brief.
4 |
5 | - Docs: [https://simplesharedstate.com](https://simplesharedstate.com)
6 | - Repo: [https://github.com/rm-rf-etc/simple-shared-state](https://github.com/rm-rf-etc/simple-shared-state)
7 | - Example app: [https://simple-shared-state.stackblitz.io/](https://simple-shared-state.stackblitz.io/)
8 | - Edit online: [https://stackblitz.com/edit/simple-shared-state](https://stackblitz.com/edit/simple-shared-state)
9 |
10 |
11 | ## Status
12 |
13 | SimpleSharedState is still relatively experimental. Versions are following semver, but the version being greater
14 | than 1.0 doesn't mean it's considered production ready just yet. Please review the project source and tests to
15 | determine if it's viable for your project. More elaborate tests are needed to test SimpleSharedState performance
16 | against Redux.
17 |
18 |
19 | ## Get It
20 |
21 | ```
22 | npm install simple-shared-state
23 | ```
24 |
25 | If using script tags:
26 | ```html
27 |
28 |
31 | ```
32 |
33 | ### Support for Internet Explorer
34 |
35 | Use `dist/simple-shared-state.es5.umd.js`. For example:
36 | ```html
37 |
38 | ```
39 |
40 |
41 | ## Basic Use
42 |
43 | First create a store.
44 | ```javascript
45 | import { Store } from "simple-shared-state";
46 |
47 | const initialState = {
48 | user: {
49 | name: "Alice",
50 | slogan: "simple-shared-state makes apps fun again",
51 | },
52 | };
53 | const actions = () => ({
54 | changeSlogan: (newSlogan) => ({
55 | user: {
56 | slogan: newSlogan,
57 | },
58 | }),
59 | });
60 | const store = new Store(initialState, actions);
61 | ```
62 | Then create a watcher. Don't worry about error handling in selectors, just return
63 | the state that you want.
64 | ```javascript
65 | const selector = (state) => state.user;
66 |
67 | store.watch(selector, (state) => {
68 | console.log("user snapshot:", state);
69 | });
70 | ```
71 | Then call your action to update state and trigger the watch handler.
72 | ```javascript
73 | store.actions.changeSlogan("simple-shared-state is better than cat memes");
74 | // 'user snapshot:' { name: 'Alice', slogan: 'simple-shared-state is better than cat memes' }
75 | ```
76 |
77 |
78 | ## Redux Devtools
79 |
80 | Works with devtools, of course. Just pass in the reference like this:
81 | ```javascript
82 | const store = new Store(initialState, actions, window.__REDUX_DEVTOOLS_EXTENSION__);
83 | ```
84 |
85 |
86 | ## React Hooks
87 |
88 | [useSimpleSharedState](https://npmjs.com/package/use-simple-shared-state)
89 |
90 |
91 | ## Future Work
92 |
93 | - Fix redux devtools integration
94 | - Add support for async/await in action creators
95 | - Support typescript types
96 | - Explore potential to optimize selector processing for very large state trees
97 |
--------------------------------------------------------------------------------
/packages/simple-shared-state/README.md:
--------------------------------------------------------------------------------
1 | # Simple Shared State
2 |
3 | Redux is verbose. SimpleSharedState is brief.
4 |
5 | - Docs: [https://simplesharedstate.com](https://simplesharedstate.com)
6 | - Repo: [https://github.com/rm-rf-etc/simple-shared-state](https://github.com/rm-rf-etc/simple-shared-state)
7 | - Example app: [https://simple-shared-state.stackblitz.io/](https://simple-shared-state.stackblitz.io/)
8 | - Edit online: [https://stackblitz.com/edit/simple-shared-state](https://stackblitz.com/edit/simple-shared-state)
9 |
10 |
11 | ## Status
12 |
13 | SimpleSharedState is still relatively experimental. Versions are following semver, but the version being greater
14 | than 1.0 doesn't mean it's considered production ready just yet. Please review the project source and tests to
15 | determine if it's viable for your project. More elaborate tests are needed to test SimpleSharedState performance
16 | against Redux.
17 |
18 |
19 | ## Get It
20 |
21 | ```
22 | npm install simple-shared-state
23 | ```
24 |
25 | If using script tags:
26 | ```html
27 |
28 |
31 | ```
32 |
33 | ### Support for Internet Explorer
34 |
35 | Use `dist/simple-shared-state.es5.umd.js`. For example:
36 | ```html
37 |
38 | ```
39 |
40 |
41 | ## Basic Use
42 |
43 | First create a store.
44 | ```javascript
45 | import { Store } from "simple-shared-state";
46 |
47 | const initialState = {
48 | user: {
49 | name: "Alice",
50 | slogan: "simple-shared-state makes apps fun again",
51 | },
52 | };
53 | const actions = () => ({
54 | changeSlogan: (newSlogan) => ({
55 | user: {
56 | slogan: newSlogan,
57 | },
58 | }),
59 | });
60 | const store = new Store(initialState, actions);
61 | ```
62 | Then create a watcher. Don't worry about error handling in selectors, just return
63 | the state that you want.
64 | ```javascript
65 | const selector = (state) => state.user;
66 |
67 | store.watch(selector, (state) => {
68 | console.log("user snapshot:", state);
69 | });
70 | ```
71 | Then call your action to update state and trigger the watch handler.
72 | ```javascript
73 | store.actions.changeSlogan("simple-shared-state is better than cat memes");
74 | // 'user snapshot:' { name: 'Alice', slogan: 'simple-shared-state is better than cat memes' }
75 | ```
76 |
77 |
78 | ## Redux Devtools
79 |
80 | Works with devtools, of course. Just pass in the reference like this:
81 | ```javascript
82 | const store = new Store(initialState, actions, window.__REDUX_DEVTOOLS_EXTENSION__);
83 | ```
84 |
85 |
86 | ## React Hooks
87 |
88 | [useSimpleSharedState](https://npmjs.com/package/use-simple-shared-state)
89 |
90 |
91 | ## Future Work
92 |
93 | - Fix redux devtools integration
94 | - Add support for async/await in action creators
95 | - Support typescript types
96 | - Explore potential to optimize selector processing for very large state trees
97 |
--------------------------------------------------------------------------------
/packages/redux-comparison/src/appSSS.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import GridApp from './components/gridApp';
3 | import ColorSquare from './components/colorSquareSSS';
4 | import randomRGB from './lib/randomRGB';
5 | import useSharedState from 'use-simple-shared-state';
6 | import store from './storeSSS';
7 | import styled from 'styled-components';
8 | import getStats from './lib/stats';
9 | import Stats from 'stats-incremental';
10 |
11 | let stats = Stats();
12 | let running = false;
13 |
14 |
15 | const TwoCol = styled.div`
16 | display: grid;
17 | grid-gap: 20px;
18 | grid-template-columns: 0fr auto;
19 | `;
20 | const Col = styled.div(({ start }) => `
21 | grid-column: ${start};
22 | grid-row: 1;
23 | `);
24 | const Pre = styled.pre`
25 | width: 100%;
26 | `;
27 |
28 | const { changeColors, changeGridSize, changeExample } = store.actions;
29 |
30 | const resetScores = () => stats = Stats();
31 |
32 | const changeSize = (e) => changeGridSize(e.target.value);
33 |
34 | const App = () => {
35 | const [gridSize, example] = useSharedState(store, [s => s.gridSize, s => s.example]);
36 | const [scoreState, setScoreState] = React.useState('');
37 |
38 | const scoreIt = React.useCallback(() => {
39 | const t1 = performance.now();
40 |
41 | const changes = {};
42 | for(let i=0; i < (gridSize * gridSize); i++) {
43 | changes[i] = randomRGB();
44 | }
45 | changeColors(changes);
46 |
47 | const t2 = performance.now();
48 | stats.update(t2 - t1);
49 |
50 | setScoreState(getStats('SSS', stats.getAll()));
51 | }, [gridSize]);
52 |
53 | const handleClick = React.useCallback(() => {
54 | if (running) {
55 | running = false;
56 | return;
57 | }
58 | running = true;
59 | loop();
60 |
61 | function loop() {
62 | if (running) {
63 | scoreIt();
64 | setTimeout(loop, 500);
65 | }
66 | }
67 | }, [scoreIt]);
68 |
69 | return (
70 | <>
71 | Simple Shared State
72 |
73 | { resetScores(); setScoreState(''); }}>
75 | Reset Scores
76 |
77 |
78 | Metrics:
79 | {' '}
80 | {scoreState}
81 |
82 | Change Example
83 |
84 | {JSON.stringify(example, null, '\t')}
85 |
86 |
87 | example.thing1.a: {example.thing1.a}
88 |
89 |
90 | example.thing1.b: {example.thing1.b}
91 |
92 |
93 |
103 |
104 | );
105 | }
106 |
107 | export default App;
108 |
--------------------------------------------------------------------------------
/packages/react-test-ground/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `yarn start`
8 |
9 | Runs the app in the development mode.Redux
83 |
84 | { resetScores(); setScoreState(''); }}>
86 | Reset Scores
87 |
88 |
89 | Metrics:
90 | {' '}
91 | {scoreState}
92 |
93 | Change Example
94 |
95 | {JSON.stringify(example, null, '\t')}
96 |
97 |
98 | example.thing1.a: {example && example.thing1.a}
99 |
100 |
101 | example.thing1.b: {example && example.thing1.b}
102 |
103 |
104 |
115 |
116 | );
117 | }
118 |
119 | export default App;
120 |
--------------------------------------------------------------------------------
/packages/redux-comparison/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## TODO
4 | 1. Write a component that is a colored square which changes color randomly with a button press
5 | 2. Break this component out into it's own file and configure App to generate a grid of them
6 | 3. Make color randomization per component
7 | * How do we do this?
8 | * store colorsquares in a list in state
9 | * on button press, loop through this list and dispatch an action for each square which updates it's color
10 | * so state will be:
11 | state = {
12 | ...state,
13 | colorSquares: [[r,g,b], ...]
14 | }
15 |
16 | handleClick will: state.colorSquares.forEach(() => dispatch(updateSquare))
17 | 4. Make grid size configurable
18 | 5. Make color change on a timer
19 | 6. Make tempo configurable
20 |
21 | ## Available Scripts
22 |
23 | In the project directory, you can run
24 |
25 | ### `yarn start`
26 |
27 | Runs the app in the development mode.0&&void 0!==arguments[0]?arguments[0]:{},r=arguments.length>1?arguments[1]:void 0,o=arguments.length>2?arguments[2]:void 0;if(f(this,t),this.devtool,this.stateTree=u({},n),this.dispatching=!1,this.listeners=new Map,this.snapshots=new Map,this.dispatchListeners=new Set,this.actions={},o&&o.connect&&"function"==typeof o.connect&&(this.devtool=o.connect(),this.devtool.subscribe((function(t){"DISPATCH"===t.type&&"JUMP_TO_STATE"===t.payload.type&&e._applyBranch(JSON.parse(t.state))})),this.devtool.init(this.stateTree)),r&&"function"==typeof r){var i=r(this.getState.bind(this));Object.keys(i).forEach((function(t){var n=e.devtool?"".concat(t,"()"):"unknown";e.actions[t]=function(){for(var r=arguments.length,o=new Array(r),s=0;s2&&void 0!==arguments[2])||arguments[2];if("function"!=typeof t||"function"!=typeof e)throw new Error("selector and handler must be functions");if(this.listeners.has(t))throw new Error("Cannot reuse selector");try{n=t(this.stateTree),o&&e(n)}catch(t){}return this.listeners.set(t,e),this.snapshots.set(t,n),function(){r.listeners.delete(t),r.snapshots.delete(t)}}},{key:"watchBatch",value:function(t,e){var n=this;if(!t||"function"!=typeof t.forEach)throw new Error("selectors must be a list of functions");if("function"!=typeof e)throw new Error("handler is not a function");var r=[],o=0,i=!1;t.forEach((function(e){if("function"!=typeof e)throw t.forEach((function(t){return n.listeners.delete(t)})),new Error("selector must be a function");var s=o++;try{r[s]=e(n.stateTree)}catch(t){r[s]=void 0}n.watch(e,(function(t){r[s]=t,i=!0}),!1)}));var s=function(){i&&(e(r.slice()),i=!1)};return this.dispatchListeners.add(s),e(r.slice()),function(){n.dispatchListeners.delete(s),t.forEach((function(t){return n.listeners.delete(t)}))}}},{key:"watchDispatch",value:function(t){var e=this;if("function"!=typeof t)throw new Error("handler must be a function");return this.dispatchListeners.add(t),function(){return e.dispatchListeners.delete(t)}}},{key:"getState",value:function(t){if(t&&"function"==typeof t){var e;try{e=(n=t(this.stateTree))&&"object"===a(n)?u(l(n)?[]:{},n):n}catch(t){}return e}var n;return u({},this.stateTree)}},{key:"dispatchTyped",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"unknown",e=arguments.length>1?arguments[1]:void 0;if(this.dispatching)throw new Error("can't dispatch while dispatching");if(!e)throw new Error("can't dispatch invalid branch");if("function"==typeof e&&(e=e(this.getState())),"object"!==a(e))throw new Error("dispatch got invalid branch");this._applyBranch(e),this.devtool&&this.devtool.send(t,this.getState())}},{key:"dispatch",value:function(t){this.dispatchTyped("unknown",t)}}])&&h(e.prototype,n),r&&h(e,r),t}();n.d(e,"Store",(function(){return p})),n.d(e,"deleted",(function(){return i}))}])}));
--------------------------------------------------------------------------------
/packages/simple-shared-state/src/store.js:
--------------------------------------------------------------------------------
1 | import { merge, deleted } from "./merge";
2 |
3 | const isArray = Array.isArray;
4 |
5 | /**
6 | * @module SimpleSharedState
7 | */
8 |
9 | export class Store {
10 | /**
11 | * @description Create a new store instance.
12 | *
13 | * @constructor
14 | * @param {object} initialState - Any plain JS object (Arrays not allowed at the top level).
15 | * @param {function} [actions] - A function, which takes a reference to `store`, and returns an object of
16 | * actions for invoking changes to state.
17 | * @param {function} [devtool] - Provide a reference to `window.__REDUX_DEVTOOLS_EXTENSION__` to enable
18 | * redux devtools.
19 | */
20 | constructor(initialState = {}, getActions, useDevtool) {
21 | this.devtool;
22 | this.stateTree = Object.assign({}, initialState);
23 | this.dispatching = false;
24 | this.listeners = new Map();
25 | this.snapshots = new Map();
26 | this.dispatchListeners = new Set();
27 | this.actions = {};
28 |
29 | if (useDevtool && useDevtool.connect && typeof useDevtool.connect === "function") {
30 | // this adapts SimpleSharedState to work with redux devtools
31 | this.devtool = useDevtool.connect();
32 | this.devtool.subscribe((message) => {
33 | if (message.type === "DISPATCH" && message.payload.type === "JUMP_TO_STATE") {
34 | this._applyBranch(JSON.parse(message.state));
35 | }
36 | });
37 | this.devtool.init(this.stateTree);
38 | }
39 |
40 | if (getActions && typeof getActions === "function") {
41 | const actions = getActions(this.getState.bind(this));
42 |
43 | Object.keys(actions).forEach((actionName) => {
44 | const actionType = this.devtool ? `${actionName}()` : "unknown";
45 |
46 | this.actions[actionName] = (...args) => {
47 | this.dispatchTyped(actionType, actions[actionName].apply(null, args));
48 | };
49 | });
50 | }
51 | }
52 |
53 | _applyBranch(branch) {
54 | this.dispatching = true;
55 | merge(this.stateTree, branch);
56 |
57 | this.listeners.forEach((handler, selector) => {
58 | let change;
59 | const snapshot = this.snapshots.get(selector);
60 | const submit = (value) => {
61 | this.snapshots.set(selector, value);
62 | handler(value);
63 | };
64 |
65 | try {
66 | // attempt selector only on the branch
67 | change = selector(branch);
68 |
69 | switch(change) {
70 | case snapshot:
71 | return;
72 | case deleted:
73 | if (snapshot !== undefined) submit(undefined);
74 | return;
75 | case undefined:
76 | change = selector(this.stateTree);
77 | // If ^this line throws, then **current state is also not applicable**,
78 | // meaning something was deleted, so we should proceed to catch block.
79 | return;
80 | // If `return` runs, then selector didn't throw, so exit early.
81 | }
82 | }
83 | catch (_) {
84 | try {
85 | selector(this.stateTree);
86 | // If ^selector works on new state then exit early.
87 | return;
88 | } catch (_) {}
89 | }
90 |
91 | // This test also covers the scenario where both are undefined.
92 | if (change === snapshot) return;
93 |
94 | if (isArray(change) && !change.isPartial) {
95 | submit(change);
96 | } else {
97 | submit(merge(snapshot, change));
98 | }
99 | });
100 |
101 | this.dispatchListeners.forEach((callback) => callback());
102 | this.dispatching = false;
103 | };
104 |
105 | /**
106 | * @method module:SimpleSharedState.Store#watch
107 | * @param {function} selector - A pure function which takes state and returns a piece of that state.
108 | * @param {function} handler - The listener which will receive the piece of state when changes occur.
109 | * @param {boolean} [runNow=true] - Pass false to prevent `handler` from being called immediately
110 | * after watch is called.
111 | * @returns {function} Invoke this function to destroy the listener.
112 | *
113 | * @description Creates a state listener which is associated with the selector. Every selector must
114 | * be globally unique, as they're stored internally in a Set. If `watch` receives a selector which
115 | * has already been passed before, `watch` will throw. Refer to the tests for more examples. `watch`
116 | * returns a function which, when called, removes the watcher / listener.
117 | */
118 | watch(selector, handler, runNow = true) {
119 | if (typeof selector !== "function" || typeof handler !== "function") {
120 | throw new Error("selector and handler must be functions");
121 | }
122 | if (this.listeners.has(selector)) {
123 | throw new Error("Cannot reuse selector");
124 | }
125 |
126 | let snapshot;
127 | try {
128 | snapshot = selector(this.stateTree);
129 | if (runNow) handler(snapshot);
130 | } catch (_) {}
131 |
132 | this.listeners.set(selector, handler);
133 | this.snapshots.set(selector, snapshot);
134 |
135 | return () => {
136 | this.listeners.delete(selector);
137 | this.snapshots.delete(selector);
138 | };
139 | };
140 |
141 | /**
142 | * @method module:SimpleSharedState.Store#watchBatch
143 | * @param {Array|Set} selectors - A Set or Array of selector functions. Refer to
144 | * [Store#watch]{@link module:SimpleSharedState.Store#watch} for details about selector functions.
145 | * @param {function} handler - The listener which will receive the Array of state snapshots.
146 | * @returns {function} A callback that removes the dispatch watcher and cleans up after itself.
147 | *
148 | * @description Creates a dispatch listener from a list of selectors. Each selector yields a snapshot,
149 | * which is stored in an array and updated whenever the state changes. When dispatch happens, your
150 | * `handler` function will be called with the array of snapshots, ***if*** any snapshots have changed.
151 | *
152 | * @example
153 | * import { Store, partialArray } from "simple-shared-state";
154 | *
155 | * const store = new Store({
156 | * people: ["Alice", "Bob"],
157 | * });
158 | *
159 | * const unwatch = store.watchBatch([
160 | * (state) => state.people[0],
161 | * (state) => state.people[1],
162 | * ], (values) => console.log(values));
163 | *
164 | * store.dispatch({ people: partialArray(1, "John") });
165 | * // [ 'Alice', 'John' ]
166 | *
167 | * store.dispatch({ people: [ "Janet", "Jake", "James" ] });
168 | * // [ 'Janet', 'Jake' ]
169 | * // notice "James" is not present, that's because of our selectors
170 | *
171 | * console.log(store.getState(s => s.people));
172 | * // [ 'Janet', 'Jake', 'James' ]
173 | *
174 | * unwatch();
175 | * store.dispatch({ people: [ "Justin", "Josh", store.deleted ] });
176 | * // nothing happens, the watcher was removed
177 | *
178 | * console.log(store.getState(s => s.people));
179 | * // [ 'Justin', 'Josh', <1 empty item> ]
180 | */
181 | watchBatch(selectors, handler) {
182 | if (!selectors || typeof selectors.forEach !== "function") {
183 | throw new Error("selectors must be a list of functions");
184 | }
185 | if (typeof handler !== "function") throw new Error("handler is not a function");
186 |
187 | const snapshotsArray = [];
188 |
189 | let i = 0;
190 | let changed = false;
191 | selectors.forEach((fn) => {
192 | if (typeof fn !== "function") {
193 | selectors.forEach((fn) => this.listeners.delete(fn));
194 | throw new Error("selector must be a function");
195 | }
196 |
197 | let pos = i++; // pos = 0, i += 1
198 | try {
199 | snapshotsArray[pos] = fn(this.stateTree);
200 | } catch (_) {
201 | snapshotsArray[pos] = undefined;
202 | }
203 | this.watch(fn, (snapshot) => {
204 | snapshotsArray[pos] = snapshot;
205 | changed = true;
206 | }, false);
207 | });
208 |
209 | const watchHandler = () => {
210 | if (changed) {
211 | handler(snapshotsArray.slice());
212 | changed = false;
213 | }
214 | };
215 | this.dispatchListeners.add(watchHandler);
216 |
217 | handler(snapshotsArray.slice());
218 |
219 | return () => {
220 | this.dispatchListeners.delete(watchHandler);
221 | selectors.forEach((fn) => this.listeners.delete(fn));
222 | };
223 | };
224 |
225 | /**
226 | * @method module:SimpleSharedState.Store#watchDispatch
227 | *
228 | * @description Listen for the after-dispatch event, which gets called with no arguments after every
229 | * dispatch completes. Dispatch is complete after all watchers have been called.
230 | *
231 | * @param {function} handler - A callback function.
232 | */
233 | watchDispatch(handler) {
234 | if (typeof handler !== "function") throw new Error("handler must be a function");
235 | this.dispatchListeners.add(handler);
236 | return () => this.dispatchListeners.delete(handler);
237 | };
238 |
239 | /**
240 | * @method module:SimpleSharedState.Store#getState
241 | *
242 | * @param {function} [selector] - Optional but recommended function which returns a piece of the state.
243 | * Error handling not required, your selector will run inside a `try{} catch{}` block.
244 | * @returns {*} A shallow copy of the state tree, or a copy of the piece returned from the selector,
245 | * or undefined if the selector fails.
246 | */
247 | getState(selector) {
248 | if (selector && typeof selector === "function") {
249 | let piece;
250 | try {
251 | piece = copy(selector(this.stateTree));
252 | } catch (_) {}
253 |
254 | return piece;
255 | }
256 |
257 | return Object.assign({}, this.stateTree);
258 | };
259 |
260 | /**
261 | * @method module:SimpleSharedState.Store#dispatchTyped
262 | *
263 | * @param {string} actionName - This is only for the benefit of providing a label in redux devtools.
264 | * @param {object|function} branch - A JavaScript object, or a function which takes state and returns a
265 | * JavaScript object. The object may contain any Array or JS primitive, but must be a plain JS object
266 | * at the top level, otherwise dispatch will throw.
267 | *
268 | * @description Please use [action creators]{@link module:SimpleSharedState#Store} instead of calling
269 | * dispatchTyped directly.
270 | */
271 | dispatchTyped(actionName = "unknown", branch) {
272 | if (this.dispatching) throw new Error("can't dispatch while dispatching");
273 |
274 | if (!branch) throw new Error("can't dispatch invalid branch");
275 |
276 | if (typeof branch === "function") {
277 | branch = branch(this.getState());
278 | }
279 | if (typeof branch !== "object") {
280 | throw new Error("dispatch got invalid branch");
281 | }
282 | this._applyBranch(branch);
283 |
284 | if (this.devtool) this.devtool.send(actionName, this.getState());
285 | };
286 |
287 | /**
288 | * @method module:SimpleSharedState.Store#dispatch
289 | *
290 | * @param {object|function} branch - A JavaScript object, or a function which takes state and returns a
291 | * JavaScript object. The object may contain any Array or JS primitive, but must be a plain JS object
292 | * at the top level, otherwise dispatch will throw.
293 | *
294 | * @description Please use [action creators]{@link module:SimpleSharedState#Store} instead of calling
295 | * dispatch directly.
296 | *
297 | * @example
298 | * import { Store } from "simple-shared-state";
299 | *
300 | * // Create a store with state:
301 | * const store = new Store({
302 | * email: "user@example.com",
303 | * counters: {
304 | * likes: 1,
305 | * },
306 | * todoList: [
307 | * { label: "buy oat milk" },
308 | * { label: "buy cat food" },
309 | * ],
310 | * });
311 | *
312 | * // To change email, call dispatch with a branch. The branch you provide must include the full path
313 | * // from the root of the state, to the value you want to change.
314 | * store.dispatch({
315 | * email: "me@simplesharedstate.com",
316 | * });
317 | *
318 | * // To increment likes:
319 | * store.dispatch((state) => ({
320 | * counters: {
321 | * likes: state.counters.likes + 1,
322 | * },
323 | * }));
324 | *
325 | * // To delete any piece of state, use a reference to `store.deleted` as the value in the branch.
326 | * // To remove `counters` from the state entirely:
327 | * store.dispatch({
328 | * counters: store.deleted,
329 | * });
330 | *
331 | * // To update items in arrays, you can use `partialArray`:
332 | * store.dispatch({
333 | * todoList: partialArray(1, {
334 | * label: "buy oat milk (because it requires 80 times less water than almond milk)",
335 | * }),
336 | * });
337 | */
338 | dispatch(branch) {
339 | this.dispatchTyped("unknown", branch);
340 | }
341 | };
342 |
343 | function copy(thing) {
344 | return !thing || typeof thing !== "object" ? thing : Object.assign(isArray(thing) ? [] : {}, thing);
345 | }
346 |
--------------------------------------------------------------------------------
/packages/simple-shared-state/test/main.test.js:
--------------------------------------------------------------------------------
1 | import * as redux from "redux";
2 | const bundles = {
3 | esm: require("../src/index"),
4 | es5: require("../dist/simple-shared-state.es5.umd"),
5 | es6: require("../dist/simple-shared-state.es6.umd"),
6 | esm_merge: require("../src/merge").merge,
7 | es6_merge: require("../test_bundle/merge").merge,
8 | };
9 |
10 | const _100_000 = 100000;
11 | const _50_000_000 = 50000000;
12 | const _100_000_000 = 100000000;
13 |
14 | function testRawJSPerformance(times) {
15 | describe.skip(`JS Performance over ${(times).toLocaleString()} repetitions`, () => {
16 | const actionType = "SOME_ACTION_TYPE";
17 | let string = "?";
18 | let intrvl;
19 | let num;
20 | const state = {
21 | some_prop: {
22 | correct_path: 1,
23 | },
24 | };
25 | intrvl = setInterval(() => {
26 | string = Math.random().toString().split(".")[1];
27 | }, 0);
28 | it(`time required to compare strings ${(times).toLocaleString()} times`, () => {
29 | for (let i = 0; i < times; i++) {
30 | if (string === actionType) {
31 | num = i;
32 | }
33 | }
34 | expect(num).toEqual(undefined);
35 | });
36 | it(`time required to lookup object properties ${(times).toLocaleString()} times`, () => {
37 | for (let i = 0; i < times; i++) {
38 | try {
39 | num = state.some_prop[string];
40 | } catch (_) {}
41 | }
42 | expect(num).toEqual(undefined);
43 | });
44 | it(`time required to lookup object properties ${(times).toLocaleString()} times`, () => {
45 | for (let i = 0; i < times; i++) {
46 | try {
47 | num = state.some_prop.correct_path;
48 | } catch (_) {}
49 | }
50 | expect(num).toEqual(1);
51 | });
52 | afterAll(() => clearInterval(intrvl));
53 | });
54 | }
55 | testRawJSPerformance(_100_000);
56 | testRawJSPerformance(_50_000_000);
57 | testRawJSPerformance(_100_000_000);
58 |
59 | describe("Redux Performance", () => {
60 | const reducer = (oldState = { thing1: 1 }, action = {}) => {
61 | return {
62 | ...oldState,
63 | a: {
64 | thing1: action.value + 1,
65 | thing2: -(action.value + 1),
66 | },
67 | };
68 | };
69 | const store = redux.createStore(reducer, {
70 | a: {
71 | thing1: 1,
72 | thing2: -1,
73 | thing3: "ignored",
74 | },
75 | b: {
76 | ignored: "asdf",
77 | },
78 | });
79 |
80 | it(`run dispatch ${(_100_000).toLocaleString()} times`, (done) => {
81 | store.subscribe(() => {
82 | const state = store.getState();
83 | if (state && state.a.thing1 === _100_000) done();
84 | });
85 | for (var i = 0; i < _100_000; i++) {
86 | store.dispatch({ type: "A", value: i });
87 | }
88 | });
89 | });
90 |
91 | function testBundle(bundle) {
92 |
93 | describe("SimpleSharedState Performance", () => {
94 | const store = new bundle.Store({
95 | a: [
96 | {
97 | thing1: 1,
98 | thing2: -1,
99 | thing3: "ignored",
100 | },
101 | ],
102 | b: {
103 | ignored: "asdf",
104 | },
105 | });
106 |
107 | it(`run dispatch ${(_100_000).toLocaleString()} times`, (done) => {
108 | store.watch((state) => state.a[0], (state) => {
109 | if (state.thing1 === _100_000) {
110 | done();
111 | }
112 | });
113 | for (var i = 0; i < _100_000; i++) {
114 | store.dispatch({
115 | a: [
116 | {
117 | thing1: i+1,
118 | thing2: -(i+1),
119 | },
120 | ],
121 | });
122 | }
123 | });
124 | });
125 |
126 | describe("Store", () => {
127 | let store = {};
128 |
129 | beforeEach(() => {
130 | store = new bundle.Store({
131 | friends: {
132 | "1": {
133 | name: "Alice",
134 | age: 25,
135 | },
136 | "2": {
137 | name: "Bob",
138 | age: 28,
139 | },
140 | },
141 | emptyArray: [],
142 | todos: [
143 | { id: 1, label: "buy oat milk" },
144 | { id: 2, label: "buy cat food" },
145 | ],
146 | count: 1,
147 | }, (getState) => ({
148 | increment: () => ({
149 | count: getState(s => s.count) + 1,
150 | }),
151 | decrement: () => (state) => ({
152 | count: state.count - 1,
153 | }),
154 | replaceTodos: () => ({
155 | todos: [ true, "false" ],
156 | }),
157 | }));
158 | });
159 |
160 | it("creates actions from provided function and passes reference to store", () => {
161 | const spy = jest.fn();
162 | store.watch((state) => state.count, spy, false);
163 | store.actions.increment();
164 | expect(spy.mock.calls).toEqual([[2]]);
165 | });
166 |
167 | it("actions that return a function will call the function and receive state", () => {
168 | const spy = jest.fn();
169 | store.watch((state) => state.count, spy, false);
170 | store.actions.decrement();
171 | expect(spy.mock.calls).toEqual([[0]]);
172 | });
173 |
174 | describe("getState", () => {
175 | it("uses optional selector function or returns entire state copy", () => {
176 | let state = store.getState();
177 | const expectedState = {
178 | friends: {
179 | "1": {
180 | name: "Alice",
181 | age: 25,
182 | },
183 | "2": {
184 | name: "Bob",
185 | age: 28,
186 | },
187 | },
188 | emptyArray: [],
189 | todos: [
190 | { id: 1, label: "buy oat milk" },
191 | { id: 2, label: "buy cat food" },
192 | ],
193 | count: 1,
194 | };
195 | expect(state).toEqual(expectedState);
196 | state = null;
197 | expect(state).toEqual(null);
198 | expect(store.getState()).toEqual(expectedState);
199 | expect(store.getState(s => s.friends)).toEqual({
200 | "1": {
201 | name: "Alice",
202 | age: 25,
203 | },
204 | "2": {
205 | name: "Bob",
206 | age: 28,
207 | },
208 | });
209 | let friends = store.getState(s => s.friends);
210 | friends = null;
211 | expect(friends).toEqual(null);
212 | expect(store.getState(s => s.friends[1])).toEqual({
213 | name: "Alice",
214 | age: 25,
215 | });
216 | });
217 | });
218 |
219 | describe("dispatch", () => {
220 | it("provides copy of state if called with a function", () => {
221 | const spy = jest.fn();
222 | store.watch((state) => state.count, spy, false);
223 |
224 | const increment = () => {
225 | store.dispatch((state) => ({ count: state.count + 1 }));
226 | };
227 |
228 | for (let i=0; i<8; i++) increment();
229 | store.dispatch({ count: 0 });
230 |
231 | expect(spy.mock.calls).toEqual([ [2], [3], [4], [5], [6], [7], [8], [9], [0] ]);
232 | });
233 |
234 | it("handles large objects of numbered props", () => {
235 | const store = new bundle.Store({
236 | colors: [
237 | {r:0, g:0, b:0},
238 | ],
239 | });
240 | const colors = {
241 | "0": {
242 | "r": 48,
243 | "g": 173,
244 | "b": 3
245 | },
246 | "1": {
247 | "r": 216,
248 | "g": 229,
249 | "b": 123
250 | },
251 | "2": {
252 | "r": 255,
253 | "g": 36,
254 | "b": 245
255 | },
256 | "3": {
257 | "r": 88,
258 | "g": 89,
259 | "b": 131
260 | },
261 | };
262 | store.dispatch({ colors });
263 | expect(store.stateTree).toEqual({ colors:
264 | [
265 | { "r": 48, "g": 173, "b": 3 },
266 | { "r": 216, "g": 229, "b": 123 },
267 | { "r": 255, "g": 36, "b": 245 },
268 | { "r": 88, "g": 89, "b": 131 },
269 | ]
270 | });
271 | });
272 | });
273 |
274 | describe("watch", () => {
275 | it("dispatch works with values counting down to zero and up from below zero", () => {
276 | /*
277 | * This addresses a specific bug that I found while developing `useSimpleSharedState`.
278 | */
279 | const spy = jest.fn();
280 | store.watch((state) => state.count, spy, false);
281 |
282 | store.dispatch({ count: 2 });
283 | store.dispatch({ count: 1 });
284 | store.dispatch({ count: 0 });
285 | store.dispatch({ count: -1 });
286 | store.dispatch({ count: -2 });
287 | store.dispatch({ count: -1 });
288 | store.dispatch({ count: -0 });
289 | store.dispatch({ count: 1 });
290 | store.dispatch({ count: 2 });
291 | expect(spy.mock.calls).toEqual([ [2], [1], [0], [-1], [-2], [-1], [-0], [1], [2] ]);
292 | });
293 |
294 | it("watch calls handler immediately unless false is provided as 3rd arg", () => {
295 | const spy1 = jest.fn();
296 | const spy2 = jest.fn();
297 | store.watch((state) => state.count, spy1, false);
298 | store.watch((state) => state.count, spy2);
299 | expect(spy1.mock.calls.length).toEqual(0);
300 | expect(spy2.mock.calls.length).toEqual(1);
301 | expect(spy2.mock.calls[0]).toEqual([1]);
302 | });
303 |
304 | it("watch selectors work for empty arrays", () => {
305 | const spy = jest.fn();
306 | store.watchBatch([
307 | (state) => state.emptyArray,
308 | (state) => state.count,
309 | ], spy);
310 | expect(spy.mock.calls.length).toEqual(1);
311 | expect(spy.mock.calls[0]).toEqual([[[], 1]]);
312 | });
313 |
314 | it("dispatch invokes listeners", () => {
315 | const spy1 = jest.fn();
316 | const spy2 = jest.fn();
317 | store.watch((state) => state.friends[1].name, spy1, false);
318 | store.watch((state) => state.friends[1].name, spy2, false);
319 | store.dispatch({
320 | friends: {
321 | "1": {
322 | name: "Carrol",
323 | },
324 | },
325 | });
326 | expect(spy1).toHaveBeenCalled();
327 | expect(spy2).toHaveBeenCalled();
328 | });
329 |
330 | it("emits nested objects for selectors having a partial path", () => {
331 | const spy1 = jest.fn();
332 | const spy2 = jest.fn();
333 | const spy3 = jest.fn();
334 | store.watch((state) => state.friends, spy1, false);
335 | store.watch((state) => state.friends[1], spy2, false);
336 | store.watch((state) => state.friends[1].name, spy3, false);
337 | store.dispatch({
338 | friends: {
339 | "1": {
340 | name: "Carrol",
341 | },
342 | },
343 | });
344 | expect(spy1.mock.calls).toEqual([[{
345 | "1": {
346 | name: "Carrol",
347 | age: 25,
348 | },
349 | "2": {
350 | name: "Bob",
351 | age: 28,
352 | },
353 | }]]);
354 | expect(spy2.mock.calls).toEqual([[{
355 | name: "Carrol",
356 | age: 25,
357 | }]]);
358 | expect(spy3.mock.calls).toEqual([[
359 | "Carrol",
360 | ]]);
361 | });
362 |
363 | it("unwatch removes watch listeners", () => {
364 | const spy = jest.fn();
365 | const unwatch = store.watch((state) => state.friends, spy, false);
366 |
367 | store.dispatch({
368 | friends: {
369 | "1": {
370 | name: "Jim",
371 | age: 31,
372 | },
373 | },
374 | });
375 |
376 | expect(spy.mock.calls.length).toEqual(1);
377 |
378 | unwatch();
379 |
380 | store.dispatch({
381 | friends: {
382 | "2": {
383 | name: "Peter",
384 | },
385 | },
386 | });
387 |
388 | // has been called once more
389 | expect(spy.mock.calls.length).toEqual(1);
390 | });
391 |
392 | it("should throw when attempting to reuse existing selector", () => {
393 | const selector = (state) => state.friends[1];
394 |
395 | expect(() => {
396 | store.watch(selector, () => {}, false);
397 | store.watch(selector, () => {}, false);
398 | }).toThrow();
399 |
400 | expect(typeof store.watch((state) => state.friends[1], () => {}, false)).toEqual("function");
401 | expect(typeof store.watch((state) => state.friends[1], () => {}, false)).toEqual("function");
402 | });
403 | });
404 |
405 | describe("watchDispatch", () => {
406 | it("can watch & unwatch dispatch events", () => {
407 | const spy = jest.fn();
408 | const unwatch = store.watchDispatch(spy);
409 |
410 | store.dispatch({
411 | friends: {
412 | "1": {
413 | name: "Jim",
414 | },
415 | },
416 | });
417 | expect(spy.mock.calls.length).toEqual(1);
418 |
419 | store.dispatch({
420 | friends: {
421 | "1": {
422 | name: "Jessica",
423 | },
424 | },
425 | });
426 | expect(spy.mock.calls.length).toEqual(2);
427 |
428 | unwatch();
429 |
430 | store.dispatch({
431 | friends: {
432 | "1": {
433 | name: "Willard",
434 | },
435 | },
436 | });
437 | expect(spy.mock.calls.length).toEqual(2);
438 | });
439 | });
440 |
441 | describe("dispatch with complete arrays", () => {
442 | it("replaces old array with new ones", () => {
443 | const spy = jest.fn();
444 | expect(store.getState(s => s.todos)).toEqual([
445 | { id: 1, label: "buy oat milk" },
446 | { id: 2, label: "buy cat food" },
447 | ]);
448 | store.watch((state) => state.todos, spy, false);
449 |
450 | store.actions.replaceTodos();
451 | expect(store.getState(s => s.todos)).toEqual([ true, "false" ]);
452 | expect(store.getState(s => s.friends)).toEqual({
453 | "1": {
454 | name: "Alice",
455 | age: 25,
456 | },
457 | "2": {
458 | name: "Bob",
459 | age: 28,
460 | },
461 | });
462 | expect(store.getState(s => s.emptyArray)).toEqual([]);
463 |
464 | expect(spy.mock.calls.length).toEqual(1);
465 | expect(spy.mock.calls[0]).toEqual([[ true, "false" ]]);
466 | });
467 | });
468 |
469 | describe("dispatch with `deleted`", () => {
470 | it("can remove items from arrays", () => {
471 | const spy1 = jest.fn();
472 | store.watch((state) => state.friends, spy1, false);
473 | store.dispatch({
474 | friends: {
475 | "1": undefined,
476 | "2": bundle.deleted,
477 | },
478 | });
479 | expect(spy1.mock.calls).toEqual([[{
480 | "1": undefined,
481 | }]]);
482 | expect(store.getState().friends.hasOwnProperty("1")).toEqual(true);
483 | expect(store.getState().friends.hasOwnProperty("2")).toEqual(false);
484 |
485 | store.dispatch({ friends: bundle.deleted });
486 | expect(store.getState().hasOwnProperty("friends")).toEqual(false);
487 | });
488 |
489 | it("can remove items from objects", () => {
490 | const spy1 = jest.fn();
491 | const spy2 = jest.fn();
492 | store.watch((state) => state.friends, spy1, false);
493 | store.watch((state) => state.friends[2].age, spy2, false);
494 | store.dispatch({
495 | friends: {
496 | "1": {
497 | name: "Susan",
498 | age: undefined, // age will remain in state with value `undefined`
499 | },
500 | "2": {
501 | age: bundle.deleted, // age will be removed from state
502 | },
503 | },
504 | });
505 | expect(spy1.mock.calls).toEqual([[{
506 | "1": {
507 | name: "Susan",
508 | age: undefined,
509 | },
510 | "2": {
511 | name: "Bob",
512 | },
513 | }]]);
514 |
515 | // spy2 should have only been called once
516 | expect(spy2.mock.calls).toEqual([[undefined]]);
517 |
518 | expect(store.getState().friends[1]).toEqual({ name: "Susan" });
519 | expect(store.getState().friends[1].hasOwnProperty("age")).toEqual(true); // proof it remains
520 |
521 | expect(store.getState().friends[2]).toEqual({ name: "Bob" });
522 | expect(store.getState().friends[2].hasOwnProperty("age")).toEqual(false); // proof it was removed
523 |
524 | store.dispatch({
525 | friends: {
526 | "2": {
527 | age: bundle.deleted,
528 | },
529 | },
530 | });
531 | store.dispatch({
532 | friends: {
533 | "2": bundle.deleted,
534 | },
535 | });
536 |
537 | // spy2 should have only been called once
538 | expect(spy2.mock.calls).toEqual([[undefined]]);
539 |
540 | store.dispatch({
541 | friends: {
542 | "2": {
543 | name: "Jorge",
544 | age: 41,
545 | },
546 | },
547 | });
548 |
549 |
550 | // spy2 should have only been called once
551 | expect(spy2.mock.calls).toEqual([[undefined], [41]]);
552 | });
553 |
554 | it("watchers receive `undefined` when state is deleted", () => {
555 | const spy = jest.fn();
556 | store.watch((state) => state.friends[1].name, spy, false);
557 | store.dispatch({
558 | friends: {
559 | "1": {
560 | name: "Howard",
561 | },
562 | },
563 | });
564 | expect(spy.mock.calls[0]).toEqual(["Howard"]);
565 |
566 | store.dispatch({
567 | friends: {
568 | "1": bundle.deleted,
569 | },
570 | });
571 |
572 | expect(spy.mock.calls[1]).toEqual([undefined]);
573 |
574 | store.dispatch({
575 | friends: {
576 | "1": {
577 | name: "Matt",
578 | age: 35,
579 | },
580 | },
581 | });
582 |
583 | expect(spy.mock.calls).toEqual([
584 | ["Howard"],
585 | [undefined],
586 | ["Matt"],
587 | ]);
588 |
589 | // testing that this call doesn't trigger the watcher
590 | store.dispatch({
591 | friends: {
592 | "1": {
593 | age: 34,
594 | },
595 | },
596 | });
597 | expect(spy.mock.calls).toEqual([
598 | ["Howard"],
599 | [undefined],
600 | ["Matt"],
601 | ]);
602 | });
603 | });
604 |
605 | describe("watchBatch", () => {
606 | it("array.slice(0, -1) removes the last element from an array in state", () => {
607 | const spy = jest.fn();
608 | store.watchBatch([
609 | (state) => state.friends[1],
610 | (state) => state.count,
611 | (state) => state.todos,
612 | ], spy);
613 |
614 | expect(spy.mock.calls[0]).toEqual([[
615 | {
616 | age: 25,
617 | name: "Alice",
618 | },
619 | 1,
620 | [
621 | { id: 1, label: "buy oat milk" },
622 | { id: 2, label: "buy cat food" },
623 | ],
624 | ]]);
625 |
626 | store.dispatch((state) => ({ todos: state.todos.slice(0, -1) }));
627 |
628 | expect(spy.mock.calls[1]).toEqual([[
629 | {
630 | age: 25,
631 | name: "Alice"
632 | },
633 | 1,
634 | [
635 | { id: 1, label: "buy oat milk" },
636 | ],
637 | ]]);
638 |
639 | expect(store.getState().todos).toEqual([
640 | { id: 1, label: "buy oat milk" },
641 | ]);
642 | });
643 |
644 | it("array.slice(1) removes the first element from an array in state", () => {
645 | const spy = jest.fn();
646 | store.watchBatch([
647 | (state) => state.friends[1],
648 | (state) => state.count,
649 | (state) => state.todos,
650 | ], spy);
651 |
652 | expect(spy.mock.calls[0]).toEqual([[
653 | {
654 | age: 25,
655 | name: "Alice",
656 | },
657 | 1,
658 | [
659 | { id: 1, label: "buy oat milk" },
660 | { id: 2, label: "buy cat food" },
661 | ],
662 | ]]);
663 |
664 | store.dispatch((state) => ({ todos: state.todos.slice(1) }));
665 |
666 | expect(spy.mock.calls[1]).toEqual([[
667 | {
668 | age: 25,
669 | name: "Alice"
670 | },
671 | 1,
672 | [
673 | { id: 2, label: "buy cat food" },
674 | ],
675 | ]]);
676 |
677 | expect(store.getState().todos).toEqual([
678 | { id: 2, label: "buy cat food" },
679 | ]);
680 | });
681 |
682 | it("is called only once for a list of selectors", () => {
683 | const spy = jest.fn();
684 | const removeWatcher = store.watchBatch([
685 | (state) => state.friends[1].age,
686 | (state) => state.friends[1].name,
687 | (state) => state.friends[2].age,
688 | (state) => state.friends[2].name,
689 | ], spy);
690 | expect(spy.mock.calls.length).toEqual(1);
691 | expect(spy.mock.calls).toEqual([[[25, "Alice", 28, "Bob"]]]);
692 | store.dispatch({
693 | friends: {
694 | "1": {
695 | name: "Will",
696 | },
697 | "2": {
698 | age: 56,
699 | },
700 | },
701 | });
702 | expect(spy.mock.calls.length).toEqual(2);
703 | expect(spy.mock.calls).toEqual([
704 | [[25, "Alice", 28, "Bob"]],
705 | [[25, "Will", 56, "Bob"]],
706 | ]);
707 |
708 | // verify that we can remove the watcher
709 | removeWatcher();
710 |
711 | store.dispatch({
712 | friends: {
713 | "1": {
714 | age: 29,
715 | },
716 | },
717 | });
718 | expect(spy.mock.calls.length).toEqual(2);
719 | });
720 |
721 | it("is not called repeatedly for inapplicable selectors", () => {
722 | const spy = jest.fn();
723 | store.watchBatch([
724 | (s) => s.something,
725 | (s) => s.nothing.here,
726 | (s) => s.none.state.here,
727 | ], spy);
728 |
729 | store.dispatch({
730 | friends: {
731 | "1": {
732 | name: "Susan",
733 | },
734 | },
735 | });
736 | store.dispatch({
737 | friends: {
738 | "1": {
739 | age: 26,
740 | },
741 | },
742 | });
743 |
744 | expect(spy.mock.calls.length).toEqual(1);
745 | expect(spy.mock.calls).toEqual([[
746 | [undefined, undefined, undefined],
747 | ]]);
748 | });
749 | });
750 |
751 | describe("erroneous selectors", () => {
752 | it("does not spam the listener with `undefined` on every dispatch event", () => {
753 | const spy = jest.fn();
754 | store.watch((state) => state.not.valid.selector, spy);
755 | store.dispatch({
756 | friends: {
757 | "1": {
758 | name: "Josh",
759 | },
760 | },
761 | });
762 | store.dispatch({
763 | friends: {
764 | "3": {
765 | name: "Ronald",
766 | age: 5,
767 | },
768 | },
769 | });
770 | store.dispatch({
771 | friends: {
772 | "1": {
773 | age: 41,
774 | },
775 | "2": {
776 | age: 7,
777 | },
778 | },
779 | });
780 | expect(spy.mock.calls.length).toEqual(0);
781 | });
782 | });
783 | });
784 | }
785 |
786 | function testMerge(bundle, merge) {
787 | describe("merge", () => {
788 | let state;
789 | const target = {
790 | a: [
791 | { thing: 1 },
792 | { thing: 2 },
793 | ],
794 | b: {
795 | asdf1: "!",
796 | asdf2: 0,
797 | bool: false,
798 | },
799 | };
800 | beforeEach(() => {
801 | state = { ...target };
802 | });
803 |
804 | it("correctly merges partial arrays", () => {
805 | const array = [1, 2, 3, 4, 5];
806 | const changes = {
807 | "1": "change1",
808 | "3": "change2",
809 | };
810 |
811 | const expected = [1, "change1", 3, "change2", 5];
812 | expect(merge(array, changes)).toEqual(expected);
813 | expect(array).toEqual(expected);
814 | });
815 |
816 | it("can update simple values in objects in arrays", () => {
817 | const change = {
818 | a: {
819 | "1": {
820 | thing: 3,
821 | },
822 | },
823 | };
824 | expect(Array.isArray(change.a)).toEqual(false);
825 | expect(change.a[1].thing).toEqual(3);
826 | expect(target.a[1].thing).toEqual(2);
827 |
828 | merge(state, change);
829 | expect(state.a[1].thing).toEqual(3);
830 | expect(Array.isArray(state.a)).toEqual(true);
831 | expect(JSON.stringify(state.a)).toEqual('[{"thing":1},{"thing":3}]');
832 | });
833 |
834 | it("can change simple values to other data types inside nested objects", () => {
835 | merge(state, {
836 | b: {
837 | bool: "true",
838 | },
839 | });
840 | expect(state.b.bool).toEqual("true");
841 | });
842 |
843 | it("can replace simple values in arrays with new objects", () => {
844 | merge(state, {
845 | a: {
846 | "1": {
847 | thing: {
848 | new_thing: 1,
849 | },
850 | },
851 | },
852 | });
853 | expect(state.a[1].thing).toEqual({ new_thing: 1 });
854 | });
855 |
856 | it("can append new items to arrays", () => {
857 | merge(state, {
858 | a: {
859 | "2": {
860 | thing: "was added",
861 | },
862 | },
863 | });
864 | expect(state.a[2]).toEqual({ thing: "was added" });
865 | });
866 |
867 | it("doesn't fail on null values", () => {
868 | merge(state, {
869 | a: {
870 | "1": null,
871 | },
872 | });
873 | expect(state.a[1]).toEqual(null);
874 | });
875 |
876 | it("doesn't fail for values of 0", () => {
877 | merge(state, {
878 | a: 0,
879 | b: {
880 | asdf1: 0,
881 | asdf2: {
882 | stuff: "stuff",
883 | },
884 | },
885 | });
886 | expect(state.a).toEqual(0);
887 | expect(state.b.asdf1).toEqual(0);
888 | expect(state.b.asdf2).toEqual({ stuff: "stuff" });
889 | });
890 | });
891 | }
892 |
893 | describe("Source", () => {
894 | testBundle(bundles.esm);
895 | testMerge(bundles.esm, bundles.esm_merge);
896 | });
897 | describe("ES6", () => {
898 | testBundle(bundles.es6);
899 | testMerge(bundles.es6, bundles.es6_merge);
900 | });
901 | describe("ES5", () => {
902 | testBundle(bundles.es5);
903 | });
904 |
--------------------------------------------------------------------------------