Claude/fix issue 488 gv1fy

.babelrc.esm.js

@@ -0,0 +1,23 @@
+module.exports = {
+  babelrc: false,
+  configFile: false,
+  presets: [
+    ['@babel/preset-env', { modules: false }],
+    '@babel/preset-typescript'
+  ],
+  ignore: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.ts'],
+  plugins: [
+    '@babel/proposal-class-properties',
+    '@babel/proposal-object-rest-spread',
+    '@babel/plugin-proposal-optional-chaining',
+    ['@babel/transform-runtime', { regenerator: true }],
+    '@babel/plugin-transform-nullish-coalescing-operator',
+    [
+      'module-resolver',
+      {
+        root: ['.'],
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.es', '.es6', '.mjs']
+      }
+    ]
+  ]
+};

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 dist
 /index.js
+/index.esm.js
 /index.node.js
 .env
 coverage

package.json

@@ -20,11 +20,23 @@
     "typescript"
   ],
   "main": "./index.node.js",
+  "module": "./index.esm.js",
   "browser": "./index.js",
   "types": "./dist/index.d.ts",
   "unpkg": "./index.js",
+  "exports": {
+    ".": {
+      "import": "./index.esm.js",
+      "require": "./index.node.js",
+      "browser": "./index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./index.node.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "index.js",
+    "index.esm.js",
     "index.d.ts",
     "index.node.js",
     "dist/*",
@@ -52,12 +64,13 @@
     "start:all:react": "concurrently \"yarn start\" \"cd react-example && yarn start\" -n 'module,website' -k",
     "build": "ttsc && babel src --out-dir ./dist --extensions '.ts,.tsx' && webpack",
     "build:node": "yarn build --config webpack.node.config.js",
+    "build:esm": "webpack --config webpack.esm.config.js",
     "test": "jest --config jest.config.js --coverage",
     "format": "prettier --write \"src/**/*.{ts,tsx}\" \"src/**/*.{js}\" \"example/src/**/*.{ts,tsx}\" \"example/src/**/*.{js}\" \"react-example/src/**/*.{ts,tsx}\" \"react-example/src/**/*.{js}\" --no-error-on-unmatched-pattern",
     "lint": "eslint src --ignore-pattern '*.test.*' --ignore-pattern '*.spec.*' --ext '.ts,.tsx'",
     "typecheck": "ttsc --noEmit true --emitDeclarationOnly false",
     "check-deps": "madge --extensions js,ts --circular dist",
-    "prepublishOnly": "yarn lint && yarn typecheck && yarn format && yarn build && yarn build:node",
+    "prepublishOnly": "yarn lint && yarn typecheck && yarn format && yarn build && yarn build:node && yarn build:esm",
     "clean": "find . -name \"node_modules\" -exec rm -rf '{}' +"
   },
   "devDependencies": {

webpack.esm.config.js

@@ -0,0 +1,73 @@
+const path = require('path');
+const env = require('dotenv').config({ path: './.env' });
+const webpack = require('webpack');
+const { version } = require('./package.json');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+function getParsedEnv() {
+  if (!env.error) {
+    return {
+      ...env.parsed,
+      VERSION: version,
+      IS_EU_ITERABLE_SERVICE: process.env.IS_EU_ITERABLE_SERVICE || false
+    };
+  }
+
+  return {
+    VERSION: version
+  };
+}
+
+module.exports = {
+  mode: 'production',
+  entry: './src/index.ts',
+  experiments: {
+    outputModule: true
+  },
+  output: {
+    filename: './index.esm.js',
+    path: path.resolve(__dirname),
+    library: {
+      type: 'module'
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': JSON.stringify(getParsedEnv())
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'dist/components/style.css'
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: {
+          loader: 'babel-loader',
+          options: require('./.babelrc.esm.js')
+        },
+        exclude: /node_modules/
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader']
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'dist/assets/'
+            }
+          }
+        ]
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js', '.css']
+  }
+};