feat: build packages with rollup for .mjs extension support

.babelrc.json

@@ -1,5 +1,6 @@
 {
   "sourceType": "unambiguous",
+  "inputSourceMap": true,
   "presets": [
     [
       "@babel/preset-env",
@@ -14,5 +15,7 @@
     "@babel/preset-typescript",
     ["@babel/preset-react", { "runtime": "automatic" }]
   ],
-  "plugins": []
-}
+  "plugins": [
+    "babel-plugin-styled-components"
+  ]
+}

package.json

@@ -13,7 +13,7 @@
   "module": "dist/esm/index.js",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
+      "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.js"
     }
   },
@@ -34,7 +34,6 @@
     "lint:css": "stylelint '**/*Styles.tsx'",
     "lint:css:fix": "yarn lint:css --fix",
     "types": "tsc --noEmit",
-    "generate-swcrc": "zx ./scripts/generate-swcrc.cjs",
     "prepare": "husky install",
     "release": "semantic-release",
     "release:dry": "yarn release --dry-run",
@@ -48,8 +47,6 @@
   },
   "dependencies": {
     "@styled-system/should-forward-prop": "5.1.5",
-    "@swc/helpers": "^0.4.11",
-    "@swc/plugin-styled-components": "^1.2.10",
     "react-collapsed": "3.0.2",
     "react-jazzicon": "^1.0.4",
     "react-toastify": "7.0.4",
@@ -64,6 +61,8 @@
     "@babel/preset-typescript": "^7.22.5",
     "@commitlint/cli": "^17.8.1",
     "@commitlint/config-conventional": "^17.8.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@semrel-extra/npm": "^1.2.2",
@@ -79,9 +78,6 @@
     "@svgr/plugin-jsx": "5.5.0",
     "@svgr/plugin-prettier": "5.5.0",
     "@svgr/plugin-svgo": "5.5.0",
-    "@swc/cli": "^0.1.57",
-    "@swc/core": "^1.2.245",
-    "@swc/jest": "^0.2.22",
     "@testing-library/react": "^13.3.0",
     "@types/jest": "^29.5.3",
     "@types/react": "18.0.17",
@@ -94,18 +90,19 @@
     "@types/ua-parser-js": "^0.7.36",
     "@typescript-eslint/eslint-plugin": "^5.36.1",
     "@typescript-eslint/parser": "^5.36.1",
+    "babel-plugin-styled-components": "^2.1.4",
     "browserslist": "^4.21.10",
     "conventional-changelog-conventionalcommits": "4.6.3",
     "eslint": "8.46.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-react": "7.33.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "^0.6.13",
-    "eslint-plugin-import": "^2.29.0",
     "husky": "^7.0.1",
     "jest": "^29.0.1",
     "jest-environment-jsdom": "^29.0.1",
@@ -121,6 +118,7 @@
     "react-dom": "18.2.0",
     "react-is": "18.2.0",
     "rimraf": "3.0.2",
+    "rollup": "3.29.1",
     "semantic-release": "^19.0.5",
     "storybook": "^7.2.3",
     "storybook-addon-swc": "^1.2.0",

rollup.config.mjs

@@ -0,0 +1,46 @@
+import fs from 'node:fs'
+import resolve from '@rollup/plugin-node-resolve'
+import { babel } from '@rollup/plugin-babel'
+
+const extensions = ['.js', '.jsx', '.ts', '.tsx']
+
+const { dependencies = {}, peerDependencies = {} } = JSON.parse(
+  fs.readFileSync('package.json', 'utf-8'),
+)
+
+const external = [
+  'react/jsx-runtime',
+  ...Object.keys({ ...dependencies, ...peerDependencies }),
+]
+
+export default {
+  input: './packages/index',
+  output: [
+    {
+      dir: 'dist/cjs',
+      format: 'cjs',
+      preserveModules: true,
+      preserveModulesRoot: 'packages',
+      generatedCode: 'es2015',
+      sourcemap: true,
+    },
+    {
+      dir: 'dist/esm',
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: 'packages',
+      entryFileNames: '[name].mjs',
+      generatedCode: 'es2015',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    resolve({ extensions, preferBuiltins: true }),
+    babel({
+      exclude: 'node_modules/**',
+      babelHelpers: 'bundled',
+      extensions,
+    }),
+  ],
+  external,
+}

scripts/build.cjs

@@ -3,8 +3,7 @@
 
 const main = async () => {
   await $`rm -rf ./dist`
-  await $`swc ./packages --no-swcrc --config-file .swcrc.commonjs -d ./dist/cjs`
-  await $`swc ./packages --no-swcrc --config-file .swcrc.esm -d ./dist/esm`
+  await $`rollup -c`
   await $`tsc --project tsconfig.production.json`
 }