feat: export mjs and cjs (#155)

* feat: export mjs and cjs

replaces interop cjs

* build just like we would on release

* fix jest tests

* Add smoke test for kcd-scripts build

* fix wpt tests

Author: eps1lon

.babelrc.js

@@ -1,6 +1,23 @@
 module.exports = {
 	presets: [
-		require.resolve("@babel/preset-env"),
+		[
+			require.resolve("@babel/preset-env"),
+			// for jest we need to transpile esmodules
+			// otherwise transform-commonjs takes care of the correct module syntax
+			{ modules: process.env.NODE_ENV === "test" ? "auto" : false }
+		],
 		require.resolve("@babel/preset-typescript")
-	]
+	],
+	env: {
+		cjs: {
+			plugins: [
+				[
+					require.resolve("@babel/plugin-transform-modules-commonjs"),
+					// helps rollup identify exports but also means __esmodule is enumerated
+					// not aware of a use case for enumerating imports though
+					{ loose: true }
+				]
+			]
+		}
+	}
 };

.codesandbox/ci.json

@@ -1,5 +1,5 @@
 {
-	"buildCommand": "build:source",
+	"buildCommand": "build",
 	"sandboxes": ["new"],
 	"silent": true
 }

.gitignore

@@ -5,4 +5,5 @@ tests/cypress/videos
 # jest results
 /junit.xml
 /coverage
-/yarn-error.log
+/yarn-error.log
+/dom-accessibility-api.tgz

azure-pipelines.yml

@@ -35,6 +35,15 @@ steps:
       yarn build
     displayName: "Build"
 
+  - script: |
+      npm pack
+      mv dom-accessibility-api-*.tgz dom-accessibility-api.tgz
+    displayName: "Prepare smoke tests of build"
+
+  - script: yarn start
+    displayName: "kcd-rollup smoke tests of build"
+    workingDirectory: tests/build/fixtures/kcd-rollup
+
   - script: yarn test:ci
     displayName: "Run jest tests"
 

package.json

@@ -2,7 +2,11 @@
 	"name": "dom-accessibility-api",
 	"version": "0.4.1",
 	"main": "dist/index.js",
-	"types": "dist/index.d.ts",
+	"type": "commonjs",
+	"exports": {
+		"import": "dist/index.mjs",
+		"require": "dist/index.js"
+	},
 	"license": "MIT",
 	"repository": {
 		"type": "git",
@@ -16,9 +20,10 @@
 		"dist/"
 	],
 	"scripts": {
-		"build": "yarn build:clean && yarn build:source && yarn build:types",
+		"build": "yarn build:clean && yarn build:source && yarn build:source:cjs && yarn build:types",
 		"build:clean": "rimraf dist",
-		"build:source": "babel sources --extensions \".ts\" --ignore \"**/__tests__/**/*\" --out-dir dist/ --source-maps",
+		"build:source": "babel sources --extensions \".ts\" --ignore \"**/__tests__/**/*\" --out-dir dist/ --out-file-extension=.mjs --source-maps",
+		"build:source:cjs": "cross-env BABEL_ENV=cjs babel sources --extensions \".ts\" --ignore \"**/__tests__/**/*\" --out-dir dist/ --out-file-extension=.js --source-maps",
 		"build:types": "tsc -p tsconfig.json --emitDeclarationOnly",
 		"format": "prettier \"**/*.{json,js,md,ts,yml}\" --write --ignore-path .prettierignore",
 		"lint": "eslint --report-unused-disable-directives \"sources/**/*.ts\"",
@@ -40,6 +45,7 @@
 	"devDependencies": {
 		"@babel/cli": "^7.8.4",
 		"@babel/core": "^7.8.7",
+		"@babel/plugin-transform-modules-commonjs": "^7.9.0",
 		"@babel/preset-env": "^7.8.7",
 		"@babel/preset-typescript": "^7.8.3",
 		"@changesets/changelog-github": "^0.2.2",
@@ -49,6 +55,7 @@
 		"@typescript-eslint/eslint-plugin": "^2.23.0",
 		"@typescript-eslint/parser": "^2.23.0",
 		"concurrently": "^5.1.0",
+		"cross-env": "^7.0.2",
 		"cypress": "^4.1.0",
 		"eslint": "^6.8.0",
 		"jest": "^25.1.0",

tests/build/fixtures/kcd-rollup/.gitignore

@@ -0,0 +1,3 @@
+# kcd scripts output
+dist/
+yarn.lock

tests/build/fixtures/kcd-rollup/README.md

@@ -0,0 +1,3 @@
+# kdc-rollup
+
+How `@testing-library/dom` builds.

tests/build/fixtures/kcd-rollup/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "build-fixture-kcd-rollup",
+	"private": true,
+	"dependencies": {
+		"dom-accessibility-api": "file:../../../../dom-accessibility-api.tgz",
+		"kcd-scripts": "^5.5.0"
+	},
+	"scripts": {
+		"start": "yarn install --no-lockfile && yarn build",
+		"build": "kcd-scripts build --bundle --no-clean"
+	}
+}

tests/build/fixtures/kcd-rollup/rollup.config.js

@@ -0,0 +1,5 @@
+const rollupConfig = require("kcd-scripts/dist/config/rollup.config");
+
+// the exports in this library should always be named for all formats.
+rollupConfig.output[0].exports = "named";
+module.exports = rollupConfig;

tests/build/fixtures/kcd-rollup/src/index.js

@@ -0,0 +1,5 @@
+import { computeAccessibleName } from "dom-accessibility-api";
+
+if (typeof computeAccessibleName !== "function") {
+	throw new TypeError();
+}