fix: build process to support Svelte and service worker

lib/static/index.html

@@ -48,7 +48,7 @@
       v.<%= htmlWebpackPlugin.options.version %> ◆
       <a href="https://ondrejsynacek.com" target="_blank">Ondrej Synacek</a> (2019) ◆
       <a href="https://github.com/comatory/fb2iCal" target="_blank" title="Github">Source</a> ◆
-      <a href="/about" target="_blank" title="About the project">About</about>
+      <a href="/about" target="_blank" title="About the project">About</a>
     </footer>
 
     <script>

lib/static/service-worker.js

@@ -1,31 +0,0 @@
-// Worker v14
-
-self.addEventListener('install', (event) => {
-  event.waitUntil(
-    caches.open('fb-to-ical').then((cache) => {
-      return cache.addAll([
-        '/',
-        '/favicon.ico',
-        '/scripts.js?6',
-        '/style.css?9',
-        '/about?3',
-        '/icon-512.png',
-      ])
-    })
-  )
-})
-
-self.addEventListener('fetch', (event) => {
-  event.respondWith(
-    caches.match(event.request)
-      .then((response) => {
-        return response || fetch(event.request)
-      })
-  )
-})
-
-self.addEventListener('message', (event) => {
-  if (event.data.action === 'skipWaiting') {
-    self.skipWaiting()
-  }
-})

package.json

@@ -39,9 +39,12 @@
     "express-rate-limit": "^5.0.0",
     "express-winston": "^4.0.1",
     "ics": "^2.22.1",
+    "path-browserify": "^1.0.1",
     "request": "^2.88.0",
     "serve-favicon": "^2.5.0",
+    "stream-browserify": "^3.0.0",
     "svelte": "^3.31.0",
+    "util": "^0.12.3",
     "winston": "^3.2.1",
     "winston-daily-rotate-file": "^4.2.1",
     "yargs": "^15.4.1"
@@ -50,17 +53,19 @@
     "chai": "^4.2.0",
     "chai-sinon": "^2.8.1",
     "concurrently": "^5.2.0",
-    "copy-webpack-plugin": "^6.0.3",
+    "copy-webpack-plugin": "^7.0.0",
     "css-loader": "^5.0.1",
-    "html-webpack-plugin": "^4.3.0",
+    "html-webpack-plugin": "^4.5.0",
     "jest": "^26.1.0",
     "mini-css-extract-plugin": "^1.3.3",
     "nodemon": "^1.19.3",
     "sinon": "^9.0.2",
     "svelte-loader": "^2.13.6",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-merge": "^5.7.0",
-    "workbox-webpack-plugin": "^5.1.3"
+    "webpack": "^5.11.0",
+    "webpack-cli": "^4.2.0",
+    "webpack-merge": "^5.7.2",
+    "workbox-core": "^6.0.2",
+    "workbox-precaching": "^6.0.2",
+    "workbox-webpack-plugin": "^6.0.2"
   }
 }

webpack.common.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack')
 const path = require('path')
 const fs = require('fs')
 const pkg = require('./package.json')
@@ -18,7 +19,7 @@ if (isFirebaseEnv && hasFirebaseConfig) {
 module.exports = {
   entry: path.join(__dirname, 'lib', 'frontend', 'index.js'),
   output: {
-    filename: '[name].[hash].js',
+    filename: '[name].[fullhash].js',
     path: destination,
   },
   resolve: {
@@ -27,6 +28,11 @@ module.exports = {
     },
     extensions: [ '.mjs', '.js', '.svelte' ],
     mainFields: [ 'svelte', 'browser', 'module', 'main' ],
+    fallback: {
+      util: require.resolve('util/'),
+      stream: require.resolve('stream-browserify'),
+      path: require.resolve('path-browserify'),
+    },
   },
   module: {
     rules: [
@@ -36,7 +42,7 @@ module.exports = {
         use: {
           loader: 'svelte-loader',
           options: {
-            emitCss: true,
+            emitCss: false,
           },
         },
       },
@@ -47,21 +53,32 @@ module.exports = {
     ],
   },
   plugins: [
-    new CopyWebpackPlugin({
-      patterns: [
-        { from: path.join(__dirname, 'lib', 'static', '{*.ico,*.json,*.png,*.css}'), to: destination, flatten: true },
-      ],
-    }),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, 'lib', 'static', 'index.html'),
       version: pkg.version,
-      inject: 'body',
     }),
-    new MiniCssExtractPlugin(),
+    new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      'process.env.NODE_DEBUG': JSON.stringify(process.env.NODE_DEBUG),
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: path.join(__dirname, 'lib', 'static', 'favicon.ico'), to: destination },
+        { from: path.join(__dirname, 'lib', 'static', 'manifest.json'), to: destination },
+        { from: path.join(__dirname, 'lib', 'static', 'style.css'), to: destination },
+        { from: path.join(__dirname, 'lib', 'static', 'icon-180.png'), to: destination },
+        { from: path.join(__dirname, 'lib', 'static', 'icon-192.png'), to: destination },
+        { from: path.join(__dirname, 'lib', 'static', 'icon-512.png'), to: destination },
+      ],
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].[fullhash].css',
+    }),
     new GenerateSW({
       swDest: 'sw.js',
       clientsClaim: true,
       skipWaiting: true,
-    }),
+    })
   ],
 }