feat!: publish packages as ESM only (#1145)

chambo-e · web-flow · commit 4c25097254a5 · 2023-01-06T17:01:10.000+01:00
BREAKING CHANGE: packages are ESM only
diff --git a/README.md b/README.md
@@ -212,7 +212,9 @@ The browserlist we are currently using is available in the [rollup.config.mjs](.
 
 ### On build outputs
 
-We only output ESM modules.
+We only output ESM modules. Please [read this](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
+
+Compiled modules supports Node > 14, the last two versions of any browsers and any browsers with more than 1% of marketshare at the time of release.
 
 ### On commits
 
diff --git a/packages/jest-helpers/package.json b/packages/jest-helpers/package.json
@@ -3,6 +3,10 @@
   "version": "2.0.25",
   "description": "A package for utilities jest functions",
   "type": "module",
+  "engines": {
+    "node": ">=14.x"
+  },
+  "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/outdated-browser/package.json b/packages/outdated-browser/package.json
@@ -3,12 +3,12 @@
   "version": "1.2.1",
   "description": "A small web script to display outdated banner",
   "type": "module",
+  "engines": {
+    "node": ">=14.x"
+  },
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "browser": {
-    "dist/index.js": "./dist/index.browser.js"
-  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/random-name/package.json b/packages/random-name/package.json
@@ -3,13 +3,13 @@
   "version": "3.0.3",
   "description": "A small utility to generate a random name",
   "type": "module",
+  "engines": {
+    "node": ">=14.x"
+  },
+  "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "browser": {
-    "dist/index.js": "./dist/index.browser.js"
-  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/regex/package.json b/packages/regex/package.json
@@ -3,13 +3,13 @@
   "version": "2.9.1",
   "description": "A small utility to use regex",
   "type": "module",
+  "engines": {
+    "node": ">=14.x"
+  },
+  "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "browser": {
-    "dist/index.js": "./dist/index.browser.js"
-  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/use-dataloader/package.json b/packages/use-dataloader/package.json
@@ -9,13 +9,13 @@
     "dataloader"
   ],
   "type": "module",
+  "engines": {
+    "node": ">=14.x"
+  },
+  "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "browser": {
-    "dist/index.js": "./dist/index.browser.js"
-  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/use-gtm/package.json b/packages/use-gtm/package.json
@@ -11,13 +11,13 @@
     "gtm"
   ],
   "type": "module",
+  "engines": {
+    "node": ">=14.x"
+  },
+  "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "browser": {
-    "dist/index.js": "./dist/index.browser.js"
-  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/use-i18n/package.json b/packages/use-i18n/package.json
@@ -11,13 +11,13 @@
     "react-intl"
   ],
   "type": "module",
+  "engines": {
+    "node": ">=14.x"
+  },
+  "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "browser": {
-    "dist/index.js": "./dist/index.browser.js"
-  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/use-media/package.json b/packages/use-media/package.json
@@ -10,13 +10,13 @@
     "media queries"
   ],
   "type": "module",
+  "engines": {
+    "node": ">=14.x"
+  },
+  "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "browser": {
-    "dist/index.js": "./dist/index.browser.js"
-  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/use-query-params/package.json b/packages/use-query-params/package.json
@@ -12,13 +12,13 @@
     "query-params"
   ],
   "type": "module",
+  "engines": {
+    "node": ">=14.x"
+  },
+  "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "browser": {
-    "dist/index.js": "./dist/index.browser.js"
-  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/use-random-name/package.json b/packages/use-random-name/package.json
@@ -3,13 +3,13 @@
   "version": "0.2.6",
   "description": "A small react utility to generate a random name",
   "type": "module",
+  "engines": {
+    "node": ">=14.x"
+  },
+  "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "browser": {
-    "dist/index.js": "./dist/index.browser.js"
-  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/use-segment/package.json b/packages/use-segment/package.json
@@ -9,13 +9,10 @@
     "segment"
   ],
   "type": "module",
+  "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "browser": {
-    "dist/index.js": "./dist/index.browser.js"
-  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/use-storage/package.json b/packages/use-storage/package.json
@@ -3,13 +3,13 @@
   "version": "1.1.3",
   "description": "A React hook to interact with local/session storage in reactive way",
   "type": "module",
+  "engines": {
+    "node": ">=14.x"
+  },
+  "sideEffects": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "browser": {
-    "dist/index.js": "./dist/index.browser.js"
-  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/validate-icu-locales/package.json b/packages/validate-icu-locales/package.json
@@ -8,6 +8,9 @@
     "cli"
   ],
   "type": "module",
+  "engines": {
+    "node": ">=14.x"
+  },
   "bin": {
     "validate-icu": "dist/index.js"
   },
diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -1,36 +1,37 @@
 import { babel } from '@rollup/plugin-babel'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
-import builtins from 'builtin-modules'
 import { readPackage } from 'read-pkg'
 import dts from 'rollup-plugin-dts'
 import { preserveShebangs } from 'rollup-plugin-preserve-shebangs'
 import { visualizer } from 'rollup-plugin-visualizer'
 
 const PROFILE = !!process.env.PROFILE
 
-const getConfig = (pkg, isBrowser = false) => {
-  const targets = isBrowser
-    ? `
-    > 1%,
-    last 2 versions,
-    not IE > 0,
-    not IE_Mob > 0
-  `
-    : { node: 'current' }
+const pkg = await readPackage()
 
-  const external = id =>
-    [
-      ...Object.keys(pkg.dependencies || {}),
-      ...Object.keys(pkg.peerDependencies || {}),
-      ...(isBrowser ? [] : builtins),
-    ].find(dep => new RegExp(`^${dep}`).test(id))
+const targets = `
+  > 1%,
+  last 2 versions,
+  not IE > 0,
+  not IE_Mob > 0
+  node > 14
+`
 
-  return {
+const external = id =>
+  [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+    ...[],
+  ].find(dep => new RegExp(`^${dep}`).test(id))
+
+export default [
+  {
     external,
     input: './src/index.ts',
     output: {
-      file: isBrowser ? 'dist/index.browser.js' : 'dist/index.js',
+      dir: 'dist',
       format: 'es',
+      preserveModules: true
     },
     plugins: [
       babel({
@@ -52,7 +53,6 @@ const getConfig = (pkg, isBrowser = false) => {
         ],
       }),
       nodeResolve({
-        browser: isBrowser,
         extensions: ['.mjs', '.js', '.json', '.ts', '.tsx'],
         preferBuiltins: true,
       }),
@@ -65,21 +65,10 @@ const getConfig = (pkg, isBrowser = false) => {
           open: true,
         }),
     ].filter(Boolean),
-  }
-}
-
-export default async () => {
-  const pkg = await readPackage()
-
-  const doesAlsoTargetBrowser = 'browser' in pkg
-
-  return [
-    getConfig(pkg),
-    doesAlsoTargetBrowser && getConfig(pkg, true),
-    {
-      input: './src/index.ts',
-      output: [{ file: 'dist/index.d.ts', format: 'es' }],
-      plugins: [dts()],
-    },
-  ].filter(Boolean)
-}
+  },
+  {
+    input: './src/index.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'es' }],
+    plugins: [dts()],
+  },
+]
