From 0cff2a244c74d27936c949c50592cb01bcd42ae0 Mon Sep 17 00:00:00 2001
From: Sean Barag <barag@cockroachlabs.com>
Date: Fri, 15 Sep 2023 10:31:35 -0700
Subject: [PATCH] packaging: distribute @cockroachlabs/icons with ESM and
 CommonJS versions

Distributing an ES Modules-formatted package makes tree-shaking of
unused exports significantly simpler for packages that consume /icons.
Node's support for ESM is still experimental though, and Jest by default
won't transform anything in node_modules. Using that ESM build wouldn't
work, and would require the previous CommonJS format. This left us with
a dilemma:

Either distribute something that can be bundled efficiently and
effectively (ESM), or ship something that's easy to use in tests (CJS).

Luckily that's actually a false dilemma: we can just ship both. Bundlers
like webpack will read the 'module' field in package.json and receive
the easily-bundled ES Modules format. Node (and by extension, Jest) will
read the 'main' field in package.json and receive the no-transformation-
necessary CommonJS format. Everyone wins!
---
 packages/icons/package.json      | 9 ++++++---
 packages/icons/tsconfig.esm.json | 7 +++++++
 packages/icons/tsconfig.json     | 4 ++--
 3 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 packages/icons/tsconfig.esm.json

diff --git a/packages/icons/package.json b/packages/icons/package.json
index 88f6291c5..65a3fe63b 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -5,11 +5,14 @@
   "files": [
     "dist/"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/cjs/index.d.ts",
   "scripts": {
     "build": "run-s build:generate:stripfill build:generate:preserve build:typescript",
-    "build:typescript": "tsc",
+    "build:typescript": "run-p build:typescript:*",
+    "build:typescript:cjs": "tsc -p tsconfig.json",
+    "build:typescript:esm": "tsc -p tsconfig.esm.json",
     "build:generate:stripfill": "svgr --typescript --icon -d src/components svg/customFill",
     "build:generate:preserve": "svgr --typescript --icon --no-runtime-config -d src/components svg/preserveFill",
     "build:watch": "tsc --watch --preserveWatchOutput",
diff --git a/packages/icons/tsconfig.esm.json b/packages/icons/tsconfig.esm.json
new file mode 100644
index 000000000..0f362e927
--- /dev/null
+++ b/packages/icons/tsconfig.esm.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/esm/",
+    "module": "es2020"
+  }
+}
diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json
index 9a39ffcc2..f1ee59afa 100644
--- a/packages/icons/tsconfig.json
+++ b/packages/icons/tsconfig.json
@@ -5,11 +5,11 @@
     "noImplicitAny": true,
     "module": "commonjs",
     "moduleResolution": "Node",
-    "target": "es6",
+    "target": "es2020",
     "jsx": "react",
     "esModuleInterop": true,
     "declaration": true,
-    "outDir": "./dist",
+    "outDir": "./dist/cjs/",
     "skipLibCheck": true, 
   },
   "exclude": [