Merge eac224e into 07dfeec

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "printWidth": 120,
+  "parser": "typescript",
+  "trailingComma": "es5"
+}

README.md

@@ -28,12 +28,21 @@ import { connectContext } from "react-connect-context"
 // CHANGE ME TO CHANGE THE CONTEXT FOR THE WHOLE APP!
 const COLOR_PASSED_THROUGH_CONTEXT = "red"
 
+interface ContextValue {
+    color: string;
+}
+
+interface ContentProps {
+    myProp: string;
+    color: string;
+}
+
 class App extends React.Component {
   render() {
     return (
       <div className="demo">
         <Header>Welcome to my App!</Header>
-        <ConnectedContent myProp="THIS IS MY PROP, HI!">
+        <ConnectedContent myProp="THIS IS MY PROP, HI!" >
           Hello! I've written this component so that Magical Context-based text appears after children!
         </ConnectedContent>
       </div>
@@ -42,25 +51,24 @@ class App extends React.Component {
 }
 
 // Presentational, nested components
-const Header = ({ children }) => <h1>{children}</h1>
-const Content = ({ children, color, myProp }) => (
+const Header: React.SFC = ({ children }) => <h1>{children}</h1>
+const Content: React.SFC<ContentProps> = ({ children, color, myProp }) => (
   <div>
     <p>{children}</p>
     <div>
       I have looked into context and I've seen the color is:
       <span style={{ color }}>
-        {" "}
         <strong>{color}</strong>
       </span>! I also get my own props like <strong>{myProp}</strong>!
     </div>
   </div>
 )
 
 // Make a context.
-const Context = React.createContext({ color: "red" })
+const Context = React.createContext<ContextValue>({ color: "red" })
 
 // Pass the consumer to our function.
-const ConnectedContent = connectContext(Context.Consumer)(Content)
+const ConnectedContent = connectContext<ContextValue, ContentProps>(Context.Consumer)(Content)
 
 // Render things, wrapping all in the provider.
 render(

__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`connectContext Should use the custom mergeContextWithProps function if provided 1`] = `
+<div>
+  <p>
+    Sup my frand
+  </p>
+  <div>
+    I have looked into context and I've seen the color is: 
+    green
+    I also get my own props like 
+    sup
+    !
+  </div>
+</div>
+`;
+
+exports[`connectContext should map context to props while preserving existing props 1`] = `
+<div>
+  <div>
+    <p>
+      Hello
+    </p>
+    <div>
+      I have looked into context and I've seen the color is: 
+      green
+      I also get my own props like 
+      test
+      !
+    </div>
+  </div>
+</div>
+`;

__tests__/index.test.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import renderer from "react-test-renderer"
+import { connectContext, MergeContextWithProps } from "../"
+import "jest"
+
+interface ContentProps {
+  color: string
+  myProp: string
+}
+
+interface ContextValue {
+  color: string
+}
+
+const Context = React.createContext<ContextValue>({ color: "red" })
+const Content: React.SFC<ContentProps> = ({ children, color, myProp }) => (
+  <div>
+    <p>{children}</p>
+    <div>
+      I have looked into context and I've seen the color is: {color}
+      I also get my own props like {myProp}!
+    </div>
+  </div>
+)
+
+describe("connectContext", () => {
+  it("should map context to props while preserving existing props", () => {
+    const ConnectedContent = connectContext<ContextValue, ContentProps>(
+      Context.Consumer
+    )(Content)
+
+    const App = () => (
+      <div>
+        <ConnectedContent myProp="test">Hello</ConnectedContent>
+      </div>
+    )
+
+    const tree = renderer
+      .create(
+        <Context.Provider value={{ color: "green" }}>
+          <App />
+        </Context.Provider>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+  it("Should use the custom mergeContextWithProps function if provided", () => {
+    const mergeContextWithProps: MergeContextWithProps<
+      ContextValue,
+      ContentProps
+    > = (context, props) => {
+      return ({ ...props, ...context })
+    }
+
+    const ConnectedContent = connectContext(
+      Context.Consumer,
+      mergeContextWithProps
+    )(Content)
+
+    const AppWithPropsConflict = () => (
+      <ConnectedContent myProp="sup" color="red">
+        Sup my frand
+      </ConnectedContent>
+    )
+
+    const tree = renderer
+      .create(
+        <Context.Provider value={{ color: "green" }}>
+          <AppWithPropsConflict />
+        </Context.Provider>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+})

index.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+export type MergeContextWithProps<C, P> = (context: C, props: P) => C & P;
+
+function defaultMergeFn<C, P>(context: C, props: P): C & P {
+  return Object.assign({}, context, props);
+}
+
+type Merge<L, R> = 
+  /** Mandatory properties */
+  Pick<L, Exclude<keyof L, keyof R>>
+  /** Optional properties */
+  & Partial<R>
+
+export function connectContext<C, P>(
+  ContextConsumer: React.Consumer<C>,
+  mergeContextWithProps: MergeContextWithProps<C, P> = defaultMergeFn
+) {
+  return function(Component: React.SFC<P>) {
+    return function(props: Merge<P, C>) {
+      // TODO remove `as any` when is available in the react typing definition
+      if (!(ContextConsumer as any).currentValue as any instanceof Object) {
+        throw new Error(
+          `react-connect-context: the current value of the given context identifier is _not_ an object,
+        and therefore cannot be passed as props to ${
+          Component.name
+        }. Please check the value in the context
+        and try again.
+
+        More info: https://github.com/Contiamo/react-connect-context#gotchas`
+        );
+      }
+      return (
+        <ContextConsumer>
+          {context => <Component {...mergeContextWithProps(context, props as P)} />}
+        </ContextConsumer>
+      );
+    };
+  };
+}

package.json

@@ -1,11 +1,12 @@
 {
   "name": "react-connect-context",
   "version": "1.0.2",
-  "main": "lib/bundle.js",
-  "license": "MIT",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
   "files": [
-    "lib/bundle.js"
+    "lib/*"
   ],
+  "license": "MIT",
   "author": "Tejas Kumar <tejas@contiamo.com>",
   "repository": {
     "url": "git@github.com:Contiamo/react-connect-context.git"
@@ -18,20 +19,34 @@
   },
   "scripts": {
     "test": "jest",
-    "build": "jest && rollup index.js -c",
+    "build": "rimraf lib && tsc -d",
     "ci": "jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
-    "prepublish": "npm run build"
+    "prepublish": "jest && npm run build"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-jest": "^22.4.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
+    "@types/jest": "^22.2.3",
+    "@types/react": "^16.3.13",
+    "@types/react-dom": "^16.0.5",
+    "@types/react-test-renderer": "^16.0.1",
     "coveralls": "^3.0.0",
     "jest": "^22.4.0",
     "react-test-renderer": "^16.3.0-alpha.1",
     "regenerator-runtime": "^0.11.1",
-    "rollup": "^0.56.2",
-    "rollup-plugin-babel": "^3.0.3"
+    "rimraf": "^2.6.2",
+    "ts-jest": "^22.4.4",
+    "typescript": "^2.8.3"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ],
+    "transform": {
+      "^.+\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+    },
+    "testMatch": [
+      "**/__tests__/*.+(ts|tsx|js)"
+    ]
   }
 }