HOContext creator added, config updated to split bundles for tree shaking support, README updated.

Author: todesstoss

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["@babel/preset-env"]
-}
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+}

README.md

@@ -17,30 +17,21 @@ yarn add create-use-context
 ## Usage
 
 ```javascript
-import React, { useState } from 'react';
+import React, { Component, useState } from 'react';
 
-import createUseContext from 'create-use-context';
+import { createUseContext, createWithContext } from 'create-use-context';
 
-const [
-  MyContext,
-  MyContextProvider,
-  MyContextConsumer,
-  useMyContext,
-] = createUseContext((Provider) => ({ children }) => {
+const {
+  Context: MyContext,
+  ContextProvider: MyContextProvider,
+  ContextConsumer: MyContextConsumer,
+  useContext: useMyContext,
+} = createUseContext((Provider) => ({ children }) => {
   const [counter, setCounter] = useState(0);
 
   return <Provider value={{ counter, setCounter }}>{children}</Provider>;
 });
 
-function App() {
-  return (
-    <MyContextProvider>
-      <ComponentWithHook />
-      <ComponentWithConsumer />
-    </MyContextProvider>
-  );
-}
-
 function ComponentWithHook() {
   const { counter, setCounter } = useMyContext();
 
@@ -71,5 +62,40 @@ function ComponentWithConsumer() {
   );
 }
 
+// You might also need a High Order Component to wrap your class Components
+// if you don't line Render Prop pattern with a Consumer Component.
+
+// So you can use `createWithContext` helper function:
+
+const withMyContext = createWithContext(MyContext, 'my');
+
+class ClassComponent extends Component {
+  render() {
+    const { counter, setCounter } = this.props.my;
+
+    return (
+      <button
+        onClick={() => {
+          setCounter(counter + 1);
+        }}
+      >
+        {counter} - add one
+      </button>
+    );
+  }
+}
+
+const ClassCompoenntWithHOC = withMyContext(ClassComponent);
+
+function App() {
+  return (
+    <MyContextProvider>
+      <ComponentWithHook />
+      <ComponentWithConsumer />
+      <ClassCompoenntWithHOC />
+    </MyContextProvider>
+  );
+}
+
 export default App;
 ```

package.json

@@ -1,14 +1,14 @@
 {
   "name": "create-use-context",
-  "version": "0.0.3",
+  "version": "1.0.0",
   "description": "A helper method which wraps original React `createContext` method and provides additional functionality like wrapping a `Context.Provider`, `useContext` helper, etc.",
   "repository": {
     "type": "git",
     "url": "https://github.com/todesstoss/create-use-context.git"
   },
-  "main": "dist/create-use-context.cjs.js",
-  "module": "dist/create-use-context.esm.js",
-  "browser": "dist/create-use-context.umd.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "browser": "dist/umd/index.js",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -21,18 +21,28 @@
     "createContext"
   ],
   "files": [
-    "/dist"
+    "dist/cjs/*",
+    "dist/esm/*",
+    "dist/umd/*"
   ],
   "author": "Eugene Mickhnitskyy",
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
+    "@babel/preset-react": "^7.0.0",
     "prettier": "^1.17.1",
     "rollup": "^1.12.3",
-    "rollup-plugin-babel": "^4.3.2"
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-node-resolve": "^5.0.0",
+    "rollup-plugin-terser": "^5.0.0"
   },
   "peerDependencies": {
+    "hoist-non-react-statics": "^3.3.0",
     "react": "^16.8.0"
+  },
+  "dependencies": {
+    "react-display-name": "^0.2.4"
   }
 }

rollup.config.js

@@ -1,34 +1,57 @@
-import pkg from './package.json';
 import babel from 'rollup-plugin-babel';
+import jsx from 'rollup-plugin-jsx';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
 
 export default [
   // browser-friendly UMD build
   {
+    input: 'src/index.js',
     plugins: [
+      resolve(),
       babel({
-        exclude: 'node_modules/**'
-      })
+        exclude: 'node_modules/**',
+      }),
+      commonjs(),
+      terser(),
     ],
-    input: 'src/index.js',
-    external: ['react'],
     output: {
-      name: 'create-use-context',
-      file: pkg.browser,
+      exports: 'named',
+      name: 'createUseContext',
+      file: 'dist/umd/index.js',
       format: 'umd',
+      esModule: false,
+      globals: {
+        react: 'React',
+        'hoist-non-react-statics': 'HoistNonReactStatics',
+      },
     },
+    external: ['react', 'hoist-non-react-statics'],
   },
   // CommonJS (for Node) and ES module (for bundlers) build.
   {
+    input: {
+      index: 'src/index.js',
+      'create-use-context': 'src/createUseContext.js',
+      'create-with-context': 'src/createWithContext.js',
+    },
     plugins: [
       babel({
-        exclude: 'node_modules/**'
-      })
+        exclude: 'node_modules/**',
+      }),
     ],
-    input: 'src/index.js',
-    external: ['react'],
     output: [
-      { file: pkg.main, format: 'cjs' },
-      { file: pkg.module, format: 'es' },
+      {
+        exports: 'named',
+        dir: 'dist/cjs',
+        format: 'cjs',
+      },
+      {
+        dir: 'dist/esm',
+        format: 'esm',
+      },
     ],
+    external: ['react', 'hoist-non-react-statics', 'react-display-name'],
   },
 ];

src/createUseContext.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function createUseContext(contextProviderWrapperCreator) {
+  const Context = React.createContext();
+  const useContext = () => React.useContext(Context);
+  let ContextProvider;
+
+  if (typeof contextProviderWrapperCreator === 'function') {
+    ContextProvider = contextProviderWrapperCreator(Context.Provider);
+  } else {
+    ContextProvider = Context.Provider;
+  }
+
+  return {
+    Context,
+    ContextProvider,
+    ContextConsumer: Context.Consumer,
+    useContext,
+  };
+}

src/createWithContext.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import getDisplayName from 'react-display-name';
+import hoistStatics from 'hoist-non-react-statics';
+
+import capitalize from './lib/capitalize';
+
+export default function createWithContext(Context, name) {
+  return function withContext(ComposedComponent) {
+    const WithContextWrapper = (props) => {
+      return (
+        <ComposedComponent
+          {...{ [name]: React.useContext(Context) }}
+          {...props}
+        />
+      );
+    };
+
+    WithContextWrapper.displayName = `with${capitalize(
+      name
+    )}Context(${getDisplayName(ComposedComponent)})`;
+
+    return hoistStatics(WithContextWrapper, ComposedComponent);
+  };
+}

src/index.js

@@ -1,15 +1,2 @@
-import React from 'react';
-
-export default function createUseContext(contextProviderWrapperCreator) {
-  const NewContext = React.createContext();
-  const useNewContext = () => React.useContext(NewContext);
-  let NewContextProvider;
-
-  if (typeof contextProviderWrapperCreator === 'function') {
-    NewContextProvider = contextProviderWrapperCreator(NewContext.Provider);
-  } else {
-    NewContextProvider = NewContext.Provider;
-  }
-
-  return [NewContext, NewContextProvider, NewContext.Consumer, useNewContext];
-}
+export { default as createUseContext } from './createUseContext';
+export { default as createWithContext } from './createWithContext';

src/lib/capitalize.js

@@ -0,0 +1,4 @@
+export default function capitalize(string) {
+  string = string.toLowerCase();
+  return string.charAt(0).toUpperCase() + string.substring(1);
+}