refactor(theme): replace browserify/watchify/terser with webpack

The JS build toolchain has been migrated from browserify + babelify +
watchify + terser to webpack + babel-loader. This eliminates several
unmaintained or deprecated packages and resolves a Dependabot security
alert for a vulnerable transitive dependency (elliptic 6.6.1), which
was introduced via browserify and watchify.

Removed packages:
- browserify: largely unmaintained, last release Oct 2024, 346 open
  issues. Was the root cause of the elliptic vulnerability alert.
- babelify: the browserify transform for Babel, no longer needed.
- watchify: effectively unmaintained since Jan 2021. Also introduced
  elliptic via its own dependency chain.
- terser: standalone minifier, now replaced by webpack's built-in
  TerserPlugin with equivalent compression settings.

Added packages:
- webpack + webpack-cli Replaces watchify and minification.
- babel-loader: the webpack equivalent of babelify, connects webpack
  to the existing Babel configuration.

The webpack.config.js mirrors the previous build behaviour:
- Production mode outputs application.min.js with the same Terser
  compression settings as the old .terserrc.json

Browser compatibility is preserved. Previously, Babel targets were
set explicitly in .babelrc as ">0.25%". With webpack + babel-loader,
Babel automatically reads the existing .browserslistrc file, so babel
output should be similar to the old setup.

.babelrc has been simplified accordingly

Author: johanib

theme/.babelrc

@@ -1,27 +1,9 @@
 {
-  "env": {
-    "development": {
-      "presets": [
-        ["@babel/preset-env", {
-          "useBuiltIns": "usage",
-          "corejs": 3,
-          "debug": false,
-          "targets": {
-              "browsers": [ ">0.25%"]
-          }
-        }]
-      ]
-    },
-    "test": {
-      "presets":[
-        ["@babel/preset-env", {
-          "useBuiltIns": "usage",
-          "targets": {
-            "node": "current",
-            "browsers": [ ">0.25%"]
-          }
-        }]
-      ]
-    }
-  }
+  "presets": [
+    ["@babel/preset-env", {
+      "useBuiltIns": "usage",
+      "corejs": 3,
+      "debug": false
+    }]
+  ]
 }

theme/.terserrc.json

@@ -20,18 +20,16 @@
     "build": "node scripts/build.js",
     "buildtheme": "yarn build:clean && yarn build:js && yarn build:css && yarn build:copy:base && yarn build:copy:theme",
     "build:clean": "rimraf ../public/javascripts/* ../public/stylesheets/*",
-    "build:js": "mkdir -p ../public/javascripts && yarn build:js:bundle && yarn build:js:minify",
-    "build:js:bundle": "browserify ${EB_THEME:=openconext}/javascripts/application.js -t [ babelify ] -o ../public/javascripts/application.bundle.js",
-    "build:js:minify": "terser ../public/javascripts/application.bundle.js --config-file .terserrc.json -o ../public/javascripts/application.min.js",
-    "build:js:debug": "mkdir -p ../public/javascripts && browserify ${EB_THEME:=openconext}/javascripts/application.js -d -t [ babelify ] -o ../public/javascripts/application.min.js",
+    "build:js": "mkdir -p ../public/javascripts && EB_THEME=${EB_THEME:=openconext} webpack --config webpack.config.js --mode production",
+    "build:js:debug": "mkdir -p ../public/javascripts && EB_THEME=${EB_THEME:=openconext} webpack --config webpack.config.js --mode development",
     "build:css": "mkdir -p ../public/stylesheets && yarn build:css:sass && yarn build:css:postcss",
     "build:css:sass": "sass ${EB_THEME:=openconext}/stylesheets:../public/stylesheets/",
     "build:css:postcss": "BROWSERSLIST_CONFIG=.browserslistrc postcss ../public/stylesheets/*.css --use autoprefixer --use cssnano --no-map --dir ../public/stylesheets",
     "build:copy:base": "mkdir -p ../public/images && copyfiles --up 2 base/images/* ../public/images/ && mkdir -p ../public/fonts && copyfiles --up 2 -e base/stylesheets/fonts/*.txt -f base/stylesheets/fonts/* ../public/fonts",
     "build:copy:theme": "copyfiles --up 2 ${EB_THEME:=openconext}/images/* ../public/images/ && copyfiles --up 2 -e {EB_THEME:=openconext}/stylesheets/fonts/*.txt -f ${EB_THEME:=openconext}/stylesheets/fonts/* ../public/fonts",
     "create-theme": "node scripts/create-theme.js",
     "watch": "node scripts/watch.js",
-    "watch:js": "watchify ${EB_THEME:=base}/javascripts/application.js --poll=100 -d -t [ babelify ] -o ../public/javascripts/application.bundle.js -v && cp ../public/javascripts/application.bundle.js ../public/javascripts/application.min.js",
+    "watch:js": "mkdir -p ../public/javascripts && EB_THEME=${EB_THEME:=openconext} webpack --config webpack.config.js --mode development --watch",
     "watch:css": "sass -w ${EB_THEME:=openconext}/stylesheets:../public/stylesheets",
     "release": "yarn build"
   },
@@ -41,8 +39,7 @@
     "@babel/preset-env": "^7.22",
     "@eslint/js": "^10.0.1",
     "autoprefixer": "^10.4",
-    "babelify": "^10.0",
-    "browserify": "^17.0",
+    "babel-loader": "^9.0",
     "copyfiles": "^2.4",
     "core-js": "^3.32",
     "cssnano": "^7.1.1",
@@ -57,8 +54,9 @@
     "socket.io": "^4.8.1",
     "stylelint": "^17.4.0",
     "stylelint-config-recommended": "^18.0.0",
-    "terser": "^5.44.0",
-    "watchify": "^4.0.0"
+    "terser-webpack-plugin": "^5.4.0",
+    "webpack": "^5.0",
+    "webpack-cli": "^5.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^7.0.1",

theme/package.json

@@ -0,0 +1,45 @@
+const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
+
+const theme = process.env.EB_THEME || 'openconext';
+
+module.exports = (env, argv) => {
+  const isProd = argv.mode === 'production';
+
+  return {
+    entry: path.resolve(__dirname, `${theme}/javascripts/application.js`),
+    output: {
+      path: path.resolve(__dirname, '../public/javascripts'),
+      filename: 'application.min.js',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+          },
+        },
+      ],
+    },
+    optimization: isProd ? {
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            compress: {
+              passes: 2,
+              inline: 1,
+              dead_code: true,
+              unused: false,
+              reduce_funcs: false,
+              reduce_vars: false,
+            },
+            mangle: true,
+          },
+        }),
+      ],
+    } : {},
+    devtool: isProd ? false : 'source-map',
+  };
+};