Include the owner of a Server Component which must also be another Server Component

Author: sebmarkbage

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -214,7 +214,7 @@ describe('ReactFlight', () => {
       const rootModel = await ReactNoopFlightClient.read(transport);
       const greeting = rootModel.greeting;
       expect(greeting._debugInfo).toEqual(
-        __DEV__ ? [{name: 'Greeting', env: 'Server'}] : undefined,
+        __DEV__ ? [{name: 'Greeting', env: 'Server', owner: null}] : undefined,
       );
       ReactNoop.render(greeting);
     });
@@ -241,7 +241,7 @@ describe('ReactFlight', () => {
     await act(async () => {
       const promise = ReactNoopFlightClient.read(transport);
       expect(promise._debugInfo).toEqual(
-        __DEV__ ? [{name: 'Greeting', env: 'Server'}] : undefined,
+        __DEV__ ? [{name: 'Greeting', env: 'Server', owner: null}] : undefined,
       );
       ReactNoop.render(await promise);
     });
@@ -2072,19 +2072,21 @@ describe('ReactFlight', () => {
     await act(async () => {
       const promise = ReactNoopFlightClient.read(transport);
       expect(promise._debugInfo).toEqual(
-        __DEV__ ? [{name: 'ServerComponent', env: 'Server'}] : undefined,
+        __DEV__
+          ? [{name: 'ServerComponent', env: 'Server', owner: null}]
+          : undefined,
       );
       const result = await promise;
       const thirdPartyChildren = await result.props.children[1];
       // We expect the debug info to be transferred from the inner stream to the outer.
       expect(thirdPartyChildren[0]._debugInfo).toEqual(
         __DEV__
-          ? [{name: 'ThirdPartyComponent', env: 'third-party'}]
+          ? [{name: 'ThirdPartyComponent', env: 'third-party', owner: null}]
           : undefined,
       );
       expect(thirdPartyChildren[1]._debugInfo).toEqual(
         __DEV__
-          ? [{name: 'ThirdPartyLazyComponent', env: 'third-party'}]
+          ? [{name: 'ThirdPartyLazyComponent', env: 'third-party', owner: null}]
           : undefined,
       );
       ReactNoop.render(result);
@@ -2172,9 +2174,10 @@ describe('ReactFlight', () => {
       // We've rendered down to the span.
       expect(greeting.type).toBe('span');
       if (__DEV__) {
+        const greetInfo = {name: 'Greeting', env: 'Server', owner: null};
         expect(greeting._debugInfo).toEqual([
-          {name: 'Greeting', env: 'Server'},
-          {name: 'Container', env: 'Server'},
+          greetInfo,
+          {name: 'Container', env: 'Server', owner: greetInfo},
         ]);
         // The owner that created the span was the outer server component.
         // We expect the debug info to be referentially equal to the owner.

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

@@ -101,6 +101,7 @@ describe('component stack', () => {
       {
         name: 'ServerComponent',
         env: 'Server',
+        owner: null,
       },
     ];
     const Parent = () => ChildPromise;

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js

@@ -290,7 +290,7 @@ describe('ReactFlightDOMEdge', () => {
       <ServerComponent recurse={20} />,
     );
     const serializedContent = await readResult(stream);
-    const expectedDebugInfoSize = __DEV__ ? 42 * 20 : 0;
+    const expectedDebugInfoSize = __DEV__ ? 64 * 20 : 0;
     expect(serializedContent.length).toBeLessThan(150 + expectedDebugInfoSize);
   });
 

packages/react-server/src/ReactFlightServer.js

@@ -596,6 +596,7 @@ function renderFunctionComponent<Props>(
   key: null | string,
   Component: (p: Props, arg: void) => any,
   props: Props,
+  owner: null | ReactComponentInfo,
 ): ReactJSONValue {
   // Reset the task's thenable state before continuing, so that if a later
   // component suspends we can reuse the same task object. If the same
@@ -624,6 +625,7 @@ function renderFunctionComponent<Props>(
       componentDebugInfo = {
         name: componentName,
         env: request.environmentName,
+        owner: owner,
       };
       // We outline this model eagerly so that we can refer to by reference as an owner.
       // If we had a smarter way to dedupe we might not have to do this if there ends up
@@ -832,7 +834,7 @@ function renderElement(
       return renderClientElement(task, type, key, props, owner);
     }
     // This is a Server Component.
-    return renderFunctionComponent(request, task, key, type, props);
+    return renderFunctionComponent(request, task, key, type, props, owner);
   } else if (typeof type === 'string') {
     // This is a host element. E.g. HTML.
     return renderClientElement(task, type, key, props, owner);
@@ -878,7 +880,14 @@ function renderElement(
         );
       }
       case REACT_FORWARD_REF_TYPE: {
-        return renderFunctionComponent(request, task, key, type.render, props);
+        return renderFunctionComponent(
+          request,
+          task,
+          key,
+          type.render,
+          props,
+          owner,
+        );
       }
       case REACT_MEMO_TYPE: {
         return renderElement(request, task, type.type, key, ref, props, owner);

packages/react/src/__tests__/ReactFetch-test.js

@@ -86,7 +86,7 @@ describe('ReactFetch', () => {
     const promise = render(Component);
     expect(await promise).toMatchInlineSnapshot(`"GET world []"`);
     expect(promise._debugInfo).toEqual(
-      __DEV__ ? [{name: 'Component', env: 'Server'}] : undefined,
+      __DEV__ ? [{name: 'Component', env: 'Server', owner: null}] : undefined,
     );
     expect(fetchCount).toBe(1);
   });

packages/shared/ReactTypes.js

@@ -181,6 +181,7 @@ export type Awaited<T> = T extends null | void
 export type ReactComponentInfo = {
   +name?: string,
   +env?: string,
+  +owner?: null | ReactComponentInfo,
 };
 
 export type ReactAsyncInfo = {