From 504222dcd21c7ac43eb78df11226bab47ec03bb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Fri, 13 Nov 2020 08:57:45 -0500 Subject: [PATCH] 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. --- scripts/rollup/build.js | 6 +++ scripts/rollup/bundles.js | 4 ++ scripts/rollup/packaging.js | 3 ++ scripts/rollup/validate/eslintrc.esm.js | 60 +++++++++++++++++++++++++ scripts/rollup/validate/index.js | 4 ++ scripts/rollup/wrappers.js | 12 +++++ 6 files changed, 89 insertions(+) create mode 100644 scripts/rollup/validate/eslintrc.esm.js diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js index 803847eccd7d1..d25110eed892a 100644 --- a/scripts/rollup/build.js +++ b/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], diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index 51d5c495a23ca..6a04d6aa4b066 100644 --- a/scripts/rollup/bundles.js +++ b/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: diff --git a/scripts/rollup/packaging.js b/scripts/rollup/packaging.js index 2dd98b22a46f5..1e7ae2b018dbe 100644 --- a/scripts/rollup/packaging.js +++ b/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: diff --git a/scripts/rollup/validate/eslintrc.esm.js b/scripts/rollup/validate/eslintrc.esm.js new file mode 100644 index 0000000000000..e7f8d1ca09550 --- /dev/null +++ b/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'], +}; diff --git a/scripts/rollup/validate/index.js b/scripts/rollup/validate/index.js index 2e3b0d60dfff9..4d1c9210e231a 100644 --- a/scripts/rollup/validate/index.js +++ b/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'), diff --git a/scripts/rollup/wrappers.js b/scripts/rollup/wrappers.js index ed62f37211d06..836929dbec87f 100644 --- a/scripts/rollup/wrappers.js +++ b/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}`; },