diff --git a/.babelrc.js b/.babelrc.js
index 26ca221..fe789a5 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -8,23 +8,26 @@ const __PROD__ = NODE_ENV === "production";
const __TEST__ = NODE_ENV === "test";
const configs = {
- "@babel/plugin-proposal-decorators": {
- legacy: true,
- },
"@babel/preset-env"(pkg) {
return {
debug: !__TEST__,
loose: true,
shippedProposals: true,
targets: (() => {
+ const targets = {};
+ const browers = pkg.browserslist;
+ if (browers !== undefined) {
+ targets.browsers = browers;
+ }
let node = (pkg.engines || {}).node;
if (node !== undefined) {
const trimChars = "^=>~";
while (trimChars.includes(node[0])) {
node = node.slice(1);
}
- return { node: node };
+ targets.node = node;
}
+ return targets;
})(),
useBuiltIns: "@babel/polyfill" in (pkg.dependencies || {}) && "usage",
};
diff --git a/.eslintrc.js b/.eslintrc.js
index 8e00784..68eba91 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,6 +3,8 @@ module.exports = {
// standard configuration
"standard",
+ "plugin:compat/recommended",
+
// https://github.com/mysticatea/eslint-plugin-node#-rules
"plugin:node/recommended",
@@ -11,8 +13,6 @@ module.exports = {
"prettier/standard",
],
- parser: "babel-eslint",
-
rules: {
// prefer let/const over var
"no-var": "error",
@@ -29,4 +29,8 @@ module.exports = {
// uncomment if you are using a builder like Babel
"node/no-unsupported-features/es-syntax": "off",
},
+
+ settings: {
+ polyfills: ["promises"],
+ },
};
diff --git a/README.md b/README.md
index 5a0becb..59b6473 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ Differences with [freactal](https://github.com/FormidableLabs/freactal/):
- computed values are available in the `state` in effects
- `finalize` effect is triggered on unmount (symmetry with `initialize`)
- easy async effects
+- no state and effects injection (replace with [React context](https://reactjs.org/docs/context.html))
- async computed support
- update state by default: no need for `Object.assign()` and `{...state}`
- no [helper functions](https://github.com/FormidableLabs/freactal#helper-functions) (not necessary)
@@ -29,46 +30,69 @@ Installation of the [npm package](https://npmjs.org/package/reaclette):
```js
import React from "react";
import { render } from "react-dom";
-import { injectState, provideState } from "reaclette";
-
-const wrapComponentWithState = provideState({
- initialState: () => ({ counter: 0 }),
- effects: {
- addOne: () => (state, props) => ({ counter: state.counter + 1 }),
- },
- computed: {
- square: (state, props) => state.counter * state.counter,
+import { withStore } from "reaclette";
+
+const Component = withStore(
+ {
+ initialState: props => ({ counter: 0 }),
+ effects: {
+ addOne() {
+ this.state.counter += 1;
+ },
+ },
+ computed: {
+ square: (state, props) => state.counter * state.counter,
+ },
},
-});
-
-const Parent = wrapComponentWithState(() =>
-
Our counter is at: {state.counter}
-
Its squared value is: {state.square}
-
- Add one
-
-
+
Our counter is at: {store.state.counter}
+
Its squared value is: {store.state.square}
+
+ Add one
+
+
+ {store.state.loading ? (
+ "Loading..."
+ ) : (
+
{JSON.stringify(store.state.data, null, " ")}
+ )}
+
+
Our counter is at: {store.state.counter}
+
+ Add one
+
+
- {state.cities !== undefined
- ? state.cites.map(city => {city} )
+ (store, props) => (
+
+ {store.state.cities !== undefined
+ ? store.state.cites.map(city => {city} )
: null}
- ))
+ )
);
+
+render(Reset
+);
```
## Recipes
@@ -227,164 +291,11 @@ const withState = provideState({
import Preact, { render } from "preact";
import factory from "reaclette/factory";
-const { injectState, provideState } = factory(Preact);
+const { withStore } = factory(Preact);
// The rest is the same.
```
-### Testing
-
-> This example comes from the excellent [Freactal documentation](https://github.com/FormidableLabs/freactal/#testing).
-
-`App.js`:
-
-```js
-import React from "react";
-import { injectState, provideState } from "reaclette";
-
-export default provideState({
- initialState: () => ({
- givenName: "Walter",
- familyName: "Harriman",
- }),
- effects: {
- onChangeGiven: (_, { target: { value } }) => state => ({
- givenName: value,
- }),
- onChangeFamily: (_, { target: { value } }) => state => ({
- familyName: value,
- }),
- },
- computed: {
- fullName: ({ givenName, familyName }) => `${givenName} ${familyName}`,
- greeting: ({ fullName }) => `Hi, ${fullName}, and welcome!`,
- },
-})(
- injectState(({ state, effects }) => (
-
-
{state.greeting}
-
-
- Enter your given name:{" "}
-
-
-
-
- Enter your family name:{" "}
-
-
-
/src"
],
- "testRegex": "\\.spec\\.js$"
+ "testRegex": "\\.spec\\.js$",
+ "transform": {}
},
"lint-staged": {
"*.js": [
diff --git a/src/_CircularComputedError.js b/src/_CircularComputedError.js
index fcac197..baafadb 100644
--- a/src/_CircularComputedError.js
+++ b/src/_CircularComputedError.js
@@ -1,7 +1,7 @@
-import { BaseError } from "make-error";
+const { BaseError } = require("make-error");
-export default class CircularComputedError extends BaseError {
+module.exports = class CircularComputedError extends BaseError {
constructor(name) {
super(`computed "${name}" cannot depend on itself`);
}
-}
+};
diff --git a/src/_InvalidEntryError.js b/src/_InvalidEntryError.js
deleted file mode 100644
index 67f3d76..0000000
--- a/src/_InvalidEntryError.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { BaseError } from "make-error";
-
-export default class InvalidEntryError extends BaseError {
- constructor(name) {
- super(
- `"${name}" is not a valid state entry. If you want to use it, initialize it in "intialState"`
- );
- }
-}
diff --git a/src/factory.js b/src/factory.js
index 0ba6381..bba47da 100644
--- a/src/factory.js
+++ b/src/factory.js
@@ -1,358 +1,218 @@
-import CircularComputedError from "./_CircularComputedError";
-import InvalidEntryError from "./_InvalidEntryError";
+"use strict";
-// React does not support symbols :/
-const TAG = "reaclette";
+const CircularComputedError = require("./_CircularComputedError");
-const call = f => f();
-const isPromise = v => v != null && typeof v.then === "function";
-const noop = Function.prototype;
-const { create, keys, seal } = Object;
-
-const makeSpy = (keys, accessor) => {
- const descriptors = create(null);
- const spy = new Map();
- keys.forEach(k => {
- descriptors[k] = {
- enumerable: true,
- get: () => {
- let v = spy.get(k);
- if (v === undefined && !spy.has(k)) {
- v = accessor(k);
- spy.set(k, v);
- }
- return v;
- },
- };
- });
- spy.upToDate = () => {
- for (const [key, value] of spy) {
- if (accessor(key) !== value) {
- return false;
- }
- }
- return true;
- };
- return [create(null, descriptors), spy];
-};
+const {
+ create,
+ defineProperty,
+ freeze,
+ keys,
+ prototype: { hasOwnProperty },
+ seal,
+} = Object;
-module.exports = ({ Component, createElement, PropTypes }) => {
- const contextTypes_ = {
- [TAG]:
- PropTypes !== undefined
- ? PropTypes.shape({
- effects: PropTypes.object.isRequired,
- state: PropTypes.object.isRequired,
- subscribe: PropTypes.func.isRequired,
- })
- : noop,
- };
-
- const injectState = ChildComponent =>
- class StateInjector extends Component {
- static WrappedComponent = ChildComponent;
-
- static contextTypes = contextTypes_;
-
- constructor(_, context) {
- super();
-
- const parent = context[TAG];
- if (parent === undefined) {
- throw new TypeError("missing state");
- }
-
- const { state } = parent;
- [this._stateProxy, this._stateSpy] = makeSpy(
- parent.stateKeys,
- k => state[k]
- );
- seal(this._stateProxy);
- }
+const EMPTY_A = freeze([]);
+const EMPTY_O = freeze({ __proto__: null });
+const noop = Function.prototype;
- componentDidMount() {
- const spy = this._stateSpy;
- this.componentWillUnmount = this.context[TAG].subscribe(() => {
- if (!spy.upToDate()) {
- this.forceUpdate();
+class Spy {
+ constructor(keys, accessor) {
+ this._accessor = accessor;
+ this._keys = keys;
+ this.reset();
+
+ const descriptors = {};
+ keys.forEach(key => {
+ descriptors[key] = {
+ get: () => {
+ const accessed = this._accessed;
+ let value = accessed[key];
+ if (value === undefined && !hasOwnProperty.call(accessed, key)) {
+ value = accessed[key] = accessor(key);
}
- });
- }
-
- render() {
- this._stateSpy.clear();
-
- return createElement(ChildComponent, {
- ...this.props,
- effects: this.context[TAG].effects,
- resetState: this.context[TAG].resetState,
- state: this._stateProxy,
- });
- }
- };
-
- const provideState = ({ computed, effects, initialState }) => {
- const wrapComponentWithState = ChildComponent => {
- class StateProvider extends Component {
- static WrappedComponent =
- (ChildComponent != null && ChildComponent.WrappedComponent) ||
- ChildComponent;
- static wrapComponentWithState = wrapComponentWithState;
-
- static childContextTypes = contextTypes_;
- static contextTypes = contextTypes_;
-
- constructor(props, context) {
- super();
-
- const listeners = new Set();
- const dispatch = (this._dispatch = () => {
- // computedCache.clear()
- listeners.forEach(call);
- });
- this._subscribe = listener => {
- listeners.add(listener);
- return () => {
- listeners.delete(listener);
- };
+ return value;
+ },
+ };
+ });
+ this.proxy = create(null, descriptors);
+ }
+
+ isUpToDate() {
+ const accessed = this._accessed;
+ const accessor = this._accessor;
+ return keys(accessed).every(key => accessed[key] === accessor(key));
+ }
+
+ reset() {
+ this._accessed = { __proto__: null };
+ }
+}
+
+module.exports = ({ Component, PureComponent = Component }) => {
+ function withStore({ computed, effects, initialState }, fn) {
+ const computedKeys = computed === undefined ? EMPTY_A : keys(computed);
+ const effectsKeys = effects === undefined ? EMPTY_A : keys(effects);
+
+ return class Decorated extends PureComponent {
+ constructor(props) {
+ super(props);
+
+ const stateProxyDescriptors = {};
+
+ let state = initialState === undefined ? EMPTY_O : initialState(props);
+ const stateKeys = keys(state);
+ // entries are non enumerable to discourage spreading
+ stateKeys.forEach(key => {
+ stateProxyDescriptors[key] = {
+ get: () => state[key],
};
+ });
- const stateDescriptors = create(null);
- const writableStateDescriptors = create(null);
-
- if (computed !== undefined) {
- const propsKeys = keys(props);
- const propsAccessor = k => this.props[k];
- const stateAccessor = k => completeState[k];
+ if (computedKeys.length !== 0) {
+ const fullStateKeys = stateKeys.concat(computedKeys);
+ const propsAccessor = k => this.props[k];
+ const propsKeys = keys(props);
+ const stateAccessor = k => stateProxy[k];
+
+ computedKeys.forEach(key => {
+ if (hasOwnProperty.call(state, key)) {
+ throw new TypeError(
+ `conflict: "${key}" is defined both in state and computed`
+ );
+ }
- keys(computed).forEach(k => {
- const c = computed[k];
- let previousValue, propsProxy, propsSpy, stateProxy, stateSpy;
- writableStateDescriptors[k] = stateDescriptors[k] = {
- get: () => {
- if (propsProxy === undefined) {
- [propsProxy, propsSpy] = makeSpy(propsKeys, propsAccessor);
- seal(propsProxy);
- [stateProxy, stateSpy] = makeSpy(
- completeStateKeys.filter(key => key !== k),
+ const c = computed[key];
+ let promise, propsSpy, stateSpy, value;
+ stateProxyDescriptors[key] = {
+ get: () => {
+ do {
+ if (propsSpy === undefined) {
+ propsSpy = new Spy(propsKeys, propsAccessor);
+ seal(propsSpy.proxy);
+ stateSpy = new Spy(
+ fullStateKeys.filter(_ => _ !== key),
stateAccessor
);
- Object.defineProperty(stateProxy, k, {
- get() {
- throw new CircularComputedError(k);
- },
- });
- seal(stateProxy);
- } else if (propsSpy.upToDate() && stateSpy.upToDate()) {
- return isPromise(previousValue) ? undefined : previousValue;
+ seal(
+ defineProperty(stateSpy.proxy, key, {
+ get() {
+ throw new CircularComputedError(key);
+ },
+ })
+ );
+ } else if (propsSpy.isUpToDate() && stateSpy.isUpToDate()) {
+ break;
}
- propsSpy.clear();
- stateSpy.clear();
+ propsSpy.reset();
+ stateSpy.reset();
try {
- previousValue = c(stateProxy, propsProxy);
+ value = c(stateSpy.proxy, propsSpy.proxy);
} catch (error) {
if (error instanceof CircularComputedError) {
throw error;
}
- console.warn(`computed "${k}" thrown`, error);
- // as per #21, keep the previous value in case of error
- }
- if (!isPromise(previousValue)) {
- return previousValue;
+ console.warn(`computed "${key}" thrown`, error);
+ break;
}
- // rejections are explicitly not handled
- const promise = previousValue;
- previousValue.then(value => {
- if (previousValue === promise) {
- previousValue = value;
- dispatch();
- }
- });
- },
- };
- });
- }
-
- let state;
- if (initialState !== undefined) {
- state = initialState(props);
-
- keys(state).forEach(k => {
- if (k in stateDescriptors) {
- throw new TypeError(
- `conflict: "${k}" is defined both in state and computed`
- );
- }
- // only local, non-computed state entries are enumerable
- const roDescriptor = {
- enumerable: true,
- get: () => state[k],
- };
- stateDescriptors[k] = roDescriptor;
- writableStateDescriptors[k] = {
- ...roDescriptor,
- set: value => {
- state = { ...state, [k]: value };
- dispatch();
- },
- };
- });
- }
-
- let parentEffects = null;
- let parentState = null;
- let parentStateKeys = [];
- {
- const parent = context[TAG];
- if (parent !== undefined) {
- parentEffects = parent.effects;
- parentState = parent.state;
- parentStateKeys = parent.stateKeys;
- }
- }
-
- const completeState = (this._state = seal(
- create(parentState, stateDescriptors)
- ));
- const completeStateKeys = (this._stateKeys = keys(stateDescriptors));
+ if (value == null) {
+ break;
+ }
- this._resetState = () => {
- state = initialState(this.props);
- dispatch();
- return Promise.resolve();
- };
+ if (typeof value.then === "function") {
+ promise = value;
+ value = undefined;
+
+ // rejections are explicitly not handled
+ const p = promise;
+ promise.then(v => {
+ if (promise === p) {
+ promise = undefined;
+ value = v;
+ this.forceUpdate();
+ }
+ });
+ }
+ } while (false);
- parentStateKeys.forEach(k => {
- if (!(k in stateDescriptors)) {
- completeStateKeys.push(k);
- }
+ return value;
+ },
+ };
});
+ }
- let effectsDescriptors;
- if (effects !== undefined) {
- const writableState = seal(create(null, writableStateDescriptors));
+ const stateProxy = seal(create(null, stateProxyDescriptors));
- const setState = newState => {
- if (newState == null) {
- return;
- }
+ const resetState = () => {
+ // TODO: check new state has the same keys
+ state = initialState(this.props);
+ this.forceUpdate();
- if (typeof newState === "function") {
- return setState(newState(completeState, this.props));
- }
-
- const { then } = newState;
- if (typeof then === "function") {
- return then.call(newState, setState);
- }
+ return Promise.resolve();
+ };
- Object.keys(newState).forEach(key => {
- if (!Object.prototype.hasOwnProperty.call(state, key)) {
- throw new InvalidEntryError(key);
- }
- });
- state = { ...state, ...newState };
- dispatch();
- };
+ let wrappedEffects;
+ if (effectsKeys.length === 0) {
+ wrappedEffects = EMPTY_O;
+ } else {
+ const descriptors = {};
+ effectsKeys.forEach(key => {
+ const effect = effects[key];
- effectsDescriptors = create(null);
- keys(effects).forEach(k => {
- const e = effects[k];
- const wrappedEffect = (...args) => {
+ descriptors[key] = {
+ value: function() {
try {
- return Promise.resolve(
- setState(
- e.call(
- seal({
- effects: this._effects,
- props: this.props,
- resetState: this._resetState,
- state: writableState,
- }),
- this._effects,
- ...args
- )
- )
+ return Promise.resolve(effect.apply(store, arguments)).then(
+ noop
);
} catch (error) {
return Promise.reject(error);
}
- };
+ },
+ };
+ });
+ wrappedEffects = seal(create(null, descriptors));
+
+ const stateProxyDescriptors = {};
+ stateKeys.forEach(key => {
+ stateProxyDescriptors[key] = {
+ get: () => state[key],
+ set: value => {
+ state[key] = value;
+ this.forceUpdate();
+ },
+ };
+ });
- // this special effects are not callable manually and not inheritable
- if (k === "initialize" || k === "finalize") {
- this[k] = wrappedEffect;
- } else {
- effectsDescriptors[k] = {
- enumerable: true,
- value: wrappedEffect,
- };
+ const store = seal(
+ defineProperty(
+ {
+ effects: wrappedEffects,
+ resetState,
+ state: seal(create(stateProxy, stateProxyDescriptors)),
+ },
+ "props",
+ {
+ get: () => this.props,
}
- });
- }
- this._effects = seal(create(parentEffects, effectsDescriptors));
+ )
+ );
}
- _unsubscribe = noop;
-
- componentDidMount() {
- const parent = this.context[TAG];
- if (parent !== undefined) {
- this._unsubscribe = parent.subscribe(this._dispatch);
- }
-
- const { initialize } = this;
- if (initialize !== undefined) {
- initialize();
- }
- }
-
- componentDidUpdate() {
- this._dispatch();
- }
-
- componentWillUnmount() {
- const { finalize } = this;
- if (finalize !== undefined) {
- finalize();
- }
-
- this._unsubscribe();
- this._unsubscribe = noop;
- }
-
- getChildContext() {
- return {
- [TAG]: {
- effects: this._effects,
- resetState: this._resetState,
- state: this._state,
- stateKeys: this._stateKeys,
- subscribe: this._subscribe,
- },
- };
- }
-
- render() {
- return createElement(ChildComponent, this.props);
- }
+ this._store = seal({
+ effects: wrappedEffects,
+ resetState,
+ state: stateProxy,
+ });
}
- if (ChildComponent === undefined) {
- const stateProvider = new StateProvider({}, {});
- return {
- getState: () => stateProvider._state,
- effects: stateProvider._effects,
- };
+ render() {
+ return fn(this._store, this.props);
}
- return StateProvider;
};
- return wrapComponentWithState;
- };
-
- return { injectState, provideState };
+ }
+ return { withStore };
};
diff --git a/src/index.js b/src/index.js
index 58952c3..9812290 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1 +1,3 @@
+"use strict";
+
module.exports = require("./factory")(require("react"));
diff --git a/src/index.spec.js b/src/index.spec.js
index dbc73d9..ef80912 100644
--- a/src/index.spec.js
+++ b/src/index.spec.js
@@ -1,120 +1,255 @@
+"use strict";
+
/* eslint-env jest */
-import CircularComputedError from "./_CircularComputedError";
-import InvalidEntryError from "./_InvalidEntryError";
-require("raf/polyfill");
+const assert = require("assert");
const { createElement } = require("react");
-const { configure, mount } = require("enzyme");
+const { configure, mount, shallow } = require("enzyme");
-const { injectState, provideState } = require("./");
+const CircularComputedError = require("./_CircularComputedError");
+const { withStore } = require("./");
configure({ adapter: new (require("enzyme-adapter-react-16"))() });
const makeTestInstance = (opts, props) => {
let renderCount = 0;
- const Child = () => {
- ++renderCount;
- return null;
- };
+ let renderArgs;
const parent = mount(
createElement(
- provideState({
- ...opts,
- effects: {
- ...opts.effects,
- _setState: (_, props) => _ => props,
+ withStore(
+ {
+ ...opts,
+ effects: {
+ ...opts.effects,
+ _setState(props) {
+ Object.assign(this.state, props);
+ },
+ },
},
- })(injectState(Child)),
+ (...args) => {
+ ++renderCount;
+ renderArgs = args;
+ return null;
+ }
+ ),
props
)
);
- const child = parent.find(Child);
return {
- effects: child.prop("effects"),
- getInjectedState: () => child.prop("state"),
- getParentState: () => parent.instance()._state,
+ effects: renderArgs[0].effects,
getParentProps: () => parent.instance().props,
+ getRenderArgs: () => renderArgs,
getRenderCount: () => renderCount,
- resetState: child.prop("resetState"),
+ getState: () => renderArgs[0].state,
setParentProps: parent.setProps.bind(parent),
};
};
-const noop = () => {};
+const ownProps = Object.getOwnPropertyNames;
-describe("provideState", () => {
- describe("initialState", () => {
- it("is called with the props to create the initial state", () => {
- const props = { bar: "baz" };
- expect(
- makeTestInstance(
- {
- initialState: (...args) => {
- expect(args).toEqual([props]);
- return { foo: "bar" };
+const isReadOnly = object =>
+ !Object.isExtensible(object) &&
+ ownProps(object).every(name => {
+ const descriptor = Object.getOwnPropertyDescriptor(object, name);
+ return (
+ !descriptor.configurable &&
+ (descriptor.set === undefined || !descriptor.writable)
+ );
+ });
+
+describe("withStore", () => {
+ describe("render function", () => {
+ it("receives readOnly store and props", async () => {
+ const _props = { bar: "baz" };
+ const { getRenderArgs } = makeTestInstance(
+ {
+ initialState: () => ({ myEntry: "bar" }),
+ effects: {
+ myEffect() {
+ this.state.myEntry = "baz";
},
},
- props
- ).getInjectedState()
- ).toEqual({ foo: "bar" });
+ },
+ _props
+ );
+
+ const renderArgs = getRenderArgs();
+
+ const store = renderArgs[0];
+ assert(isReadOnly(store));
+
+ const { effects, resetState, state } = store;
+
+ assert(isReadOnly(effects));
+ expect(ownProps(effects)).toEqual(["myEffect", "_setState"]);
+
+ expect(typeof resetState).toBe("function");
+
+ assert(isReadOnly(state));
+ expect(ownProps(state)).toEqual(["myEntry"]);
+
+ const props = renderArgs[1];
+ assert(isReadOnly(props));
+ expect(ownProps(props)).toEqual(["bar"]);
+ });
+
+ it("returns the React tree to render", () => {
+ const wrapper = shallow(
+ createElement(withStore({}, () => createElement("h1")))
+ );
+ expect(wrapper.getElement()).toEqual(createElement("h1"));
});
});
- describe("resetState", () => {
- it("is called to reset the state to its initial values in effects", async () => {
- const props = { bar: "baz" };
- const { effects, getInjectedState } = makeTestInstance(
+ describe("computed", () => {
+ it("receive read-only state and props", () => {
+ const props = { qux: "qux" };
+ const { getState } = makeTestInstance(
{
initialState: () => ({
- foo: "bar",
+ foo: "foo",
}),
- effects: {
- changeState(_, value) {
- return { foo: value };
- },
- async reset() {
- await this.resetState();
+ computed: {
+ bar: () => "bar",
+ baz(state, props) {
+ assert(isReadOnly(state));
+ assert(isReadOnly(props));
+
+ expect(state.foo).toBe("foo");
+ expect(state.bar).toBe("bar");
+ expect(props.qux).toBe("qux");
+
+ return "baz";
},
},
},
props
);
- await effects.changeState("foo");
- expect(getInjectedState()).toEqual({ foo: "foo" });
- await effects.reset();
- expect(getInjectedState()).toEqual({ foo: "bar" });
+
+ expect(getState().baz).toBe("baz");
+ });
+
+ it("cannot access itself", () => {
+ const { getState } = makeTestInstance({
+ computed: {
+ circular: ({ circular }) => {},
+ },
+ });
+
+ expect(() => getState().circular).toThrow(CircularComputedError);
+ });
+
+ it("are not called when its state/props dependencies do not change", async () => {
+ const sum = jest.fn(({ a }, { b }) => a + b);
+ const props = { b: 2, c: 9 };
+ const { effects, getState, setParentProps } = makeTestInstance(
+ {
+ initialState: () => ({ a: 1, d: 4 }),
+ computed: {
+ sum,
+ },
+ },
+ props
+ );
+
+ expect(getState().sum).toBe(3);
+ expect(sum.mock.calls.length).toBe(1);
+
+ setParentProps({ c: 8 });
+ await effects._setState({ d: 8 });
+
+ expect(getState().sum).toBe(3);
+ expect(sum.mock.calls.length).toBe(1);
});
- it("is called to reset the state to its initial values in child", async () => {
- const props = { bar: "baz" };
- const { effects, getInjectedState, resetState } = makeTestInstance(
+ it("is called when its state/props dependencies change", async () => {
+ const sum = jest.fn(({ a }, { b }) => a + b);
+ const props = { b: 2, c: 9 };
+ const { effects, getState, setParentProps } = makeTestInstance(
{
- initialState: () => ({
- foo: "bar",
- }),
- effects: {
- changeState(_, value) {
- return { foo: value };
- },
+ initialState: () => ({ a: 1, d: 4 }),
+ computed: {
+ sum,
},
},
props
);
- await effects.changeState("foo");
- expect(getInjectedState()).toEqual({ foo: "foo" });
- await resetState();
- expect(getInjectedState()).toEqual({ foo: "bar" });
+ expect(getState().sum).toBe(3);
+ expect(sum.mock.calls.length).toBe(1);
+
+ await effects._setState({ a: 2 });
+
+ expect(getState().sum).toBe(4);
+ expect(sum.mock.calls.length).toBe(2);
+
+ setParentProps({ b: 3 });
+
+ expect(getState().sum).toBe(5);
+ expect(sum.mock.calls.length).toBe(3);
+ });
+
+ describe("async", () => {
+ let promise, resolve;
+ const reset = () => {
+ // eslint-disable-next-line promise/param-names
+ promise = new Promise(resolve_ => {
+ resolve = resolve_;
+ });
+ };
+
+ let getState, setParentProps;
+ beforeEach(() => {
+ ({ getState, setParentProps } = makeTestInstance(
+ {
+ computed: { value: (_, { foo }) => promise },
+ },
+ { foo: 1 }
+ ));
+ });
+
+ it("returns undefined before fulfilment then fulfilment value", async () => {
+ reset();
+
+ expect(getState().value).toBe(undefined);
+
+ resolve("foo");
+ await promise;
+
+ expect(getState().value).toBe("foo");
+ });
+
+ it("follows the latest computation when dependencies change", async () => {
+ // trigger computed
+ reset();
+ expect(getState().value).toBe(undefined);
+
+ const prevPromise = promise;
+ const prevResolve = resolve;
+
+ reset();
+ setParentProps({ foo: 2 });
+ expect(getState().value).toBe(undefined);
+
+ prevResolve("foo");
+ await prevPromise;
+
+ expect(getState().value).toBe(undefined);
+
+ resolve("baz");
+ await promise;
+
+ expect(getState().value).toBe("baz");
+ });
});
});
describe("effects", () => {
- it("are called with other effects followed by arguments", () => {
+ it("receives the passed arguments", () => {
const args = ["bar", "baz"];
const { effects } = makeTestInstance({
effects: {
- foo: (first, ...rest) => {
- expect(first).toBe(effects);
+ foo(...rest) {
expect(rest).toEqual(args);
},
},
@@ -122,188 +257,116 @@ describe("provideState", () => {
return effects.foo(...args);
});
- it("are called with effects, props and state in context", () => {
+ it("are called with read-only effects and props and resetState and writable state in context", () => {
const { effects, getParentProps } = makeTestInstance({
- initialState: () => ({ foo: "bar" }),
+ initialState: () => ({ myEntry: "bar" }),
effects: {
- foo() {
- expect(this.effects).toBe(effects);
+ async myEffect() {
+ assert(isReadOnly(this));
+
+ assert(isReadOnly(this.effects));
+ expect(ownProps(this.effects)).toEqual(["myEffect", "_setState"]);
+
+ expect(ownProps(this.state)).toEqual(["myEntry"]);
+ expect(this.state.myEntry).toBe("bar");
+ this.state.myEntry = "baz";
+ expect(this.state.myEntry).toBe("baz");
+
+ await this.resetState();
+ expect(this.state.myEntry).toBe("bar");
+
+ assert(isReadOnly(this.props));
expect(this.props).toBe(getParentProps());
- expect(this.state).toEqual({ foo: "bar" });
},
},
});
- return effects.foo();
+ return effects.myEffect();
});
- it("always returns a Promise to undefined", () => {
+ it("can use other effects", () => {
const { effects } = makeTestInstance({
+ initialState: () => ({ qux: "qux" }),
effects: {
- foo: () => {},
+ async foo() {
+ await this.effects.bar();
+ expect(this.state.qux).toBe("fred");
+ },
+ bar() {
+ this.state.qux = "fred";
+ },
},
});
- return effects.foo().then(value => {
- expect(value).toBe(undefined);
- });
+ return effects.foo();
});
- it("throws if an invalid state entry is assigned", () => {
+ it("cannot set new state entries", () => {
const { effects } = makeTestInstance({
initialState: () => ({}),
effects: {
- foo() {
- return { qux: 3 };
+ myEffect() {
+ assert(!Object.isExtensible(this.state));
},
},
});
-
- return expect(effects.foo()).rejects.toThrowError(
- new InvalidEntryError("qux")
- );
+ return effects.myEffect();
});
- it("sync state changes are batched", async () => {
- const { effects, getInjectedState, getRenderCount } = makeTestInstance({
- initialState: () => ({ foo: 0 }),
+ it("cannot set computed entries", () => {
+ const { effects } = makeTestInstance({
effects: {
- foo() {
- this.state.foo = 1;
- this.state.foo = 2;
+ myEffect() {
+ expect(() => {
+ this.state.foo = "bar";
+ }).toThrow(TypeError);
+ expect(this.state.foo).toBe("foo");
},
},
- });
-
- expect(getRenderCount()).toBe(1);
-
- // access this state to make sure children is rerendered when it changes
- expect(getInjectedState().foo).toBe(0);
-
- await effects.foo();
-
- expect(getRenderCount()).toBe(2);
- });
- });
-
- describe("computed", () => {
- const sum = jest.fn(({ foo }, { bar }) => foo + bar);
- const circularComputed = jest.fn(({ circularComputed }) => {});
- const throwComputed = jest.fn((_, { baz }) => {
- if (baz > 20) {
- throw new Error("Not supported value");
- }
- return baz * 2;
- });
- const { effects, getInjectedState, setParentProps } = makeTestInstance(
- {
- initialState: () => ({ foo: 1, qux: 2 }),
computed: {
- sum,
- circularComputed,
- throwComputed,
+ foo: () => "foo",
},
- },
- { bar: 3, baz: 4 }
- );
-
- it("is not computed before access", () => {
- getInjectedState();
- expect(sum).not.toHaveBeenCalled();
- });
-
- it("returns the result of the computation", () => {
- expect(getInjectedState().sum).toBe(4);
- expect(sum).toHaveBeenCalledTimes(1);
- });
-
- it("is not recomputed when its inputs do not change ", () => {
- setParentProps({ baz: 5 });
- return effects._setState({ qux: 3 }).then(() => {
- noop(getInjectedState().sum);
- expect(sum).toHaveBeenCalledTimes(1);
});
+ return effects.myEffect();
});
- it("is recomputed when its state inputs change", () => {
- return effects._setState({ foo: 2 }).then(() => {
- expect(getInjectedState().sum).toBe(5);
- expect(sum).toHaveBeenCalledTimes(2);
+ it("can be async", async () => {
+ let resolve;
+ // eslint-disable-next-line promise/param-names
+ const promise = new Promise(resolve_ => {
+ resolve = resolve_;
});
- });
+ const { effects, getState } = makeTestInstance({
+ initialState: () => ({ qux: 0 }),
+ effects: {
+ async foo() {
+ ++this.state.qux;
- it("is recomputed when its props inputs change", () => {
- setParentProps({ bar: 4 });
- expect(getInjectedState().sum).toBe(6);
- expect(sum).toHaveBeenCalledTimes(3);
- });
+ // signal the caller that we have made the first change
+ resolve();
- it("throws when a computed calls its self", () => {
- expect(() => {
- return getInjectedState().circularComputed;
- }).toThrowError(new CircularComputedError("circularComputed"));
- });
+ // wait for the caller to make us continue
+ //
+ // eslint-disable-next-line promise/param-names
+ await new Promise(resolve_ => {
+ resolve = resolve_;
+ });
- it("throws when a computed is defined both in state and computed", () => {
- expect(() => {
- makeTestInstance({
- initialState: () => ({ foo: 0 }),
- computed: {
- foo: () => {},
+ ++this.state.qux;
},
- });
- }).toThrowError(
- new TypeError(`conflict: "foo" is defined both in state and computed`)
- );
- });
-
- it("returns undefined when a computed throws on the first call", () => {
- setParentProps({ baz: 21 });
- const res = getInjectedState().throwComputed;
- expect(res).toBe(undefined);
- });
-
- it("returns previous value when a computed throws", () => {
- setParentProps({ baz: 5 });
- expect(getInjectedState().throwComputed).toBe(10);
- setParentProps({ baz: 21 });
- expect(getInjectedState().throwComputed).toBe(10);
- });
-
- it("can returns a promise", async () => {
- let promise, resolve;
- const reset = () => {
- // eslint-disable-next-line promise/param-names
- promise = new Promise(resolve_ => {
- resolve = resolve_;
- });
- };
- reset();
-
- const { getInjectedState, setParentProps } = makeTestInstance(
- {
- computed: { value: (_, { foo }) => promise },
},
- { foo: 1 }
- );
-
- // trigger a first computation
- expect(getInjectedState().value).toBe(undefined);
-
- const prevPromise = promise;
- const prevResolve = resolve;
+ });
- // trigger a second computation
- reset();
- setParentProps({ foo: 2 });
- expect(getInjectedState().value).toBe(undefined);
+ const pFoo = effects.foo();
- // resolve them in reverse order
- resolve("bar");
+ // wait for foo to have done the first change
await promise;
- prevResolve("foo");
- await prevPromise;
+ expect(getState().qux).toBe(1);
+
+ // unlock foo
+ resolve();
- // the last computation should win
- expect(getInjectedState().value).toBe("bar");
+ // wait for foo to be finished
+ await pFoo;
+ expect(getState().qux).toBe(2);
});
});
});