build: Move to a webpack module

Cockpit recently changed to an ESM build system [1]. Bump
COCKPIT_REPO_COMMIT to that and follow suit.

This does not work with old node.js 10 any more which is still the
default in RHEL 8. Install the newer version 16 instead.

[1] https://github.com/cockpit-project/cockpit/pull/18366

Makefile

@@ -34,7 +34,7 @@ COCKPIT_REPO_FILES = \
 	$(NULL)
 
 COCKPIT_REPO_URL = https://github.com/cockpit-project/cockpit.git
-COCKPIT_REPO_COMMIT = 173bb62c36044f23092fbe1d30f6b21177a74980 # 285 + 173bb62c36044f23092fbe1d30f6b21177a74980
+COCKPIT_REPO_COMMIT = 54f2fd58a3645c4a222e2b1b9b5f1b9321bed998 # 285 + Move to a webpack module
 
 $(COCKPIT_REPO_FILES): $(COCKPIT_REPO_STAMP)
 COCKPIT_REPO_TREE = '$(strip $(COCKPIT_REPO_COMMIT))^{tree}'
@@ -59,10 +59,10 @@ po/$(PACKAGE_NAME).js.pot:
 		--from-code=UTF-8 $$(find src/ -name '*.js' -o -name '*.jsx')
 
 po/$(PACKAGE_NAME).html.pot: $(NODE_MODULES_TEST) $(COCKPIT_REPO_STAMP)
-	pkg/lib/html2po -o $@ $$(find src -name '*.html')
+	pkg/lib/html2po.js -o $@ $$(find src -name '*.html')
 
 po/$(PACKAGE_NAME).manifest.pot: $(NODE_MODULES_TEST) $(COCKPIT_REPO_STAMP)
-	pkg/lib/manifest2po src/manifest.json -o $@
+	pkg/lib/manifest2po.js src/manifest.json -o $@
 
 po/$(PACKAGE_NAME).metainfo.pot: $(APPSTREAMFILE)
 	xgettext --default-domain=$(PACKAGE_NAME) --output=$@ $<

package.json

@@ -1,6 +1,7 @@
 {
   "name": "starter-kit",
   "description": "Scaffolding for a cockpit module",
+  "type": "module",
   "main": "index.js",
   "repository": "git@github.com:cockpit/starter-kit.git",
   "author": "",

test/browser/browser.sh

@@ -19,6 +19,11 @@ dnf update -y pam || true
 # we don't need the H.264 codec, and it is sometimes not available (rhbz#2005760)
 dnf install --disablerepo=fedora-cisco-openh264 -y --setopt=install_weak_deps=False firefox
 
+# nodejs 10 is too old for current Cockpit test API
+if grep -q platform:el8 /etc/os-release; then
+    dnf module switch-to -y nodejs:16
+fi
+
 # create user account for logging in
 if ! id admin 2>/dev/null; then
     useradd -c Administrator -G wheel admin

webpack.config.js

@@ -1,15 +1,15 @@
-const fs = require("fs");
-const path = require("path");
+import fs from "fs";
 
-const copy = require("copy-webpack-plugin");
-const extract = require("mini-css-extract-plugin");
-const TerserJSPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const CompressionPlugin = require("compression-webpack-plugin");
-const ESLintPlugin = require('eslint-webpack-plugin');
-const CockpitPoPlugin = require("./pkg/lib/cockpit-po-plugin");
-const CockpitRsyncPlugin = require("./pkg/lib/cockpit-rsync-plugin");
-const StylelintPlugin = require('stylelint-webpack-plugin');
+import copy from "copy-webpack-plugin";
+import extract from "mini-css-extract-plugin";
+import TerserJSPlugin from 'terser-webpack-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import CompressionPlugin from "compression-webpack-plugin";
+import ESLintPlugin from 'eslint-webpack-plugin';
+import StylelintPlugin from 'stylelint-webpack-plugin';
+
+import CockpitPoPlugin from "./pkg/lib/cockpit-po-plugin.js";
+import CockpitRsyncPlugin from "./pkg/lib/cockpit-rsync-plugin.js";
 
 /* A standard nodejs and webpack pattern */
 const production = process.env.NODE_ENV === 'production';
@@ -31,9 +31,9 @@ const copy_files = [
 
 const plugins = [
     new copy({ patterns: copy_files }),
-    new extract({filename: "[name].css"}),
+    new extract({ filename: "[name].css" }),
     new CockpitPoPlugin(),
-    new CockpitRsyncPlugin({dest: packageJson.name}),
+    new CockpitRsyncPlugin({ dest: packageJson.name }),
 ];
 
 if (eslint) {
@@ -42,7 +42,7 @@ if (eslint) {
 
 if (stylelint) {
     plugins.push(new StylelintPlugin({
-      context: "src/",
+        context: "src/",
     }));
 }
 
@@ -54,14 +54,14 @@ if (production) {
     }));
 }
 
-module.exports = {
+const config = {
     mode: production ? 'production' : 'development',
     resolve: {
-        modules: [ "node_modules", path.resolve(__dirname, 'pkg/lib') ],
+        modules: ["node_modules", 'pkg/lib'],
         alias: { 'font-awesome': 'font-awesome-sass/assets/stylesheets' },
     },
     resolveLoader: {
-        modules: [ "node_modules", path.resolve(__dirname, 'pkg/lib') ],
+        modules: ["node_modules", 'pkg/lib'],
     },
     watchOptions: {
         ignored: /node_modules/,
@@ -70,7 +70,7 @@ module.exports = {
         index: "./src/index.js",
     },
     // cockpit.js gets included via <script>, everything else should be bundled
-    externals: { "cockpit": "cockpit" },
+    externals: { cockpit: "cockpit" },
     devtool: "source-map",
     stats: "errors-warnings",
     // always regenerate dist/, so make rules work
@@ -162,5 +162,7 @@ module.exports = {
             },
         ]
     },
-    plugins: plugins
-}
+    plugins
+};
+
+export default config;