Fix production build and align tooling versions

.eslintignore

@@ -1,3 +1,6 @@
 build/*
 dist/*
 lambda/*
+**/*.ts
+cdk/node_modules/*
+cdk/cdk.out/*

.nvmrc

@@ -0,0 +1 @@
+24

CONTRIBUTING.md

@@ -2,12 +2,16 @@
 
 ## Initial Setup
 
+Use the Node version from `.nvmrc` (`nvm use`). Yarn 1 is pinned via `packageManager` in `package.json`, so corepack picks it up automatically.
+
 To install the dependencies, run:
 
 ```sh
 yarn install
 ```
 
+Build failures for the optional native modules `printer` and `snappy` can be ignored. `printer` is only needed for `yarn start:printer` and requires `libcups2-dev`.
+
 Copy the file `.env.example` to `.env`:
 
 ```sh

cdk/.nvmrc

@@ -0,0 +1 @@
+24

cdk/DEPLOYMENT.md

@@ -57,7 +57,7 @@ Die URL im Browser bleibt dabei unverändert. Die Liste der Dateien ist eine All
 
 Bewusst **kein** `errorResponses` an der Distribution: Das hätte für alle Behaviors gegolten und auch Fehler von `/api/*` und `/data/*` in „200 + `index.html`" verwandelt. Fehlende Assets und API-Fehler kommen so als echte Fehler beim Frontend an.
 
-Kommt eine weitere eigenständige Seite dazu, muss sie an drei Stellen eingetragen werden: `customHtmlPlugin` in `webpack.config.js`, die Function in `functions/entrypoint-rewrite.js` und die `navigateFallbackDenylist` des Service Workers.
+Kommt eine weitere eigenständige Seite dazu, muss sie an drei Stellen eingetragen werden: `customHtmlPlugin` in `webpack.config.js`, die Function in `functions/entrypoint-rewrite.js` und die `denylist` der `NavigationRoute` in `src/service-worker.js`.
 
 ### TLS-Zertifikate
 

cdk/functions/entrypoint-rewrite.js

@@ -23,7 +23,7 @@ function handler(event) {
 
   // Eigenständige Seiten mit eigener index.html (webpack.config.js,
   // customHtmlPlugin mit `filename`). Neue Seiten hier, in webpack.config.js
-  // und in der navigateFallbackDenylist des Service Workers ergänzen.
+  // und in der denylist der NavigationRoute in src/service-worker.js ergänzen.
   var pages = {
     '/teilen': '/teilen/index.html',
     '/teilen/': '/teilen/index.html',

package.json

@@ -41,16 +41,14 @@
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.4.4",
     "@storybook/react": "^6.0.0",
     "@svgr/webpack": "^8.1.0",
-    "@types/node": "^11.11.3",
+    "@types/node": "^24.10.1",
     "arraybuffer-loader": "^1.0.3",
     "autoprefixer": "^9.5.0",
     "aws-sdk": "^2.423.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.5",
-    "babel-plugin-import-noop": "^1.0.1",
     "bowser": "^1.9.3",
     "chromedriver": "^2.39.0",
     "classnames": "^2.2.5",
@@ -139,15 +137,22 @@
     "style-loader": "^0.23.1",
     "svg-to-image": "^1.1.3",
     "svgo-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.10",
     "text-encoding": "^0.7.0",
-    "ts-node": "^8.0.2",
-    "typescript": "^3.2.4",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.9.3",
     "wav-encoder": "^1.3.0",
     "web-audio-test-api": "^0.5.2",
     "webpack": "^5.67.0",
     "webpack-cli": "^5.0.0",
     "webpack-dev-server": "^4.0.10",
     "webpack-visualizer-plugin": "^0.1.11",
+    "workbox-cacheable-response": "^5.1.4",
+    "workbox-core": "^5.1.4",
+    "workbox-precaching": "^5.1.4",
+    "workbox-range-requests": "^5.1.4",
+    "workbox-routing": "^5.1.4",
+    "workbox-strategies": "^5.1.4",
     "workbox-webpack-plugin": "^5.1.3",
     "xhr": "^2.5.0",
     "yarn": "^1.9.4"
@@ -212,5 +217,6 @@
     "last 3 versions",
     "Safari >= 8",
     "iOS >= 8"
-  ]
+  ],
+  "packageManager": "yarn@1.22.22"
 }

src/components/sharing-toolbox/sharing-toolbox.jsx

@@ -12,7 +12,7 @@ import VM from 'scratch-vm'
 import QRCode from 'qrcode.react'
 import html2canvas from 'html2canvas'
 import JsPDF from 'jspdf'
-import ffmpegWorkerPath from 'file-loader!ffmpeg.js/ffmpeg-worker-mp4' // eslint-disable-line import/no-unresolved
+import ffmpegWorkerPath from 'ffmpeg.js/ffmpeg-worker-mp4'
 
 import InlineSvg from '../inline-svg/inline-svg.jsx'
 import Modal from '../modal/modal.jsx'

src/service-worker.js

@@ -0,0 +1,78 @@
+/* eslint-env serviceworker */
+import {
+  cacheNames,
+  clientsClaim,
+  registerQuotaErrorCallback,
+  skipWaiting,
+} from 'workbox-core'
+import {
+  cleanupOutdatedCaches,
+  createHandlerBoundToURL,
+  getCacheKeyForURL,
+  precacheAndRoute,
+} from 'workbox-precaching'
+import { NavigationRoute, registerRoute } from 'workbox-routing'
+import { CacheFirst, NetworkFirst } from 'workbox-strategies'
+import { CacheableResponsePlugin } from 'workbox-cacheable-response'
+import { RangeRequestsPlugin } from 'workbox-range-requests'
+
+skipWaiting()
+clientsClaim()
+
+// Safari requests videos with Range headers, which the precache route cannot
+// answer. Registered before it; ignoreSearch matches the revisioned cache keys.
+registerRoute(
+  /\.mp4$/,
+  new CacheFirst({
+    cacheName: cacheNames.precache,
+    matchOptions: { ignoreSearch: true },
+    plugins: [new RangeRequestsPlugin()],
+  })
+)
+
+precacheAndRoute(self.__WB_MANIFEST)
+cleanupOutdatedCaches()
+
+// Serve the precached settings page for /settings too. The precache route
+// only appends index.html to URLs ending in a slash.
+registerRoute(
+  new NavigationRoute(createHandlerBoundToURL('/settings/index.html'), {
+    allowlist: [/^\/settings\/?$/],
+  })
+)
+
+// /teilen und /settings sind eigene Seiten, nicht Teil der Haupt-SPA
+// Neu hinzukommende Seiten müssen hier, in webpack.config.js und in
+// cdk/functions/entrypoint-rewrite.js gepflegt werden!
+registerRoute(
+  new NavigationRoute(createHandlerBoundToURL('/index.html'), {
+    denylist: [/^\/data\//, /^\/teilen/, /^\/settings/],
+  })
+)
+
+// Media that is not precached, e.g. assets uploaded by users. The router's
+// fetch listener runs before the precache listener, so skip precached URLs.
+registerRoute(
+  ({ url }) =>
+    (url.pathname.startsWith('/data/assets/') ||
+      url.pathname.startsWith('/static/assets')) &&
+    !getCacheKeyForURL(url.href),
+  new CacheFirst({
+    cacheName: 'assets',
+    plugins: [new CacheableResponsePlugin({ statuses: [0, 200] })],
+  })
+)
+
+registerRoute(
+  /data\/projects\/[^/]+\/index\.json$/,
+  new NetworkFirst({ cacheName: 'projects' })
+)
+
+// Report quota errors
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'GET_QUOTA_ERRORS') {
+    registerQuotaErrorCallback(() => {
+      event.ports[0].postMessage({ type: 'QUOTA_ERROR' })
+    })
+  }
+})

tsconfig.json

@@ -1,17 +1,11 @@
 {
     "compilerOptions": {
         "module": "commonjs",
-        "target": "es2016",
-        "experimentalDecorators": true,
-        "lib": [
-            "esnext",
-        ],
+        "target": "es2022",
+        "lib": ["esnext"],
+        "types": ["node"],
+        "skipLibCheck": true,
+        "experimentalDecorators": true
     },
-    "exclude": [
-        "node_modules",
-        "**/node_modules/*"
-    ],
-    "include": [
-        "scripts/"
-    ],
+    "include": ["scripts/**/*.ts"]
 }