[WIP] Make `to` in `<Subscribe>` support `Container` instances

README.md

@@ -219,7 +219,7 @@ Next we'll need a piece to introduce our state back into the tree so that:
* We can call methods on our container.

For this we have the `<Subscribe>` component which allows us to pass our
container classes and receive instances of them in the tree.
container classes/instances and receive instances of them in the tree.

```js
function Counter() {

__tests__/unstated.tsx

@@ -69,6 +69,25 @@ function CounterWithAmountApp() {
  );
}

const sharedAmountContainer = new AmountContainer();
function CounterWithSharedAmountApp() {
    <Subscribe to={[sharedAmountContainer]}>
      {(amounter: AmounterContainer) => (
        <div>
          <Counter />
          <input
            type="number"
            value={amounter.state.amount}
            onChange={event => {
              amounter.setAmount(parseInt(event.currentTarget.value, 10));
            }}
          />
        </div>
      )}
    </Subscribe>
  );
}

let counter = new CounterContainer();
let render = () => (
  <Provider inject={[counter]}>

example/index.html

@@ -12,5 +12,9 @@ <h3>Simple</h3>
    <h3>Complex</h3>
    <div id="complex"></div>
    <script type="text/javascript" src="./complex.js"></script>

    <h3>Shared</h3>
    <div id="shared"></div>
    <script type="text/javascript" src="./shared.js"></script>
  </body>
</html>

example/shared.js

@@ -0,0 +1,43 @@
// @flow
import React from 'react';
import { render } from 'react-dom';
import { Provider, Subscribe, Container } from '../src/unstated';

type CounterState = {
  count: number
};

class CounterContainer extends Container<CounterState> {
  state = { count: 0 };

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  decrement() {
    this.setState({ count: this.state.count - 1 });
  }
}

const sharedCounterContainer = new CounterContainer();

function Counter() {
  return (
    <Subscribe to={[sharedCounterContainer]}>
      {counter => (
        <div>
          <button onClick={() => counter.decrement()}>-</button>
          <span>{counter.state.count}</span>
          <button onClick={() => sharedCounterContainer.increment()}>+</button>
        </div>
      )}
    </Subscribe>
  );
}

render(
  <Provider>
    <Counter />
  </Provider>,
  window.shared
);

src/unstated.js

@@ -24,12 +24,14 @@ export class Container<State: {}> {
}

export type ContainerType = Container<Object>;
export type ContainersType = Array<Class<ContainerType>>;
export type ContainersType = Array<Class<ContainerType> | ContainerType>;
export type ContainerMapType = Map<Class<ContainerType>, ContainerType>;

export type SubscribeProps<Containers: ContainersType> = {
  to: Containers,
  children: (...instances: $TupleMap<Containers, <C>(Class<C>) => C>) => Node
  children: (
    ...instances: $TupleMap<Containers, <C>(Class<C> | C) => C>
  ) => Node
};

type SubscribeState = {};
@@ -75,12 +77,26 @@ export class Subscribe<Containers: ContainersType> extends React.Component<
    }

    let safeMap = map;
    let instances = containers.map(Container => {
      let instance = safeMap.get(Container);
    let instances = containers.map(ContainerItem => {
      let instance: ContainerType;

      if (
        typeof ContainerItem === 'object' &&
        ContainerItem instanceof Container
      ) {
        instance = ContainerItem;

        let Class = instance.constructor;
        if (!safeMap.has(Class)) {
          safeMap.set(Class, instance);
        }
      } else {
        instance = (safeMap.get(ContainerItem): any);

      if (!instance) {
        instance = new Container();
        safeMap.set(Container, instance);
        if (!instance) {
          instance = new ContainerItem();
          safeMap.set(ContainerItem, instance);
        }
      }

      instance.unsubscribe(this.onUpdate);