Changed overrideHook to support useReducer overrides; added isEditable bool to hooks metadata

Author: Brian Vaughn

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -233,6 +233,7 @@ const Dispatcher: DispatcherType = {
 
 type HooksNode = {
   index: number,
+  isEditable: boolean,
   name: string,
   value: mixed,
   subHooks: Array<HooksNode>,
@@ -406,6 +407,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
         let children = [];
         levelChildren.push({
           index: -1,
+          isEditable: false,
           name: parseCustomHookName(stack[j - 1].functionName),
           value: undefined,
           subHooks: children,
@@ -415,9 +417,11 @@ function buildTree(rootStack, readHookLog): HooksTree {
       }
       prevStack = stack;
     }
+    const {primitive} = hook;
     levelChildren.push({
-      index: hook.primitive === 'DebugValue' ? -1 : index++,
-      name: hook.primitive,
+      index: primitive === 'DebugValue' ? -1 : index++,
+      isEditable: primitive === 'Reducer' || primitive === 'State',
+      name: primitive,
       value: hook.value,
       subHooks: [],
     });

packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js

@@ -28,6 +28,7 @@ describe('ReactHooksInspection', () => {
     let tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
+        isEditable: true,
         index: 0,
         name: 'State',
         value: 'hello world',
@@ -49,11 +50,13 @@ describe('ReactHooksInspection', () => {
     let tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
+        isEditable: false,
         index: -1,
         name: 'Custom',
         value: __DEV__ ? 'custom hook label' : undefined,
         subHooks: [
           {
+            isEditable: true,
             index: 0,
             name: 'State',
             value: 'hello world',
@@ -83,17 +86,20 @@ describe('ReactHooksInspection', () => {
     let tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
+        isEditable: false,
         index: -1,
         name: 'Custom',
         value: undefined,
         subHooks: [
           {
+            isEditable: true,
             index: 0,
             name: 'State',
             subHooks: [],
             value: 'hello',
           },
           {
+            isEditable: false,
             index: 1,
             name: 'Effect',
             subHooks: [],
@@ -102,17 +108,20 @@ describe('ReactHooksInspection', () => {
         ],
       },
       {
+        isEditable: false,
         index: -1,
         name: 'Custom',
         value: undefined,
         subHooks: [
           {
+            isEditable: true,
             index: 2,
             name: 'State',
             value: 'world',
             subHooks: [],
           },
           {
+            isEditable: false,
             index: 3,
             name: 'Effect',
             value: effect,
@@ -152,22 +161,26 @@ describe('ReactHooksInspection', () => {
     let tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
+        isEditable: false,
         index: -1,
         name: 'Bar',
         value: undefined,
         subHooks: [
           {
+            isEditable: false,
             index: -1,
             name: 'Custom',
             value: undefined,
             subHooks: [
               {
+                isEditable: true,
                 index: 0,
                 name: 'Reducer',
                 value: 'hello',
                 subHooks: [],
               },
               {
+                isEditable: false,
                 index: 1,
                 name: 'Effect',
                 value: effect,
@@ -176,6 +189,7 @@ describe('ReactHooksInspection', () => {
             ],
           },
           {
+            isEditable: false,
             index: 2,
             name: 'LayoutEffect',
             value: effect,
@@ -184,27 +198,32 @@ describe('ReactHooksInspection', () => {
         ],
       },
       {
+        isEditable: false,
         index: -1,
         name: 'Baz',
         value: undefined,
         subHooks: [
           {
+            isEditable: false,
             index: 3,
             name: 'LayoutEffect',
             value: effect,
             subHooks: [],
           },
           {
+            isEditable: false,
             index: -1,
             name: 'Custom',
             subHooks: [
               {
+                isEditable: true,
                 index: 4,
                 name: 'Reducer',
                 subHooks: [],
                 value: 'world',
               },
               {
+                isEditable: false,
                 index: 5,
                 name: 'Effect',
                 subHooks: [],
@@ -227,6 +246,7 @@ describe('ReactHooksInspection', () => {
     let tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
+        isEditable: false,
         index: 0,
         name: 'Context',
         value: 'default',
@@ -290,10 +310,13 @@ describe('ReactHooksInspection', () => {
       let tree = ReactDebugTools.inspectHooks(Foo, {});
       expect(tree).toEqual([
         {
+          isEditable: false,
           index: -1,
           name: 'Custom',
           value: __DEV__ ? 'bar:123' : undefined,
-          subHooks: [{index: 0, name: 'State', subHooks: [], value: 0}],
+          subHooks: [
+            {isEditable: true, index: 0, name: 'State', subHooks: [], value: 0},
+          ],
         },
       ]);
     });