From d5ff954caa342ecbc0c141ed5a6d611c59cacf46 Mon Sep 17 00:00:00 2001
From: Goulin Khoge <36013798+goulinkh@users.noreply.github.com>
Date: Mon, 7 Oct 2024 11:24:57 +0200
Subject: [PATCH] feat: Add ESM support (#1142)

---
 .babelrc           | 24 -----------------
 .storybook/main.js |  3 ++-
 babel.config.js    | 65 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json       | 12 ++++-----
 4 files changed, 73 insertions(+), 31 deletions(-)
 delete mode 100644 .babelrc
 create mode 100644 babel.config.js

diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 41184ca53..000000000
--- a/.babelrc
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ],
-  "plugins": [
-    "@babel/plugin-proposal-class-properties",
-    "babel-plugin-typescript-to-proptypes",
-    [
-      "module-resolver",
-      {
-        "root": ["./src"],
-        "alias": {
-          "enums": "./src/enums",
-          "components": "./src/components",
-          "hooks": "./src/hooks",
-          "types": "./src/types",
-          "utils": "./src/utils"
-        }
-      }
-    ]
-  ]
-}
diff --git a/.storybook/main.js b/.storybook/main.js
index 3619b4061..8cdde7f98 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -7,9 +7,10 @@ const config = {
     "@storybook/addon-docs",
     "@storybook/addon-controls",
     "@storybook/addon-a11y",
-    "@storybook/addon-webpack5-compiler-babel"
+    "@storybook/addon-webpack5-compiler-babel",
   ],
   webpackFinal: async (config) => {
+    process.env.BABEL_ENV = "cjs";
     config.module.rules.push({
       test: /\.scss$/,
       use: ["style-loader", "css-loader", "sass-loader"],
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 000000000..c6a6e30a1
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,65 @@
+const commonJs = {
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+  ],
+  plugins: [
+    "@babel/plugin-proposal-class-properties",
+    "babel-plugin-typescript-to-proptypes",
+    [
+      "module-resolver",
+      {
+        root: ["./src"],
+        alias: {
+          enums: "./src/enums",
+          components: "./src/components",
+          hooks: "./src/hooks",
+          types: "./src/types",
+          utils: "./src/utils",
+        },
+      },
+    ],
+  ],
+};
+const esm = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        modules: false,
+        targets: {
+          esmodules: true,
+          chrome: "120",
+        },
+      },
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+  ],
+  plugins: [
+    "@babel/plugin-proposal-class-properties",
+    "babel-plugin-typescript-to-proptypes",
+    [
+      "module-resolver",
+      {
+        root: ["./src"],
+        alias: {
+          enums: "./src/enums",
+          components: "./src/components",
+          hooks: "./src/hooks",
+          types: "./src/types",
+          utils: "./src/utils",
+        },
+      },
+    ],
+  ],
+};
+
+module.exports = {
+  env: {
+    cjs: commonJs,
+    test: commonJs,
+    esm,
+  },
+};
diff --git a/package.json b/package.json
index 95febcebb..4ee6628e8 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,6 @@
     "dist/**/*.js",
     "dist/**/*.d.*",
     "dist/**/*.scss",
-    "dist-types/**/*.d.ts",
-    "dist-esm/**/*.js",
     "!dist/**/*.test.js",
     "!dist/testing",
     "!dist/setupTests.js"
@@ -128,10 +126,12 @@
     "vanilla-framework": "^3.15.1 || ^4.0.0"
   },
   "scripts": {
-    "build": "rm -rf dist && yarn build-local; yarn build-declaration",
-    "build-local": "NODE_ENV=production babel src --out-dir dist --copy-files --no-copy-ignored --extensions '.js,.jsx,.ts,.tsx,.snap' --ignore '**/*.test.ts','**/*.test.tsx','**/*.stories.tsx','**/__snapshots__','src/setupTests.js','src/testing'",
-    "build-declaration": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "build-watch": "yarn run build-local --watch",
+    "build": "rm -rf dist && yarn build-cjs && yarn build-declaration && yarn build-esm && yarn build-declaration-esm",
+    "build-cjs": "NODE_ENV=production BABEL_ENV=cjs babel src --out-dir dist --copy-files --extensions '.js,.jsx,.ts,.tsx'",
+    "build-declaration": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json",
+    "build-esm": "NODE_ENV=production BABEL_ENV=esm babel src --out-dir dist/esm --copy-files --extensions '.js,.jsx,.ts,.tsx'",
+    "build-declaration-esm": "tsc --project tsconfig.json --outDir dist/esm && tsc-alias -p tsconfig.json --outDir dist/esm",
+    "build-watch": "yarn run build-cjs --watch",
     "build-docs": "storybook build -c .storybook -o docs",
     "clean": "rm -rf node_modules dist .out",
     "docs": "storybook dev -p ${PORT:-9009} --no-open",