Skip to content

Commit 160103d

Browse files
author
Sebastian Silbermann
committed
WIP
1 parent ec606a6 commit 160103d

3 files changed

Lines changed: 49 additions & 49 deletions

File tree

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

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ type HookLogEntry = {
4545
stackError: Error,
4646
value: mixed,
4747
debugInfo: ReactDebugInfo | null,
48+
wrapper: string | null,
4849
};
4950

5051
let hookLog: Array<HookLogEntry> = [];
@@ -200,6 +201,7 @@ function use<T>(usable: Usable<T>): T {
200201
value: fulfilledValue,
201202
debugInfo:
202203
thenable._debugInfo === undefined ? null : thenable._debugInfo,
204+
wrapper: null,
203205
});
204206
return fulfilledValue;
205207
}
@@ -217,6 +219,7 @@ function use<T>(usable: Usable<T>): T {
217219
value: thenable,
218220
debugInfo:
219221
thenable._debugInfo === undefined ? null : thenable._debugInfo,
222+
wrapper: null,
220223
});
221224
throw SuspenseException;
222225
} else if (usable.$$typeof === REACT_CONTEXT_TYPE) {
@@ -229,6 +232,7 @@ function use<T>(usable: Usable<T>): T {
229232
stackError: new Error(),
230233
value,
231234
debugInfo: null,
235+
wrapper: null,
232236
});
233237

234238
return value;
@@ -247,6 +251,7 @@ function useContext<T>(context: ReactContext<T>): T {
247251
stackError: new Error(),
248252
value: value,
249253
debugInfo: null,
254+
wrapper: null,
250255
});
251256
return value;
252257
}
@@ -268,6 +273,7 @@ function useState<S>(
268273
stackError: new Error(),
269274
value: state,
270275
debugInfo: null,
276+
wrapper: null,
271277
});
272278
return [state, (action: BasicStateAction<S>) => {}];
273279
}
@@ -290,6 +296,7 @@ function useReducer<S, I, A>(
290296
stackError: new Error(),
291297
value: state,
292298
debugInfo: null,
299+
wrapper: null,
293300
});
294301
return [state, (action: A) => {}];
295302
}
@@ -303,6 +310,7 @@ function useRef<T>(initialValue: T): {current: T} {
303310
stackError: new Error(),
304311
value: ref.current,
305312
debugInfo: null,
313+
wrapper: null,
306314
});
307315
return ref;
308316
}
@@ -315,6 +323,7 @@ function useCacheRefresh(): () => void {
315323
stackError: new Error(),
316324
value: hook !== null ? hook.memoizedState : function refresh() {},
317325
debugInfo: null,
326+
wrapper: null,
318327
});
319328
return () => {};
320329
}
@@ -330,6 +339,7 @@ function useLayoutEffect(
330339
stackError: new Error(),
331340
value: create,
332341
debugInfo: null,
342+
wrapper: null,
333343
});
334344
}
335345

@@ -344,6 +354,7 @@ function useInsertionEffect(
344354
stackError: new Error(),
345355
value: create,
346356
debugInfo: null,
357+
wrapper: null,
347358
});
348359
}
349360

@@ -358,6 +369,7 @@ function useEffect(
358369
stackError: new Error(),
359370
value: create,
360371
debugInfo: null,
372+
wrapper: null,
361373
});
362374
}
363375

@@ -381,6 +393,7 @@ function useImperativeHandle<T>(
381393
stackError: new Error(),
382394
value: instance,
383395
debugInfo: null,
396+
wrapper: null,
384397
});
385398
}
386399

@@ -391,6 +404,7 @@ function useDebugValue(value: any, formatterFn: ?(value: any) => any) {
391404
stackError: new Error(),
392405
value: typeof formatterFn === 'function' ? formatterFn(value) : value,
393406
debugInfo: null,
407+
wrapper: null,
394408
});
395409
}
396410

@@ -402,6 +416,7 @@ function useCallback<T>(callback: T, inputs: Array<mixed> | void | null): T {
402416
stackError: new Error(),
403417
value: hook !== null ? hook.memoizedState[0] : callback,
404418
debugInfo: null,
419+
wrapper: null,
405420
});
406421
return callback;
407422
}
@@ -418,6 +433,7 @@ function useMemo<T>(
418433
stackError: new Error(),
419434
value,
420435
debugInfo: null,
436+
wrapper: null,
421437
});
422438
return value;
423439
}
@@ -439,6 +455,7 @@ function useSyncExternalStore<T>(
439455
stackError: new Error(),
440456
value,
441457
debugInfo: null,
458+
wrapper: null,
442459
});
443460
return value;
444461
}
@@ -458,6 +475,7 @@ function useTransition(): [
458475
stackError: new Error(),
459476
value: undefined,
460477
debugInfo: null,
478+
wrapper: null,
461479
});
462480
return [false, callback => {}];
463481
}
@@ -470,6 +488,7 @@ function useDeferredValue<T>(value: T, initialValue?: T): T {
470488
stackError: new Error(),
471489
value: hook !== null ? hook.memoizedState : value,
472490
debugInfo: null,
491+
wrapper: null,
473492
});
474493
return value;
475494
}
@@ -483,6 +502,7 @@ function useId(): string {
483502
stackError: new Error(),
484503
value: id,
485504
debugInfo: null,
505+
wrapper: null,
486506
});
487507
return id;
488508
}
@@ -533,6 +553,7 @@ function useOptimistic<S, A>(
533553
stackError: new Error(),
534554
value: state,
535555
debugInfo: null,
556+
wrapper: null,
536557
});
537558
return [state, (action: A) => {}];
538559
}
@@ -591,6 +612,7 @@ function useFormState<S, P>(
591612
stackError: stackError,
592613
value: value,
593614
debugInfo: debugInfo,
615+
wrapper: null,
594616
});
595617

596618
if (error !== null) {
@@ -618,6 +640,7 @@ function useHostTransitionStatus(): TransitionStatus {
618640
stackError: new Error(),
619641
value: status,
620642
debugInfo: null,
643+
wrapper: 'FormStatus',
621644
});
622645

623646
return status;
@@ -788,8 +811,14 @@ function findPrimitiveIndex(hookStack: any, hook: HookLogEntry) {
788811
}
789812
if (
790813
i < hookStack.length - 1 &&
791-
isReactWrapper(hookStack[i].functionName, hook.primitive)
814+
isReactWrapper(
815+
hookStack[i].functionName,
816+
hook.wrapper || hook.primitive,
817+
)
792818
) {
819+
if (primitiveStack[i].displayName !== null) {
820+
primitiveStack[i].displayName = hook.wrapper || hook.primitive;
821+
}
793822
i++;
794823
}
795824
return i;
@@ -798,6 +827,11 @@ function findPrimitiveIndex(hookStack: any, hook: HookLogEntry) {
798827
return -1;
799828
}
800829

830+
// cache key dispatcher
831+
// displayName
832+
// cache key
833+
// wrapper -> wrappers e.g. `FormStatus`
834+
801835
function parseTrimmedStack(rootStack: any, hook: HookLogEntry) {
802836
// Get the stack trace between the primitive hook function and
803837
// the root function call. I.e. the stack frames of custom hooks.

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

Lines changed: 13 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -42,51 +42,36 @@ describe('ReactHooksInspectionIntegration', () => {
4242
// @gate source || build === "development"
4343
// @gate enableFormActions && enableAsyncActions
4444
it('should support useFormStatus hook', async () => {
45-
function FormStatus() {
45+
function Foo() {
4646
const status = ReactDOM.useFormStatus();
4747
React.useMemo(() => 'memo', []);
4848
React.useMemo(() => 'not used', []);
4949

5050
return JSON.stringify(status);
5151
}
5252

53-
const treeWithoutFiber = ReactDebugTools.inspectHooks(FormStatus);
53+
const treeWithoutFiber = ReactDebugTools.inspectHooks(Foo);
5454
expect(normalizeSourceLoc(treeWithoutFiber)).toEqual([
5555
{
5656
debugInfo: null,
5757
hookSource: {
5858
columnNumber: 0,
5959
fileName: '**',
60-
functionName: 'FormStatus',
60+
functionName: 'Foo',
6161
lineNumber: 0,
6262
},
6363
id: null,
6464
isStateEditable: false,
65-
name: '.useFormStatus',
66-
subHooks: [
67-
{
68-
debugInfo: null,
69-
hookSource: {
70-
columnNumber: 0,
71-
fileName: '**',
72-
functionName: 'Object.useFormStatus',
73-
lineNumber: 0,
74-
},
75-
id: null,
76-
isStateEditable: false,
77-
name: 'HostTransitionStatus',
78-
subHooks: [],
79-
value: null,
80-
},
81-
],
65+
name: 'HostTransitionStatus',
66+
subHooks: [],
8267
value: null,
8368
},
8469
{
8570
debugInfo: null,
8671
hookSource: {
8772
columnNumber: 0,
8873
fileName: '**',
89-
functionName: 'FormStatus',
74+
functionName: 'Foo',
9075
lineNumber: 0,
9176
},
9277
id: 0,
@@ -100,7 +85,7 @@ describe('ReactHooksInspectionIntegration', () => {
10085
hookSource: {
10186
columnNumber: 0,
10287
fileName: '**',
103-
functionName: 'FormStatus',
88+
functionName: 'Foo',
10489
lineNumber: 0,
10590
},
10691
id: 1,
@@ -116,7 +101,7 @@ describe('ReactHooksInspectionIntegration', () => {
116101
await act(() => {
117102
root.render(
118103
<form>
119-
<FormStatus />
104+
<Foo />
120105
</form>,
121106
);
122107
});
@@ -130,36 +115,21 @@ describe('ReactHooksInspectionIntegration', () => {
130115
hookSource: {
131116
columnNumber: 0,
132117
fileName: '**',
133-
functionName: 'FormStatus',
118+
functionName: 'Foo',
134119
lineNumber: 0,
135120
},
136121
id: null,
137122
isStateEditable: false,
138-
name: '.useFormStatus',
139-
subHooks: [
140-
{
141-
debugInfo: null,
142-
hookSource: {
143-
columnNumber: 0,
144-
fileName: '**',
145-
functionName: 'Object.useFormStatus',
146-
lineNumber: 0,
147-
},
148-
id: null,
149-
isStateEditable: false,
150-
name: 'HostTransitionStatus',
151-
subHooks: [],
152-
value: null,
153-
},
154-
],
123+
name: 'HostTransitionStatus',
124+
subHooks: [],
155125
value: null,
156126
},
157127
{
158128
debugInfo: null,
159129
hookSource: {
160130
columnNumber: 0,
161131
fileName: '**',
162-
functionName: 'FormStatus',
132+
functionName: 'Foo',
163133
lineNumber: 0,
164134
},
165135
id: 0,
@@ -173,7 +143,7 @@ describe('ReactHooksInspectionIntegration', () => {
173143
hookSource: {
174144
columnNumber: 0,
175145
fileName: '**',
176-
functionName: 'FormStatus',
146+
functionName: 'Foo',
177147
lineNumber: 0,
178148
},
179149
id: 1,

‎packages/react-dom-bindings/src/shared/ReactDOMFormActions.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,7 @@ export function useFormStatus(): FormStatus {
7272
} else {
7373
const dispatcher = resolveDispatcher();
7474
// $FlowFixMe[not-a-function] We know this exists because of the feature check above.
75-
const status = dispatcher.useHostTransitionStatus();
76-
77-
dispatcher.useDebugValue(status);
78-
79-
return status;
75+
return dispatcher.useHostTransitionStatus();
8076
}
8177
}
8278

0 commit comments

Comments
 (0)
⚡