fix(frontend): bundle PDF.js wasm decoders (#4382)

Author: LuckVd

frontend/scripts/copy-pdfjs-wasm.d.mts

@@ -0,0 +1 @@
+export declare function copyPdfJsWasm(sourceDir: string, outputDir: string): void

frontend/scripts/copy-pdfjs-wasm.mjs

@@ -0,0 +1,13 @@
+import { cpSync, existsSync, mkdirSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+/** Copy the installed pdfjs-dist decoder resources into the frontend build. */
+export function copyPdfJsWasm(sourceDir, outputDir) {
+  const jbig2Wasm = resolve(sourceDir, 'jbig2.wasm')
+  if (!existsSync(jbig2Wasm)) {
+    throw new Error(`PDF.js wasm resources are missing the required decoder: ${jbig2Wasm}`)
+  }
+
+  mkdirSync(outputDir, { recursive: true })
+  cpSync(sourceDir, outputDir, { recursive: true })
+}

frontend/scripts/copy-pdfjs-wasm.test.mjs

@@ -0,0 +1,35 @@
+import assert from 'node:assert/strict'
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { tmpdir } from 'node:os'
+import test from 'node:test'
+import { copyPdfJsWasm } from './copy-pdfjs-wasm.mjs'
+
+const tempRoot = process.env.ISSUEHUNTER_TMP ?? tmpdir()
+
+test('copies all installed PDF.js wasm resources to the build asset directory', (t) => {
+  const root = mkdtempSync(join(tempRoot, 'pdfjs-wasm-copy-'))
+  t.after(() => rmSync(root, { recursive: true, force: true }))
+  const source = join(root, 'package-wasm')
+  const output = join(root, 'dist', 'pdfjs', 'wasm')
+  mkdirSync(source)
+  writeFileSync(join(source, 'jbig2.wasm'), 'jbig2 decoder')
+  writeFileSync(join(source, 'openjpeg.wasm'), 'openjpeg decoder')
+
+  copyPdfJsWasm(source, output)
+
+  assert.equal(readFileSync(join(output, 'jbig2.wasm'), 'utf8'), 'jbig2 decoder')
+  assert.equal(readFileSync(join(output, 'openjpeg.wasm'), 'utf8'), 'openjpeg decoder')
+})
+
+test('fails clearly when the installed PDF.js package has no JBIG2 decoder', (t) => {
+  const root = mkdtempSync(join(tempRoot, 'pdfjs-wasm-missing-'))
+  t.after(() => rmSync(root, { recursive: true, force: true }))
+  const source = join(root, 'package-wasm')
+  const output = join(root, 'dist', 'pdfjs', 'wasm')
+  mkdirSync(source)
+  writeFileSync(join(source, 'openjpeg.wasm'), 'openjpeg decoder')
+
+  assert.throws(() => copyPdfJsWasm(source, output), /required decoder: .*jbig2\.wasm/)
+  assert.equal(existsSync(output), false, 'do not leave a seemingly complete output directory')
+})

frontend/src/components/source-preview/PdfSourceViewer.vue

@@ -89,7 +89,10 @@ async function openDocument(data: ArrayBuffer) {
   pdfjs = lib
   if (disposed) return
   // pdf.js takes ownership of the buffer; keep the caller's copy intact.
-  const task = lib.getDocument({ data: new Uint8Array(data.slice(0)) })
+  const task = lib.getDocument({
+    data: new Uint8Array(data.slice(0)),
+    wasmUrl: `${import.meta.env.BASE_URL}pdfjs/wasm/`,
+  })
   loadingTask = task
   const doc = await task.promise
   if (disposed) {
@@ -161,7 +164,12 @@ async function paintPage(
   entry.task = task
   try {
     await task.promise
-  } catch {
+  } catch (err) {
+    if (rendered.get(pageNumber) === entry) {
+      console.error('PDF page render failed:', err)
+      error.value = t('preview.loadFailed')
+      emit('error', error.value)
+    }
     return // cancelled by a newer render or unrender
   }
   if (rendered.get(pageNumber) !== entry) return

frontend/src/components/source-preview/pdfjsWasmAssets.test.mjs

@@ -0,0 +1,23 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import test from 'node:test'
+
+const viewer = readFileSync(new URL('./PdfSourceViewer.vue', import.meta.url), 'utf8')
+const viteConfig = readFileSync(new URL('../../../vite.config.ts', import.meta.url), 'utf8')
+const renderCode = viewer.match(/async function paintPage\([\s\S]*?\n}\n\nfunction touchRendered/)?.[0] ?? ''
+
+test('PDF preview resolves the decoder from the configured frontend base path', () => {
+  assert.match(viewer, /wasmUrl\s*:\s*`\$\{import\.meta\.env\.BASE_URL\}pdfjs\/wasm\//)
+})
+
+test('production builds copy the installed pdfjs-dist wasm assets', () => {
+  assert.match(viteConfig, /copyPdfJsWasm/)
+  assert.match(viteConfig, /pdfJsWasmAssets/)
+  assert.match(viteConfig, /require\.resolve\('pdfjs-dist\/legacy\/build\/pdf\.mjs'\)/)
+  assert.match(viteConfig, /wasmOutput = resolve\(config\.root, config\.build\.outDir, 'pdfjs', 'wasm'\)/)
+})
+
+test('page-render failures are reported instead of leaving only a blank canvas', () => {
+  assert.match(renderCode, /catch \(err\)[\s\S]*error\.value = t\('preview\.loadFailed'\)/)
+  assert.match(renderCode, /emit\('error', error\.value\)/)
+})

frontend/vite.config.ts

@@ -2,6 +2,7 @@ import { fileURLToPath, URL } from 'node:url'
 import { resolve, dirname } from 'node:path'
 import { existsSync } from 'node:fs'
 import { execSync } from 'node:child_process'
+import { copyPdfJsWasm } from './scripts/copy-pdfjs-wasm.mjs'
 import { createRequire } from 'node:module'
 import { defineConfig, type Plugin } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -67,6 +68,23 @@ function resolveVueOfficePptxEntry(): string {
   }
 }
 
+function pdfJsWasmAssets(): Plugin {
+  let wasmSource = ''
+  let wasmOutput = ''
+  return {
+    name: 'pdfjs-wasm-assets',
+    apply: 'build',
+    configResolved(config) {
+      const pdfjsBuild = require.resolve('pdfjs-dist/legacy/build/pdf.mjs')
+      wasmSource = resolve(dirname(pdfjsBuild), '../../wasm')
+      wasmOutput = resolve(config.root, config.build.outDir, 'pdfjs', 'wasm')
+    },
+    closeBundle() {
+      copyPdfJsWasm(wasmSource, wasmOutput)
+    },
+  }
+}
+
 export default defineConfig({
   define: {
     __FRONTEND_VERSION__: JSON.stringify(FRONTEND_VERSION),
@@ -120,6 +138,7 @@ export default defineConfig({
     vue(),
     vueJsx(),
     embedHtmlDevFallback(),
+    pdfJsWasmAssets(),
   ],
   resolve: {
     alias: {