Skip to content

Commit b97cdfd

Browse files
bl00mberbl00mber
committed
flow
1 parent f80fa4d commit b97cdfd

File tree

6 files changed

+148
-133
lines changed

6 files changed

+148
-133
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@ function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
234234
});
235235
}
236236

237-
function useDebugName(value: string, formatterFn: ?(value: string) => string) {
237+
function useDebugName(value: any, formatterFn: ?(value: any) => any) {
238238
hookLog.push({
239239
primitive: 'DebugName',
240240
stackError: new Error(),
@@ -627,6 +627,7 @@ function processDebugNames(hooksTree: HooksTree): void {
627627
// Do not append names which are identical to default hook names
628628
if (lastProcessedHookReference.name.toLowerCase() !== hooksNode.value) {
629629
lastProcessedHookReference.name =
630+
// $FlowFixMe: Flow doesn't like mixed types
630631
lastProcessedHookReference.name + ', ' + hooksNode.value;
631632
}
632633
}

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

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -333,56 +333,58 @@ describe('ReactHooksInspection', () => {
333333
});
334334
});
335335

336-
describe('useDebugName', () => {
337-
it('should append hook name identifier if it is not equal to default hook name', () => {
338-
function Foo(props) {
339-
const [state] = React.useState('hello world');
340-
// when variable name === hook name, useDebugName should not change `name` key
341-
React.useDebugName('state');
342-
const [name] = React.useState('hello world');
343-
React.useDebugName('name');
344-
return (
345-
<div>
346-
{state}
347-
{name}
348-
</div>
349-
);
350-
}
351-
const tree = ReactDebugTools.inspectHooks(Foo, {});
352-
expect(tree).toEqual([
353-
{
354-
isStateEditable: true,
355-
id: 0,
356-
name: 'State',
357-
value: 'hello world',
358-
subHooks: [],
359-
},
360-
{
361-
isStateEditable: true,
362-
id: 2,
363-
name: __DEV__ ? 'State, name' : 'State',
364-
value: 'hello world',
365-
subHooks: [],
366-
},
367-
]);
368-
});
336+
if (__DEV__) {
337+
describe('useDebugName', () => {
338+
it('should append hook name identifier if it is not equal to default hook name', () => {
339+
function Foo(props) {
340+
const [state] = React.useState('hello world');
341+
// when variable name === hook name, useDebugName should not change `name` key
342+
React.useDebugName('state');
343+
const [name] = React.useState('hello world');
344+
React.useDebugName('name');
345+
return (
346+
<div>
347+
{state}
348+
{name}
349+
</div>
350+
);
351+
}
352+
const tree = ReactDebugTools.inspectHooks(Foo, {});
353+
expect(tree).toEqual([
354+
{
355+
isStateEditable: true,
356+
id: 0,
357+
name: 'State',
358+
value: 'hello world',
359+
subHooks: [],
360+
},
361+
{
362+
isStateEditable: true,
363+
id: 2,
364+
name: __DEV__ ? 'State, name' : 'State',
365+
value: 'hello world',
366+
subHooks: [],
367+
},
368+
]);
369+
});
369370

370-
it('should support an optional formatter function param', () => {
371-
function Foo(props) {
372-
const [data] = React.useState(0);
373-
React.useDebugName('data', value => `name:${value}`);
374-
return <div>{data}</div>;
375-
}
376-
const tree = ReactDebugTools.inspectHooks(Foo, {});
377-
expect(tree).toEqual([
378-
{
379-
isStateEditable: true,
380-
id: 0,
381-
name: __DEV__ ? 'State, name:data' : 'State',
382-
subHooks: [],
383-
value: 0,
384-
},
385-
]);
371+
it('should support an optional formatter function param', () => {
372+
function Foo(props) {
373+
const [data] = React.useState(0);
374+
React.useDebugName('data', value => `name:${value}`);
375+
return <div>{data}</div>;
376+
}
377+
const tree = ReactDebugTools.inspectHooks(Foo, {});
378+
expect(tree).toEqual([
379+
{
380+
isStateEditable: true,
381+
id: 0,
382+
name: __DEV__ ? 'State, name:data' : 'State',
383+
subHooks: [],
384+
value: 0,
385+
},
386+
]);
387+
});
386388
});
387-
});
389+
}
388390
});

‎packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

Lines changed: 83 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -716,90 +716,92 @@ describe('ReactHooksInspectionIntegration', () => {
716716
});
717717
});
718718

719-
describe('useDebugName', () => {
720-
it('should work on nested default hooks', () => {
721-
function useInner() {
722-
const [name1] = React.useState(0);
723-
React.useDebugName('name1');
724-
return name1;
725-
}
726-
function useOuter() {
727-
const name2 = React.useRef(null);
728-
React.useDebugName('name2');
729-
useInner();
730-
return name2;
731-
}
732-
function Example() {
733-
useOuter();
734-
return null;
735-
}
736-
const renderer = ReactTestRenderer.create(<Example />);
737-
const childFiber = renderer.root.findByType(Example)._currentFiber();
738-
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
739-
expect(tree).toEqual([
740-
{
741-
isStateEditable: false,
742-
id: null,
743-
name: 'Outer',
744-
value: undefined,
745-
subHooks: [
746-
{
747-
isStateEditable: false,
748-
id: 0,
749-
name: __DEV__ ? 'Ref, name2' : 'Ref',
750-
value: null,
751-
subHooks: [],
752-
},
753-
{
754-
isStateEditable: false,
755-
id: null,
756-
name: 'Inner',
757-
value: undefined,
758-
subHooks: [
759-
{
760-
isStateEditable: true,
761-
id: 2,
762-
name: __DEV__ ? 'State, name1' : 'State',
763-
value: 0,
764-
subHooks: [],
765-
},
766-
],
767-
},
768-
],
769-
},
770-
]);
771-
});
719+
if (__DEV__) {
720+
describe('useDebugName', () => {
721+
it('should work on nested default hooks', () => {
722+
function useInner() {
723+
const [name1] = React.useState(0);
724+
React.useDebugName('name1');
725+
return name1;
726+
}
727+
function useOuter() {
728+
const name2 = React.useRef(null);
729+
React.useDebugName('name2');
730+
useInner();
731+
return name2;
732+
}
733+
function Example() {
734+
useOuter();
735+
return null;
736+
}
737+
const renderer = ReactTestRenderer.create(<Example />);
738+
const childFiber = renderer.root.findByType(Example)._currentFiber();
739+
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
740+
expect(tree).toEqual([
741+
{
742+
isStateEditable: false,
743+
id: null,
744+
name: 'Outer',
745+
value: undefined,
746+
subHooks: [
747+
{
748+
isStateEditable: false,
749+
id: 0,
750+
name: __DEV__ ? 'Ref, name2' : 'Ref',
751+
value: null,
752+
subHooks: [],
753+
},
754+
{
755+
isStateEditable: false,
756+
id: null,
757+
name: 'Inner',
758+
value: undefined,
759+
subHooks: [
760+
{
761+
isStateEditable: true,
762+
id: 2,
763+
name: __DEV__ ? 'State, name1' : 'State',
764+
value: 0,
765+
subHooks: [],
766+
},
767+
],
768+
},
769+
],
770+
},
771+
]);
772+
});
772773

773-
it('supports more than one name when assigned', () => {
774-
function Foo(props) {
775-
const [name] = React.useState('hello world');
776-
React.useDebugName('data');
777-
React.useDebugName('name');
778-
return <div>{name}</div>;
779-
}
780-
const tree = ReactDebugTools.inspectHooks(Foo, {});
781-
expect(tree).toEqual([
782-
{
783-
isStateEditable: true,
784-
id: 0,
785-
name: __DEV__ ? 'State, data, name' : 'State',
786-
value: 'hello world',
787-
subHooks: [],
788-
},
789-
]);
790-
});
774+
it('supports more than one name when assigned', () => {
775+
function Foo(props) {
776+
const [name] = React.useState('hello world');
777+
React.useDebugName('data');
778+
React.useDebugName('name');
779+
return <div>{name}</div>;
780+
}
781+
const tree = ReactDebugTools.inspectHooks(Foo, {});
782+
expect(tree).toEqual([
783+
{
784+
isStateEditable: true,
785+
id: 0,
786+
name: __DEV__ ? 'State, data, name' : 'State',
787+
value: 'hello world',
788+
subHooks: [],
789+
},
790+
]);
791+
});
791792

792-
it('should ignore useDebugName() if there is no hook that it can handle', () => {
793-
function Example() {
794-
React.useDebugName('this is invalid');
795-
return null;
796-
}
797-
const renderer = ReactTestRenderer.create(<Example />);
798-
const childFiber = renderer.root.findByType(Example)._currentFiber();
799-
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
800-
expect(tree).toHaveLength(0);
793+
it('should ignore useDebugName() if there is no hook that it can handle', () => {
794+
function Example() {
795+
React.useDebugName('this is invalid');
796+
return null;
797+
}
798+
const renderer = ReactTestRenderer.create(<Example />);
799+
const childFiber = renderer.root.findByType(Example)._currentFiber();
800+
const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
801+
expect(tree).toHaveLength(0);
802+
});
801803
});
802-
});
804+
}
803805

804806
it('should support defaultProps and lazy', async () => {
805807
const Suspense = React.Suspense;

‎packages/react-devtools-shell/src/app/NamedHooks/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function reducer(state, action) {
4141

4242
const StringContext = createContext('123');
4343

44-
export default function NamedHooks(props) {
44+
export default function NamedHooks(props: any) {
4545
const [count, setCount] = useState(0);
4646
useDebugName('count');
4747
const memoizedSetClick = useCallback(() => setCount(count + 1), [count]);

‎packages/react-dom/src/server/ReactPartialRendererHooks.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -523,6 +523,7 @@ export const Dispatcher: DispatcherType = {
523523
useEffect: noop,
524524
// Debugging effect
525525
useDebugValue: noop,
526+
useDebugName: noop,
526527
useResponder,
527528
useDeferredValue,
528529
useTransition,

‎scripts/rollup/bundles.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -667,6 +667,15 @@ const bundles = [
667667
externals: [],
668668
},
669669

670+
/******* React Named Hooks *******/
671+
{
672+
bundleTypes: [NODE_DEV, NODE_PROD],
673+
moduleType: ISOMORPHIC,
674+
entry: 'react-named-hooks',
675+
global: 'ReactNamedHooks',
676+
externals: [],
677+
},
678+
670679
/******* React Fresh *******/
671680
{
672681
bundleTypes: [NODE_DEV, NODE_PROD],

0 commit comments

Comments
 (0)