Compile both headless and normal builds with watch command

package-lock.json

@@ -45,6 +45,7 @@
         "@typescript-eslint/parser": "^8.29.0",
         "autoprefixer": "^10.4.5",
         "clean-css-cli": "^5.6.2",
+        "concurrently": "^7.6.0",
         "css-loader": "^7.1.2",
         "eslint": "^9.24.0",
         "fast-text-encoding": "^1.0.3",
@@ -2852,6 +2853,50 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/concurrently": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.6.0.tgz",
+      "integrity": "sha512-BKtRgvcJGeZ4XttiDiNcFiRlxoAeZOseqUvyYRUp/Vtd+9p1ULmeoSqGsDA+2ivdeDFpqrJvGvmI+StKfKl5hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "date-fns": "^2.29.1",
+        "lodash": "^4.17.21",
+        "rxjs": "^7.0.0",
+        "shell-quote": "^1.7.3",
+        "spawn-command": "^0.0.2-1",
+        "supports-color": "^8.1.0",
+        "tree-kill": "^1.2.2",
+        "yargs": "^17.3.1"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/concurrently/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/connect": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
@@ -3093,6 +3138,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/date-format": {
       "version": "4.0.14",
       "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz",
@@ -6835,6 +6897,16 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -7547,6 +7619,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/spawn-command": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",
+      "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
+      "dev": true
+    },
     "node_modules/spdy": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -7912,6 +7990,16 @@
         "tslib": "2"
       }
     },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",

package.json

@@ -60,8 +60,10 @@
     "nodeps": "rspack build --config rspack/rspack.nodeps.js",
     "serve": "http-server -c-1",
     "serve-tls": "http-server -S -C certs/chat.example.org.crt -K certs/chat.example.org.key",
-    "devserver": "npx rspack serve --config rspack/rspack.serve.js",
-    "watch": "npm run devserver",
+    "devserver": "npm run headless-dev && npx rspack serve --config rspack/rspack.serve.js",
+    "watch": "concurrently \"npm run watch:headless\" \"npm run watch:main\"",
+    "watch:headless": "rspack --watch --config rspack/rspack.headless.js --mode=development",
+    "watch:main": "rspack --watch --config rspack/rspack.build.js --mode=development",
     "types": "tsc -p ./src/log/tsconfig.json && tsc -p ./src/headless/tsconfig.json && tsc",
     "check:types": "tsc --noEmit"
   },
@@ -103,6 +105,7 @@
     "@typescript-eslint/parser": "^8.29.0",
     "autoprefixer": "^10.4.5",
     "clean-css-cli": "^5.6.2",
+    "concurrently": "^7.6.0",
     "css-loader": "^7.1.2",
     "eslint": "^9.24.0",
     "fast-text-encoding": "^1.0.3",

rspack/rspack.serve.js

@@ -1,53 +1,101 @@
-const common = require('../rspack/rspack.common.js');
+const { rspack } = require('@rspack/core');
 const path = require('path');
 const { merge } = require('webpack-merge');
+const common = require('../rspack/rspack.common.js');
 
-module.exports = merge(common, {
-    mode: 'development',
-    entry: {
-        'converse': {
-            import: path.resolve(__dirname, '../src/entry.js'),
-            filename: '../dist/[name].js'
-        },
-        'converse-headless': {
-            import: path.resolve(__dirname, '../src/headless/index.js'),
-            filename: '../src/headless/dist/[name].js'
-        },
-    },
-    devtool: 'inline-source-map',
-    optimization: {
-        minimize: false,
-    },
-    devServer: {
-        static: [
-            {
-                directory: path.resolve(__dirname, '..'), // Serve root directory for dev.html etc
-                publicPath: '/',
-                serveIndex: true,
-                watch: {
-                    ignored: ['**/node_modules', '**/dist', '**/.git']
-                }
+const plugins = [
+    new rspack.CopyRspackPlugin({
+        patterns: [{ from: 'src/headless/plugins/emoji/emoji.json', to: 'emoji.json' }],
+    }),
+];
+
+module.exports = [
+    // Headless build configuration
+    merge(common, {
+        name: 'converse-headless',
+        mode: 'development',
+        entry: {
+            'converse-headless': {
+                import: path.resolve(__dirname, '../src/headless/index.js'),
+                filename: '../src/headless/dist/[name].js',
             },
-            {
-                directory: path.resolve(__dirname, '../dist'),
-                publicPath: '/dist/'
+        },
+        devtool: 'inline-source-map',
+        optimization: {
+            minimize: false,
+        },
+        plugins,
+        module: {
+            rules: [
+                {
+                    test: /\.js$/,
+                    include: [
+                        /src/,
+                        /node_modules\/mergebounce/,
+                        /node_modules\/lit-html/,
+                        /node_modules\/strophe/,
+                        /node_modules\/pluggable/,
+                        /node_modules\/@converse/,
+                    ],
+                    type: 'javascript/auto',
+                },
+            ],
+        },
+        output: {
+            path: path.resolve(__dirname, '../src/headless/dist'),
+            publicPath: '/src/headless/dist/',
+        },
+        devServer: {
+            devMiddleware: {
+                writeToDisk: true,
             },
-            {
-                directory: path.resolve(__dirname, '../src/headless/dist'),
-                publicPath: '/src/headless/dist/'
+        },
+    }),
+    // Main application build configuration
+    merge(common, {
+        mode: 'development',
+        entry: {
+            'converse': {
+                import: path.resolve(__dirname, '../src/entry.js'),
+                filename: '../dist/[name].js',
+            },
+        },
+        devtool: 'inline-source-map',
+        optimization: {
+            minimize: false,
+        },
+        resolve: {
+            alias: {
+                '@converse/headless': path.resolve(__dirname, '../src/headless/dist/converse-headless.js')
             }
-        ],
-        port: 8008,
-        allowedHosts: ['localhost'],
-        devMiddleware: {
-            writeToDisk: true,
-        },
-    },
-    watchOptions: {
-        ignored: [
-            path.posix.resolve(__dirname, '../node_modules'),
-            path.posix.resolve(__dirname, '../3rdparty'),
-            path.posix.resolve(__dirname, '../src/headless/dist') // Don't watch the output dir
-        ],
-    },
-});
+        },
+        devServer: {
+            static: [
+                {
+                    directory: path.resolve(__dirname, '..'), // Serve root directory for dev.html etc
+                    publicPath: '/',
+                    serveIndex: true,
+                    watch: {
+                        ignored: ['**/node_modules', '../dist', '**/.git'],
+                    },
+                },
+                {
+                    directory: path.resolve(__dirname, '../dist'),
+                    publicPath: '/dist/',
+                },
+                {
+                    directory: path.resolve(__dirname, '../src/headless/dist'),
+                    publicPath: '/src/headless/dist/',
+                },
+            ],
+            port: 8008,
+            allowedHosts: ['localhost'],
+            devMiddleware: {
+                writeToDisk: true,
+            },
+        },
+        watchOptions: {
+            ignored: [path.posix.resolve(__dirname, '../node_modules'), path.posix.resolve(__dirname, '../3rdparty')],
+        },
+    }),
+];