[pull] main from facebook:main

packages/react-devtools-shared/src/backend/utils/parseStackTrace.js

@@ -52,8 +52,8 @@ function parseStackTraceFromChromeStack(
     if (filename === '<anonymous>') {
       filename = '';
     }
-    const line = +(parsed[3] || parsed[6]);
-    const col = +(parsed[4] || parsed[7]);
+    const line = +(parsed[3] || parsed[6] || 0);
+    const col = +(parsed[4] || parsed[7] || 0);
     parsedFrames.push([name, filename, line, col, 0, 0, isAsync]);
   }
   return parsedFrames;
@@ -235,6 +235,7 @@ function collectStackTrace(
 //     at name (filename:0:0)
 //     at filename:0:0
 //     at async filename:0:0
+//     at Array.map (<anonymous>)
 const chromeFrameRegExp =
   /^ *at (?:(.+) \((?:(.+):(\d+):(\d+)|\<anonymous\>)\)|(?:async )?(.+):(\d+):(\d+)|\<anonymous\>)$/;
 

packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js

@@ -63,13 +63,18 @@ export function CallSiteView({
   return (
     <div className={styles.CallSite}>
       {functionName || virtualFunctionName}
-      {' @ '}
-      <span
-        className={linkIsEnabled ? styles.Link : null}
-        onClick={viewSource}
-        title={url + ':' + line}>
-        {formatLocationForDisplay(url, line, column)}
-      </span>
+      {url !== '' && (
+        <>
+          {' @ '}
+          <span
+            className={linkIsEnabled ? styles.Link : null}
+            onClick={viewSource}
+            title={url + ':' + line}>
+            {formatLocationForDisplay(url, line, column)}
+          </span>
+        </>
+      )}
+
       <ElementBadges environmentName={environmentName} />
     </div>
   );

packages/react-devtools-shared/src/devtools/views/Components/formatLocationForDisplay.js

@@ -40,5 +40,9 @@ export default function formatLocationForDisplay(
     }
   }
 
+  if (line === 0) {
+    return nameOnly;
+  }
+
   return `${nameOnly}:${line}`;
 }

packages/react-server-dom-esm/src/client/ReactFlightDOMClientNode.js

@@ -56,8 +56,38 @@ export type Options = {
   findSourceMapURL?: FindSourceMapURLCallback,
   replayConsoleLogs?: boolean,
   environmentName?: string,
+  // For the Node.js client we only support a single-direction debug channel.
+  debugChannel?: Readable,
 };
 
+function startReadingFromStream(
+  response: Response,
+  stream: Readable,
+  isSecondaryStream: boolean,
+): void {
+  const streamState = createStreamState();
+
+  stream.on('data', chunk => {
+    if (typeof chunk === 'string') {
+      processStringChunk(response, streamState, chunk);
+    } else {
+      processBinaryChunk(response, streamState, chunk);
+    }
+  });
+
+  stream.on('error', error => {
+    reportGlobalError(response, error);
+  });
+
+  stream.on('end', () => {
+    // If we're the secondary stream, then we don't close the response until the
+    // debug channel closes.
+    if (!isSecondaryStream) {
+      close(response);
+    }
+  });
+}
+
 function createFromNodeStream<T>(
   stream: Readable,
   moduleRootPath: string,
@@ -80,18 +110,14 @@ function createFromNodeStream<T>(
       ? options.environmentName
       : undefined,
   );
-  const streamState = createStreamState();
-  stream.on('data', chunk => {
-    if (typeof chunk === 'string') {
-      processStringChunk(response, streamState, chunk);
-    } else {
-      processBinaryChunk(response, streamState, chunk);
-    }
-  });
-  stream.on('error', error => {
-    reportGlobalError(response, error);
-  });
-  stream.on('end', () => close(response));
+
+  if (__DEV__ && options && options.debugChannel) {
+    startReadingFromStream(response, options.debugChannel, false);
+    startReadingFromStream(response, stream, true);
+  } else {
+    startReadingFromStream(response, stream, false);
+  }
+
   return getRoot(response);
 }
 

packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js

@@ -76,6 +76,8 @@ export type Options = {
   temporaryReferences?: TemporaryReferenceSet,
   replayConsoleLogs?: boolean,
   environmentName?: string,
+  // For the Edge client we only support a single-direction debug channel.
+  debugChannel?: {readable?: ReadableStream, ...},
 };
 
 function createResponseFromOptions(options?: Options) {
@@ -100,6 +102,7 @@ function createResponseFromOptions(options?: Options) {
 function startReadingFromStream(
   response: FlightResponse,
   stream: ReadableStream,
+  isSecondaryStream: boolean,
 ): void {
   const streamState = createStreamState();
   const reader = stream.getReader();
@@ -112,7 +115,11 @@ function startReadingFromStream(
     ...
   }): void | Promise<void> {
     if (done) {
-      close(response);
+      // If we're the secondary stream, then we don't close the response until
+      // the debug channel closes.
+      if (!isSecondaryStream) {
+        close(response);
+      }
       return;
     }
     const buffer: Uint8Array = (value: any);
@@ -130,7 +137,19 @@ export function createFromReadableStream<T>(
   options?: Options,
 ): Thenable<T> {
   const response: FlightResponse = createResponseFromOptions(options);
-  startReadingFromStream(response, stream);
+
+  if (
+    __DEV__ &&
+    options &&
+    options.debugChannel &&
+    options.debugChannel.readable
+  ) {
+    startReadingFromStream(response, options.debugChannel.readable, false);
+    startReadingFromStream(response, stream, true);
+  } else {
+    startReadingFromStream(response, stream, false);
+  }
+
   return getRoot(response);
 }
 
@@ -141,7 +160,17 @@ export function createFromFetch<T>(
   const response: FlightResponse = createResponseFromOptions(options);
   promiseForResponse.then(
     function (r) {
-      startReadingFromStream(response, (r.body: any));
+      if (
+        __DEV__ &&
+        options &&
+        options.debugChannel &&
+        options.debugChannel.readable
+      ) {
+        startReadingFromStream(response, options.debugChannel.readable, false);
+        startReadingFromStream(response, (r.body: any), true);
+      } else {
+        startReadingFromStream(response, (r.body: any), false);
+      }
     },
     function (e) {
       reportGlobalError(response, e);

packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js

@@ -52,8 +52,38 @@ export type Options = {
   encodeFormAction?: EncodeFormActionCallback,
   replayConsoleLogs?: boolean,
   environmentName?: string,
+  // For the Node.js client we only support a single-direction debug channel.
+  debugChannel?: Readable,
 };
 
+function startReadingFromStream(
+  response: Response,
+  stream: Readable,
+  isSecondaryStream: boolean,
+): void {
+  const streamState = createStreamState();
+
+  stream.on('data', chunk => {
+    if (typeof chunk === 'string') {
+      processStringChunk(response, streamState, chunk);
+    } else {
+      processBinaryChunk(response, streamState, chunk);
+    }
+  });
+
+  stream.on('error', error => {
+    reportGlobalError(response, error);
+  });
+
+  stream.on('end', () => {
+    // If we're the secondary stream, then we don't close the response until the
+    // debug channel closes.
+    if (!isSecondaryStream) {
+      close(response);
+    }
+  });
+}
+
 export function createFromNodeStream<T>(
   stream: Readable,
   options?: Options,
@@ -72,17 +102,13 @@ export function createFromNodeStream<T>(
       ? options.environmentName
       : undefined,
   );
-  const streamState = createStreamState();
-  stream.on('data', chunk => {
-    if (typeof chunk === 'string') {
-      processStringChunk(response, streamState, chunk);
-    } else {
-      processBinaryChunk(response, streamState, chunk);
-    }
-  });
-  stream.on('error', error => {
-    reportGlobalError(response, error);
-  });
-  stream.on('end', () => close(response));
+
+  if (__DEV__ && options && options.debugChannel) {
+    startReadingFromStream(response, options.debugChannel, false);
+    startReadingFromStream(response, stream, true);
+  } else {
+    startReadingFromStream(response, stream, false);
+  }
+
   return getRoot(response);
 }