From 4483b7960bc5080422ff7e1ee301df9cf9ce872d Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 6 Feb 2023 20:10:17 -0500
Subject: [PATCH 01/13] Fix browser fixture

---
 fixtures/flight-browser/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/fixtures/flight-browser/index.html b/fixtures/flight-browser/index.html
index 927a0556d53..5b16a2809c7 100644
--- a/fixtures/flight-browser/index.html
+++ b/fixtures/flight-browser/index.html
@@ -20,7 +20,7 @@ <h1>Flight Example</h1>
     <script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
     <script src="../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
     <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js"></script>
-    <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack.development.js"></script>
+    <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-client.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
       let Suspense = React.Suspense;
@@ -60,7 +60,7 @@ <h1>Flight Example</h1>
         content: <HTML />,
       };
 
-      let stream = ReactServerDOMWriter.renderToReadableStream(model);
+      let stream = ReactServerDOMServer.renderToReadableStream(model);
       let response = new Response(stream, {
         headers: {'Content-Type': 'text/html'},
       });
@@ -70,13 +70,13 @@ <h1>Flight Example</h1>
         let blob = await responseToDisplay.blob();
         let url = URL.createObjectURL(blob);
 
-        let data = ReactServerDOMReader.createFromFetch(
+        let data = ReactServerDOMClient.createFromFetch(
           fetch(url)
         );
         // The client also supports XHR streaming.
         // var xhr = new XMLHttpRequest();
         // xhr.open('GET', url);
-        // let data = ReactServerDOMReader.createFromXHR(xhr);
+        // let data = ReactServerDOMClient.createFromXHR(xhr);
         // xhr.send();
 
         renderResult(data);

From 9acb2bad22f33571fc447d004fdb2c6b72d3ce8e Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 6 Feb 2023 20:28:20 -0500
Subject: [PATCH 02/13] Drop react-fetch

---
 fixtures/flight/src/App.server.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/fixtures/flight/src/App.server.js b/fixtures/flight/src/App.server.js
index 4a22318e9f1..cafe92a7f56 100644
--- a/fixtures/flight/src/App.server.js
+++ b/fixtures/flight/src/App.server.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import {fetch} from 'react-fetch';
 
 import Container from './Container.js';
 
@@ -8,8 +7,9 @@ import {Counter as Counter2} from './Counter2.client.js';
 
 import ShowMore from './ShowMore.client.js';
 
-export default function App() {
-  const todos = fetch('http://localhost:3001/todos').json();
+export default async function App() {
+  const res = await fetch('http://localhost:3001/todos');
+  const todos = await res.json();
   return (
     <Container>
       <h1>Hello, world</h1>

From 1a4d72d8b2b9ea5e6e4d473e6f9a29a6b7b1b66b Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 6 Feb 2023 20:49:32 -0500
Subject: [PATCH 03/13] Fix typo in loader

---
 .../react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index bdbcb73a2a5..5c2da1d0f57 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -263,7 +263,6 @@ export async function transformSource(
           ');';
       } else {
         newSrc += 'export const ' + name + ' = ';
-        newSrc += 'export default ';
         newSrc += 'Object.defineProperties(function() {';
         newSrc +=
           'throw new Error(' +

From af65ab9a15535e1dcfb8e0c6649447d7ed82c719 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 6 Feb 2023 22:17:39 -0500
Subject: [PATCH 04/13] Support newer ESM loader format in Node

---
 fixtures/flight/loader/index.js               |  30 ++-
 .../src/ReactFlightWebpackNodeLoader.js       | 174 +++++++++++-------
 2 files changed, 134 insertions(+), 70 deletions(-)

diff --git a/fixtures/flight/loader/index.js b/fixtures/flight/loader/index.js
index 07e7eacd010..6a78bbde04f 100644
--- a/fixtures/flight/loader/index.js
+++ b/fixtures/flight/loader/index.js
@@ -1,10 +1,11 @@
 import {
   resolve,
-  getSource,
+  load as reactLoad,
+  getSource as getSourceImpl,
   transformSource as reactTransformSource,
 } from 'react-server-dom-webpack/node-loader';
 
-export {resolve, getSource};
+export {resolve};
 
 import babel from '@babel/core';
 
@@ -17,6 +18,23 @@ const babelOptions = {
   ],
 };
 
+async function babelLoad(url, context, defaultLoad) {
+  const {format} = context;
+  const result = await defaultLoad(url, context, defaultLoad);
+  if (result.format === 'module') {
+    const opt = Object.assign({filename: url}, babelOptions);
+    const {code} = await babel.transformAsync(result.source, opt);
+    return {source: code, format: 'module'};
+  }
+  return defaultLoad(url, context, defaultLoad);
+}
+
+export async function load(url, context, defaultLoad) {
+  return await reactLoad(url, context, (u, c) => {
+    return babelLoad(u, c, defaultLoad);
+  });
+}
+
 async function babelTransformSource(source, context, defaultTransformSource) {
   const {format} = context;
   if (format === 'module') {
@@ -27,8 +45,12 @@ async function babelTransformSource(source, context, defaultTransformSource) {
   return defaultTransformSource(source, context, defaultTransformSource);
 }
 
-export async function transformSource(source, context, defaultTransformSource) {
-  return reactTransformSource(source, context, (s, c) => {
+async function transformSourceImpl(source, context, defaultTransformSource) {
+  return await reactTransformSource(source, context, (s, c) => {
     return babelTransformSource(s, c, defaultTransformSource);
   });
 }
+
+export const transformSource =
+  process.version < 'v16' ? transformSourceImpl : undefined;
+export const getSource = process.version < 'v16' ? getSourceImpl : undefined;
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index 5c2da1d0f57..b12a8102217 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -41,6 +41,18 @@ type TransformSourceFunction = (
   TransformSourceFunction,
 ) => Promise<{source: Source}>;
 
+type LoadContext = {
+  conditions: Array<string>,
+  format: string | null | void,
+  importAssertions: Object,
+};
+
+type LoadFunction = (
+  string,
+  LoadContext,
+  LoadFunction,
+) => Promise<{format: string, shortCircuit?: boolean, source: Source}>;
+
 type Source = string | ArrayBuffer | Uint8Array;
 
 let warnedAboutConditionsFlag = false;
@@ -148,33 +160,11 @@ function resolveClientImport(
   return stashedResolve(specifier, {conditions, parentURL}, stashedResolve);
 }
 
-async function loadClientImport(
-  url: string,
-  defaultTransformSource: TransformSourceFunction,
-): Promise<{source: Source}> {
-  if (stashedGetSource === null) {
-    throw new Error(
-      'Expected getSource to have been called before transformSource',
-    );
-  }
-  // TODO: Validate that this is another module by calling getFormat.
-  const {source} = await stashedGetSource(
-    url,
-    {format: 'module'},
-    stashedGetSource,
-  );
-  return defaultTransformSource(
-    source,
-    {format: 'module', url},
-    defaultTransformSource,
-  );
-}
-
 async function parseExportNamesInto(
   transformedSource: string,
   names: Array<string>,
   parentURL: string,
-  defaultTransformSource: TransformSourceFunction,
+  loader: LoadFunction,
 ): Promise<void> {
   const {body} = acorn.parse(transformedSource, {
     ecmaVersion: '2019',
@@ -189,11 +179,15 @@ async function parseExportNamesInto(
           continue;
         } else {
           const {url} = await resolveClientImport(node.source.value, parentURL);
-          const {source} = await loadClientImport(url, defaultTransformSource);
+          const {source} = await loader(
+            url,
+            {format: 'module', conditions: [], importAssertions: {}},
+            loader,
+          );
           if (typeof source !== 'string') {
             throw new Error('Expected the transformed source to be a string.');
           }
-          parseExportNamesInto(source, names, url, defaultTransformSource);
+          await parseExportNamesInto(source, names, url, loader);
           continue;
         }
       case 'ExportDefaultDeclaration':
@@ -221,6 +215,75 @@ async function parseExportNamesInto(
   }
 }
 
+async function transformClientModule(
+  source: string,
+  url: string,
+  loader: LoadFunction,
+): Promise<string> {
+  const names: Array<string> = [];
+
+  await parseExportNamesInto(source, names, url, loader);
+
+  let newSrc =
+    "const CLIENT_REFERENCE = Symbol.for('react.client.reference');\n";
+  for (let i = 0; i < names.length; i++) {
+    const name = names[i];
+    if (name === 'default') {
+      newSrc += 'export default ';
+      newSrc += 'Object.defineProperties(function() {';
+      newSrc +=
+        'throw new Error(' +
+        JSON.stringify(
+          `Attempted to call the default export of ${url} from the server` +
+            `but it's on the client. It's not possible to invoke a client function from ` +
+            `the server, it can only be rendered as a Component or passed to props of a` +
+            `Client Component.`,
+        ) +
+        ');';
+    } else {
+      newSrc += 'export const ' + name + ' = ';
+      newSrc += 'Object.defineProperties(function() {';
+      newSrc +=
+        'throw new Error(' +
+        JSON.stringify(
+          `Attempted to call ${name}() from the server but ${name} is on the client. ` +
+            `It's not possible to invoke a client function from the server, it can ` +
+            `only be rendered as a Component or passed to props of a Client Component.`,
+        ) +
+        ');';
+    }
+    newSrc += '},{';
+    newSrc += 'name: { value: ' + JSON.stringify(name) + '},';
+    newSrc += '$$typeof: {value: CLIENT_REFERENCE},';
+    newSrc += 'filepath: {value: ' + JSON.stringify(url) + '}';
+    newSrc += '});\n';
+  }
+  return newSrc;
+}
+
+async function loadClientImport(
+  url: string,
+  defaultTransformSource: TransformSourceFunction,
+): Promise<{format: string, shortCircuit?: boolean, source: Source}> {
+  if (stashedGetSource === null) {
+    throw new Error(
+      'Expected getSource to have been called before transformSource',
+    );
+  }
+  // TODO: Validate that this is another module by calling getFormat.
+  const {source} = await stashedGetSource(
+    url,
+    {format: 'module'},
+    stashedGetSource,
+  );
+  const result = await defaultTransformSource(
+    source,
+    {format: 'module', url},
+    defaultTransformSource,
+  );
+  return {format: 'module', source: result.source};
+}
+
 export async function transformSource(
   source: Source,
   context: TransformSourceContext,
@@ -236,51 +299,30 @@ export async function transformSource(
     if (typeof transformedSource !== 'string') {
       throw new Error('Expected source to have been transformed to a string.');
     }
-
-    const names: Array<string> = [];
-    await parseExportNamesInto(
+    const newSrc = await transformClientModule(
       transformedSource,
-      names,
       context.url,
-      defaultTransformSource,
+      (url: string, ctx: LoadContext, defaultLoad: LoadFunction) => {
+        return loadClientImport(url, defaultTransformSource);
+      },
     );
-
-    let newSrc =
-      "const CLIENT_REFERENCE = Symbol.for('react.client.reference');\n";
-    for (let i = 0; i < names.length; i++) {
-      const name = names[i];
-      if (name === 'default') {
-        newSrc += 'export default ';
-        newSrc += 'Object.defineProperties(function() {';
-        newSrc +=
-          'throw new Error(' +
-          JSON.stringify(
-            `Attempted to call the default export of ${context.url} from the server` +
-              `but it's on the client. It's not possible to invoke a client function from ` +
-              `the server, it can only be rendered as a Component or passed to props of a` +
-              `Client Component.`,
-          ) +
-          ');';
-      } else {
-        newSrc += 'export const ' + name + ' = ';
-        newSrc += 'Object.defineProperties(function() {';
-        newSrc +=
-          'throw new Error(' +
-          JSON.stringify(
-            `Attempted to call ${name}() from the server but ${name} is on the client. ` +
-              `It's not possible to invoke a client function from the server, it can ` +
-              `only be rendered as a Component or passed to props of a Client Component.`,
-          ) +
-          ');';
-      }
-      newSrc += '},{';
-      newSrc += 'name: { value: ' + JSON.stringify(name) + '},';
-      newSrc += '$$typeof: {value: CLIENT_REFERENCE},';
-      newSrc += 'filepath: {value: ' + JSON.stringify(context.url) + '}';
-      newSrc += '});\n';
-    }
-
     return {source: newSrc};
   }
   return transformed;
 }
+
+export async function load(
+  url: string,
+  context: LoadContext,
+  defaultLoad: LoadFunction,
+): Promise<{format: string, shortCircuit?: boolean, source: Source}> {
+  if (context.format === 'module' && url.endsWith('.client.js')) {
+    const result = await defaultLoad(url, context, defaultLoad);
+    if (typeof result.source !== 'string') {
+      throw new Error('Expected source to have been loaded into a string.');
+    }
+    const newSrc = await transformClientModule(result.source, url, defaultLoad);
+    return {format: 'module', source: newSrc};
+  }
+  return defaultLoad(url, context, defaultLoad);
+}

From 4e0460ce645547e5e12a98f2a6468e48d057a322 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 6 Feb 2023 22:21:16 -0500
Subject: [PATCH 05/13] Remove .client.js and .server.js convention from
 bundles

We don't use this anymore since we don't export any .server.js files.
---
 scripts/rollup/bundles.js | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index f6e63c2d951..2b81e666732 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -950,7 +950,7 @@ deepFreeze(bundles);
 deepFreeze(bundleTypes);
 deepFreeze(moduleTypes);
 
-function getOriginalFilename(bundle, bundleType) {
+function getFilename(bundle, bundleType) {
   let name = bundle.name || bundle.entry;
   const globalName = bundle.global;
   // we do this to replace / to -, for react-dom/server
@@ -993,23 +993,6 @@ function getOriginalFilename(bundle, bundleType) {
   }
 }
 
-function getFilename(bundle, bundleType) {
-  const originalFilename = getOriginalFilename(bundle, bundleType);
-  // Ensure .server.js or .client.js is the final suffix.
-  // This is important for the Server tooling convention.
-  if (originalFilename.indexOf('.server.') !== -1) {
-    return originalFilename
-      .replace('.server.', '.')
-      .replace('.js', '.server.js');
-  }
-  if (originalFilename.indexOf('.client.') !== -1) {
-    return originalFilename
-      .replace('.client.', '.')
-      .replace('.js', '.client.js');
-  }
-  return originalFilename;
-}
-
 module.exports = {
   bundleTypes,
   moduleTypes,

From ac03eb181b5918030f06aca478b83dae43a4aa79 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 6 Feb 2023 22:23:19 -0500
Subject: [PATCH 06/13] Add "use client" to Flight fixtures

---
 fixtures/flight/src/Counter.client.js  | 2 ++
 fixtures/flight/src/Counter2.client.js | 2 ++
 fixtures/flight/src/ShowMore.client.js | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/fixtures/flight/src/Counter.client.js b/fixtures/flight/src/Counter.client.js
index 676280f0542..8785424ca46 100644
--- a/fixtures/flight/src/Counter.client.js
+++ b/fixtures/flight/src/Counter.client.js
@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import Container from './Container.js';
diff --git a/fixtures/flight/src/Counter2.client.js b/fixtures/flight/src/Counter2.client.js
index 084f7bc5f07..1c5ecf85cc9 100644
--- a/fixtures/flight/src/Counter2.client.js
+++ b/fixtures/flight/src/Counter2.client.js
@@ -1 +1,3 @@
+'use client';
+
 export * from './Counter.client.js';
diff --git a/fixtures/flight/src/ShowMore.client.js b/fixtures/flight/src/ShowMore.client.js
index 86d01baa798..1bb330d3d68 100644
--- a/fixtures/flight/src/ShowMore.client.js
+++ b/fixtures/flight/src/ShowMore.client.js
@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import Container from './Container.js';

From c26a3704adbc6d292c9d8c13a11a7d4271d3616a Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 6 Feb 2023 22:25:59 -0500
Subject: [PATCH 07/13] Remove .server.js enforcement

We no longer enforce this file name convention since server files are
implicit by context.
---
 .../src/ReactFlightWebpackNodeLoader.js       | 19 +-----------
 .../src/ReactFlightWebpackNodeRegister.js     | 29 -------------------
 2 files changed, 1 insertion(+), 47 deletions(-)

diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index b12a8102217..2e6d38a893d 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -82,24 +82,7 @@ export async function resolve(
       );
     }
   }
-  const resolved = await defaultResolve(specifier, context, defaultResolve);
-  if (resolved.url.endsWith('.server.js')) {
-    const parentURL = context.parentURL;
-    if (parentURL && !parentURL.endsWith('.server.js')) {
-      let reason;
-      if (specifier.endsWith('.server.js')) {
-        reason = `"${specifier}"`;
-      } else {
-        reason = `"${specifier}" (which expands to "${resolved.url}")`;
-      }
-      throw new Error(
-        `Cannot import ${reason} from "${parentURL}". ` +
-          'By react-server convention, .server.js files can only be imported from other .server.js files. ' +
-          'That way nobody accidentally sends these to the client by indirectly importing it.',
-      );
-    }
-  }
-  return resolved;
+  return await defaultResolve(specifier, context, defaultResolve);
 }
 
 export async function getSource(
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
index d2045e9364f..0d6278ea083 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
@@ -216,33 +216,4 @@ module.exports = function register() {
     // $FlowFixMe[incompatible-call] found when upgrading Flow
     module.exports = new Proxy(clientReference, proxyHandlers);
   };
-
-  // $FlowFixMe[prop-missing] found when upgrading Flow
-  const originalResolveFilename = Module._resolveFilename;
-
-  // $FlowFixMe[prop-missing] found when upgrading Flow
-  // $FlowFixMe[missing-this-annot]
-  Module._resolveFilename = function (request, parent, isMain, options) {
-    const resolved = originalResolveFilename.apply(this, arguments);
-    if (resolved.endsWith('.server.js')) {
-      if (
-        parent &&
-        parent.filename &&
-        !parent.filename.endsWith('.server.js')
-      ) {
-        let reason;
-        if (request.endsWith('.server.js')) {
-          reason = `"${request}"`;
-        } else {
-          reason = `"${request}" (which expands to "${resolved}")`;
-        }
-        throw new Error(
-          `Cannot import ${reason} from "${parent.filename}". ` +
-            'By react-server convention, .server.js files can only be imported from other .server.js files. ' +
-            'That way nobody accidentally sends these to the client by indirectly importing it.',
-        );
-      }
-    }
-    return resolved;
-  };
 };

From 377da22f8808bb8213c8983ecb5639418899528f Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 6 Feb 2023 22:27:43 -0500
Subject: [PATCH 08/13] Rename fixture .server.js to just .js

---
 fixtures/flight/server/{cli.server.js => cli.js}         | 2 +-
 fixtures/flight/server/{handler.server.js => handler.js} | 4 ++--
 fixtures/flight/server/package.json                      | 2 +-
 fixtures/flight/src/{App.server.js => App.js}            | 0
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename fixtures/flight/server/{cli.server.js => cli.js} (97%)
 rename fixtures/flight/server/{handler.server.js => handler.js} (89%)
 rename fixtures/flight/src/{App.server.js => App.js} (100%)

diff --git a/fixtures/flight/server/cli.server.js b/fixtures/flight/server/cli.js
similarity index 97%
rename from fixtures/flight/server/cli.server.js
rename to fixtures/flight/server/cli.js
index 5d58f1d0358..0705d824dfc 100644
--- a/fixtures/flight/server/cli.server.js
+++ b/fixtures/flight/server/cli.js
@@ -29,7 +29,7 @@ const app = express();
 
 // Application
 app.get('/', function (req, res) {
-  require('./handler.server.js')(req, res);
+  require('./handler.js')(req, res);
 });
 
 app.get('/todos', function (req, res) {
diff --git a/fixtures/flight/server/handler.server.js b/fixtures/flight/server/handler.js
similarity index 89%
rename from fixtures/flight/server/handler.server.js
rename to fixtures/flight/server/handler.js
index 251833a52d1..5b6f6b2abea 100644
--- a/fixtures/flight/server/handler.server.js
+++ b/fixtures/flight/server/handler.js
@@ -6,8 +6,8 @@ const {resolve} = require('path');
 const React = require('react');
 
 module.exports = function (req, res) {
-  // const m = require('../src/App.server.js');
-  import('../src/App.server.js').then(m => {
+  // const m = require('../src/App.js');
+  import('../src/App.js').then(m => {
     const dist = process.env.NODE_ENV === 'development' ? 'dist' : 'build';
     readFile(
       resolve(__dirname, `../${dist}/react-client-manifest.json`),
diff --git a/fixtures/flight/server/package.json b/fixtures/flight/server/package.json
index 59055eee7d5..ad9c35437ed 100644
--- a/fixtures/flight/server/package.json
+++ b/fixtures/flight/server/package.json
@@ -1,4 +1,4 @@
 {
   "type": "commonjs",
-  "main": "./cli.server.js"
+  "main": "./cli.js"
 }
diff --git a/fixtures/flight/src/App.server.js b/fixtures/flight/src/App.js
similarity index 100%
rename from fixtures/flight/src/App.server.js
rename to fixtures/flight/src/App.js

From fb9efe35188d6f4aef5a74edd750efd798ab290c Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 6 Feb 2023 22:51:12 -0500
Subject: [PATCH 09/13] Move Node register to check for the "use client"
 directive

This removes the outdated .client.js convention from the Node register.

This is just a prototype so we don't have a proper parser. We should use
the acorn parser here instead to parse out comments etc.
---
 .../src/ReactFlightWebpackNodeRegister.js     | 20 ++++++++++++++++---
 .../src/__tests__/utils/WebpackMock.js        | 16 +++++++--------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
index 0d6278ea083..5fb28465128 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
@@ -204,8 +204,22 @@ module.exports = function register() {
   };
 
   // $FlowFixMe[prop-missing] found when upgrading Flow
-  Module._extensions['.client.js'] = function (module, path) {
-    const moduleId: string = (url.pathToFileURL(path).href: any);
+  const originalCompile = Module.prototype._compile;
+
+  // $FlowFixMe[prop-missing] found when upgrading Flow
+  Module.prototype._compile = function (
+    this: any,
+    content: string,
+    filename: string,
+  ): void {
+    // TODO: Properly parse the directive from the file content.
+    if (
+      content.indexOf('"use client"') === -1 &&
+      content.indexOf("'use client'") === -1
+    ) {
+      return originalCompile.apply(this, arguments);
+    }
+    const moduleId: string = (url.pathToFileURL(filename).href: any);
     const clientReference = Object.defineProperties(({}: any), {
       // Represents the whole Module object instead of a particular import.
       name: {value: '*'},
@@ -214,6 +228,6 @@ module.exports = function register() {
       async: {value: false},
     });
     // $FlowFixMe[incompatible-call] found when upgrading Flow
-    module.exports = new Proxy(clientReference, proxyHandlers);
+    this.exports = new Proxy(clientReference, proxyHandlers);
   };
 };
diff --git a/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js b/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
index 607e6e0d6c7..3ddfffc5771 100644
--- a/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
+++ b/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
@@ -21,21 +21,21 @@ global.__webpack_require__ = function (id) {
   return webpackModules[id];
 };
 
-const previousLoader = Module._extensions['.client.js'];
+const previousCompile = Module.prototype._compile;
 
 const register = require('react-server-dom-webpack/node-register');
-// Register node loader
+// Register node compile
 register();
 
-const nodeLoader = Module._extensions['.client.js'];
+const nodeCompile = Module.prototype._compile;
 
-if (previousLoader === nodeLoader) {
+if (previousCompile === nodeCompile) {
   throw new Error(
-    'Expected the Node loader to register the .client.js extension',
+    'Expected the Node loader to register the _compile extension',
   );
 }
 
-Module._extensions['.client.js'] = previousLoader;
+Module.prototype._compile = previousCompile;
 
 exports.webpackMap = webpackMap;
 exports.webpackModules = webpackModules;
@@ -57,7 +57,7 @@ exports.clientModuleError = function clientModuleError(moduleError) {
     },
   };
   const mod = {exports: {}};
-  nodeLoader(mod, idx);
+  nodeCompile.call(mod, '"use client"', idx);
   return mod.exports;
 };
 
@@ -99,6 +99,6 @@ exports.clientExports = function clientExports(moduleExports) {
     };
   }
   const mod = {exports: {}};
-  nodeLoader(mod, idx);
+  nodeCompile.call(mod, '"use client"', idx);
   return mod.exports;
 };

From bdca039068f6c419e6153ca31f4c33dd7ba3caad Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 6 Feb 2023 23:05:22 -0500
Subject: [PATCH 10/13] Move ESM loader to parse for "use client" instead

---
 .../src/ReactFlightWebpackNodeLoader.js       | 45 +++++++++++++++----
 1 file changed, 36 insertions(+), 9 deletions(-)

diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index 2e6d38a893d..f6bd8a0bc74 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -144,15 +144,11 @@ function resolveClientImport(
 }
 
 async function parseExportNamesInto(
-  transformedSource: string,
+  body: any,
   names: Array<string>,
   parentURL: string,
   loader: LoadFunction,
 ): Promise<void> {
-  const {body} = acorn.parse(transformedSource, {
-    ecmaVersion: '2019',
-    sourceType: 'module',
-  });
   for (let i = 0; i < body.length; i++) {
     const node = body[i];
     switch (node.type) {
@@ -170,7 +166,11 @@ async function parseExportNamesInto(
           if (typeof source !== 'string') {
             throw new Error('Expected the transformed source to be a string.');
           }
-          await parseExportNamesInto(source, names, url, loader);
+          const {body: childBody} = acorn.parse(source, {
+            ecmaVersion: '2019',
+            sourceType: 'module',
+          });
+          await parseExportNamesInto(childBody, names, url, loader);
           continue;
         }
       case 'ExportDefaultDeclaration':
@@ -205,7 +205,34 @@ async function transformClientModule(
 ): Promise<string> {
   const names: Array<string> = [];
 
-  await parseExportNamesInto(source, names, url, loader);
+  // Do a quick check for the exact string. If it doesn't exist, don't
+  // bother parsing.
+  if (source.indexOf('use client') === -1) {
+    return source;
+  }
+
+  const {body} = acorn.parse(source, {
+    ecmaVersion: '2019',
+    sourceType: 'module',
+  });
+
+  let useClient = false;
+  for (let i = 0; i < body.length; i++) {
+    const node = body[i];
+    if (node.type !== 'ExpressionStatement' || !node.directive) {
+      break;
+    }
+    if (node.directive === 'use client') {
+      useClient = true;
+      break;
+    }
+  }
+
+  if (!useClient) {
+    return source;
+  }
+
+  await parseExportNamesInto(body, names, url, loader);
 
   let newSrc =
     "const CLIENT_REFERENCE = Symbol.for('react.client.reference');\n";
@@ -277,7 +304,7 @@ export async function transformSource(
     context,
     defaultTransformSource,
   );
-  if (context.format === 'module' && context.url.endsWith('.client.js')) {
+  if (context.format === 'module') {
     const transformedSource = transformed.source;
     if (typeof transformedSource !== 'string') {
       throw new Error('Expected source to have been transformed to a string.');
@@ -299,7 +326,7 @@ export async function load(
   context: LoadContext,
   defaultLoad: LoadFunction,
 ): Promise<{format: string, shortCircuit?: boolean, source: Source}> {
-  if (context.format === 'module' && url.endsWith('.client.js')) {
+  if (context.format === 'module') {
     const result = await defaultLoad(url, context, defaultLoad);
     if (typeof result.source !== 'string') {
       throw new Error('Expected source to have been loaded into a string.');

From 68548ef075bd6bf322f0e2b3136db67818451156 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 6 Feb 2023 23:15:33 -0500
Subject: [PATCH 11/13] Properly parse the source to ensure the "use client"
 isn't a comment

or in the wrong place.
---
 .../src/ReactFlightWebpackNodeRegister.js     | 32 ++++++++++++++++---
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
index 5fb28465128..5899ba52c1b 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+const acorn = require('acorn');
+
 const url = require('url');
 
 const Module = require('module');
@@ -212,13 +214,33 @@ module.exports = function register() {
     content: string,
     filename: string,
   ): void {
-    // TODO: Properly parse the directive from the file content.
-    if (
-      content.indexOf('"use client"') === -1 &&
-      content.indexOf("'use client'") === -1
-    ) {
+    // Do a quick check for the exact string. If it doesn't exist, don't
+    // bother parsing.
+    if (content.indexOf('use client') === -1) {
       return originalCompile.apply(this, arguments);
     }
+
+    const {body} = acorn.parse(content, {
+      ecmaVersion: '2019',
+      sourceType: 'source',
+    });
+
+    let useClient = false;
+    for (let i = 0; i < body.length; i++) {
+      const node = body[i];
+      if (node.type !== 'ExpressionStatement' || !node.directive) {
+        break;
+      }
+      if (node.directive === 'use client') {
+        useClient = true;
+        break;
+      }
+    }
+
+    if (!useClient) {
+      return originalCompile.apply(this, arguments);
+    }
+
     const moduleId: string = (url.pathToFileURL(filename).href: any);
     const clientReference = Object.defineProperties(({}: any), {
       // Represents the whole Module object instead of a particular import.

From 0d207a68c397748c01fa2749131a5fe7e2584190 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 6 Feb 2023 23:16:44 -0500
Subject: [PATCH 12/13] Rename fixture files from .client.js

---
 fixtures/flight/src/App.js                              | 6 +++---
 fixtures/flight/src/{Counter.client.js => Counter.js}   | 0
 fixtures/flight/src/Counter2.client.js                  | 3 ---
 fixtures/flight/src/Counter2.js                         | 3 +++
 fixtures/flight/src/{ShowMore.client.js => ShowMore.js} | 0
 5 files changed, 6 insertions(+), 6 deletions(-)
 rename fixtures/flight/src/{Counter.client.js => Counter.js} (100%)
 delete mode 100644 fixtures/flight/src/Counter2.client.js
 create mode 100644 fixtures/flight/src/Counter2.js
 rename fixtures/flight/src/{ShowMore.client.js => ShowMore.js} (100%)

diff --git a/fixtures/flight/src/App.js b/fixtures/flight/src/App.js
index cafe92a7f56..0f86f7edad3 100644
--- a/fixtures/flight/src/App.js
+++ b/fixtures/flight/src/App.js
@@ -2,10 +2,10 @@ import * as React from 'react';
 
 import Container from './Container.js';
 
-import {Counter} from './Counter.client.js';
-import {Counter as Counter2} from './Counter2.client.js';
+import {Counter} from './Counter.js';
+import {Counter as Counter2} from './Counter2.js';
 
-import ShowMore from './ShowMore.client.js';
+import ShowMore from './ShowMore.js';
 
 export default async function App() {
   const res = await fetch('http://localhost:3001/todos');
diff --git a/fixtures/flight/src/Counter.client.js b/fixtures/flight/src/Counter.js
similarity index 100%
rename from fixtures/flight/src/Counter.client.js
rename to fixtures/flight/src/Counter.js
diff --git a/fixtures/flight/src/Counter2.client.js b/fixtures/flight/src/Counter2.client.js
deleted file mode 100644
index 1c5ecf85cc9..00000000000
--- a/fixtures/flight/src/Counter2.client.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use client';
-
-export * from './Counter.client.js';
diff --git a/fixtures/flight/src/Counter2.js b/fixtures/flight/src/Counter2.js
new file mode 100644
index 00000000000..d6541beaf21
--- /dev/null
+++ b/fixtures/flight/src/Counter2.js
@@ -0,0 +1,3 @@
+'use client';
+
+export * from './Counter.js';
diff --git a/fixtures/flight/src/ShowMore.client.js b/fixtures/flight/src/ShowMore.js
similarity index 100%
rename from fixtures/flight/src/ShowMore.client.js
rename to fixtures/flight/src/ShowMore.js

From 1720d99a2880c649373642f6147d26a2c007d8ef Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Tue, 7 Feb 2023 00:00:47 -0500
Subject: [PATCH 13/13] Include all .js files in the client manifest

This is not going to fly for any serious implementation. It pretty much
has to do a pre-compile pass over the server graph to discover the files
to include.

This is enough to run our fixture though.
---
 fixtures/flight/config/webpack.config.js                 | 9 ++++++++-
 .../src/ReactFlightWebpackPlugin.js                      | 4 ++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/fixtures/flight/config/webpack.config.js b/fixtures/flight/config/webpack.config.js
index e3af39826a1..1ed05735240 100644
--- a/fixtures/flight/config/webpack.config.js
+++ b/fixtures/flight/config/webpack.config.js
@@ -752,7 +752,14 @@ module.exports = function (webpackEnv) {
       //     },
       //   }),
       // Fork Start
-      new ReactFlightWebpackPlugin({isServer: false}),
+      new ReactFlightWebpackPlugin({
+        isServer: false,
+        clientReferences: {
+          directory: './src',
+          recursive: true,
+          include: /\.(js|ts|jsx|tsx)$/,
+        },
+      }),
       // Fork End
     ].filter(Boolean),
     // Turn off performance processing because we utilize
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index dd769f435c9..c40d6b1f560 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -79,7 +79,7 @@ export default class ReactFlightWebpackPlugin {
         {
           directory: '.',
           recursive: true,
-          include: /\.client\.(js|ts|jsx|tsx)$/,
+          include: /\.(js|ts|jsx|tsx)$/,
         },
       ];
     } else if (
@@ -231,7 +231,7 @@ export default class ReactFlightWebpackPlugin {
               // That way we know by the type of dep whether to include.
               // It also resolves conflicts when the same module is in multiple chunks.
 
-              if (!/\.client\.(js|ts)x?$/.test(module.resource)) {
+              if (!/\.(js|ts)x?$/.test(module.resource)) {
                 return;
               }
 
