Support ESM module loaders in Flight fixture (#20229)

This lets the Flight fixture run as "type": "module" or "commonjs".

Experimental loaders can be used similar to require.extensions to do the
transpilation and replacement of .client.js references.

Author: sebmarkbage

fixtures/flight/config/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

fixtures/flight/package.json

@@ -1,9 +1,11 @@
 {
   "name": "flight",
+  "type": "module",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@babel/core": "7.6.0",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/register": "^7.7.0",
     "@svgr/webpack": "4.3.2",
     "@typescript-eslint/eslint-plugin": "^2.2.0",
@@ -65,7 +67,7 @@
     "prebuild": "cp -r ../../build/node_modules/* ./node_modules/",
     "start": "concurrently \"npm run start:server\" \"npm run start:client\"",
     "start:client": "node scripts/start.js",
-    "start:server": "NODE_ENV=development node server",
+    "start:server": "NODE_ENV=development node --experimental-loader ./server/loader.mjs server",
     "start:prod": "node scripts/build.js && NODE_ENV=production node server",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom"

fixtures/flight/scripts/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

fixtures/flight/server/handler.server.mjs

@@ -0,0 +1,27 @@
+import {pipeToNodeWritable} from 'react-transport-dom-webpack/server.js';
+import * as React from 'react';
+import App from '../src/App.server.js';
+
+import {URL} from 'url';
+
+const rootPath = import.meta.url;
+function resolve(relative) {
+  return new URL(relative, rootPath).href;
+}
+
+export default function(req, res) {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  pipeToNodeWritable(<App />, res, {
+    // TODO: Read from a map on the disk.
+    [resolve('../src/Counter.client.js')]: {
+      id: './src/Counter.client.js',
+      chunks: ['1'],
+      name: 'default',
+    },
+    [resolve('../src/ShowMore.client.js')]: {
+      id: './src/ShowMore.client.js',
+      chunks: ['2'],
+      name: 'default',
+    },
+  });
+};

fixtures/flight/server/index.js

@@ -25,7 +25,8 @@ app.get('/', function(req, res) {
       delete require.cache[key];
     }
   }
-  require('./handler.server')(req, res);
+  import('./handler.server.mjs').then(m => m.default(req, res));
+  //   require('./handler.server.js')(req, res);
 });
 
 app.listen(3001, () => {

fixtures/flight/server/loader.mjs

@@ -0,0 +1,42 @@
+import babel from '@babel/core';
+
+const options = {
+  babelrc: false,
+  ignore: [/\/(build|node_modules)\//],
+  plugins: [
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-transform-react-jsx',
+  ],
+};
+
+const optionsCommonJS = {
+  ignore: [/\/(build|node_modules)\//],
+  presets: ['react-app'],
+  plugins: ['@babel/transform-modules-commonjs'],
+};
+
+export async function transformSource(source, context, defaultTransformSource) {
+  const {format} = context;
+  if (format === 'module' || format === 'commonjs') {
+    const opt = Object.assign(
+      {filename: context.url},
+      format === 'commonjs' ? optionsCommonJS : options
+    );
+    const {code} = await babel.transformAsync(source, opt);
+    return {source: code};
+  }
+  return defaultTransformSource(source, context);
+}
+
+export async function getSource(url, context, defaultGetSource) {
+  if (url.endsWith('.client.js')) {
+    const name = url;
+    return {
+      source:
+        "export default { $$typeof: Symbol.for('react.module.reference'), name: " +
+        JSON.stringify(name) +
+        '}',
+    };
+  }
+  return defaultGetSource(url, context, defaultGetSource);
+}

fixtures/flight/server/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

fixtures/flight/src/App.server.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-import Container from './Container';
+import Container from './Container.js';
 
-import Counter from './Counter.client';
+import Counter from './Counter.client.js';
 
-import ShowMore from './ShowMore.client';
+import ShowMore from './ShowMore.client.js';
 
 export default function App() {
   return (

fixtures/flight/src/Counter.client.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import Container from './Container';
+import Container from './Container.js';
 
 export default function Counter() {
   const [count, setCount] = React.useState(0);

fixtures/flight/src/ShowMore.client.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import Container from './Container';
+import Container from './Container.js';
 
 export default function ShowMore({children}) {
   const [show, setShow] = React.useState(false);