PER-10855: bump pdfjs-dist to 4.2.67

packages/cli-pdf/package.json

@@ -28,7 +28,9 @@
     "test:coverage": "yarn test --coverage"
   },
   "dependencies": {
-    "@percy/logger": "1.32.12-beta.2",
-    "pdfjs-dist": "^2.16.105"
+    "@percy/logger": "1.32.12-beta.2"
+  },
+  "optionalDependencies": {
+    "pdfjs-dist": "^4.2.67"
   }
 }

packages/cli-pdf/src/assets.js

@@ -3,15 +3,37 @@ import { createRequire } from 'module';
 
 const cjsRequire = createRequire(import.meta.url);
 
+// pdfjs-dist v4 declares Node >=18 while the CLI supports Node >=14, so it is an
+// optionalDependency and the resolve is deferred to call time — importing this
+// module never throws on older Node versions (or when the optional install was
+// skipped for any other reason). Mirrors how cli-command loads the snyk parser.
+/* istanbul ignore next: pdfjs-backed path — the renderer requires Node >=18
+   while CI runs the suite on Node 14, so exactly one of these branches is
+   unreachable on any given run; both are exercised by the describePdfjs tests
+   on Node >=18 and by the skipped-install spec on Node 14 */
 export function pdfjsAssets() {
-  let root = path.dirname(cjsRequire.resolve('pdfjs-dist/package.json'));
+  let root;
+
+  try {
+    root = path.dirname(cjsRequire.resolve('pdfjs-dist/package.json'));
+  } catch (e) {
+    let err = new Error(`pdfjs-dist is not available (requires Node >=18, or the optional install was skipped): ${e.message}`);
+    err.code = 'PDFJS_UNAVAILABLE';
+    throw err;
+  }
+
+  let buildDir = path.join(root, 'legacy/build');
 
   return {
     root,
-    buildDir: path.join(root, 'legacy/build'),
+    buildDir,
     standardFontsDir: path.join(root, 'standard_fonts'),
     cmapsDir: path.join(root, 'cmaps'),
-    libPath: path.join(root, 'legacy/build/pdf.js'),
-    workerFile: 'pdf.worker.js'
+    // v4 ships ESM only -- there is no UMD bundle left to read off disk and
+    // eval, so the library and its worker are loaded as modules over the asset
+    // server instead (see loadLibrary in browser-scripts.js).
+    libFile: 'pdf.mjs',
+    libPath: path.join(buildDir, 'pdf.mjs'),
+    workerFile: 'pdf.worker.mjs'
   };
 }

packages/cli-pdf/src/browser-scripts.js

@@ -24,14 +24,48 @@ export function assertRasterDimensions(pageNumber, width, height) {
   }
 }
 
-export async function openDocument(_, { origin }) {
-  let lib = window['pdfjs-dist/build/pdf'] || window.pdfjsLib;
+// pdfjs-dist v4 is ESM only -- there is no UMD bundle left to read off disk and
+// eval into the page, so the library is imported as a module from the asset
+// server and parked on `window.pdfjsLib` for the scripts that follow. The
+// element's error event is the only signal for an import that never resolves.
+export async function loadLibrary(_, { origin, libFile }) {
+  if (window.pdfjsLib) return true;
+
+  let loaded = new Promise((resolve, reject) => {
+    window.__percyPdfLoad = { resolve, reject };
+  });
+
+  let script = document.createElement('script');
+  script.type = 'module';
+  script.textContent = [
+    `import * as lib from '${origin}/pdfjs/${libFile}';`,
+    'window.pdfjsLib = lib;',
+    'window.__percyPdfLoad.resolve();'
+  ].join('\n');
+
+  script.onerror = () => window.__percyPdfLoad.reject(
+    new Error('pdf.js failed to load in the page')
+  );
+
+  document.head.appendChild(script);
+
+  try {
+    await loaded;
+  } finally {
+    delete window.__percyPdfLoad;
+  }
+
+  return true;
+}
+
+export async function openDocument(_, { origin, workerFile }) {
+  let lib = window.pdfjsLib;
 
   if (!lib) {
     throw new Error('pdf.js did not initialise in the page');
   }
 
-  lib.GlobalWorkerOptions.workerSrc = `${origin}/pdfjs/pdf.worker.js`;
+  lib.GlobalWorkerOptions.workerSrc = `${origin}/pdfjs/${workerFile}`;
 
   let doc = await lib.getDocument({
     url: `${origin}/doc.pdf`,

packages/cli-pdf/src/index.js

@@ -1,6 +1,7 @@
 export { pdfjsAssets } from './assets.js';
 export { resolvePages, MAX_PAGES } from './pages.js';
 export {
+  loadLibrary,
   openDocument,
   measurePages,
   renderPage,

packages/cli-pdf/test/assets.test.js

@@ -1,17 +1,47 @@
 import fs from 'fs';
 import path from 'path';
+import { createRequire } from 'module';
 import { pdfjsAssets } from '../src/assets.js';
 
-describe('@percy/cli-pdf assets', () => {
-  let assets = pdfjsAssets();
+const cjsRequire = createRequire(import.meta.url);
+
+// pdfjs-dist is an optionalDependency needing Node >=18; on Node 14 the install
+// is skipped, so there are no assets to point at and only the throw is testable.
+function pdfjsInstalled() {
+  try {
+    cjsRequire.resolve('pdfjs-dist/package.json');
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+const installed = pdfjsInstalled();
+const describePdfjs = installed ? describe : xdescribe;
+const describeWithout = installed ? xdescribe : describe;
+
+describeWithout('@percy/cli-pdf assets without pdfjs-dist', () => {
+  it('throws a tagged error naming the Node requirement', () => {
+    expect(() => pdfjsAssets()).toThrowError(/pdfjs-dist is not available \(requires Node >=18/);
+
+    try {
+      pdfjsAssets();
+    } catch (error) {
+      expect(error.code).toBe('PDFJS_UNAVAILABLE');
+    }
+  });
+});
+
+describePdfjs('@percy/cli-pdf assets', () => {
+  let assets = installed ? pdfjsAssets() : {};
 
   it('resolves the installed pdfjs-dist root', () => {
     expect(fs.existsSync(path.join(assets.root, 'package.json'))).toBe(true);
   });
 
   it('points at the legacy build directory', () => {
     expect(fs.existsSync(assets.buildDir)).toBe(true);
-    expect(fs.existsSync(path.join(assets.buildDir, 'pdf.js'))).toBe(true);
+    expect(fs.existsSync(path.join(assets.buildDir, assets.libFile))).toBe(true);
     expect(fs.existsSync(path.join(assets.buildDir, assets.workerFile))).toBe(true);
   });
 
@@ -22,7 +52,9 @@ describe('@percy/cli-pdf assets', () => {
     expect(fs.readdirSync(assets.cmapsDir).length).toBeGreaterThan(0);
   });
 
-  it('exposes the injectable pdf.js library file', () => {
+  it('exposes the importable pdf.js module', () => {
+    expect(assets.libFile).toBe('pdf.mjs');
+    expect(assets.workerFile).toBe('pdf.worker.mjs');
     expect(fs.existsSync(assets.libPath)).toBe(true);
     expect(fs.readFileSync(assets.libPath, 'utf-8')).toContain('getDocument');
   });

packages/cli-pdf/test/browser-scripts.test.js

@@ -1,7 +1,7 @@
 import {
   fitScale, assertRasterDimensions,
   MIN_DIMENSION, MAX_DIMENSION, DEFAULT_SCALE, MAX_SCALE,
-  openDocument, measurePages, renderPage, destroyDocument
+  loadLibrary, openDocument, measurePages, renderPage, destroyDocument
 } from '../src/browser-scripts.js';
 
 describe('@percy/cli-pdf browser scripts', () => {
@@ -41,7 +41,7 @@ describe('@percy/cli-pdf browser scripts', () => {
   // real logic in Node -- the fetch URLs pdf.js is handed, the white pre-fill,
   // and the page-handle cleanup -- rather than leaving it to an integration run.
   describe('page-context scripts', () => {
-    let doc, pages, renderCalls, createdCanvases;
+    let doc, pages, renderCalls, createdCanvases, appendedScripts;
 
     function fakePage(pageNumber, { width = 612, height = 792, renderError } = {}) {
       let page = {
@@ -61,6 +61,7 @@ describe('@percy/cli-pdf browser scripts', () => {
       pages = new Map();
       renderCalls = [];
       createdCanvases = [];
+      appendedScripts = [];
 
       doc = {
         numPages,
@@ -73,9 +74,12 @@ describe('@percy/cli-pdf browser scripts', () => {
         destroy: async () => { doc.destroyed = true; }
       };
 
-      global.window = lib === null ? {} : { 'pdfjs-dist/build/pdf': lib || stubLib() };
+      global.window = lib === null ? {} : { pdfjsLib: lib || stubLib() };
       global.document = {
+        head: { appendChild: (node) => appendedScripts.push(node) },
         createElement: (tag) => {
+          if (tag === 'script') return { tag };
+
           let canvas = {
             tag,
             width: 0,
@@ -110,16 +114,75 @@ describe('@percy/cli-pdf browser scripts', () => {
       delete global.document;
     });
 
+    // Stands in for the browser executing the inline module the script element
+    // carries -- there is no module loader behind the `document` stub.
+    function runAppendedScript(script, { fail } = {}) {
+      if (fail) return script.onerror();
+      global.window.pdfjsLib = stubLib();
+      global.window.__percyPdfLoad.resolve();
+    }
+
+    describe('loadLibrary', () => {
+      it('imports the served pdf.js module onto the window', async () => {
+        stubPageGlobals({ lib: null });
+
+        let loading = loadLibrary(null, {
+          origin: 'http://localhost:9999',
+          libFile: 'pdf.mjs'
+        });
+
+        expect(appendedScripts.length).toBe(1);
+        let [script] = appendedScripts;
+        expect(script.type).toBe('module');
+        expect(script.textContent)
+          .toContain("import * as lib from 'http://localhost:9999/pdfjs/pdf.mjs'");
+
+        runAppendedScript(script);
+
+        await expectAsync(loading).toBeResolvedTo(true);
+        expect(global.window.pdfjsLib).toBeDefined();
+        expect(global.window.__percyPdfLoad).toBeUndefined();
+      });
+
+      it('rejects when the module never loads', async () => {
+        stubPageGlobals({ lib: null });
+
+        let loading = loadLibrary(null, {
+          origin: 'http://localhost:1',
+          libFile: 'pdf.mjs'
+        });
+
+        runAppendedScript(appendedScripts[0], { fail: true });
+
+        await expectAsync(loading)
+          .toBeRejectedWithError('pdf.js failed to load in the page');
+        expect(global.window.__percyPdfLoad).toBeUndefined();
+      });
+
+      it('does not re-import an already loaded library', async () => {
+        stubPageGlobals();
+
+        await expectAsync(loadLibrary(null, {
+          origin: 'http://localhost:2',
+          libFile: 'pdf.mjs'
+        })).toBeResolvedTo(true);
+
+        expect(appendedScripts.length).toBe(0);
+      });
+    });
+
     describe('openDocument', () => {
       it('points pdf.js at the served worker, document, fonts and cmaps', async () => {
         stubPageGlobals({ numPages: 4 });
-        let lib = global.window['pdfjs-dist/build/pdf'];
+        let lib = global.window.pdfjsLib;
 
-        await expectAsync(openDocument(null, { origin: 'http://localhost:9999' }))
-          .toBeResolvedTo({ pageCount: 4 });
+        await expectAsync(openDocument(null, {
+          origin: 'http://localhost:9999',
+          workerFile: 'pdf.worker.mjs'
+        })).toBeResolvedTo({ pageCount: 4 });
 
         expect(lib.GlobalWorkerOptions.workerSrc)
-          .toBe('http://localhost:9999/pdfjs/pdf.worker.js');
+          .toBe('http://localhost:9999/pdfjs/pdf.worker.mjs');
 
         let [options] = lib.getDocumentCalls;
         expect(options.url).toBe('http://localhost:9999/doc.pdf');
@@ -137,16 +200,6 @@ describe('@percy/cli-pdf browser scripts', () => {
         expect(global.window.__percyPdf.doc).toBe(doc);
       });
 
-      it('falls back to the window.pdfjsLib global', async () => {
-        stubPageGlobals({ lib: null });
-        let lib = stubLib();
-        global.window.pdfjsLib = lib;
-
-        await expectAsync(openDocument(null, { origin: 'http://localhost:2' }))
-          .toBeResolvedTo({ pageCount: 3 });
-        expect(lib.getDocumentCalls.length).toBe(1);
-      });
-
       it('throws when pdf.js did not initialise', async () => {
         stubPageGlobals({ lib: null });
 

packages/core/src/pdf-rasterize.js

@@ -1,7 +1,12 @@
-import fs from 'fs';
 import logger from '@percy/logger';
 import { Server } from './server.js';
 
+// The pdfjs-backed functions in this file -- everything but withTimeout, which
+// test/unit/pdf-rasterize.test.js covers on any Node -- need the pdfjs-dist
+// optionalDependency. The resolved build requires Node >=20 while the coverage
+// gate runs on Node 14 and therefore installs without it, so they are exempt
+// from the gate and exercised by the describePdfjs specs on Node >=20.
+/* istanbul ignore next */
 async function createAssetServer(pdfBuffer, assets) {
   // Loopback only. This origin serves the customer's PDF with no auth, and the
   // sole client is the discovery browser running on this machine -- unlike the
@@ -29,6 +34,7 @@ async function createAssetServer(pdfBuffer, assets) {
 // Percy's minimum. handlePdfSnapshot answers 400 for these and 500 for
 // everything else, so a browser launch failure or a CDP disconnect is no longer
 // reported to the SDK as if the caller sent a bad request.
+/* istanbul ignore next: pdfjs-backed — see the note above createAssetServer */
 function asInputError(error) {
   return Object.assign(error, { status: 400 });
 }
@@ -53,12 +59,13 @@ export function withTimeout(promise, ms, description) {
   return Promise.race([promise, timeout]).finally(() => clearTimeout(timer));
 }
 
+/* istanbul ignore next: pdfjs-backed — see the note above createAssetServer */
 export async function rasterizePdf(percy, pdfBuffer, options) {
   let log = logger('core:pdf-rasterize');
 
   let {
     pdfjsAssets, resolvePages, fitScale, assertRasterDimensions,
-    openDocument, measurePages, renderPage, destroyDocument,
+    loadLibrary, openDocument, measurePages, renderPage, destroyDocument,
     DEFAULT_SCALE, MAX_SCALE, PAGE_RENDER_TIMEOUT
   } = await import('@percy/cli-pdf');
 
@@ -80,15 +87,12 @@ export async function rasterizePdf(percy, pdfBuffer, options) {
     page = await percy.browser.page({ meta: { snapshot: { name: 'pdf' } } });
     await page.goto(`${origin}/`);
 
-    let pdfjsSource = await fs.promises.readFile(assets.libPath, 'utf-8');
-
     await withTimeout(
-      /* eslint-disable-next-line no-new-func */
-      page.eval(new Function(pdfjsSource)),
+      page.eval(loadLibrary, { origin, libFile: assets.libFile }),
       PAGE_RENDER_TIMEOUT, 'injecting pdf.js');
 
     let { pageCount } = await withTimeout(
-      page.eval(openDocument, { origin }),
+      page.eval(openDocument, { origin, workerFile: assets.workerFile }),
       PAGE_RENDER_TIMEOUT, 'opening the PDF');
 
     let selected;