Merge pull request #1945 from OpenConext/feature/1940-fix-last-js-issue

Upgrade js & remove abandoned packages

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

@@ -18,37 +18,31 @@
     "lint:css": "stylelint ${EB_THEME:=openconext}/stylesheets/**/*.*ss",
     "clean": "rimraf ../public/images/* ../public/javascripts/* ../public/stylesheets/* ../public/fonts/*",
     "build": "node scripts/build.js",
-    "buildtheme": "yarn build:clean && yarn build:js && yarn build:css && yarn build:copy:base && yarn build:copy:theme",
+    "buildtheme": "yarn build:clean && yarn build:js && yarn build:css && bash scripts/copy-assets.sh",
     "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"
   },
   "author": "",
   "devDependencies": {
     "@babel/core": "^7.22",
-    "@babel/polyfill": "^7.12",
     "@babel/preset-env": "^7.22",
     "@eslint/js": "^10.0.1",
     "autoprefixer": "^10.4",
-    "babelify": "^10.0",
-    "browserify": "^17.0",
-    "copyfiles": "^2.4",
+    "babel-loader": "^9.0",
     "core-js": "^3.32",
     "cssnano": "^7.1.1",
     "eslint": "^10.0.3",
     "globals": "^17.4.0",
+    "postcss": "^8.4.32",
     "postcss-cli": "^11.0.1",
     "postcss-sass": "^0.5",
     "postcss-scss": "^4.0",
@@ -57,8 +51,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,18 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+THEME=${EB_THEME:-openconext}
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT="$SCRIPT_DIR/.."
+
+mkdir -p "$ROOT/../public/images" "$ROOT/../public/fonts"
+
+# Copy base assets
+cp "$ROOT/base/images/"* "$ROOT/../public/images/"
+find "$ROOT/base/stylesheets/fonts/" -maxdepth 1 -type f ! -name '*.txt' -exec cp {} "$ROOT/../public/fonts/" \;
+
+# Copy theme assets
+cp "$ROOT/$THEME/images/"* "$ROOT/../public/images/"
+if [ -d "$ROOT/$THEME/stylesheets/fonts" ]; then
+    find "$ROOT/$THEME/stylesheets/fonts/" -maxdepth 1 -type f ! -name '*.txt' -exec cp {} "$ROOT/../public/fonts/" \;
+fi

theme/scripts/copy-assets.sh

@@ -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',
+  };
+};