Merge branch 'master' into feat/ValueProvider

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.2.0](https://github.com/diegohaz/constate/compare/v3.1.0...v3.2.0) (2021-03-01)
+
+
+### Features
+
+* Show displayName for each context in React Developer Tools ([#128](https://github.com/diegohaz/constate/issues/128)) ([6c1d5e0](https://github.com/diegohaz/constate/commit/6c1d5e0f22d07c57e85c6784b00e27958596e51b))
+
 ## [3.1.0](https://github.com/diegohaz/constate/compare/v3.0.1...v3.1.0) (2020-10-22)
 
 

examples/counter/package.json

@@ -15,7 +15,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "constate": "3.0.1",
+    "constate": "3.2.0",
     "parcel-bundler": "1.12.4",
     "react": "17.0.1",
     "react-dom": "17.0.1"

examples/i18n/package.json

@@ -16,7 +16,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "constate": "3.0.1",
+    "constate": "3.2.0",
     "parcel-bundler": "1.12.4",
     "react": "17.0.1",
     "react-dom": "17.0.1"

examples/theming/package.json

@@ -16,10 +16,10 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "constate": "3.0.1",
+    "constate": "3.2.0",
     "parcel-bundler": "1.12.4",
     "react": "17.0.1",
-    "react-color": "2.18.1",
+    "react-color": "2.19.3",
     "react-dom": "17.0.1"
   }
 }

examples/typescript/package.json

@@ -17,10 +17,10 @@
   "dependencies": {
     "@types/react": "16.9.53",
     "@types/react-dom": "16.9.8",
-    "constate": "3.0.1",
+    "constate": "3.2.0",
     "parcel-bundler": "1.12.4",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "typescript": "4.0.3"
+    "typescript": "4.2.2"
   }
 }

examples/wizard-form/package.json

@@ -15,7 +15,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "constate": "3.0.1",
+    "constate": "3.2.0",
     "parcel-bundler": "1.12.4",
     "react": "17.0.1",
     "react-dom": "17.0.1"

examples/yarn.lock

@@ -1624,10 +1624,10 @@ constants-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
   integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
-constate@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/constate/-/constate-3.0.1.tgz#12fa3241b40fd30db4494b1670eaec1ce98dc66d"
-  integrity sha512-/NAwv6IfWd8CBPanHo/1/y7j5PfvCALdKPnsuI4hgcjAboizFEn5QoOnHW0Rm3XAedMH9Aq+4XfpQxHha6a0yQ==
+constate@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/constate/-/constate-3.2.0.tgz#6034e7b775ca0e58137274f87c25196e8932f685"
+  integrity sha512-hP7sj9jt+KwVRoFlzaJuv3kBvchE9hNMAYJEH1weKZYD7+UAWRSo7oXARrfhipVLP3XZxIkmD+E9zXU+5RYKCQ==
 
 convert-source-map@^1.5.1, convert-source-map@^1.7.0:
   version "1.7.0"
@@ -3139,6 +3139,11 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lodash-es@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.clone@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clone/-/lodash.clone-4.5.0.tgz#195870450f5a13192478df4bc3d23d2dea1907b6"
@@ -3159,7 +3164,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4:
+lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -4234,13 +4239,14 @@ range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-react-color@2.18.1:
-  version "2.18.1"
-  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.18.1.tgz#2cda8cc8e06a9e2c52ad391a30ddad31972472f4"
-  integrity sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==
+react-color@2.19.3:
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
   dependencies:
     "@icons/material" "^0.2.4"
-    lodash "^4.17.11"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
     material-colors "^1.2.1"
     prop-types "^15.5.10"
     reactcss "^1.2.0"
@@ -5033,10 +5039,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.3.tgz#153bbd468ef07725c1df9c77e8b453f8d36abba5"
-  integrity sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==
+typescript@4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.2.tgz#1450f020618f872db0ea17317d16d8da8ddb8c4c"
+  integrity sha512-tbb+NVrLfnsJy3M59lsDgrzWIflR4d4TIUjz+heUnHZwdF7YsrMTKoRERiIvI2lvBG95dfpLxB21WZhys1bgaQ==
 
 uncss@^0.17.3:
   version "0.17.3"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "constate",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Yet another React state management library that lets you work with local state and scale up to global state with ease",
   "license": "MIT",
   "repository": "diegohaz/constate",
@@ -52,46 +52,46 @@
     "constate"
   ],
   "devDependencies": {
-    "@babel/cli": "7.12.1",
-    "@babel/core": "7.12.3",
-    "@babel/preset-env": "7.12.1",
-    "@babel/preset-react": "7.12.1",
-    "@babel/preset-typescript": "7.12.1",
-    "@rollup/plugin-babel": "5.2.1",
+    "@babel/cli": "7.13.0",
+    "@babel/core": "7.13.8",
+    "@babel/preset-env": "7.13.8",
+    "@babel/preset-react": "7.12.13",
+    "@babel/preset-typescript": "7.13.0",
+    "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "15.1.0",
     "@rollup/plugin-node-resolve": "9.0.0",
-    "@rollup/plugin-replace": "2.3.3",
-    "@testing-library/react": "11.1.0",
-    "@types/jest": "26.0.15",
+    "@rollup/plugin-replace": "2.4.1",
+    "@testing-library/react": "11.2.5",
+    "@types/jest": "26.0.20",
     "@types/prop-types": "15.7.3",
     "@types/react": "16.9.53",
     "@types/react-dom": "16.9.8",
-    "@typescript-eslint/eslint-plugin": "4.5.0",
-    "@typescript-eslint/parser": "4.5.0",
+    "@typescript-eslint/eslint-plugin": "4.15.2",
+    "@typescript-eslint/parser": "4.15.2",
     "babel-eslint": "10.1.0",
-    "babel-jest": "26.6.0",
-    "eslint": "7.11.0",
-    "eslint-config-airbnb": "18.2.0",
+    "babel-jest": "26.6.3",
+    "eslint": "7.21.0",
+    "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "6.14.0",
     "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsx-a11y": "6.3.1",
-    "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.21.5",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.3.1",
+    "eslint-plugin-react": "7.22.0",
     "husky": "4.3.0",
-    "jest": "26.6.0",
-    "lint-staged": "10.4.2",
+    "jest": "26.6.3",
+    "lint-staged": "10.5.4",
     "open-cli": "6.0.1",
-    "prettier": "2.1.2",
+    "prettier": "2.2.1",
     "raf": "3.4.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-test-renderer": "17.0.1",
     "rimraf": "3.0.2",
-    "rollup": "2.32.1",
+    "rollup": "2.40.0",
     "rollup-plugin-ignore": "1.0.9",
     "rollup-plugin-terser": "7.0.2",
-    "standard-version": "9.0.0",
-    "typescript": "4.0.3"
+    "standard-version": "9.1.1",
+    "typescript": "4.2.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"

src/index.tsx

@@ -61,16 +61,19 @@ function constate<Props, Value, Selectors extends Selector<Value>[]>(
   const contexts = [] as React.Context<any>[];
   const hooks = ([] as unknown) as Hooks<Value, Selectors>;
 
-  const createContext = () => {
+  const createContext = (displayName: string) => {
     const context = React.createContext(NO_PROVIDER);
+    if (isDev && displayName) {
+      context.displayName = displayName;
+    }
     contexts.push(context);
     hooks.push(createUseContext(context));
   };
 
   if (selectors.length) {
-    selectors.forEach(createContext);
+    selectors.forEach((selector) => createContext(selector.name));
   } else {
-    createContext();
+    createContext(useValue.name);
   }
 
   const Providers: ValueProvider<Value> = ({ children, value }) => {
@@ -91,8 +94,7 @@ function constate<Props, Value, Selectors extends Selector<Value>[]>(
   Provider.FromValue = Providers;
 
   if (isDev && useValue.name) {
-    Provider.displayName = `${useValue.name}.Provider`;
-    Providers.displayName = `${useValue.name}.Provider`;
+    Provider.displayName = "Constate";
   }
 
   return [Provider, ...hooks];

test/index.test.tsx

@@ -157,7 +157,7 @@ test("without provider", () => {
 
 test("displayName with named useValue with no selector", () => {
   const [Provider] = constate(useCounter);
-  expect(Provider.displayName).toBe("useCounter.Provider");
+  expect(Provider.displayName).toBe("Constate");
 });
 
 test("displayName with anonymous useValue", () => {
@@ -173,7 +173,7 @@ test("displayName with named useValue with selectors", () => {
     // @ts-expect-error
     (value) => value.increment
   );
-  expect(Provider.displayName).toBe("useCounter.Provider");
+  expect(Provider.displayName).toBe("Constate");
 });
 
 describe("FromValue", () => {