Package v2.0.0 in TypeScript (#10)

Library Rewritten in TypeScript
Now createUseContext returns only hook, to actually use Context in a type-safe manner
All the wrappers for Providers removed
Helper createWithContext removed as non actual

Author: todesstoss

.babelrc

@@ -0,0 +1,10 @@
+# Changelog
+
+## 2.0.0
+
+### New features
+
+- Library Rewritten in TypeScript
+- Now `createUseContext` returns only hook, to actually use `Context` in a type-safe manner
+- All the wrappers for Providers removed
+- Helper `createWithContext` removed as non actual

CHANGELOG.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Eugene Mickhnitskyy
+Copyright (c) 2023 Yevgenii Mikhnytskyi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

LICENSE

@@ -1,38 +1,59 @@
 # create-use-context
 
-A helper method which wraps original React `createContext` method and provides additional functionality like wrapping a `Context.Provider`, `useContext` helper, etc.
+A helper method which wraps original React `createContext` method and type-safe `useContext` hook which will throw if used outside of `Provider`.
 
 ## Installation
 
-```
-# with NPM:
+Using NPM:
 
+```sh
 npm install create-use-context
+```
 
-# with Yarn:
+Using Yarn:
 
+```sh
 yarn add create-use-context
 ```
 
+## Screenshot
+
+Mind the `useMyContext` return type is `NonNullable` context value. It will throw if used outside of `Provider`
+
+![Screenshot](Screenshot.png)
+
 ## Usage
 
-```javascript
-import React, { Component, useState } from 'react';
+```tsx
+import React, { createContext, useState, FC, Dispatch, SetStateAction } from 'react';
+import { createUseContext } from 'create-use-context';
+
+type Counter = number;
 
-import { createUseContext, createWithContext } from 'create-use-context';
+const INITIAL_COUNT: Counter = 0;
 
-const {
-  Context: MyContext,
-  ContextProvider: MyContextProvider,
-  ContextConsumer: MyContextConsumer,
-  useContext: useMyContext,
-} = createUseContext((Provider) => ({ children }) => {
-  const [counter, setCounter] = useState(0);
+export interface MyContextValue {
+  counter: Counter;
+  setCounter: Dispatch<SetStateAction<Counter>>;
+}
+
+export const MyContext = createContext<MyContextValue | null>(null);
+
+MyContext.displayName = 'MyContext';
+
+export const MyContextProvider: FC = ({ children }) => {
+  const [counter, setCounter] = useState(INITIAL_COUNT);
+
+  return (
+    <MyContext.Provider value={{ counter, setCounter }}>
+      {children}
+    </MyContext.Provider>
+  );
+};
 
-  return <Provider value={{ counter, setCounter }}>{children}</Provider>;
-});
+export const useMyContext = createUseContext(MyContext);
 
-function ComponentWithHook() {
+export function ComponentWithHook() {
   const { counter, setCounter } = useMyContext();
 
   return (
@@ -46,56 +67,11 @@ function ComponentWithHook() {
   );
 }
 
-function ComponentWithConsumer() {
-  return (
-    <MyContextConsumer>
-      {({ counter, setCounter }) => (
-        <button
-          onClick={() => {
-            setCounter(counter + 1);
-          }}
-        >
-          {counter} - add one
-        </button>
-      )}
-    </MyContextConsumer>
-  );
-}
-
-// 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 ClassComponentWithHOC = withMyContext(ClassComponent);
-
-function App() {
+export function App() {
   return (
     <MyContextProvider>
       <ComponentWithHook />
-      <ComponentWithConsumer />
-      <ClassComponentWithHOC />
     </MyContextProvider>
   );
 }
-
-export default App;
 ```

README.md

@@ -1,16 +1,18 @@
 {
-  "author": "Eugene Mickhnitskyy",
-  "dependencies": {
-    "react-display-name": "0.2.4"
-  },
+  "author": "Yevgenii Mikhnytskyi",
+  "dependencies": {},
+  "type": "module",
   "description": "A helper method which wraps original React `createContext` method and provides additional functionality like wrapping a `Context.Provider`, `useContext` helper, etc.",
   "devDependencies": {
-    "@babel/core": "7.7.4",
-    "@babel/preset-env": "7.7.4",
-    "@babel/preset-react": "7.7.4",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@types/react": "^18.0.33",
+    "install-peers-cli": "^2.2.0",
     "prettier": "1.19.1",
-    "rollup": "1.27.5",
-    "rollup-plugin-babel": "4.3.3"
+    "rollup": "^3.20.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.5.0",
+    "typescript": "^5.0.3"
   },
   "files": [
     "dist/cjs/*",
@@ -24,20 +26,22 @@
   ],
   "license": "MIT",
   "main": "dist/cjs/index.js",
+  "types": "dist/cjs/index.d.ts",
   "module": "dist/esm/index.js",
+  "browser": "dist/esm/index.js",
   "name": "create-use-context",
   "peerDependencies": {
-    "hoist-non-react-statics": "^3.3.0",
     "react": "^16.8.0"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/todesstoss/create-use-context.git"
   },
   "scripts": {
-    "build": "rollup -c",
+    "prepare": "install-peers",
+    "build": "rollup -c --environment BUILD:production",
     "dev": "rollup -c -w",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "version": "1.0.2"
+  "version": "2.0.0"
 }

Screenshot.png

@@ -1,28 +1,27 @@
-import babel from 'rollup-plugin-babel';
+import typescript from '@rollup/plugin-typescript';
+import terser from '@rollup/plugin-terser';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
-export default [
-  {
-    input: {
-      index: 'src/index.js',
-      'create-use-context': 'src/createUseContext.js',
-      'create-with-context': 'src/createWithContext.js',
+const production = process.env.BUILD === 'production';
+
+function getConfig({ dir, format }) {
+  return {
+    input: 'src/index.ts',
+    output: {
+      exports: 'named',
+      dir,
+      format,
+      sourcemap: true,
     },
     plugins: [
-      babel({
-        exclude: 'node_modules/**',
-      }),
-    ],
-    output: [
-      {
-        exports: 'named',
-        dir: 'dist/cjs',
-        format: 'cjs',
-      },
-      {
-        dir: 'dist/esm',
-        format: 'esm',
-      },
+      peerDepsExternal(),
+      typescript({ outDir: dir }),
+      production && terser(),
     ],
-    external: ['react', 'hoist-non-react-statics', 'react-display-name'],
-  },
+  }
+}
+
+export default [
+  getConfig({ dir: 'dist/cjs', format: 'cjs' }),
+  getConfig({ dir: 'dist/esm', format: 'esm' }),
 ];

package.json

@@ -0,0 +1,15 @@
+import { useContext, Context } from 'react';
+
+export function createUseContext<T>(context: Context<T>) {
+  const value = useContext(context);
+
+  if (!value) {
+    throw new Error(composeErrorMessage(context.displayName || 'Context'));
+  }
+
+  return value;
+}
+
+function composeErrorMessage(name: string) {
+  return `use${name} has to be used within <${name}.Provider>`;
+}