Inspectable complex hook values

Author: Brian Vaughn

shells/dev/app/InspectableElements/CustomHooks.js

@@ -11,19 +11,37 @@ import React, {
   useState,
 } from 'react';
 
+const object = {
+  string: 'abc',
+  number: 123,
+  boolean: true,
+  null: null,
+  undefined: undefined,
+  array: ['a', 'b', 'c'],
+  object: { foo: 1, bar: 2, baz: 3 },
+};
+
 function useNestedInnerHook() {
   return useState(123);
 }
 function useNestedOuterHook() {
   return useNestedInnerHook();
 }
 
+function useCustomObject() {
+  useDebugValue(object);
+  return useState(123);
+}
+
 function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   const [count, updateCount] = useState(0);
+  const [_, __] = useState(object);
 
   // Custom hook with a custom debug label
   const debouncedCount = useDebounce(count, 1000);
 
+  useCustomObject();
+
   const onClick = useCallback(
     function onClick() {
       updateCount(count + 1);

src/devtools/views/HooksTree.js

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { getMetaValueLabel } from './utils';
+import { KeyValue } from './InspectedElementTree';
 import styles from './HooksTree.css';
 
 import type { HooksNode, HooksTree } from 'src/backend/types';
@@ -34,31 +35,67 @@ function HooksNodeView({ hooksNode }: { hooksNode: HooksNode }) {
 
   const isCustomHook = subHooks.length > 0;
 
-  // Format data for display to mimic the props/state/context for now.
   const type = typeof value;
+
   let displayValue;
-  if (isCustomHook && value === undefined) {
-    displayValue = null;
-  } else if (
-    type === 'number' ||
-    type === 'string' ||
-    type === 'boolean' ||
-    value == null
-  ) {
+  let isComplexDisplayValue = false;
+
+  // Format data for display to mimic the props/state/context for now.
+  if (type === 'number' || type === 'string' || type === 'boolean') {
     displayValue = value;
-  } else {
-    displayValue = getMetaValueLabel(value);
+  } else if (value === null) {
+    displayValue = 'null';
+  } else if (value === undefined) {
+    displayValue = null;
+  } else if (Array.isArray(value)) {
+    isComplexDisplayValue = true;
+    displayValue = 'Array';
+  } else if (type === 'object') {
+    isComplexDisplayValue = true;
+    displayValue = 'Object';
   }
 
-  return (
-    <div className={styles.HooksNode}>
-      <div className={styles.NameValueRow}>
-        <span className={styles.Name}>{name}: </span> {/* $FlowFixMe */}
-        <span className={styles.Value}>{displayValue}</span>
-      </div>
-      <InnerHooksTreeView hooksTree={subHooks} />
-    </div>
-  );
+  if (isCustomHook) {
+    if (isComplexDisplayValue) {
+      return (
+        <div className={styles.HooksNode}>
+          <div className={styles.NameValueRow}>
+            <span className={styles.Name}>{name}: </span>
+          </div>
+          <KeyValue depth={1} name="DebugValue" value={value} />
+          <InnerHooksTreeView hooksTree={subHooks} />
+        </div>
+      );
+    } else {
+      return (
+        <div className={styles.HooksNode}>
+          <div className={styles.NameValueRow}>
+            <span className={styles.Name}>{name}: </span> {/* $FlowFixMe */}
+            <span className={styles.Value}>{displayValue}</span>
+          </div>
+          <InnerHooksTreeView hooksTree={subHooks} />
+        </div>
+      );
+    }
+  } else {
+    if (isComplexDisplayValue) {
+      return (
+        <div className={styles.HooksNode}>
+          <KeyValue depth={0} name={name} value={value} />
+        </div>
+      );
+    } else {
+      return (
+        <div className={styles.HooksNode}>
+          <div className={styles.NameValueRow}>
+            <span className={styles.Name}>{name}: </span>
+            {/* $FlowFixMe */}
+            <span className={styles.Value}>{displayValue}</span>
+          </div>
+        </div>
+      );
+    }
+  }
 }
 
 // $FlowFixMe

src/devtools/views/InspectedElementTree.js

@@ -47,7 +47,7 @@ type KeyValueProps = {|
   value: any,
 |};
 
-function KeyValue({ depth, name, value }: KeyValueProps) {
+export function KeyValue({ depth, name, value }: KeyValueProps) {
   const dataType = typeof value;
   const isSimpleType =
     dataType === 'number' ||
@@ -64,6 +64,10 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
       displayValue = `"${value}"`;
     } else if (dataType === 'boolean') {
       displayValue = value ? 'true' : 'false';
+    } else if (value === null) {
+      displayValue = 'null';
+    } else if (value === undefined) {
+      displayValue = 'undefined';
     }
 
     children = (
@@ -99,6 +103,7 @@ function KeyValue({ depth, name, value }: KeyValueProps) {
         </div>
       );
     } else {
+      // $FlowFixMe
       children = Object.entries(value).map(([name, value]) => (
         <KeyValue key={name} depth={depth + 1} name={name} value={value} />
       ));

src/devtools/views/SettingsContext.js

@@ -132,13 +132,13 @@ function updateThemeVariables(theme: Theme): void {
   updateStyleHelper(theme, 'color-dim');
   updateStyleHelper(theme, 'color-dimmer');
   updateStyleHelper(theme, 'color-dimmest');
-  updateStyleHelper(theme, 'color-search-match');
-  updateStyleHelper(theme, 'color-search-match-current');
-  updateStyleHelper(theme, 'color-text-color');
   updateStyleHelper(theme, 'color-jsx-arrow-brackets');
   updateStyleHelper(theme, 'color-jsx-arrow-brackets-inverted');
   updateStyleHelper(theme, 'color-tree-node-selected');
   updateStyleHelper(theme, 'color-tree-node-hover');
+  updateStyleHelper(theme, 'color-search-match');
+  updateStyleHelper(theme, 'color-search-match-current');
+  updateStyleHelper(theme, 'color-text-color');
 }
 
 export { SettingsContext, SettingsContextController };