Provide esm entry point for react-is

.nvmrc

@@ -1 +1 @@
-v8.4.0
+v10.8.0

package.json

@@ -5,6 +5,7 @@
     "packages/*"
   ],
   "devDependencies": {
+    "@ampproject/rollup-plugin-closure-compiler": "^0.6.1",
     "art": "^0.10.1",
     "babel-cli": "^6.6.5",
     "babel-code-frame": "^6.26.0",
@@ -57,7 +58,6 @@
     "flow-bin": "^0.72.0",
     "glob": "^6.0.4",
     "glob-stream": "^6.1.0",
-    "google-closure-compiler": "20180506.0.0",
     "gzip-size": "^3.0.0",
     "jasmine-check": "^1.0.0-rc.0",
     "jest": "^23.1.0",
@@ -72,11 +72,11 @@
     "random-seed": "^0.3.0",
     "react-lifecycles-compat": "^3.0.2",
     "rimraf": "^2.6.1",
-    "rollup": "^0.52.1",
-    "rollup-plugin-babel": "^3.0.1",
-    "rollup-plugin-commonjs": "^8.2.6",
-    "rollup-plugin-node-resolve": "^2.1.1",
-    "rollup-plugin-prettier": "^0.3.0",
+    "rollup": "^0.63.5",
+    "rollup-plugin-babel": "^3.0.7",
+    "rollup-plugin-commonjs": "^9.1.4",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-prettier": "^0.4.0",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-strip-banner": "^0.2.0",
     "semver": "^5.5.0",
@@ -93,6 +93,7 @@
   },
   "scripts": {
     "build": "npm run version-check && node ./scripts/rollup/build.js",
+    "postbuild": "node ./scripts/smoke-modules/run.js",
     "linc": "node ./scripts/tasks/linc.js",
     "lint": "node ./scripts/tasks/eslint.js",
     "lint-build": "node ./scripts/rollup/validate/index.js",

packages/react-is/package.json

@@ -16,7 +16,9 @@
     "LICENSE",
     "README.md",
     "index.js",
+    "index.mjs",
     "cjs/",
+    "esm/",
     "umd/"
   ]
 }

scripts/rollup/build.js

@@ -2,7 +2,7 @@
 
 const {rollup} = require('rollup');
 const babel = require('rollup-plugin-babel');
-const closure = require('./plugins/closure-plugin');
+const closure = require('@ampproject/rollup-plugin-closure-compiler');
 const commonjs = require('rollup-plugin-commonjs');
 const prettier = require('rollup-plugin-prettier');
 const replace = require('rollup-plugin-replace');
@@ -24,6 +24,8 @@ const Packaging = require('./packaging');
 const {asyncCopyTo, asyncRimRaf} = require('./utils');
 const codeFrame = require('babel-code-frame');
 const Wrappers = require('./wrappers');
+const Entries = require('./entries');
+const Treeshake = require('./treeshake');
 
 // Errors in promises should be fatal.
 let loggedErrors = new Set();
@@ -38,6 +40,8 @@ process.on('unhandledRejection', err => {
 const {
   UMD_DEV,
   UMD_PROD,
+  ESM_DEV,
+  ESM_PROD,
   NODE_DEV,
   NODE_PROD,
   NODE_PROFILING,
@@ -68,10 +72,8 @@ const errorCodeOpts = {
 
 const closureOptions = {
   compilation_level: 'SIMPLE',
-  language_in: 'ECMASCRIPT5_STRICT',
-  language_out: 'ECMASCRIPT5_STRICT',
   env: 'CUSTOM',
-  warning_level: 'QUIET',
+  language_out: 'ECMASCRIPT5_STRICT',
   apply_input_source_maps: false,
   use_types_for_optimization: false,
   process_common_js_modules: false,
@@ -113,6 +115,8 @@ function getBabelConfig(updateBabelOptions, bundleType, filename) {
       });
     case UMD_DEV:
     case UMD_PROD:
+    case ESM_DEV:
+    case ESM_PROD:
     case NODE_DEV:
     case NODE_PROD:
     case NODE_PROFILING:
@@ -159,6 +163,9 @@ function getFormat(bundleType) {
     case UMD_DEV:
     case UMD_PROD:
       return `umd`;
+    case ESM_DEV:
+    case ESM_PROD:
+      return `es`;
     case NODE_DEV:
     case NODE_PROD:
     case NODE_PROFILING:
@@ -183,6 +190,10 @@ function getFilename(name, globalName, bundleType) {
       return `${name}.development.js`;
     case UMD_PROD:
       return `${name}.production.min.js`;
+    case ESM_DEV:
+      return `${name}.development.mjs`;
+    case ESM_PROD:
+      return `${name}.production.min.mjs`;
     case NODE_DEV:
       return `${name}.development.js`;
     case NODE_PROD:
@@ -207,12 +218,14 @@ function getFilename(name, globalName, bundleType) {
 function isProductionBundleType(bundleType) {
   switch (bundleType) {
     case UMD_DEV:
+    case ESM_DEV:
     case NODE_DEV:
     case FB_WWW_DEV:
     case RN_OSS_DEV:
     case RN_FB_DEV:
       return false;
     case UMD_PROD:
+    case ESM_PROD:
     case NODE_PROD:
     case NODE_PROFILING:
     case FB_WWW_PROD:
@@ -239,6 +252,8 @@ function isProfilingBundleType(bundleType) {
     case RN_OSS_PROD:
     case UMD_DEV:
     case UMD_PROD:
+    case ESM_DEV:
+    case ESM_PROD:
       return false;
     case FB_WWW_PROFILING:
     case NODE_PROFILING:
@@ -266,7 +281,6 @@ function blacklistFBJS() {
 
 function getPlugins(
   entry,
-  externals,
   updateBabelOptions,
   filename,
   packageName,
@@ -306,9 +320,7 @@ function getPlugins(
     // Ensure we don't try to bundle any fbjs modules.
     blacklistFBJS(),
     // Use Node resolution mechanism.
-    resolve({
-      skip: externals,
-    }),
+    resolve(),
     // Remove license headers from individual modules
     stripBanner({
       exclude: 'node_modules/**/*',
@@ -387,6 +399,25 @@ function getPlugins(
         };
       },
     }),
+
+    // Treeshaked bundle size.
+    bundleType === ESM_DEV && {
+      async transformBundle(source) {
+        // bundle esm entry point importing nothing
+        const newSizes = await Treeshake.treeshakeCode(source);
+        const treeshakedSizes = Stats.currentBuildResults.treeshakedSizes;
+        const recordIndex = treeshakedSizes.findIndex(
+          record =>
+            record.packageName === packageName && record.filename === filename
+        );
+        const index = recordIndex !== -1 ? recordIndex : treeshakedSizes.length;
+        Stats.currentBuildResults.treeshakedSizes[index] = {
+          filename,
+          packageName,
+          ...newSizes,
+        };
+      },
+    },
   ].filter(Boolean);
 }
 
@@ -467,7 +498,6 @@ async function createBundle(bundle, bundleType) {
     onwarn: handleRollupWarning,
     plugins: getPlugins(
       bundle.entry,
-      externals,
       bundle.babel,
       filename,
       packageName,
@@ -477,11 +507,6 @@ async function createBundle(bundle, bundleType) {
       bundle.modulesToStub,
       pureExternalModules
     ),
-    // We can't use getters in www.
-    legacy:
-      bundleType === FB_WWW_DEV ||
-      bundleType === FB_WWW_PROD ||
-      bundleType === FB_WWW_PROFILING,
   };
   const [mainOutputPath, ...otherOutputPaths] = Packaging.getBundleOutputPaths(
     bundleType,
@@ -496,10 +521,11 @@ async function createBundle(bundle, bundleType) {
     bundleType
   );
 
+  let result;
   console.log(`${chalk.bgYellow.black(' BUILDING ')} ${logKey}`);
   try {
-    const result = await rollup(rollupConfig);
-    await result.write(rollupOutputOptions);
+    result = await rollup(rollupConfig);
+    result = await result.write(rollupOutputOptions);
   } catch (error) {
     console.log(`${chalk.bgRed.black(' OH NOES! ')} ${logKey}\n`);
     handleRollupError(error);
@@ -509,6 +535,7 @@ async function createBundle(bundle, bundleType) {
     await asyncCopyTo(mainOutputPath, otherOutputPaths[i]);
   }
   console.log(`${chalk.bgGreen.black(' COMPLETE ')} ${logKey}\n`);
+  return result;
 }
 
 function handleRollupWarning(warning) {
@@ -534,6 +561,16 @@ function handleRollupWarning(warning) {
     return;
   }
 
+  // Fix react-reconciler circular dependency later
+  if (warning.code === 'CIRCULAR_DEPENDENCY') {
+    if (
+      warning.importer.includes('react-reconciler') ||
+      warning.importer.includes('react-scheduler')
+    ) {
+      return;
+    }
+  }
+
   if (typeof warning.code === 'string') {
     // This is a warning coming from Rollup itself.
     // These tend to be important (e.g. clashes in namespaced exports)
@@ -588,6 +625,8 @@ async function buildEverything() {
   for (const bundle of Bundles.bundles) {
     await createBundle(bundle, UMD_DEV);
     await createBundle(bundle, UMD_PROD);
+    await createBundle(bundle, ESM_DEV);
+    const esmResult = await createBundle(bundle, ESM_PROD);
     await createBundle(bundle, NODE_DEV);
     await createBundle(bundle, NODE_PROD);
     await createBundle(bundle, NODE_PROFILING);
@@ -600,6 +639,24 @@ async function buildEverything() {
     await createBundle(bundle, RN_FB_DEV);
     await createBundle(bundle, RN_FB_PROD);
     await createBundle(bundle, RN_FB_PROFILING);
+
+    if (
+      !shouldSkipBundle(bundle, ESM_DEV) &&
+      !shouldSkipBundle(bundle, ESM_PROD) &&
+      esmResult
+    ) {
+      const [packageName, entry] = bundle.entry.split('/');
+      const filename = entry == null ? 'index.mjs' : entry + '.mjs';
+      const filepath = path.resolve(
+        `build/node_modules/${packageName}`,
+        filename
+      );
+      // write esm entry point
+      fs.writeFileSync(
+        filepath,
+        Entries.generateESMEntryPoint(packageName, esmResult.exports)
+      );
+    }
   }
 
   await Packaging.copyAllShims();

scripts/rollup/bundles.js

@@ -3,6 +3,8 @@
 const bundleTypes = {
   UMD_DEV: 'UMD_DEV',
   UMD_PROD: 'UMD_PROD',
+  ESM_DEV: 'ESM_DEV',
+  ESM_PROD: 'ESM_PROD',
   NODE_DEV: 'NODE_DEV',
   NODE_PROD: 'NODE_PROD',
   NODE_PROFILING: 'NODE_PROFILING',
@@ -19,6 +21,8 @@ const bundleTypes = {
 
 const UMD_DEV = bundleTypes.UMD_DEV;
 const UMD_PROD = bundleTypes.UMD_PROD;
+const ESM_DEV = bundleTypes.ESM_DEV;
+const ESM_PROD = bundleTypes.ESM_PROD;
 const NODE_DEV = bundleTypes.NODE_DEV;
 const NODE_PROD = bundleTypes.NODE_PROD;
 const NODE_PROFILING = bundleTypes.NODE_PROFILING;
@@ -353,6 +357,8 @@ const bundles = [
       FB_WWW_PROD,
       UMD_DEV,
       UMD_PROD,
+      ESM_DEV,
+      ESM_PROD,
     ],
     moduleType: ISOMORPHIC,
     entry: 'react-is',

scripts/rollup/entries.js

@@ -0,0 +1,18 @@
+'use strict';
+
+function generateESMEntryPoint(packageName, exports) {
+  return [
+    `import * as dev from "./esm/${packageName}.development.mjs";`,
+    `import * as prod from "./esm/${packageName}.production.min.mjs";`,
+    `\n`,
+    ...exports.map(
+      name =>
+        `export var ${name} =\n` +
+        `  process.env.NODE_ENV !== 'production' ? dev.${name} : prod.${name}`
+    ),
+  ].join('\n');
+}
+
+module.exports = {
+  generateESMEntryPoint,
+};

scripts/rollup/packaging.js

@@ -12,6 +12,8 @@ const {
 const {
   UMD_DEV,
   UMD_PROD,
+  ESM_DEV,
+  ESM_PROD,
   NODE_DEV,
   NODE_PROD,
   NODE_PROFILING,
@@ -45,6 +47,12 @@ function getBundleOutputPaths(bundleType, filename, packageName) {
         `build/node_modules/${packageName}/umd/${filename}`,
         `build/dist/${filename}`,
       ];
+    case ESM_DEV:
+    case ESM_PROD:
+      return [
+        `build/node_modules/${packageName}/esm/${filename}`,
+        `build/dist/${filename}`,
+      ];
     case FB_WWW_DEV:
     case FB_WWW_PROD:
     case FB_WWW_PROFILING: