build mjs

.babelrc-npm.json

@@ -1,9 +1,47 @@
 {
   "plugins": ["@babel/plugin-transform-flow-strip-types"],
-  "presets": [
-    [
-      "@babel/preset-env",
-      { "modules": "commonjs", "targets": { "node": "12" } }
-    ]
-  ]
+  "env": {
+    "cjs": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "modules": "commonjs",
+            "targets": {
+              "node": "12"
+            }
+          }
+        ]
+      ],
+      "plugins": [
+        [
+          "./resources/add-extension-to-import-paths",
+          {
+            "extension": "js"
+          }
+        ]
+      ]
+    },
+    "mjs": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "modules": false,
+            "targets": {
+              "node": "12"
+            }
+          }
+        ]
+      ],
+      "plugins": [
+        [
+          "./resources/add-extension-to-import-paths",
+          {
+            "extension": "mjs"
+          }
+        ]
+      ]
+    }
+  }
 }

resources/add-extension-to-import-paths.js

@@ -0,0 +1,39 @@
+'use strict';
+
+/**
+ * Adds extension to all paths imported inside MJS files
+ *
+ * Transforms:
+ *
+ *  import { foo } from './bar';
+ *  export { foo } from './bar';
+ *
+ * to:
+ *
+ *  import { foo } from './bar.mjs';
+ *  export { foo } from './bar.mjs';
+ *
+ */
+module.exports = function addExtensionToImportPaths(context, { extension }) {
+  const { types } = context;
+
+  return {
+    visitor: {
+      ImportDeclaration: replaceImportPath,
+      ExportNamedDeclaration: replaceImportPath,
+    },
+  };
+
+  function replaceImportPath(path) {
+    // bail if the declaration doesn't have a source, e.g. "export { foo };"
+    if (!path.node.source) {
+      return;
+    }
+
+    const source = path.node.source.value;
+    if (source.startsWith('./') || source.startsWith('../')) {
+      const newSourceNode = types.stringLiteral(source + '.' + extension);
+      path.get('source').replaceWith(newSourceNode);
+    }
+  }
+};

resources/build.js

@@ -5,9 +5,14 @@ const path = require('path');
 const assert = require('assert');
 
 const babel = require('@babel/core');
+const prettier = require('prettier');
 
 const { readdirRecursive, showDirStats } = require('./utils');
 
+const prettierConfig = JSON.parse(
+  fs.readFileSync(require.resolve('../.prettierrc'), 'utf-8'),
+);
+
 if (require.main === module) {
   fs.rmSync('./npmDist', { recursive: true, force: true });
   fs.mkdirSync('./npmDist');
@@ -20,10 +25,13 @@ if (require.main === module) {
     fs.mkdirSync(path.dirname(destPath), { recursive: true });
     if (filepath.endsWith('.js')) {
       const flowBody = '// @flow strict\n' + fs.readFileSync(srcPath, 'utf-8');
-      fs.writeFileSync(destPath + '.flow', flowBody);
+      writeGeneratedFile(destPath + '.flow', flowBody);
 
       const cjs = babelBuild(srcPath, { envName: 'cjs' });
-      fs.writeFileSync(destPath, cjs);
+      writeGeneratedFile(destPath, cjs);
+
+      const mjs = babelBuild(srcPath, { envName: 'mjs' });
+      writeGeneratedFile(destPath.replace(/\.js$/, '.mjs'), mjs);
     } else if (filepath.endsWith('.d.ts')) {
       fs.copyFileSync(srcPath, destPath);
     }
@@ -81,3 +89,8 @@ function buildPackageJSON() {
 
   return packageJSON;
 }
+
+function writeGeneratedFile(filepath, body) {
+  const formatted = prettier.format(body, { filepath, ...prettierConfig });
+  fs.writeFileSync(filepath, formatted);
+}