add cache generation to pages action

Author: p2r3

.github/workflows/pages.yml

@@ -36,6 +36,9 @@ jobs:
       - name: Build
         run: bun run build
 
+      - name: Generate cache
+        run: bun run buildCache.js dist/cache.json
+
       - name: Upload Pages artifact
         if: github.event_name == 'push'
         uses: actions/upload-pages-artifact@v3

buildCache.js

@@ -0,0 +1,35 @@
+import puppeteer from "puppeteer";
+
+const server = Bun.serve({
+  async fetch (req) {
+    const path = new URL(req.url).pathname.replace("/convert/", "") || "index.html";
+    return new Response(Bun.file(`${__dirname}/dist/${path}`));
+  },
+  port: 8080
+});
+
+const browser = await puppeteer.launch({
+  headless: "new",
+  args: ["--no-sandbox", "--disable-setuid-sandbox"]
+});
+
+const page = await browser.newPage();
+
+await Promise.all([
+  new Promise(resolve => {
+    page.on("console", msg => {
+      const text = msg.text();
+      if (text === "Built initial format list.") resolve();
+    });
+  }),
+  page.goto("http://localhost:8080/convert/index.html")
+]);
+
+const cacheJSON = await page.evaluate(() => {
+  return window.printSupportedFormatCache();
+});
+const outputPath = process.argv[2] || "cache.json";
+await Bun.write(outputPath, cacheJSON);
+
+await browser.close();
+server.stop();

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "puppeteer": "^24.36.0",
     "typescript": "~5.9.3",
     "vite": "^7.2.4"
   },

src/global.d.ts

@@ -0,0 +1,10 @@
+import type { FileFormat } from "./FormatHandler.js";
+
+declare global {
+  interface Window {
+    supportedFormatCache: Map<string, FileFormat[]>;
+    printSupportedFormatCache: () => string;
+  }
+}
+
+export { };

src/handlers/FFmpeg.ts

@@ -67,7 +67,7 @@ class FFmpegHandler implements FormatHandler {
     } catch (e) {
       if (!e || (
         typeof e === "string"
-        && e.includes("index out of bounds")
+        && e.includes("out of bounds")
         && attempts > 1
       )) {
         await this.reloadFFmpeg();

src/main.ts

@@ -143,11 +143,11 @@ function hidePopup () {
 
 const allOptions: Array<{ format: FileFormat, handler: FormatHandler }> = [];
 
-let supportedFormatCache: Map<string, FileFormat[]> = new Map();
+window.supportedFormatCache = new Map();
 
-function printSupportedFormatCache () {
+window.printSupportedFormatCache = () => {
   const entries = [];
-  for (const entry of supportedFormatCache) {
+  for (const entry of window.supportedFormatCache) {
     entries.push(entry);
   }
   return JSON.stringify(entries, null, 2);
@@ -160,16 +160,15 @@ async function buildOptionList () {
   ui.outputList.innerHTML = "";
 
   for (const handler of handlers) {
-    if (!supportedFormatCache.has(handler.name)) {
+    if (!window.supportedFormatCache.has(handler.name)) {
       console.warn(`Cache miss for formats of handler "${handler.name}".`);
       await handler.init();
       if (handler.supportedFormats) {
-        supportedFormatCache.set(handler.name, handler.supportedFormats);
-        console.log("Updated supported format cache:");
-        console.log(printSupportedFormatCache());
+        window.supportedFormatCache.set(handler.name, handler.supportedFormats);
+        console.info(`Updated supported format cache for "${handler.name}".`);
       }
     }
-    const supportedFormats = supportedFormatCache.get(handler.name);
+    const supportedFormats = window.supportedFormatCache.get(handler.name);
     if (!supportedFormats) {
       console.warn(`Handler "${handler.name}" doesn't support any formats.`);
       continue;
@@ -242,9 +241,15 @@ async function buildOptionList () {
 (async () => {
   try {
     const cacheJSON = await fetch("cache.json").then(r => r.json());
-    supportedFormatCache = new Map(cacheJSON);
+    window.supportedFormatCache = new Map(cacheJSON);
+  } catch {
+    console.warn(
+      "Missing supported format precache.\n\n" +
+      "Consider saving the output of printSupportedFormatCache() to cache.json."
+    );
   } finally {
-    buildOptionList();
+    await buildOptionList();
+    console.log("Built initial format list.");
   }
 })();
 
@@ -271,7 +276,7 @@ async function attemptConvertPath (files: FileData[], path: ConvertPathNode[]) {
       if (!handler.ready) {
         await handler.init();
         if (handler.supportedFormats) {
-          supportedFormatCache.set(handler.name, handler.supportedFormats);
+          window.supportedFormatCache.set(handler.name, handler.supportedFormats);
         }
       }
       files = await handler.doConvert(files, path[i].format, path[i + 1].format);
@@ -302,7 +307,7 @@ async function buildConvertPath (
 
     // Get handlers that support *taking in* the previous node's format
     const validHandlers = handlers.filter(handler => (
-      supportedFormatCache.get(handler.name)?.some(format => (
+      window.supportedFormatCache.get(handler.name)?.some(format => (
         format.mime === previous.format.mime &&
         format.from
       ))
@@ -328,7 +333,7 @@ async function buildConvertPath (
 
     // Look for untested mime types among valid handlers and add to queue
     for (const handler of validHandlers) {
-      const supportedFormats = supportedFormatCache.get(handler.name);
+      const supportedFormats = window.supportedFormatCache.get(handler.name);
       if (!supportedFormats) continue;
       for (const format of supportedFormats) {
         if (!format.to) continue;

vite.config.js

@@ -11,6 +11,10 @@ export default defineConfig({
   plugins: [
     viteStaticCopy({
       targets: [
+        {
+          src: "favicon.ico",
+          dest: "assets"
+        },
         {
           src: "node_modules/@ffmpeg/core/dist/esm/ffmpeg-core.*",
           dest: "wasm"