Upgrade Vite to v5

package.json

@@ -61,8 +61,8 @@
     "@testing-library/react": "~12.1.5",
     "@testing-library/react-hooks": "~7.0.2",
     "@testing-library/user-event": "~14.4.3",
-    "@vitejs/plugin-legacy": "~4.1.1",
-    "@vitejs/plugin-react-swc": "^3.4.0",
+    "@vitejs/plugin-legacy": "~5.0.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "cross-env": "~7.0.3",
     "esbuild": "~0.19.4",
     "eslint": "~8.51.0",
@@ -97,10 +97,9 @@
     "unexpected-react": "~6.0.2",
     "unexpected-sinon": "~11.1.0",
     "url": "~0.11.3",
-    "vite": "~4.4.11",
+    "vite": "~5.0.0",
     "vite-plugin-compression": "~0.5.1",
-    "vite-plugin-generate-file": "~0.0.4",
-    "vite-plugin-inject-preload": "~1.3.3",
+    "vite-plugin-generate-file": "~0.1.1",
     "vitest": "~0.34.6"
   },
   "resolutions": {
@@ -110,8 +109,8 @@
   },
   "scripts": {
     "start": "vite",
-    "build-prod": "vite build && vite -c vite.bookmarklet.config.js build",
-    "build-modern": "cross-env MODERN=1 vite build && vite -c vite.bookmarklet.config.js build",
+    "build-prod": "vite build && vite -c vite.bookmarklet.config.mjs build",
+    "build-modern": "cross-env MODERN=1 vite build && vite -c vite.bookmarklet.config.mjs build",
     "preview": "vite preview",
     "test": "cross-env TZ=utc vitest run",
     "lint": "eslint --ext .js --ext .jsx .",

src/vite/inject-preload.js

@@ -0,0 +1,33 @@
+export function injectPreload({ files = [] } = {}) {
+  let basePath;
+  return {
+    name: 'inject-preload',
+    apply: 'build',
+    configResolved(config) {
+      basePath = config.base;
+    },
+    /** @type import("vite").IndexHtmlTransformHook */
+    async transformIndexHtml(html, context) {
+      if (!context.bundle) {
+        return html;
+      }
+
+      const tags = [];
+
+      for (const key of Object.keys(context.bundle)) {
+        const conf = files.find((f) => f.match.test(key));
+        if (!conf) {
+          continue;
+        }
+
+        tags.push({
+          tag: 'link',
+          attrs: { rel: 'preload', ...conf.attributes, href: basePath + key },
+          injectTo: 'head-prepend',
+        });
+      }
+
+      return tags;
+    },
+  };
+}

vite.config.js → vite.config.mjs

@@ -3,9 +3,9 @@ import legacy from '@vitejs/plugin-legacy';
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
 import generateFile from 'vite-plugin-generate-file';
-import injectPreload from 'vite-plugin-inject-preload';
 import pkg from './package.json';
 import { injectInlineResources } from './src/vite/inject-inline-resources';
+import { injectPreload } from './src/vite/inject-preload';
 
 // Move the listed node modules into separate named chunks. Format: module name
 // - chunk name.
@@ -31,9 +31,15 @@ export default defineConfig(({ mode }) => ({
     react(),
     injectPreload({
       files: [
-        { match: /\/app-\w+\.js$/, attributes: { rel: 'modulepreload' } },
-        { match: /\/vendor-.+?\.js$/, attributes: { rel: 'modulepreload' } },
-        { match: /\/app-\w+\.css$/ },
+        {
+          match: /\/app-\w+\.js$/,
+          attributes: { rel: 'modulepreload', type: 'application/javascript', as: 'script' },
+        },
+        {
+          match: /\/vendor-.+?\.js$/,
+          attributes: { rel: 'modulepreload', type: 'application/javascript', as: 'script' },
+        },
+        { match: /\/app-\w+\.css$/, attributes: { type: 'text/css', as: 'style' } },
       ],
     }),
     injectInlineResources(),