Merge pull request #200 from hypothesis/dual-build-esm-and-cjs

Dual-build package as ES modules and CommonJS

.babelrc-cjs.js

@@ -0,0 +1,10 @@
+const baseConfig = require('./.babelrc');
+
+// Override base config to produce CommonJS instead of ESM output.
+const config = { ...baseConfig };
+const presetEnvConfig = config.presets.find(
+  ([name]) => name === '@babel/preset-env'
+)[1];
+presetEnvConfig.modules = 'cjs';
+
+module.exports = config;

.babelrc.js

@@ -0,0 +1,36 @@
+'use strict';
+
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+        importSource: 'preact',
+      },
+    ],
+    [
+      '@babel/preset-env',
+      {
+        bugfixes: true,
+        modules: false, // Produce ES module output
+      },
+    ],
+  ],
+  env: {
+    development: {
+      presets: [
+        [
+          '@babel/preset-react',
+          {
+            development: true,
+            runtime: 'automatic',
+            // Use `preact/compat/jsx-dev-runtime` which is an alias for `preact/jsx-runtime`.
+            // See https://github.com/preactjs/preact/issues/2974.
+            importSource: 'preact/compat',
+          },
+        ],
+      ],
+    },
+  },
+};

.eslintignore

@@ -1,2 +1,3 @@
 lib/**
-build/**
+lib-cjs/**
+build/**

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 lib/
+lib-cjs/
 build/
 coverage/
 

.prettierignore

@@ -1,4 +1,5 @@
 .*/**
 build/
 lib/
+lib-cjs/
 coverage/

Makefile

@@ -34,7 +34,7 @@ lint: node_modules/.uptodate
 .PHONY: clean
 clean:
 	rm -f node_modules/.uptodate
-	rm -rf lib
+	rm -rf lib lib-cjs
 	rm -rf build
 
 .PHONY: format

package.json

@@ -58,8 +58,9 @@
     "preact": "^10.4.0"
   },
   "scripts": {
-    "build-js": "babel src --out-dir lib --source-maps --ignore '**/test' --ignore '**/karma.config.js'",
-    "build": "yarn build-js && tsc --build src/tsconfig.json",
+    "build-esm": "babel src --out-dir lib/ --source-maps --ignore '**/test' --ignore '**/karma.config.js'",
+    "build-cjs": "babel src --out-dir lib-cjs/ --source-maps --ignore '**/test' --ignore '**/karma.config.js' --config-file ./.babelrc-cjs.js",
+    "build": "yarn build-cjs && yarn build-esm && tsc --build src/tsconfig.json",
     "typecheck": "tsc --build src/tsconfig.json",
     "lint": "eslint .",
     "checkformatting": "prettier --check '**/*.{js,scss,md}'",
@@ -73,11 +74,14 @@
     "singleQuote": true
   },
   "files": [
+    "lib-cjs",
     "lib",
     "styles",
     "images"
   ],
-  "main": "./lib/index.js",
+  "main": "./lib-cjs/index.js",
+  "module": "./lib/index.js",
+  "browserslist": "chrome 70, firefox 70, safari 11.1",
   "browserify": {
     "transform": [
       [

scripts/gulp/create-bundle.js

@@ -171,7 +171,7 @@ module.exports = function createBundle(config, buildOpts) {
 
   (config.transforms || []).forEach(function (transform) {
     if (transform === 'babel') {
-      bundle.transform(babelify);
+      bundle.transform(babelify, { configFile: './.babelrc-cjs' });
     }
   });
 

src/karma.config.js

@@ -66,17 +66,16 @@ module.exports = function (config) {
         [
           'babelify',
           {
-            // The existence of this preset option is due to a config issue with where jsx modules
-            // are not transpiled to js.
-            // See https://github.com/hypothesis/client/issues/2929
-            presets: require('../.babelrc.cjs').presets,
-            extensions: ['.js'],
+            // Since we're using Browserify for bundling, we need to use the
+            // Babel configuration that targets CommonJS.
+            ...require('../.babelrc-cjs.js'),
+
             plugins: [
               'mockable-imports',
               [
                 'babel-plugin-istanbul',
                 {
-                  exclude: ['**/test/**/*.js', 'lib/'],
+                  exclude: ['**/test/**/*.js', 'lib/', 'lib-cjs/'],
                 },
               ],
             ],

src/tsconfig.json

@@ -8,7 +8,13 @@
     "module": "commonjs",
     "declaration": true,
     "emitDeclarationOnly": true,
-    "declarationDir": "../lib",
+
+    // Types are written to the CommonJS output dir because that is the version
+    // linked by the `main` field in package.json. This is what TypeScript will use
+    // in downstream projects, even if the project's bundler is using the ESM
+    // version linked by the `module` field in package.json.
+    "declarationDir": "../lib-cjs",
+
     "strict": true,
     "noImplicitAny": false,
     "target": "ES2020"