Improve building of ESM and CJS bundles

- Move ESM RSPack config to a separate file
- Separate locales to `dist/locales.esm` and `dist/locales.cjs`

Fixes issue where translations don't work (because both builds were
writing incompatible i18n files to the same location)

Author: jcbrand

dev.esm.html

@@ -37,6 +37,7 @@
                 });
 
                 await converse.initialize({
+                    i18n: 'af',
                     theme: 'nordic',
                     dark_theme: 'dracula',
                     auto_away: 300,

dev.html

@@ -26,6 +26,7 @@
     });
 
     converse.initialize({
+        i18n: 'af',
         theme: 'nordic',
         dark_theme: 'dracula',
         auto_away: 300,

package.json

@@ -47,15 +47,17 @@
     "3rdparty/*.js"
   ],
   "scripts": {
-    "build": "npm run build:website-min-css && DROP_DEBUGGER=true rspack build --config rspack/rspack.build.js",
+    "build": "npm run build:website-min-css && npm run build:headless && npm run build:esm && npm run build:cjs",
+    "build:cjs": "DROP_DEBUGGER=true rspack build --config rspack/rspack.build.cjs.js",
+    "build:esm": "DROP_DEBUGGER=true rspack build --config rspack/rspack.build.esm.js",
+    "build:headless": "rspack build --config rspack/rspack.headless.js",
     "build:website-css": "sass --quiet --load-path=node_modules src/shared/styles/website.scss dist/website.css",
     "build:website-min-css": "npm run build:website-css && npx clean-css-cli dist/website.css > dist/website.min.css",
     "cdn": "ASSET_PATH=https://cdn.conversejs.org/dist/ npm run build",
     "clean": "rm -rf node_modules dist *.zip src/headless/dist src/headless/node_modules",
     "dev": "DROP_DEBUGGER=false rspack build --config rspack/rspack.build.js --mode=development",
     "dev:headless": "DROP_DEBUGGER=false rspack build --config rspack/rspack.headless.js --mode=development",
     "devserver": "npm run dev:headless && npx rspack serve --config rspack/rspack.serve.js",
-    "headless": "rspack build --config rspack/rspack.headless.js",
     "lint": "eslint src/**/*.js",
     "nodeps": "rspack build --config rspack/rspack.nodeps.js",
     "serve": "http-server -c-1",

rspack/rspack.build.cjs.js

@@ -0,0 +1,9 @@
+const { merge } = require('webpack-merge');
+const common = require('../rspack/rspack.build.js');
+
+module.exports = merge(common, {
+    output: {
+        filename: '[name].js',
+        chunkFilename: 'chunkjs.cjs/[name].js',
+    },
+});

rspack/rspack.build.esm.js

@@ -0,0 +1,16 @@
+const { merge } = require('webpack-merge');
+const common = require('../rspack/rspack.build.js');
+
+module.exports = merge(common, {
+    experiments: {
+        outputModule: true,
+        topLevelAwait: true,
+    },
+    output: {
+        filename: '[name].esm.js',
+        chunkFilename: 'chunkjs.esm/[name].js',
+        library: {
+            type: 'module',
+        },
+    },
+});

rspack/rspack.build.js

@@ -3,7 +3,7 @@ const path = require('path');
 const { merge } = require('webpack-merge');
 const common = require('../rspack/rspack.common.js');
 
-const sharedConfig = {
+module.exports = merge(common, {
     mode: 'production',
     entry: {
         'converse': path.resolve(__dirname, '../src/entry.js'),
@@ -71,56 +71,32 @@ const sharedConfig = {
             },
         ],
     },
-};
-
-const plugins = [
-    new rspack.CssExtractRspackPlugin({
-        filename: '../dist/converse.min.css',
-    }),
-    new rspack.CssExtractRspackPlugin({
-        filename: '../dist/converse.css',
-    }),
-    new rspack.CopyRspackPlugin({
-        patterns: [
-            { from: 'node_modules/strophe.js/src/shared-connection-worker.js', to: 'shared-connection-worker.js' },
-            { from: 'sounds', to: 'sounds' },
-            { from: 'images/favicon.ico', to: 'images/favicon.ico' },
-            { from: 'images/custom_emojis', to: 'images/custom_emojis' },
-            { from: 'logo/conversejs-filled-192.png', to: 'images/logo' },
-            { from: 'logo/conversejs-filled-512.png', to: 'images/logo' },
-            { from: 'logo/conversejs-filled-192.svg', to: 'images/logo' },
-            { from: 'logo/conversejs-filled-512.svg', to: 'images/logo' },
-            { from: 'logo/conversejs-filled.svg', to: 'images/logo' },
-            { from: 'logo/conversejs-gold-gradient.svg', to: 'images/logo' },
-            { from: 'src/shared/styles/webfonts', to: 'webfonts' },
-            { from: 'manifest.json', to: 'manifest.json' },
-            { from: 'src/headless/plugins/emoji/emoji.json', to: 'emoji.json' },
-        ],
-    }),
-];
-
-module.exports = [
-    // CJS Build
-    merge(common, {
-        ...sharedConfig,
-        plugins,
-        output: {
-            filename: '[name].js',
-        },
-    }),
-    // ESM Build
-    merge(common, {
-        ...sharedConfig,
-        plugins,
-        experiments: {
-            outputModule: true,
-            topLevelAwait: true,
-        },
-        output: {
-            filename: '[name].esm.js',
-            library: {
-                type: 'module',
-            },
-        },
-    }),
-];
+    plugins: [
+        new rspack.CssExtractRspackPlugin({
+            filename: '../dist/converse.min.css',
+        }),
+        new rspack.CssExtractRspackPlugin({
+            filename: '../dist/converse.css',
+        }),
+        new rspack.CopyRspackPlugin({
+            patterns: [
+                {
+                    from: 'node_modules/strophe.js/src/shared-connection-worker.js',
+                    to: 'shared-connection-worker.js',
+                },
+                { from: 'sounds', to: 'sounds' },
+                { from: 'images/favicon.ico', to: 'images/favicon.ico' },
+                { from: 'images/custom_emojis', to: 'images/custom_emojis' },
+                { from: 'logo/conversejs-filled-192.png', to: 'images/logo' },
+                { from: 'logo/conversejs-filled-512.png', to: 'images/logo' },
+                { from: 'logo/conversejs-filled-192.svg', to: 'images/logo' },
+                { from: 'logo/conversejs-filled-512.svg', to: 'images/logo' },
+                { from: 'logo/conversejs-filled.svg', to: 'images/logo' },
+                { from: 'logo/conversejs-gold-gradient.svg', to: 'images/logo' },
+                { from: 'src/shared/styles/webfonts', to: 'webfonts' },
+                { from: 'manifest.json', to: 'manifest.json' },
+                { from: 'src/headless/plugins/emoji/emoji.json', to: 'emoji.json' },
+            ],
+        }),
+    ]
+});

rspack/rspack.serve.js

@@ -83,6 +83,10 @@ module.exports = [
                     directory: path.resolve(__dirname, '../dist'),
                     publicPath: '/dist/',
                 },
+                {
+                    directory: path.resolve(__dirname, '../dist/locales.esm'),
+                    publicPath: '/dist/locales/',
+                },
                 {
                     directory: path.resolve(__dirname, '../src/headless/dist'),
                     publicPath: '/src/headless/dist/',