[pull] main from facebook:main

.eslintrc.js

@@ -474,7 +474,7 @@ module.exports = {
     {
       files: ['packages/react-server-dom-turbopack/**/*.js'],
       globals: {
-        __turbopack_load__: 'readonly',
+        __turbopack_load_by_url__: 'readonly',
         __turbopack_require__: 'readonly',
       },
     },

compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts

@@ -3001,6 +3001,8 @@ function isReorderableExpression(
         }
       }
     }
+    case 'TSAsExpression':
+    case 'TSNonNullExpression':
     case 'TypeCastExpression': {
       return isReorderableExpression(
         builder,

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-as-expression-default-value.expect.md

@@ -0,0 +1,67 @@
+
+## Input
+
+```javascript
+type Status = 'pending' | 'success' | 'error';
+
+const StatusIndicator = ({status}: {status: Status}) => {
+  return <div className={`status-${status}`}>Status: {status}</div>;
+};
+
+const Component = ({status = 'pending' as Status}) => {
+  return <StatusIndicator status={status} />;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{status: 'success'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+type Status = "pending" | "success" | "error";
+
+const StatusIndicator = (t0) => {
+  const $ = _c(3);
+  const { status } = t0;
+  const t1 = `status-${status}`;
+  let t2;
+  if ($[0] !== status || $[1] !== t1) {
+    t2 = <div className={t1}>Status: {status}</div>;
+    $[0] = status;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+};
+
+const Component = (t0) => {
+  const $ = _c(2);
+  const { status: t1 } = t0;
+  const status = t1 === undefined ? ("pending" as Status) : t1;
+  let t2;
+  if ($[0] !== status) {
+    t2 = <StatusIndicator status={status} />;
+    $[0] = status;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  return t2;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ status: "success" }],
+};
+
+```
+
+### Eval output
+(kind: ok) <div class="status-success">Status: success</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-as-expression-default-value.tsx

@@ -0,0 +1,14 @@
+type Status = 'pending' | 'success' | 'error';
+
+const StatusIndicator = ({status}: {status: Status}) => {
+  return <div className={`status-${status}`}>Status: {status}</div>;
+};
+
+const Component = ({status = 'pending' as Status}) => {
+  return <StatusIndicator status={status} />;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{status: 'success'}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.expect.md

@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+const THEME_MAP: ReadonlyMap<string, string> = new Map([
+  ['default', 'light'],
+  ['dark', 'dark'],
+]);
+
+export const Component = ({theme = THEME_MAP.get('default')!}) => {
+  return <div className={`theme-${theme}`}>User preferences</div>;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{status: 'success'}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+const THEME_MAP: ReadonlyMap<string, string> = new Map([
+  ["default", "light"],
+  ["dark", "dark"],
+]);
+
+export const Component = (t0) => {
+  const $ = _c(2);
+  const { theme: t1 } = t0;
+  const theme = t1 === undefined ? THEME_MAP.get("default") : t1;
+  const t2 = `theme-${theme}`;
+  let t3;
+  if ($[0] !== t2) {
+    t3 = <div className={t2}>User preferences</div>;
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  return t3;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ status: "success" }],
+};
+
+```
+
+### Eval output
+(kind: ok) <div class="theme-light">User preferences</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ts-non-null-expression-default-value.tsx

@@ -0,0 +1,13 @@
+const THEME_MAP: ReadonlyMap<string, string> = new Map([
+  ['default', 'light'],
+  ['dark', 'dark'],
+]);
+
+export const Component = ({theme = THEME_MAP.get('default')!}) => {
+  return <div className={`theme-${theme}`}>User preferences</div>;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{status: 'success'}],
+};

packages/react-client/src/ReactFlightClient.js

@@ -1353,6 +1353,26 @@ function waitForReference<T>(
   map: (response: Response, model: any, parentObject: Object, key: string) => T,
   path: Array<string>,
 ): T {
+  if (
+    __DEV__ &&
+    // TODO: This should check for the existence of the "readable" side, not the "writable".
+    response._debugChannel === undefined
+  ) {
+    if (
+      referencedChunk.status === PENDING &&
+      parentObject[0] === REACT_ELEMENT_TYPE &&
+      (key === '4' || key === '5')
+    ) {
+      // If the parent object is an unparsed React element tuple, and this is a reference
+      // to the owner or debug stack. Then we expect the chunk to have been emitted earlier
+      // in the stream. It might be blocked on other things but chunk should no longer be pending.
+      // If it's still pending that suggests that it was referencing an object in the debug
+      // channel, but no debug channel was wired up so it's missing. In this case we can just
+      // drop the debug info instead of halting the whole stream.
+      return (null: any);
+    }
+  }
+
   let handler: InitializationHandler;
   if (initializingHandler) {
     handler = initializingHandler;

packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser.js

@@ -8,5 +8,5 @@
  */
 
 export function loadChunk(filename: string): Promise<mixed> {
-  return __turbopack_load__(filename);
+  return __turbopack_load_by_url__(filename);
 }

packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js

@@ -8,5 +8,5 @@
  */
 
 export function loadChunk(filename: string): Promise<mixed> {
-  return __turbopack_load__(filename);
+  return __turbopack_load_by_url__(filename);
 }

scripts/flow/environment.js

@@ -150,7 +150,7 @@ declare const __webpack_require__: ((id: string) => any) & {
   u: string => string,
 };
 
-declare function __turbopack_load__(id: string): Promise<mixed>;
+declare function __turbopack_load_by_url__(id: string): Promise<mixed>;
 declare const __turbopack_require__: ((id: string) => any) & {
   u: string => string,
 };

scripts/rollup/validate/eslintrc.cjs.js

@@ -65,7 +65,7 @@ module.exports = {
     __webpack_require__: 'readonly',
 
     // Flight Turbopack
-    __turbopack_load__: 'readonly',
+    __turbopack_load_by_url__: 'readonly',
     __turbopack_require__: 'readonly',
 
     // Flight Parcel

scripts/rollup/validate/eslintrc.cjs2015.js

@@ -62,7 +62,7 @@ module.exports = {
     __webpack_require__: 'readonly',
 
     // Flight Turbopack
-    __turbopack_load__: 'readonly',
+    __turbopack_load_by_url__: 'readonly',
     __turbopack_require__: 'readonly',
 
     // Flight Parcel

scripts/rollup/validate/eslintrc.esm.js

@@ -65,7 +65,7 @@ module.exports = {
     __webpack_require__: 'readonly',
 
     // Flight Turbopack
-    __turbopack_load__: 'readonly',
+    __turbopack_load_by_url__: 'readonly',
     __turbopack_require__: 'readonly',
 
     // Flight Parcel