Add Node ESM Loader and Register Entrypoints (#20274)

* Add Node ESM loader build

This adds a loader build as a first-class export. This will grow in
complexity so it deserves its own module.

* Add Node CommonJS regiter build

This adds a build as a first-class export for legacy CommonJS registration
in Node.js. This will grow in complexity so it deserves its own module.

* Simplify fixture a bit to easier show usage with or without esm

* Bump es version

We leave async function in here which are newer than ES2015.

Author: sebmarkbage

fixtures/flight/loader/index.js

@@ -0,0 +1,24 @@
+import {resolve, getSource} from 'react-transport-dom-webpack/node-loader';
+
+export {resolve, getSource};
+
+import babel from '@babel/core';
+
+const babelOptions = {
+  babelrc: false,
+  ignore: [/\/(build|node_modules)\//],
+  plugins: [
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-transform-react-jsx',
+  ],
+};
+
+export async function transformSource(source, context, defaultTransformSource) {
+  const {format} = context;
+  if (format === 'module') {
+    const opt = Object.assign({filename: context.url}, babelOptions);
+    const {code} = await babel.transformAsync(source, opt);
+    return {source: code};
+  }
+  return defaultTransformSource(source, context, defaultTransformSource);
+}

fixtures/flight/loader/package.json

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

fixtures/flight/package.json

@@ -67,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 --experimental-loader ./server/loader.mjs server",
+    "start:server": "NODE_ENV=development node --experimental-loader ./loader/index.js 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/server/handler.server.js

@@ -2,18 +2,26 @@
 
 import {pipeToNodeWritable} from 'react-transport-dom-webpack/server';
 import * as React from 'react';
-import App from '../src/App.server';
 
-module.exports = function(req, res) {
+import url from 'url';
+
+function resolve(path) {
+  return url.pathToFileURL(require.resolve(path)).href;
+}
+
+module.exports = async function(req, res) {
   res.setHeader('Access-Control-Allow-Origin', '*');
+  const m = await import('../src/App.server.js');
+  // const m = require('../src/App.server.js');
+  const App = m.default.default || m.default;
   pipeToNodeWritable(<App />, res, {
     // TODO: Read from a map on the disk.
-    [require.resolve('../src/Counter.client.js')]: {
+    [resolve('../src/Counter.client.js')]: {
       id: './src/Counter.client.js',
       chunks: ['1'],
       name: 'default',
     },
-    [require.resolve('../src/ShowMore.client.js')]: {
+    [resolve('../src/ShowMore.client.js')]: {
       id: './src/ShowMore.client.js',
       chunks: ['2'],
       name: 'default',

fixtures/flight/server/handler.server.mjs

@@ -1,11 +1,7 @@
 'use strict';
 
-require.extensions['.client.js'] = function(module, path) {
-  module.exports = {
-    $$typeof: Symbol.for('react.module.reference'),
-    name: path,
-  };
-};
+const register = require('react-transport-dom-webpack/node-register');
+register();
 
 const babelRegister = require('@babel/register');
 
@@ -25,8 +21,7 @@ app.get('/', function(req, res) {
       delete require.cache[key];
     }
   }
-  import('./handler.server.mjs').then(m => m.default(req, res));
-  //   require('./handler.server.js')(req, res);
+  require('./handler.server.js')(req, res);
 });
 
 app.listen(3001, () => {

fixtures/flight/server/index.js

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

fixtures/flight/server/loader.mjs

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../src/ReactFlightWebpackNodeLoader.js';

packages/react-transport-dom-webpack/esm/package.json

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightWebpackNodeRegister';