Add Node ESM build option (#20243)

This allows exporting ESM modules for the Webpack plugin. This is necessary
for making a resolver plugin. We could probably make the whole plugin
use ESM instead of CJS ES2015.

Author: sebmarkbage

scripts/rollup/build.js

@@ -46,6 +46,7 @@ process.on('unhandledRejection', err => {
 
 const {
   NODE_ES2015,
+  NODE_ESM,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -259,12 +260,15 @@ function getFormat(bundleType) {
     case RN_FB_PROD:
     case RN_FB_PROFILING:
       return `cjs`;
+    case NODE_ESM:
+      return `es`;
   }
 }
 
 function isProductionBundleType(bundleType) {
   switch (bundleType) {
     case NODE_ES2015:
+    case NODE_ESM:
     case UMD_DEV:
     case NODE_DEV:
     case FB_WWW_DEV:
@@ -290,6 +294,7 @@ function isProductionBundleType(bundleType) {
 function isProfilingBundleType(bundleType) {
   switch (bundleType) {
     case NODE_ES2015:
+    case NODE_ESM:
     case FB_WWW_DEV:
     case FB_WWW_PROD:
     case NODE_DEV:
@@ -729,6 +734,7 @@ async function buildEverything() {
   for (const bundle of Bundles.bundles) {
     bundles.push(
       [bundle, NODE_ES2015],
+      [bundle, NODE_ESM],
       [bundle, UMD_DEV],
       [bundle, UMD_PROD],
       [bundle, UMD_PROFILING],

scripts/rollup/bundles.js

@@ -9,6 +9,7 @@ const __EXPERIMENTAL__ =
 
 const bundleTypes = {
   NODE_ES2015: 'NODE_ES2015',
+  NODE_ESM: 'NODE_ESM',
   UMD_DEV: 'UMD_DEV',
   UMD_PROD: 'UMD_PROD',
   UMD_PROFILING: 'UMD_PROFILING',
@@ -28,6 +29,7 @@ const bundleTypes = {
 
 const {
   NODE_ES2015,
+  NODE_ESM,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -777,6 +779,8 @@ function getFilename(bundle, bundleType) {
   switch (bundleType) {
     case NODE_ES2015:
       return `${name}.js`;
+    case NODE_ESM:
+      return `${name}.js`;
     case UMD_DEV:
       return `${name}.development.js`;
     case UMD_PROD:

scripts/rollup/packaging.js

@@ -17,6 +17,7 @@ const {
 
 const {
   NODE_ES2015,
+  NODE_ESM,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -45,6 +46,8 @@ function getBundleOutputPath(bundleType, filename, packageName) {
   switch (bundleType) {
     case NODE_ES2015:
       return `build/node_modules/${packageName}/cjs/${filename}`;
+    case NODE_ESM:
+      return `build/node_modules/${packageName}/esm/${filename}`;
     case NODE_DEV:
     case NODE_PROD:
     case NODE_PROFILING:

scripts/rollup/validate/eslintrc.esm.js

@@ -0,0 +1,60 @@
+'use strict';
+
+module.exports = {
+  env: {
+    commonjs: true,
+    browser: true,
+  },
+  globals: {
+    // ES 6
+    Map: true,
+    Set: true,
+    Proxy: true,
+    Symbol: true,
+    WeakMap: true,
+    WeakSet: true,
+    Uint16Array: true,
+    Reflect: true,
+    // Vendor specific
+    MSApp: true,
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    // CommonJS / Node
+    process: true,
+    setImmediate: true,
+    Buffer: true,
+    // Trusted Types
+    trustedTypes: true,
+
+    // Scheduler profiling
+    SharedArrayBuffer: true,
+    Int32Array: true,
+    ArrayBuffer: true,
+
+    TaskController: true,
+
+    // Flight
+    Uint8Array: true,
+    Promise: true,
+
+    // Flight Webpack
+    __webpack_chunk_load__: true,
+    __webpack_require__: true,
+
+    // jest
+    expect: true,
+    jest: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2015,
+    sourceType: 'module',
+  },
+  rules: {
+    'no-undef': 'error',
+    'no-shadow-restricted-names': 'error',
+  },
+
+  // These plugins aren't used, but eslint complains if an eslint-ignore comment
+  // references unused plugins. An alternate approach could be to strip
+  // eslint-ignore comments as part of the build.
+  plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
+};

scripts/rollup/validate/index.js

@@ -9,6 +9,7 @@ const Packaging = require('../packaging');
 
 const {
   NODE_ES2015,
+  NODE_ESM,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -34,6 +35,8 @@ function getFormat(bundleType) {
       return 'umd';
     case NODE_ES2015:
       return 'cjs2015';
+    case NODE_ESM:
+      return 'esm';
     case NODE_DEV:
     case NODE_PROD:
     case NODE_PROFILING:
@@ -64,6 +67,7 @@ function getESLintInstance(format) {
 const esLints = {
   cjs: getESLintInstance('cjs'),
   cjs2015: getESLintInstance('cjs2015'),
+  esm: getESLintInstance('esm'),
   rn: getESLintInstance('rn'),
   fb: getESLintInstance('fb'),
   umd: getESLintInstance('umd'),

scripts/rollup/wrappers.js

@@ -5,6 +5,7 @@ const reactVersion = require('../../package.json').version;
 
 const {
   NODE_ES2015,
+  NODE_ESM,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -40,6 +41,17 @@ ${license}
 
 'use strict';
 
+${source}`;
+  },
+
+  /***************** NODE_ESM *****************/
+  [NODE_ESM](source, globalName, filename, moduleType) {
+    return `/** @license React v${reactVersion}
+ * ${filename}
+ *
+${license}
+ */
+
 ${source}`;
   },