Update build system (#980)

* Update build system

* Remove babel

* Update rollup

* Address reviewer comment

package.json

@@ -13,15 +13,14 @@
     "start": "web-dev-server --app-index index.html --host 0.0.0.0 --node-resolve --open --watch --port 8001"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.8",
-    "@babel/eslint-parser": "^7.26.8",
-    "@babel/plugin-syntax-import-assertions": "^7.26.0",
-    "@open-wc/building-rollup": "^3.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^5.0.7",
+    "@rollup/plugin-terser": "^1.0.0",
     "@vitest/coverage-v8": "^4.0.18",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-rollup": "^0.6.4",
-    "deepmerge": "^4.3.1",
+    "@web/rollup-plugin-html": "^3.1.0",
+    "@web/rollup-plugin-polyfills-loader": "^2.1.3",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^7.2.0",
     "eslint-config-standard": "^17.1.0",
@@ -37,9 +36,10 @@
     "lint-staged": "^10.5.4",
     "prettier": "^2.8.8",
     "rimraf": "^3.0.2",
-    "rollup": "^3.29.5",
+    "rollup": "^4.59.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-version-injector": "^1.3.3",
+    "rollup-plugin-workbox": "^8.1.3",
     "vitest": "^4.0.18"
   },
   "browser": {
@@ -53,11 +53,12 @@
       "plugin:lit-a11y/recommended",
       "prettier"
     ],
-    "plugins": ["no-only-tests"],
+    "plugins": [
+      "no-only-tests"
+    ],
     "rules": {
       "no-only-tests/no-only-tests": "error"
     },
-    "parser": "@babel/eslint-parser",
     "env": {
       "browser": true
     },
@@ -103,11 +104,6 @@
       "prettier --write"
     ]
   },
-  "babel": {
-    "plugins": [
-      "@babel/plugin-syntax-import-assertions"
-    ]
-  },
   "name": "gramps-js",
   "version": "26.2.0",
   "description": "The frontend for the Gramps Web genealogical research system.",

rollup.config.js

@@ -1,33 +1,61 @@
-import {createSpaConfig} from '@open-wc/building-rollup'
+import {rollupPluginHTML as html} from '@web/rollup-plugin-html'
+import {polyfillsLoader} from '@web/rollup-plugin-polyfills-loader'
+import {generateSW} from 'rollup-plugin-workbox'
+import resolve from '@rollup/plugin-node-resolve'
+import terser from '@rollup/plugin-terser'
 import replace from '@rollup/plugin-replace'
-import merge from 'deepmerge'
 import copy from 'rollup-plugin-copy'
 import versionInjector from 'rollup-plugin-version-injector'
+import path from 'path'
 
 const API_URL = process.env.API_URL === undefined ? '' : process.env.API_URL
 
 const BASE_DIR = process.env.BASE_DIR === undefined ? '' : process.env.BASE_DIR
 
-const baseConfig = createSpaConfig({
-  developmentMode: process.env.ROLLUP_WATCH === 'true',
-  injectServiceWorker: true,
-  workbox: {
-    globIgnores: ['index.html'],
-    navigateFallbackDenylist: [/^\/api.*/],
-    skipWaiting: false,
-    clientsClaim: false,
-  },
-  html: {
-    transform: [
-      html => html.replace('<base href="/">', `<base href="${BASE_DIR}/">`),
+const developmentMode = process.env.ROLLUP_WATCH === 'true'
+
+const outputDir = 'dist'
+
+const swRegistrationScript = `<script>if('serviceWorker'in navigator){window.addEventListener('load',function(){navigator.serviceWorker.register('./sw.js').then(function(){console.log('ServiceWorker registered.')}).catch(function(err){console.log('ServiceWorker registration failed: ',err)})})}</script>`
+
+export default {
+  input: './index.html',
+  preserveEntrySignatures: false,
+  treeshake: !developmentMode,
+  external: ['./config.js'],
+  output: {
+    dir: outputDir,
+    format: 'es',
+    entryFileNames: developmentMode ? '[name].js' : '[hash].js',
+    chunkFileNames: developmentMode ? '[name].js' : '[hash].js',
+    assetFileNames: developmentMode ? '[name][extname]' : '[hash][extname]',
+    plugins: [
+      generateSW({
+        globIgnores: ['polyfills/*.js', 'legacy-*.js', 'nomodule-*.js'],
+        navigateFallback: `${BASE_DIR}/index.html`,
+        navigateFallbackDenylist: [/^\/api.*/],
+        swDest: path.join(outputDir, 'sw.js'),
+        globDirectory: outputDir,
+        globPatterns: ['**/*.{html,js,css,webmanifest}'],
+        skipWaiting: false,
+        clientsClaim: false,
+        runtimeCaching: [{urlPattern: 'polyfills/*.js', handler: 'CacheFirst'}],
+      }),
     ],
   },
-})
-
-export default merge(baseConfig, {
-  input: './index.html',
-  external: './config.js',
   plugins: [
+    html({
+      minify: !developmentMode,
+      extractAssets: false,
+      transformHtml: [
+        htmlStr =>
+          htmlStr.replace('<base href="/">', `<base href="${BASE_DIR}/">`),
+        htmlStr => htmlStr.replace('</body>', `${swRegistrationScript}</body>`),
+      ],
+    }),
+    resolve(),
+    !developmentMode && terser({format: {comments: false}}),
+    polyfillsLoader({polyfills: {}, minify: !developmentMode}),
     copy({
       targets: [
         {src: './maplibre-gl.css', dest: 'dist/'},
@@ -47,5 +75,5 @@ export default merge(baseConfig, {
       'process.env.NODE_ENV': JSON.stringify('production'),
     }),
     versionInjector(),
-  ],
-})
+  ].filter(Boolean),
+}