chore: Add an ESM submodule export to the build output

.gitignore

@@ -1,5 +1,7 @@
 node_modules
 dist
+dist-esm
+dist-types
 .env.local
 .DS_Store
 .idea

.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

@@ -2,7 +2,8 @@
   "name": "@canonical/react-components",
   "version": "0.47.3",
   "main": "dist/index.js",
-  "module": "dist/index.js",
+  "module": "dist-esm/index.js",
+  "types": "dist-types/index.d.ts",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -126,10 +127,11 @@
     "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 --extensions '.js,.jsx,.ts,.tsx'",
-    "build-declaration": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json",
-    "build-watch": "yarn run build-local --watch",
+    "build": "yarn build-cjs && yarn build-declaration && yarn build-esm",
+    "build-cjs": "rm -rf dist && NODE_ENV=production BABEL_ENV=cjs babel src --out-dir dist --copy-files --extensions '.js,.jsx,.ts,.tsx'",
+    "build-esm": "rm -rf dist-esm && NODE_ENV=production BABEL_ENV=esm babel src --out-dir dist-esm --copy-files --extensions '.js,.jsx,.ts,.tsx'",
+    "build-declaration": "rm -rf dist-types && tsc --project tsconfig.json --outDir dist-types && tsc-alias -p tsconfig.json --outDir dist-types",
+    "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",