feat: Add ESM support (#1142)

.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"],

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,
+  },
+};

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",