Changes:

- Updated ESLint config to avoid false posititves
- Renamed Context to IdContext
- Added useServiceState hook
- Added reset prop to ServiceProvider
- Removed useReducer and useState from public API

Author: patrickroberts

.eslintrc.json

@@ -1,81 +1,109 @@
-{
-  "globals": {
-    "JSX": "readonly"
-  },
-  "env": {
-    "jest/globals": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "airbnb"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "sourceType": "module"
-  },
-  "plugins": [
-    "@typescript-eslint",
-    "jest",
-    "react",
-    "react-hooks"
-  ],
-  "rules": {
-    "@typescript-eslint/consistent-type-definitions": [
-      "error",
-      "interface"
-    ],
-    "@typescript-eslint/member-delimiter-style": "error",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/semi": "error",
-    "import/extensions": [
-      "error",
-      "never",
-      {
-        "json": "always"
-      }
-    ],
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "devDependencies": [
-          "*.js",
-          "**/*.test.ts",
-          "**/*.test.tsx"
-        ]
-      }
-    ],
-    "no-unused-vars": "off",
-    "react/jsx-filename-extension": [
-      "error",
-      {
-        "extensions": [
-          ".tsx"
-        ]
-      }
-    ],
-    "react/jsx-props-no-spreading": "off",
-    "react/state-in-constructor": [
-      "error",
-      "never"
-    ],
-    "semi": "off"
-  },
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "extensions": [
-          ".js",
-          ".ts",
-          ".tsx"
-        ]
-      }
-    }
-  }
-}
+{
+  "globals": {
+    "JSX": "readonly"
+  },
+  "env": {
+    "jest/globals": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "airbnb"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "jest",
+    "react",
+    "react-hooks"
+  ],
+  "rules": {
+    "@typescript-eslint/consistent-type-definitions": [
+      "error",
+      "interface"
+    ],
+    "@typescript-eslint/member-delimiter-style": "error",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-redeclare": "error",
+    "@typescript-eslint/no-shadow": "error",
+    "@typescript-eslint/semi": "error",
+    "@typescript-eslint/space-before-function-paren": [
+      "error",
+      {
+        "named": "never",
+        "asyncArrow": "always"
+      }
+    ],
+    "function-paren-newline": [
+      "error",
+      "consistent"
+    ],
+    "import/extensions": [
+      "error",
+      "never",
+      {
+        "json": "always"
+      }
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          "*.js",
+          "**/*.test.ts",
+          "**/*.test.tsx"
+        ]
+      }
+    ],
+    "no-plusplus": [
+      "error",
+      {
+        "allowForLoopAfterthoughts": true
+      }
+    ],
+    "no-redeclare": "off",
+    "no-shadow": "off",
+    "no-unused-vars": "off",
+    "object-curly-newline": [
+      "error",
+      {
+        "consistent": true
+      }
+    ],
+    "react/jsx-filename-extension": [
+      "error",
+      {
+        "extensions": [
+          ".tsx"
+        ]
+      }
+    ],
+    "react/jsx-props-no-spreading": "off",
+    "react/state-in-constructor": [
+      "error",
+      "never"
+    ],
+    "semi": "off",
+    "space-before-function-paren": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [
+          ".js",
+          ".ts",
+          ".tsx"
+        ]
+      }
+    }
+  }
+}

src/Context/index.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 import Id from '../Id';
 
-export default interface ContextConsumerProps<T> {
+export default interface IdContextConsumerProps<T> {
   /**
-   * Which ContextProvider to use
+   * The {@link IdContextProvider} to use
    * @default null
    */
   id?: Id;

src/Context/Consumer/Props.ts renamed to src/IdContext/Consumer/Props.ts

@@ -1,18 +1,17 @@
-import React, {
-  Context, ComponentType, memo, useCallback, useMemo,
-} from 'react';
+import React, { Context, ComponentType, memo, useCallback, useMemo } from 'react';
 import Environment, { unwrap } from '../Environment';
-import Props, { defaultProps } from './Props';
+import IdContextConsumerProps, { defaultProps } from './Props';
 
-type ContextConsumer<T> = ComponentType<Props<T>>;
+type IdContextConsumer<T> = ComponentType<IdContextConsumerProps<T>>;
 
-export default ContextConsumer;
+export default IdContextConsumer;
+export { IdContextConsumerProps };
 
 /** @ignore */
-export function createConsumer<T>(
+export function createIdContextConsumer<T>(
   { Consumer }: Context<Environment<T>>,
-): ContextConsumer<T> {
-  const EnvironmentConsumer: ContextConsumer<T> = ({ id, children }) => {
+): IdContextConsumer<T> {
+  const EnvironmentConsumer: IdContextConsumer<T> = ({ id, children }) => {
     const render = useCallback((env: Environment<T>) => {
       const value = unwrap(env, id);
 

src/Context/Consumer/index.tsx renamed to src/IdContext/Consumer/index.tsx

@@ -13,7 +13,7 @@ export function wrap<T>(
   value: T,
   id: Id = null,
 ): Environment<T> {
-  return new Map([...env, [id, value], [null, value]]);
+  return new Map(env).set(id, value).set(null, value);
 }
 
 /** @ignore */

src/Context/Environment.ts renamed to src/IdContext/Environment.ts

@@ -1,5 +1,5 @@
 /**
- * Provider id type.
+ * {@link IdContextProviderProps.id | Provider id} type.
  * Using the id `null` specifies the closest Provider.
  */
 type Id = string | number | symbol | null;

src/Context/Id.ts renamed to src/IdContext/Id.ts

@@ -1,16 +1,19 @@
 import { ReactNode } from 'react';
 import Id from '../Id';
 
-export default interface ContextProviderProps<T> {
+export default interface IdContextProviderProps<T> {
   /**
-   * A value to provide
+   * The value to provide
    */
   value: T;
   /**
-   * A key that allows nested Providers to be used
+   * The key that identifies the {@link IdContextProvider} to be consumed
    * @default null
    */
   id?: Id;
+  /**
+   * @default null
+   */
   children?: ReactNode;
 }
 

src/Context/Provider/Props.ts renamed to src/IdContext/Provider/Props.ts

@@ -1,19 +1,18 @@
-import React, {
-  ComponentType, Context, memo, useContext, useMemo,
-} from 'react';
+import React, { ComponentType, Context, memo, useContext, useMemo } from 'react';
 import Environment, { wrap } from '../Environment';
-import Props, { defaultProps } from './Props';
+import IdContextProviderProps, { defaultProps } from './Props';
 
-type ContextProvider<T> = ComponentType<Props<T>>;
+type IdContextProvider<T> = ComponentType<IdContextProviderProps<T>>;
 
-export default ContextProvider;
+export default IdContextProvider;
+export { IdContextProviderProps };
 
 /** @ignore */
-export function createProvider<T>(
+export function createIdContextProvider<T>(
   EnvironmentContext: Context<Environment<T>>,
-): ContextProvider<T> {
+): IdContextProvider<T> {
   const { Provider } = EnvironmentContext;
-  const EnvironmentProvider: ContextProvider<T> = ({ value, id, children }) => {
+  const EnvironmentProvider: IdContextProvider<T> = ({ value, id, children }) => {
     const prev = useContext(EnvironmentContext);
     const next = useMemo(() => (
       wrap(prev, value, id)