Add DakpanProvider component

src/DakpanProvider.test.tsx

@@ -0,0 +1,36 @@
+import { mount } from 'enzyme';
+import * as React from 'react';
+
+import { createDakpan } from './createDakpan';
+import { DakpanProvider } from './DakpanProvider';
+
+it('provides multiple dakpan states', () => {
+  const { Provider: FirstProvider } = createDakpan({
+    hello: 'world'
+  })({
+    append: (append: string) => ({ hello }) => ({
+      hello: `${hello}${append}`
+    })
+  });
+
+  const { Provider: SecondProvider, Consumer: SecondConsumer, actions: secondActions } = createDakpan({
+    test: 0
+  })({
+    increment: () => ({ test }) => ({
+      test: test + 1
+    })
+  });
+
+  const wrapper = mount(
+    <DakpanProvider provide={[FirstProvider, SecondProvider]}>
+      <SecondConsumer>
+        {({ test }) => (
+          <span>{test}</span>
+        )}
+      </SecondConsumer>
+    </DakpanProvider>
+  );
+
+  expect(secondActions.increment).not.toThrow();
+  expect(wrapper.update()).toMatchSnapshot();
+});

src/DakpanProvider.ts

@@ -0,0 +1,7 @@
+import { createElement, ReactElement } from 'react';
+
+import { DakpanMultiProviderProps } from './types';
+
+export const DakpanProvider = ({ provide, children }: DakpanMultiProviderProps) => (
+  provide.reduce((previous, current) => createElement(current, { children: previous }), children as ReactElement<any>)
+);

src/__snapshots__/DakpanProvider.test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`provides multiple dakpan states 1`] = `
+<Component
+  provide={
+    Array [
+      [Function],
+      [Function],
+    ]
+  }
+>
+  <Provider>
+    <Provider>
+      <Consumer>
+        <span>
+          1
+        </span>
+      </Consumer>
+    </Provider>
+  </Provider>
+</Component>
+`;

src/index.ts

@@ -1 +1,2 @@
 export { createDakpan } from './createDakpan';
+export { DakpanProvider } from './DakpanProvider';

src/types.ts

@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode } from 'react';
+import { ComponentType, ReactElement, ReactNode } from 'react';
 
 export type DakpanProviderProps = {
   children: ReactNode
@@ -8,6 +8,11 @@ export type DakpanConsumerProps<S, A extends Actions<S>> = {
   children: (state: S, actions: MappedActions<S, A>) => ReactNode
 };
 
+export type DakpanMultiProviderProps = {
+  provide: Array<ComponentType<DakpanProviderProps>>,
+  children: ReactNode
+};
+
 export type Actions<S> = {
   [action: string]: Action<S>
 };
@@ -52,9 +57,3 @@ export type SetState<S, P> = <K extends keyof S>(
 export type ProviderCallback<S> = (getState?: GetState<S>, setState?: SetState<S, DakpanProviderProps>) => void;
 
 export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
-
-export type WithDakpan<S, A extends Actions<S>> = <H>(
-  map: (state: S, actions: MappedActions<S, A>) => H,
-) => <P>(
-  component: ComponentType<P & H>
-) => ComponentType<Omit<P, keyof H>>;

tslint.json

@@ -15,6 +15,15 @@
     "no-console": false,
     "no-shadowed-variable": false,
     "object-literal-sort-keys": false,
+    "ordered-imports": [
+      true,
+      {
+        "grouped-imports": true,
+        "import-sources-order": "case-insensitive",
+        "named-imports-order": "case-insensitive",
+        "module-source-path": "full"
+      }
+    ],
     "trailing-comma": [
       true,
       "never"