From 6c1d5e0f22d07c57e85c6784b00e27958596e51b Mon Sep 17 00:00:00 2001
From: Zheeeng <air.island.e@gmail.com>
Date: Mon, 1 Mar 2021 21:59:21 +0800
Subject: [PATCH] feat: Show displayName for each context in React Developer
 Tools (#128)

---
 src/index.tsx       | 11 +++++++----
 test/index.test.tsx |  4 ++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 64a4fad..cc0c243 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -50,16 +50,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 Provider: React.FC<Props> = ({ children, ...props }) => {
@@ -76,7 +79,7 @@ function constate<Props, Value, Selectors extends Selector<Value>[]>(
   };
 
   if (isDev && useValue.name) {
-    Provider.displayName = `${useValue.name}.Provider`;
+    Provider.displayName = "Constate";
   }
 
   return [Provider, ...hooks];
diff --git a/test/index.test.tsx b/test/index.test.tsx
index f380b9a..1953620 100644
--- a/test/index.test.tsx
+++ b/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,5 +173,5 @@ test("displayName with named useValue with selectors", () => {
     // @ts-expect-error
     (value) => value.increment
   );
-  expect(Provider.displayName).toBe("useCounter.Provider");
+  expect(Provider.displayName).toBe("Constate");
 });