Support Node ESM (#3630)

* Support Node ESM

Author: snowystinger

.circleci/api-comment.js

@@ -53,7 +53,13 @@ async function run() {
 
   if (pr != null) {
     let commentId = await findDifferComment(pr);
-    let diffs = fs.readFileSync('/tmp/dist/ts-diff.txt');
+    let diffs;
+    try {
+      diffs = fs.readFileSync('/tmp/dist/ts-diff.txt');
+    } catch (e) {
+      console.log('No TS Diff output to run on.')
+      return;
+    }
     if (diffs.length > 0) {
       if (commentId != null) {
         // delete existing comment

.circleci/config.yml

@@ -27,6 +27,14 @@ executors:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
+  rsp-xlarge-nodeupdate:
+    docker:
+      - image: cimg/node:16.18.0
+    resource_class: xlarge
+    environment:
+      CACHE_VERSION: v1
+    working_directory: ~/react-spectrum
+
 jobs:
   install:
     executor: rsp-large
@@ -206,6 +214,20 @@ jobs:
       - store_artifacts:
           path: ~/junit
 
+
+  test-esm:
+    executor: rsp-xlarge-nodeupdate
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: test
+          command: |
+            make build
+            yarn lerna run prepublishOnly
+            node --loader ./scripts/esm-support/loader.mjs ./scripts/esm-support/testESM.mjs
+
   lint:
     executor: rsp
     steps:
@@ -450,6 +472,9 @@ workflows:
       - test-17:
           requires:
             - install-17
+      - test-esm:
+          requires:
+            - install
       - lint:
           requires:
             - install
@@ -505,6 +530,7 @@ workflows:
             - test-16
             - test-ssr-17
             - test-17
+            - test-esm
             - storybook
             - storybook-16
             - storybook-17

.eslintignore

@@ -7,4 +7,4 @@ node_modules
 packages/*/*/dist
 packages/react-aria/dist
 packages/react-stately/dist
-packages/dev/storybook-builder-preview/preview.js
+packages/dev/storybook-builder-parcel/preview.js

babel-esm.config.json

@@ -0,0 +1,61 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    "@babel/preset-react",
+    ["@babel/preset-env",
+      {
+        "loose": true,
+        "modules": false
+      }
+    ]
+  ],
+  "env": {
+    "storybook": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "loose": true,
+            "targets": {
+              "esmodules": true
+            }
+          }
+        ]
+      ]
+    },
+    "cover": {
+      "plugins": [
+        "istanbul"
+      ]
+    },
+    "production": {
+      "plugins": [
+        [
+          "react-remove-properties",
+          {
+            "properties": [
+              "data-testid"
+            ]
+          }
+        ]
+      ]
+    }
+  },
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "version": "^7.6.2"
+      }
+    ],
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "transform-glob-import",
+    "babel-plugin-macros"
+  ],
+  "sourceType": "unambiguous"
+}

bin/imports.js

@@ -16,73 +16,78 @@ const fs = require('fs');
 const Module = require('module');
 const substrings = ['-', '+'];
 
-module.exports = function (context) {
-  let processNode = (node) => {
-    if (!node.source || node.importKind === 'type') {
-      return;
-    }
-
-    let source = node.source.value.replace(/^[a-z]+:/, '');
-    if (source.startsWith('.') || Module.builtinModules.includes(source)) {
-      return;
-    }
-
-    // Split the import specifier on slashes. If it starts with an @ then it's
-    // a scoped package, otherwise just take the first part.
-    let parts = source.split('/');
-    let pkgName = source.startsWith('@') ? parts.slice(0, 2).join('/') : parts[0];
-
-    // Search for a package.json starting from the current filename
-    let pkgPath = findUp.sync('package.json', {cwd: path.dirname(context.getFilename())});
-    if (!pkgPath) {
-      return;
-    }
-
-    let pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
-
-    // The only dev dependency should be spectrum-css.
-    if (exists(pkg.devDependencies, pkgName) && pkgName === '@adobe/spectrum-css-temp') {
-      return;
-    }
-
-    if (!exists(pkg.dependencies, pkgName) && !exists(pkg.peerDependencies, pkgName)) {
-      context.report({
-        node,
-        message: `Missing dependency on ${pkgName}.`,
-        fix(fixer) {
-          // Attempt to find a package in the monorepo. If the dep is for an external library,
-          // then we cannot auto fix it because we don't know the version to add.
-          let depPath = __dirname + '/../packages/' + pkgName + '/package.json';
-          if (!fs.existsSync(depPath)) {
-            return;
+module.exports = {
+  meta: {
+    fixable: 'code'
+  },
+  create: function (context) {
+    let processNode = (node) => {
+      if (!node.source || node.importKind === 'type') {
+        return;
+      }
+
+      let source = node.source.value.replace(/^[a-z]+:/, '');
+      if (source.startsWith('.') || Module.builtinModules.includes(source)) {
+        return;
+      }
+
+      // Split the import specifier on slashes. If it starts with an @ then it's
+      // a scoped package, otherwise just take the first part.
+      let parts = source.split('/');
+      let pkgName = source.startsWith('@') ? parts.slice(0, 2).join('/') : parts[0];
+
+      // Search for a package.json starting from the current filename
+      let pkgPath = findUp.sync('package.json', {cwd: path.dirname(context.getFilename())});
+      if (!pkgPath) {
+        return;
+      }
+
+      let pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+
+      // The only dev dependency should be spectrum-css.
+      if (exists(pkg.devDependencies, pkgName) && pkgName === '@adobe/spectrum-css-temp') {
+        return;
+      }
+
+      if (!exists(pkg.dependencies, pkgName) && !exists(pkg.peerDependencies, pkgName) && pkgName !== pkg.name) {
+        context.report({
+          node,
+          message: `Missing dependency on ${pkgName}.`,
+          fix(fixer) {
+            // Attempt to find a package in the monorepo. If the dep is for an external library,
+            // then we cannot auto fix it because we don't know the version to add.
+            let depPath = __dirname + '/../packages/' + pkgName + '/package.json';
+            if (!fs.existsSync(depPath)) {
+              return;
+            }
+
+            let depPkg = JSON.parse(fs.readFileSync(depPath, 'utf8'));
+            let pkgVersion = substrings.some(v => depPkg.version.includes(v)) ?  depPkg.version : `^${depPkg.version}`;
+
+            if (pkgName === '@react-spectrum/provider') {
+              pkg.peerDependencies = insertObject(pkg.peerDependencies, pkgName, pkgVersion);
+            } else {
+              pkg.dependencies = insertObject(pkg.dependencies, pkgName, pkgVersion);
+            }
+
+            fs.writeFileSync(pkgPath, JSON.stringify(pkg, false, 2) + '\n');
+
+            // Fake fix so eslint doesn't show the error.
+            return {
+              range: [0, 0],
+              text: ''
+            };
           }
-
-          let depPkg = JSON.parse(fs.readFileSync(depPath, 'utf8'));
-          let pkgVersion = substrings.some(v => depPkg.version.includes(v)) ?  depPkg.version : `^${depPkg.version}`;
-
-          if (pkgName === '@react-spectrum/provider') {
-            pkg.peerDependencies = insertObject(pkg.peerDependencies, pkgName, pkgVersion);
-          } else {
-            pkg.dependencies = insertObject(pkg.dependencies, pkgName, pkgVersion);
-          }
-
-          fs.writeFileSync(pkgPath, JSON.stringify(pkg, false, 2) + '\n');
-
-          // Fake fix so eslint doesn't show the error.
-          return {
-            range: [0, 0],
-            text: ''
-          };
-        }
-      });
-    }
-  };
-
-  return {
-    ImportDeclaration: processNode,
-    ExportNamedDeclaration: processNode,
-    ExportAllDeclaration: processNode
-  };
+        });
+      }
+    };
+
+    return {
+      ImportDeclaration: processNode,
+      ExportNamedDeclaration: processNode,
+      ExportAllDeclaration: processNode
+    };
+  }
 };
 
 function exists(deps, name) {

examples/rsp-next-ts/next.config.js renamed to examples/rsp-next-ts/next.config.mjs

@@ -1,4 +1,5 @@
-const withTM = require("next-transpile-modules")([
+import ntm from 'next-transpile-modules';
+const withTM = ntm([
   "@adobe/react-spectrum",
   "@react-spectrum/actiongroup",
   "@react-spectrum/badge",
@@ -51,9 +52,10 @@ const withTM = require("next-transpile-modules")([
   "@spectrum-icons/workflow",
 ]);
 
-module.exports = withTM({
+let result = withTM({
   basePath:
     process.env.VERDACCIO && process.env.CIRCLE_SHA1
       ? `/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/next`
       : "",
 });
+export default result;

examples/rsp-next-ts/package.json

@@ -10,6 +10,7 @@
     "start": "next start",
     "lint": "next lint"
   },
+  "type": "module",
   "dependencies": {
     "@adobe/react-spectrum": "^3.22.0",
     "@react-spectrum/color": "^3.0.0-beta.16",