Remove __self and __source location from elements

Along with all the places using it like the _debugSource on Fiber.

This removes source location info from React DevTools and React Native Inspector.

Author: sebmarkbage

packages/react-client/src/ReactFlightClient.js

@@ -475,18 +475,6 @@ function createElement(
       writable: true,
       value: true, // This element has already been validated on the server.
     });
-    Object.defineProperty(element, '_self', {
-      configurable: false,
-      enumerable: false,
-      writable: false,
-      value: null,
-    });
-    Object.defineProperty(element, '_source', {
-      configurable: false,
-      enumerable: false,
-      writable: false,
-      value: null,
-    });
   }
   return element;
 }

packages/react-devtools-inline/__tests__/__e2e__/components.test.js

@@ -92,14 +92,15 @@ test.describe('Components', () => {
           ? valueElement.value
           : valueElement.innerText;
 
-        return [name, value, source.innerText];
+        return [name, value, source ? source.innerText : null];
       },
       {name: isEditableName, value: isEditableValue}
     );
 
     expect(propName).toBe('label');
     expect(propValue).toBe('"one"');
-    expect(sourceText).toMatch(/ListApp[a-zA-Z]*\.js/);
+    expect(sourceText).toBe(null);
+    // TODO: expect(sourceText).toMatch(/ListApp[a-zA-Z]*\.js/);
   });
 
   test('should allow props to be edited', async () => {

packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js

@@ -225,6 +225,7 @@ describe('Store component filters', () => {
   });
 
   // @reactVersion >= 16.0
+  // @reactVersion <= 18.3
   it('should filter by path', async () => {
     const Component = () => <div>Hi</div>;
 

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -773,12 +773,10 @@ export function attach(
     let owners = null;
     let props = null;
     let state = null;
-    let source = null;
 
     const element = internalInstance._currentElement;
     if (element !== null) {
       props = element.props;
-      source = element._source != null ? element._source : null;
 
       let owner = element._owner;
       if (owner) {
@@ -851,9 +849,6 @@ export function attach(
       // List of owners
       owners,
 
-      // Location of component in source code.
-      source,
-
       rootType: null,
       rendererPackageName: null,
       rendererVersion: null,

packages/react-devtools-shared/src/backend/renderer.js

@@ -958,7 +958,7 @@ export function attach(
 
   // NOTICE Keep in sync with get*ForFiber methods
   function shouldFilterFiber(fiber: Fiber): boolean {
-    const {_debugSource, tag, type, key} = fiber;
+    const {tag, type, key} = fiber;
 
     switch (tag) {
       case DehydratedSuspenseComponent:
@@ -1010,15 +1010,15 @@ export function attach(
       }
     }
 
-    if (_debugSource != null && hideElementsWithPaths.size > 0) {
-      const {fileName} = _debugSource;
-      // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-      for (const pathRegExp of hideElementsWithPaths) {
-        if (pathRegExp.test(fileName)) {
-          return true;
-        }
-      }
-    }
+    // TODO: Figure out a way to filter by path in the new model which has no debug info.
+    // if (hideElementsWithPaths.size > 0) {
+    //  const {fileName} = ...;
+    //  for (const pathRegExp of hideElementsWithPaths) {
+    //    if (pathRegExp.test(fileName)) {
+    //      return true;
+    //    }
+    //  }
+    // }
 
     return false;
   }
@@ -3132,7 +3132,6 @@ export function attach(
 
     const {
       _debugOwner,
-      _debugSource,
       stateNode,
       key,
       memoizedProps,
@@ -3362,9 +3361,6 @@ export function attach(
       // List of owners
       owners,
 
-      // Location of component in source code.
-      source: _debugSource || null,
-
       rootType,
       rendererPackageName: renderer.rendererPackageName,
       rendererVersion: renderer.version,
@@ -3725,9 +3721,6 @@ export function attach(
     if (nativeNodes !== null) {
       console.log('Nodes:', nativeNodes);
     }
-    if (result.source !== null) {
-      console.log('Location:', result.source);
-    }
     if (window.chrome || /firefox/i.test(navigator.userAgent)) {
       console.log(
         'Right-click any value to save it as a global variable for further inspection.',

packages/react-devtools-shared/src/backend/types.js

@@ -15,7 +15,6 @@
  */
 
 import type {ReactContext, Wakeable} from 'shared/ReactTypes';
-import type {Source} from 'shared/ReactElementType';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
   ComponentFilter,
@@ -280,9 +279,6 @@ export type InspectedElement = {
   // List of owners
   owners: Array<SerializedElement> | null,
 
-  // Location of component in source code.
-  source: Source | null,
-
   type: ElementType,
 
   // Meta information about the root this element belongs to.

packages/react-devtools-shared/src/backendAPI.js

@@ -226,7 +226,6 @@ export function convertInspectedElementBackendToFrontend(
     canViewSource,
     hasLegacyContext,
     id,
-    source,
     type,
     owners,
     context,
@@ -261,7 +260,7 @@ export function convertInspectedElementBackendToFrontend(
     rendererPackageName,
     rendererVersion,
     rootType,
-    source,
+    source: null, // TODO: Load source location lazily.
     type,
     owners:
       owners === null

packages/react-devtools-shared/src/frontend/types.js

@@ -14,7 +14,6 @@
  * Be mindful of backwards compatibility when making changes.
  */
 
-import type {Source} from 'shared/ReactElementType';
 import type {
   Dehydrated,
   Unserializable,
@@ -220,7 +219,7 @@ export type InspectedElement = {
   owners: Array<SerializedElement> | null,
 
   // Location of component in source code.
-  source: Source | null,
+  source: null, // TODO: Reinstate a way to load this lazily.
 
   type: ElementType,
 

packages/react-dom/src/__tests__/ReactFunctionComponent-test.js

@@ -270,7 +270,6 @@ describe('ReactFunctionComponent', () => {
         return <FunctionComponent name="A" ref={() => {}} />;
       }
     }
-    Object.defineProperty(AnonymousParentUsingJSX, 'name', {value: undefined});
 
     let instance1;
 
@@ -293,9 +292,6 @@ describe('ReactFunctionComponent', () => {
         });
       }
     }
-    Object.defineProperty(AnonymousParentNotUsingJSX, 'name', {
-      value: undefined,
-    });
 
     let instance2;
     expect(() => {

packages/react-native-renderer/src/ReactNativeFiberInspector.js

@@ -37,7 +37,6 @@ function createHierarchy(fiberHierarchy) {
     getInspectorData: findNodeHandle => {
       return {
         props: getHostProps(fiber),
-        source: fiber._debugSource,
         measure: callback => {
           // If this is Fabric, we'll find a shadow node and use that to measure.
           const hostFiber = findCurrentHostFiber(fiber);
@@ -98,7 +97,6 @@ function getInspectorDataForInstance(
         hierarchy: [],
         props: emptyObject,
         selectedIndex: null,
-        source: null,
       };
     }
 
@@ -107,15 +105,13 @@ function getInspectorDataForInstance(
     const instance = lastNonHostInstance(fiberHierarchy);
     const hierarchy = createHierarchy(fiberHierarchy);
     const props = getHostProps(instance);
-    const source = instance._debugSource;
     const selectedIndex = fiberHierarchy.indexOf(instance);
 
     return {
       closestInstance: instance,
       hierarchy,
       props,
       selectedIndex,
-      source,
     };
   }