feat: add <State> component

Author: streamich

src/State/__tests__/index.test-server.tsx

@@ -0,0 +1,17 @@
+import {createElement as h} from 'react';
+import {renderToStaticMarkup} from 'react-dom/server';
+import {expect} from 'chai';
+import {State} from '..';
+
+describe('<State> SSR', () => {
+  it('renders without crashing with the expected value', () => {
+    const html = renderToStaticMarkup(h(State, {
+      init: {
+        foo: 'bar'
+      },
+      render: ({foo}) => <div>{foo}</div>
+    }));
+
+    expect(html).to.equal('<div>bar</div>');
+  });
+});

src/State/__tests__/index.test.tsx

@@ -0,0 +1,79 @@
+import {h} from '../../util';
+import {mount} from 'enzyme';
+import {State} from '..';
+
+describe('<State>', () => {
+  it('is a component', () => {
+    expect(State).toBeInstanceOf(Function);
+  });
+
+  it('can set initial state object', () => {
+    const wrapper = mount(h(State, {
+      init: {
+        foo: 'bar',
+        baz: 'bazoooka'
+      }
+    }, (state) => {
+      expect(state).toEqual({
+        foo: 'bar',
+        baz: 'bazoooka'
+      });
+
+      expect(() => {
+        expect(state).toEqual({
+          foo: 'bar',
+        });
+      }).toThrow();
+
+      return null;
+    }));
+  });
+
+  it('uses render prop', () => {
+    const wrapper = mount(h(State, {
+      init: {
+        foo: 'bar',
+        baz: 'bazoooka'
+      },
+      render: (state) => {
+        expect(state).toEqual({
+          foo: 'bar',
+          baz: 'bazoooka'
+        });
+
+        expect(() => {
+          expect(state).toEqual({
+            foo: 'bar',
+          });
+        }).toThrow();
+
+        return null;
+      }
+    }));
+  });
+
+  describe('setState()', () => {
+    it('can change state', () => {
+      const foos = [];
+      let setState;
+
+      const wrapper = mount(<State
+        init={{
+          foo: 'bar'
+        }}
+        render={({foo}, set) => {
+          foos.push(foo);
+          setState = set;
+
+          return null;
+        }}
+      />);
+
+      setState({
+        foo: 'baz'
+      });
+
+      expect(foos).toEqual(['bar', 'baz']);
+    })
+  });
+});

src/State/index.ts

@@ -0,0 +1,33 @@
+import {Component} from 'react';
+import {noop} from '../util';
+import renderProp from '../util/renderProp';
+
+export interface IStateProps {
+  children?: (state: IStateState, setState?) => React.ReactElement<any>;
+  init: object,
+  onChange?: (state: any) => void;
+  render?: (state: any, setState?) => void;
+}
+
+export interface IStateState {
+
+}
+
+export class State extends Component<IStateProps, IStateState> {
+  static defaultProps = {
+    onChange: noop
+  };
+
+  state: IStateState;
+
+  constructor (props, context) {
+    super(props, context);
+
+    this.state = props.init;
+    this.setState = this.setState.bind(this);
+  }
+
+  render () {
+    return renderProp(this.props, this.state, this.setState);
+  }
+}