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.
Brian Vaughn committed
Dec 13, 2018 at 09:40 UTC
7325ebe4d6e5b7ccf5a78128b825c8a6e383caa6
1 file changed
+40
packages/react-reconciler/src/ReactFiberReconciler.js
+40
@@ -62,6 +62,7 @@ import {
62
current as ReactCurrentFiberCurrent,
63
} from './ReactCurrentFiber';
64
import {StrictMode} from './ReactTypeOfMode';
65
+import {Sync} from './ReactFiberExpirationTime';
66
67
type OpaqueRoot = FiberRoot;
68
@@ -339,10 +340,49 @@ export function findHostInstanceWithNoPortals(
340
return hostFiber.stateNode;
341
}
342
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
+
381
export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
382
const {findFiberByHostInstance} = devToolsConfig;
383
return injectInternals({
384
...devToolsConfig,
385
+ overrideProps,
386
findHostInstanceByFiber(fiber: Fiber): Instance | TextInstance | null {
387
const hostFiber = findCurrentHostFiber(fiber);
388
if (hostFiber === null) {