WIP: read/write hook names with suspense resource

MLH-Fellowship · Nov 9, 2020 · 1c6d58f · 1c6d58f
1 parent afec8c9
commit 1c6d58f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 17 deletions.
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
@@ -203,16 +203,15 @@ function createPanelIfReactLoaded() {
         };
 
         function injectHookVariableNamesFunction(hookLog) {
-          const newHookLog = new Promise((resolve, reject) => {
+          const namedHookLogPromise = new Promise((resolve, reject) => {
             setTimeout(() => {
-              const newHook = hookLog.map((hook) => {
-                return {...hook, 'variableName':'parsed-variable-name'}
+              const newHookLog = hookLog.map((hook) => {
+                return {...hook, 'name':'hook-variable-name'}
               })
-              resolve(newHook)
-            }, 8000)
+              resolve(newHookLog)
+            }, 2000)
           })
-          console.log('injectHookVariableNamesFunction called with', newHookLog, hookLog)
-          return newHookLog
+          return namedHookLogPromise;
         }
 
         root = createRoot(document.createElement('div'));

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -34,6 +34,7 @@ import type {
   Element,
   InspectedElement as InspectedElementFrontend,
 } from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {HookLog} from 'react-devtools-shared/src/devtools/views/DevTools';
 import type {Resource, Thenable} from '../../cache';
 
 export type StoreAsGlobal = (id: number, path: Array<string | number>) => void;
@@ -95,6 +96,21 @@ const resource: Resource<
   {useWeakMap: true},
 );
 
+const hookResource: Resource<
+  InspectedElementFrontend,
+  InspectedElementFrontend,
+  Thenable<HookLog>,
+> = createResource(
+  (inspectedElement: InspectedElementFrontend) => {
+    const promise = new Promise(resolve => {
+      resolve(inspectedElement.hooks);
+    });
+    return promise;
+  },
+  (inspectedElement: InspectedElementFrontend) => inspectedElement,
+  {useWeakMap: true},
+);
+
 type Props = {|
   children: React$Node,
 |};
@@ -147,7 +163,14 @@ function InspectedElementContextController({children}: Props) {
     (id: number) => {
       const element = store.getElementByID(id);
       if (element !== null) {
-        return resource.read(element);
+        const inspectedElement = resource.read(element);
+
+        // Read new hook object and set in inspected element
+        const namedHooks = hookResource.read(inspectedElement);
+        inspectedElement.hooks = namedHooks;
+        console.log('=== Inspected ===', inspectedElement);
+
+        return inspectedElement;
       } else {
         return null;
       }
@@ -260,13 +283,11 @@ function InspectedElementContextController({children}: Props) {
             state: hydrateHelper(state),
           };
 
-          // If injectHookVariableNamesFunction prop present, wait on new hook (with variable names) to resolve
-          // and replace old hooks structure with the new one
           if (injectHookVariableNamesFunction) {
-            const namedHooksPromise = injectHookVariableNamesFunction(hydrateHelper(hooks))
-            namedHooksPromise.then(namedHooks => {
-              inspectedElement.hooks = namedHooks
-            })
+            const namedHooksPromise = injectHookVariableNamesFunction(
+              hydrateHelper(hooks)
+            );
+            hookResource.write(inspectedElement, namedHooksPromise);
           }
 
           element = store.getElementByID(id);

diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -37,6 +37,7 @@ import './root.css';
 import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Source} from '../../../../shared/ReactElementType'
+import type {Thenable} from '../cache'
 
 export type BrowserTheme = 'dark' | 'light';
 export type TabID = 'components' | 'profiler';
@@ -46,14 +47,13 @@ type HookLogEntry = {
   value: mixed,
   ...
 };
-
-type HookLog = Array<HookLogEntry> | null
+export type HookLog = Array<HookLogEntry> | null;
 
 export type ViewElementSource = (
   id: number,
   inspectedElement: InspectedElement,
 ) => void;
-export type InjectHookVariableNamesFunction = (hookLog: HookLog) => Promise<HookLog>;
+export type InjectHookVariableNamesFunction = (hookLog: HookLog) => Thenable<HookLog>;
 export type ViewAttributeSource = (
   id: number,
   path: Array<string | number>,