Skip to content

Commit 7325ebe

Browse files
authored
Inject overrideProps() fn to DevTools (#14427)
* Inject overrideProps() fn to DevTools This function will enable editing props for function components, host nodes, and special types like memo and forwardRef.
1 parent a22880e commit 7325ebe

File tree

1 file changed

+40
-0
lines changed

1 file changed

+40
-0
lines changed

packages/react-reconciler/src/ReactFiberReconciler.js

+40
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ import {
6262
current as ReactCurrentFiberCurrent,
6363
} from './ReactCurrentFiber';
6464
import {StrictMode} from './ReactTypeOfMode';
65+
import {Sync} from './ReactFiberExpirationTime';
6566

6667
type OpaqueRoot = FiberRoot;
6768

@@ -339,10 +340,49 @@ export function findHostInstanceWithNoPortals(
339340
return hostFiber.stateNode;
340341
}
341342

343+
let overrideProps = null;
344+
345+
if (__DEV__) {
346+
const copyWithSetImpl = (
347+
obj: Object | Array<any>,
348+
path: Array<string | number>,
349+
idx: number,
350+
value: any,
351+
) => {
352+
if (idx >= path.length) {
353+
return value;
354+
}
355+
const key = path[idx];
356+
const updated = Array.isArray(obj) ? obj.slice() : {...obj};
357+
// $FlowFixMe number or string is fine here
358+
updated[key] = copyWithSetImpl(obj[key], path, idx + 1, value);
359+
return updated;
360+
};
361+
362+
const copyWithSet = (
363+
obj: Object | Array<any>,
364+
path: Array<string | number>,
365+
value: any,
366+
): Object | Array<any> => {
367+
return copyWithSetImpl(obj, path, 0, value);
368+
};
369+
370+
// Support DevTools props for function components, forwardRef, memo, host components, etc.
371+
overrideProps = (fiber: Fiber, path: Array<string | number>, value: any) => {
372+
flushPassiveEffects();
373+
fiber.pendingProps = copyWithSet(fiber.memoizedProps, path, value);
374+
if (fiber.alternate) {
375+
fiber.alternate.pendingProps = fiber.pendingProps;
376+
}
377+
scheduleWork(fiber, Sync);
378+
};
379+
}
380+
342381
export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
343382
const {findFiberByHostInstance} = devToolsConfig;
344383
return injectInternals({
345384
...devToolsConfig,
385+
overrideProps,
346386
findHostInstanceByFiber(fiber: Fiber): Instance | TextInstance | null {
347387
const hostFiber = findCurrentHostFiber(fiber);
348388
if (hostFiber === null) {

0 commit comments

Comments
 (0)