chore: replace babel and build script with rollup and swc

Removes `build.js` script
Most `babel` dependencies and config are still needed for `storybook`
`@babel/cli` has been removed

Author: edleeks87

.gitignore

@@ -16,7 +16,9 @@ lib
 esm
 src/style-config/assets.scss
 storybook-static/
+.swc/
+bundle-stats/
 
 playwright/test-results
 playwright/test-report
-playwright/.cache
+playwright/.cache

.swcrc

@@ -0,0 +1,28 @@
+{
+  "jsc": {
+    "target": "es2020",
+    "parser": {
+      "syntax": "typescript",
+      "decorators": true,
+      "dynamicImport": true
+    },
+    "transform": {
+      "decoratorMetadata": true,
+      "legacyDecorator": true
+    },
+    "keepClassNames": true,
+    "externalHelpers": true,
+    "loose": true
+  },
+  "module": {
+    "type": "es6"
+  },
+  "sourceMaps": true,
+  "exclude": [
+    "jest.config.ts",
+    ".*\\.spec.tsx?$",
+    ".*\\.test.tsx?$",
+    "./src/jest-setup.ts$",
+    "./**/jest-setup.ts$"
+  ]
+}

package-lock.json

@@ -13,18 +13,15 @@
     "test-update": "jest --config=./jest.config.ts --updateSnapshot",
     "format": "prettier --write './{src,playwright}/**/*.{js,jsx,ts,tsx}'",
     "lint": "eslint ./src ./playwright",
-    "build": "node ./scripts/build.js",
-    "copy-files": "node ./scripts/copy-files.js",
     "precompile": "npm run type-check && npm run clean-lib && npm run build && npm run build:types && npm run copy-files",
     "prepublishOnly": "npm run precompile",
-    "watch": "npm run clean-lib && npm run copy-files -- --watch & npm run babel -- --watch",
     "build-storybook": "dotenvx run -- storybook build -c .storybook",
     "build-storybook:prod": "dotenvx run -f .env.production -- storybook build -c .storybook",
     "start:static": "npx http-server -p 9001 ./storybook-static",
     "clean-lib": "rimraf ./lib && rimraf ./esm",
     "commit": "git-cz",
     "generate-metadata": "node ./scripts/generate_metadata/index.mjs",
-    "type-check:carbon": "tsc --noEmit",
+    "type-check:carbon": "tsc --noEmit -p ./tsconfig-build.json",
     "type-check:playwright": "tsc -p ./tsconfig-playwright.json",
     "type-check": "npm run type-check:carbon && npm run type-check:playwright",
     "type-check:watch": "concurrently --names 'src,playwright' -c 'cyan,yellow' 'npm run type-check:carbon -- --watch' 'npm run type-check:playwright -- --watch'",
@@ -36,7 +33,10 @@
     "clear-playwright-cache": "rimraf ./playwright/.cache",
     "clear-playwright-coverage-json": "rimraf ./playwright/coverage/*.json",
     "test:ct:coverage": "npm run clear-playwright-cache && npm run clear-playwright-coverage-json && rimraf ./playwright/coverage && playwright test -c playwright-ct.config.ts",
-    "pw:coverage:report": "nyc report --reporter=html --report-dir=./playwright/coverage --temp-dir=./playwright/coverage"
+    "pw:coverage:report": "nyc report --reporter=html --report-dir=./playwright/coverage --temp-dir=./playwright/coverage",
+    "build": "npm run clean-lib && rollup -c \"./rollup.config.mjs\" && npm run build:generate-package-json-files && npm run build:move-svg && npm run build:types",
+    "build:generate-package-json-files": "node ./scripts/generate_package_json_files/index.js",
+    "build:move-svg": "node ./scripts/copy_svg/index.js"
   },
   "repository": {
     "type": "git",
@@ -56,7 +56,6 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "~4.10.1",
-    "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.3",
     "@babel/eslint-parser": "^7.23.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -71,6 +70,11 @@
     "@dotenvx/dotenvx": "^1.25.1",
     "@playwright/experimental-ct-react": "^1.52.0",
     "@playwright/test": "^1.52.0",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.3.0",
+    "@rollup/plugin-url": "^8.0.2",
     "@sage/design-tokens": "~4.29.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
@@ -89,6 +93,8 @@
     "@storybook/react-webpack5": "~8.6.7",
     "@storybook/theming": "~8.6.7",
     "@storybook/types": "~8.6.7",
+    "@swc/helpers": "^0.5.15",
+    "@swc/plugin-styled-components": "^7.1.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -159,6 +165,12 @@
     "react-markdown": "^8.0.7",
     "remark-gfm": "^4.0.0",
     "rimraf": "^3.0.2",
+    "rollup": "^3.29.5",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-ignore": "^1.0.10",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-swc3": "^0.12.1",
+    "rollup-plugin-visualizer": "^5.14.0",
     "semantic-release": "^24.2.3",
     "semver": "^7.5.4",
     "sprintf-js": "^1.1.3",

package.json

@@ -0,0 +1,180 @@
+import { fileURLToPath } from "url";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import json from "@rollup/plugin-json";
+import terser from "@rollup/plugin-terser";
+import path from "path";
+import glob from "glob";
+import postcss from "rollup-plugin-postcss";
+import swc from "rollup-plugin-swc3";
+import copy from "rollup-plugin-copy";
+import { visualizer } from "rollup-plugin-visualizer";
+
+/* Convert import.meta.url to a file path and get the directory name */
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default {
+  input: Object.fromEntries(
+    glob
+      .sync(path.join(__dirname, "src/**/*.{ts,tsx}"), {
+        ignore: [
+          "**/*.types.ts",
+          /** This is just a type file so ignored to avoid an empty chunk */
+          "**/icon-type.ts",
+          /** This is just a type file so ignored to avoid an empty chunk */
+          "**/locale.ts",
+          "**/*.test.ts",
+          "**/*.spec.ts",
+          "**/*.stories.ts",
+          "**/*.test.tsx",
+          "**/*.spec.tsx",
+          "**/*.stories.tsx",
+          "**/*.pw.tsx",
+          "**/*.test-pw.tsx",
+          "**/*.d.ts",
+          /* Ignores SVGs, they are moved in post-build */
+          "**/*.svg",
+          "**/test-utils.ts",
+        ],
+      })
+      .map((file) => [
+        /** 
+         * Removes `src/` as well as the file extension from each file
+         * e.g. src/components/foo.js becomes components/foo
+         * */
+        path.relative(
+          path.join(__dirname, "src"),
+          file.slice(0, file.length - path.extname(file).length),
+        ),
+        /**
+         * This expands the relative paths to absolute paths
+         * e.g. src/components/foo becomes /project/src/components/foo.js
+         * */
+        fileURLToPath(new URL(file, import.meta.url)),
+      ]),
+  ),
+  external: [
+    /node_modules/,
+    /^[^./]|^\.[^./]|^\.\.[^/]/,
+    /* Treat all SVGs as external */
+    /\.svg$/,
+    "styled-components",
+    "@swc/helpers",
+    "react",
+    "react-dom",
+  ],
+  plugins: [
+    resolve({
+      extensions: [".js", ".jsx", ".ts", ".tsx"],
+      preferBuiltins: true,
+      browser: true,
+      moduleDirectories: ["node_modules"],
+      resolveOnly: [
+        /* Exclude @swc/helpers from custom resolution */
+        /^(?!@swc\/helpers)/,
+        /* Exclude styled-components from custom resolution */
+        /^(?!styled-components)/,
+      ],
+    }),
+    commonjs({
+      include: "node_modules/**",
+      requireReturnsDefault: "auto",
+      transformMixedEsModules: true,
+      ignoreDynamicRequires: true,
+    }),
+    json(),
+    postcss({
+      extract: true,
+      minimize: true,
+    }),
+    swc({
+      jsc: {
+        parser: {
+          syntax: "typescript",
+          tsx: true,
+          decorators: true,
+        },
+        transform: {
+          react: {
+            runtime: "automatic",
+          },
+          legacyDecorator: true,
+          decoratorVersion: "2022-03"
+        },
+        externalHelpers: false,
+        experimental: {
+          plugins: [
+            ["@swc/plugin-styled-components", {
+              displayName: true,
+              ssr: true,
+              fileName: true,
+              minify: true,
+              transpileTemplateLiterals: true
+            }]
+          ]
+        },
+      },
+    }),
+    terser({
+      maxWorkers: 4,
+      compress: {
+        /* Keep console.error and console.warn */
+        pure_funcs: [
+          "console.log",
+          "console.info",
+          "console.debug"
+        ],
+        passes: 2,
+        unused: true,
+        dead_code: true
+      },
+      mangle: true,
+      format: {
+        comments: false,
+      },
+      /* Matches es6 target in tsconfig */
+      ecma: 2015,
+      toplevel: true
+    }),
+    copy({
+      targets: [
+        { src: "src/style/assets/**/*", dest: "lib/style/assets" },
+        { src: "src/style/assets/**/*", dest: "esm/style/assets" },
+        { src: "src/style/fonts.css", dest: "lib/style/" },
+        { src: "src/style/fonts.css", dest: "esm/style/" },
+        { src: "src/global.d.ts", dest: "lib/" },
+        { src: "src/global.d.ts", dest: "esm/" },
+      ]
+    }),
+    visualizer({
+      filename: "bundle-stats/index.html",
+      gzipSize: true,
+      brotliSize: true,
+      template: "sunburst",
+      title: "Carbon Bundle Stats",
+    }),
+  ],
+  output: [
+    {
+      dir: path.join(__dirname, "lib"),
+      format: "cjs",
+      preserveModules: true,
+      preserveModulesRoot: "src",
+      entryFileNames: "[name].js",
+      /* Preserves the folder structure of the source files */
+      chunkFileNames: ({ name }) => `${name}.js`,
+      exports: 'named',
+      interop: 'auto',
+    },
+    {
+      dir: path.join(__dirname, "esm"),
+      format: "esm",
+      preserveModules: true,
+      preserveModulesRoot: "src",
+      entryFileNames: "[name].js",
+      /* Preserves the folder structure of the source files */
+      chunkFileNames: ({ name }) => `${name}.js`,
+    },
+  ],
+};