Add Node ESM Loader and Register Entrypoints

fixtures/flight/server/handler.server.mjs

@@ -1,4 +1,4 @@
-import {pipeToNodeWritable} from 'react-transport-dom-webpack/server.js';
+import {pipeToNodeWritable} from 'react-transport-dom-webpack/server';
 import * as React from 'react';
 import App from '../src/App.server.js';
 
@@ -10,8 +10,10 @@ function resolve(relative) {
 }
 
 export default function(req, res) {
+  // In case this was a transpiled CommonJS import.
+  const AppOrDefault = App.default || App;
   res.setHeader('Access-Control-Allow-Origin', '*');
-  pipeToNodeWritable(<App />, res, {
+  pipeToNodeWritable(<AppOrDefault />, res, {
     // TODO: Read from a map on the disk.
     [resolve('../src/Counter.client.js')]: {
       id: './src/Counter.client.js',

fixtures/flight/server/index.js

@@ -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');
 
@@ -26,7 +22,7 @@ app.get('/', function(req, res) {
     }
   }
   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/loader.mjs

@@ -1,6 +1,13 @@
+import {
+  resolve,
+  getSource,
+} from 'react-transport-dom-webpack/node-loader';
+
+export {resolve, getSource};
+
 import babel from '@babel/core';
 
-const options = {
+const babelOptions = {
   babelrc: false,
   ignore: [/\/(build|node_modules)\//],
   plugins: [
@@ -9,34 +16,15 @@ const options = {
   ],
 };
 
-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') {
+  if (format === 'module') {
     const opt = Object.assign(
       {filename: context.url},
-      format === 'commonjs' ? optionsCommonJS : options
+      babelOptions
     );
     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);
+  return defaultTransformSource(source, context, defaultTransformSource);
 }

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

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

packages/react-transport-dom-webpack/esm/react-transport-dom-webpack-node-loader.js

@@ -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/node-register.js

@@ -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';

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

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

packages/react-transport-dom-webpack/npm/node-register.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./cjs/react-transport-dom-webpack-node-register.js');

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

@@ -17,9 +17,21 @@
     "server.js",
     "server.browser.js",
     "server.node.js",
+    "node-register.js",
     "cjs/",
-    "umd/"
+    "umd/",
+    "esm/"
   ],
+  "exports": {
+    ".": "./index.js",
+    "./plugin": "./plugin.js",
+    "./server": "./server.js",
+    "./server.browser": "./server.browser.js",
+    "./server.node": "./server.node.js",
+    "./node-loader": "./esm/react-transport-dom-webpack-node-loader.js",
+    "./node-register": "./node-register.js",
+    "./package.json": "./package.json"
+  },
   "browser": {
     "./server.js": "./server.browser.js"
   },

packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js

@@ -0,0 +1,57 @@
+/**
+ * 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
+ */
+
+type ResolveContext = {
+  conditions: Array<string>,
+  parentURL: string | void,
+};
+
+type ResolveFunction = (
+  string,
+  ResolveContext,
+  ResolveFunction,
+) => Promise<string>;
+
+type GetSourceContext = {
+  format: string,
+  url: string,
+};
+
+type GetSourceFunction = (
+  string,
+  GetSourceContext,
+  GetSourceFunction,
+) => Promise<{source: Source}>;
+
+type Source = string | ArrayBuffer | Uint8Array;
+
+export async function resolve(
+  specifier: string,
+  context: ResolveContext,
+  defaultResolve: ResolveFunction,
+): Promise<string> {
+  // TODO: Resolve server-only files.
+  return defaultResolve(specifier, context, defaultResolve);
+}
+
+export async function getSource(
+  url: string,
+  context: GetSourceContext,
+  defaultGetSource: GetSourceFunction,
+): Promise<{source: Source}> {
+  if (url.endsWith('.client.js')) {
+    // TODO: Named exports.
+    const src =
+      "export default { $$typeof: Symbol.for('react.module.reference'), name: " +
+      JSON.stringify(url) +
+      '}';
+    return {source: src};
+  }
+  return defaultGetSource(url, context, defaultGetSource);
+}

packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js

@@ -0,0 +1,19 @@
+/**
+ * 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
+ */
+
+const url = require('url');
+
+module.exports = function register() {
+  (require: any).extensions['.client.js'] = function(module, path) {
+    module.exports = {
+      $$typeof: Symbol.for('react.module.reference'),
+      name: url.pathToFileURL(path).href,
+    };
+  };
+};

scripts/rollup/bundles.js

@@ -286,6 +286,24 @@ const bundles = [
     externals: [],
   },
 
+  /******* React Transport DOM Webpack Node.js Loader *******/
+  {
+    bundleTypes: [NODE_ESM],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-transport-dom-webpack/node-loader',
+    global: 'ReactFlightWebpackNodeLoader',
+    externals: [],
+  },
+
+  /******* React Transport DOM Webpack Node.js CommonJS Loader *******/
+  {
+    bundleTypes: [NODE_ES2015],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-transport-dom-webpack/node-register',
+    global: 'ReactFlightWebpackNodeRegister',
+    externals: ['url'],
+  },
+
   /******* React Transport DOM Server Relay *******/
   {
     bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],

scripts/shared/pathsByLanguageVersion.js

@@ -10,6 +10,7 @@
 const esNextPaths = [
   // Internal forwarding modules
   'packages/*/*.js',
+  'packages/*/esm/*.js',
   // Source files
   'packages/*/src/**/*.js',
   'packages/dom-event-testing-library/**/*.js',