fix: upgrade to pdfjs v4 (#577)

Upgrade to latest PDF.js release.

BREAKING CHANGE:
The worker file has been renamed from having extension `.js` to `.mjs`.

.github/workflows/ci.yaml

@@ -33,7 +33,9 @@ jobs:
       - name: Build Apps
         run: yarn run build:apps
       - name: Test
-        run: yarn run test
+        run: yarn run test:ci
+        env:
+          DEBUG_PRINT_LIMIT: 50000
       - name: Archive test artifacts
         uses: actions/upload-artifact@v2
         if: failure()

.yarnrc.yml

@@ -2,4 +2,4 @@ nmMode: hardlinks-global
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.2.2.cjs

examples/discovery-search-app/package.json

@@ -7,14 +7,16 @@
   "author": "IBM Corp.",
   "homepage": ".",
   "scripts": {
-    "setup": "mkdir -p ./public/assets/ && cp ../../node_modules/pdfjs-dist/build/pdf.worker.min.js ./public/assets/pdf.worker.min.js",
+    "setup": "mkdir -p ./public/assets/ && cp ../../node_modules/pdfjs-dist/build/pdf.worker.min.mjs ./public/assets/pdf.worker.min.mjs",
     "build:app": "yarn run build",
     "build": "yarn setup && cross-env SKIP_PREFLIGHT_CHECK=true CI=false SASS_PATH=${PWD}/src react-scripts build",
     "start": "yarn setup && cross-env SKIP_PREFLIGHT_CHECK=true SASS_PATH=${PWD}/src react-scripts start",
     "lint": "yarn run g:eslint --quiet '{src,cypress}/**/*.{js,jsx,ts,tsx}' './*.{js,jsx,ts,tsx}'",
     "test:e2e": "cross-env REACT_APP_CYPRESS_MODE=true BROWSER=none CYPRESS_baseUrl=http://localhost:3000 start-server-and-test start http://localhost:3000 'cypress run'",
-    "test:unit": "cross-env SKIP_PREFLIGHT_CHECK=true CI=1 react-scripts test --env=jsdom",
+    "test:unit": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test --env=jsdom",
+    "test:unit:ci": "yarn run test:unit --runInBand",
     "test": "yarn test:unit && yarn test:e2e",
+    "test:ci": "yarn test:unit:ci && yarn test:e2e",
     "cypress": "cross-env REACT_APP_CYPRESS_MODE=true cypress open --e2e --browser chrome",
     "server": "yarn server:setup && yarn server:run",
     "server:run": "node ./server.js",
@@ -42,12 +44,14 @@
   "devDependencies": {
     "@testing-library/cypress": "^7.0.7",
     "@types/proper-url-join": "^2.1.4",
+    "core-js": "^3.37.1",
     "cross-env": "^7.0.3",
     "cypress": "^13.6.3",
     "react-scripts": "^5.0.1",
     "start-server-and-test": "^2.0.3"
   },
   "jest": {
+    "displayName": "Search app (unit)",
     "moduleNameMapper": {
       "^axios$": "axios/dist/node/axios.cjs"
     }

examples/discovery-search-app/src/App.js

@@ -22,7 +22,7 @@ import {
   canRenderCIDocument
 } from '@ibm-watson/discovery-react-components';
 
-const PDF_WORKER_URL = './assets/pdf.worker.min.js';
+const PDF_WORKER_URL = './assets/pdf.worker.min.mjs';
 
 const App = () => {
   const searchClient = useMemo(() => {

examples/discovery-search-app/src/setupTests.js

@@ -0,0 +1,6 @@
+/**
+ * Set up `jest` when run from `react-scripts`
+ */
+
+// polyfill for `Promise.withResolvers()`
+import 'core-js/proposals/promise-with-resolvers';

package.json

@@ -11,6 +11,7 @@
     "build:pkgs": "yarn workspaces foreach -Av --parallel --include '@ibm-watson/*' run build",
     "build:apps": "yarn workspaces foreach -Av --parallel run build:app",
     "test": "yarn workspaces foreach -Av --parallel run test",
+    "test:ci": "yarn workspaces foreach -Av run test:ci",
     "g:analyze": "cd $INIT_CWD && source-map-explorer",
     "g:eslint": "cd $INIT_CWD && eslint"
   },
@@ -87,7 +88,7 @@
       "last 1 safari version"
     ]
   },
-  "packageManager": "yarn@4.0.2",
+  "packageManager": "yarn@4.2.2",
   "resolutions": {
     "react-scripts@^5.0.1": "patch:react-scripts@npm:5.0.1#.yarn/patches/react-scripts-npm-5.0.1-d06bd2d5ad.patch",
     "@types/react@npm:*": "^17"

packages/discovery-react-components/.storybook/main.ts

@@ -1,4 +1,5 @@
 import { StorybookConfig } from '@storybook/react-vite';
+import path from 'node:path';
 import { mergeConfig } from 'vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
@@ -23,7 +24,10 @@ const config: StorybookConfig = {
     disableTelemetry: true
   },
 
-  staticDirs: ['../../../node_modules/pdfjs-dist/build/'],
+  staticDirs: [
+    // should resolve to '.../pdfjs-dist/build/'
+    path.dirname(require.resolve('pdfjs-dist'))
+  ],
 
   framework: '@storybook/react-vite',
 

packages/discovery-react-components/README.md

@@ -301,7 +301,7 @@ const App = () => {
 
 If you want to use the Discovery Components (`DocumentPreview` or `PdfViewer`) to render PDF documents, you will need to set up the pdf.js worker script. This can be done in one of two ways:
 
-1. Set the `pdfWorkerUrl` prop to the URL of the pdf.js worker script (i.e. `pdf.worker.min.js`) to any of `DocumentPreview`, `PdfViewer`, `PdfViewerWithHighlight`, or `DocumentPreview.PreviewDocument`. (see examples/discovery-search-app/src/App.js for an example)
+1. Set the `pdfWorkerUrl` prop to the URL of the pdf.js worker script (i.e. `pdf.worker.min.mjs`) to any of `DocumentPreview`, `PdfViewer`, `PdfViewerWithHighlight`, or `DocumentPreview.PreviewDocument`. (see examples/discovery-search-app/src/App.js for an example)
 2. Use `setPdfJsGlobalWorkerOptions({ workerSrc: 'path/to/worker.js' })` to set up the pdf.js worker script (see `src/setupTests.ts` for an example).
 
 ## Available Commands

packages/discovery-react-components/package.json

@@ -18,12 +18,13 @@
   "scripts": {
     "prepack": "yarn run build",
     "prepublish": "yarn run build",
-    "test": "cross-env SKIP_PREFLIGHT_CHECK=true CI=1 react-scripts test",
-    "test:coverage": "cross-env CI=1 SKIP_PREFLIGHT_CHECK=true react-scripts test --coverage",
-    "test:watch": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test --watch",
-    "test:debug": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts --inspect-brk test --runInBand --no-cache",
+    "test": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test --env ./src/fixedJSDOMEnvironment.js",
+    "test:ci": "yarn run test --runInBand",
+    "test:coverage": "yarn run test --coverage",
+    "test:watch": "yarn run test --watch",
+    "test:debug": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts --inspect-brk test --env ./src/fixedJSDOMEnvironment.js --runInBand --no-cache",
     "circular": "madge --circular src/*",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "build:app": "yarn run storybook:build --quiet",
     "eslint": "yarn run g:eslint --quiet '{src,.storybook}/**/*.{js,jsx,ts,tsx}'",
     "lint": "yarn run circular && yarn run eslint",
@@ -46,7 +47,7 @@
     "htmlparser2": "^4.1.0",
     "lodash": "^4.17.21",
     "mustache": "^4.2.0",
-    "pdfjs-dist": "2.6.347",
+    "pdfjs-dist": "4.5.136",
     "react-error-boundary": "^1.2.5",
     "react-resize-detector": "^4.2.3",
     "react-virtualized": "9.21.2",
@@ -97,7 +98,7 @@
   },
   "jest": {
     "resetMocks": false,
-    "displayName": "Disco React Components (Unit)",
+    "displayName": "Disco React Components (unit)",
     "transformIgnorePatterns": [
       "/!node_modules\\/react-virtualized/"
     ],

packages/discovery-react-components/src/components/DiscoverySearch/types.ts

@@ -1,5 +1,5 @@
 import DiscoveryV2, { JsonObject, QueryResult } from 'ibm-watson/discovery/v2';
-import { DocumentInitParameters } from 'pdfjs-dist/types/display/api';
+import { DocumentInitParameters } from 'pdfjs-dist/types/src/display/api';
 
 export type SearchClient = Pick<
   DiscoveryV2,

packages/discovery-react-components/src/components/DocumentPreview/__stories__/DocumentPreview.stories.tsx

@@ -14,7 +14,7 @@ import omit from 'lodash/omit';
 import pickBy from 'lodash/pickBy';
 
 // pulled from pdfjs-dist (see main.js > staticDirs)
-const PDF_WORKER_URL = 'pdf.worker.min.js';
+const PDF_WORKER_URL = 'pdf.worker.min.mjs';
 
 interface WrapperProps {
   style?: any;

packages/discovery-react-components/src/components/DocumentPreview/__tests__/DocumentPreview.test.tsx

@@ -251,10 +251,11 @@ describe('DocumentPreview', () => {
           </DiscoverySearch>
         );
 
-        // 58 pages evidence PDF rendered
-        const elem = await screen.findByText('58 pages', {
-          exact: false
-        });
+        // evidence PDF rendered
+        let elem = await screen.findByText('ART EFFECTS LIMITED', {}, { timeout: 5000 });
+        expect(elem).toBeInTheDocument();
+        // check that 58 pages were found
+        elem = await screen.findByText('58 pages', { exact: false });
         expect(elem).toBeInTheDocument();
       },
       THIRTY_SECONDS

packages/discovery-react-components/src/components/DocumentPreview/components/PdfHighlight/utils/Highlighter.ts

@@ -1,7 +1,7 @@
 import Debug from 'debug';
 import flatMap from 'lodash/flatMap';
-import { TextContent } from 'pdfjs-dist/types/display/api';
-import { PageViewport } from 'pdfjs-dist/types/display/display_utils';
+import { TextContent } from 'pdfjs-dist/types/src/display/api';
+import { PageViewport } from 'pdfjs-dist/types/src/display/display_utils';
 import { nonEmpty } from 'utils/nonEmpty';
 import { DocumentFields, HighlightShape, HighlightShapeBox } from '../types';
 import { DocumentFieldHighlight, TextMappings } from 'components/DocumentPreview/types';
@@ -41,7 +41,7 @@ export class Highlighter {
     pdfTextContentInfo?: {
       textContent: TextContent;
       viewport: PageViewport;
-      spans?: HTMLElement[];
+      spans?: HTMLCollection;
     };
   }) {
     this.pageNum = pageNum;
@@ -78,7 +78,7 @@ export class Highlighter {
   setTextContentItems(
     textContent: TextContent,
     viewport: PageViewport,
-    textContentDivs?: HTMLElement[],
+    textContentDivs?: HTMLCollection,
     htmlBoxInfo?: HtmlBboxInfo
   ) {
     this.pdfTextContentLayout = new PdfTextContentTextLayout(
@@ -97,7 +97,7 @@ export class Highlighter {
    * Update text content HTML elements
    * @param textContentDivs HTML elements where text content items are rendered
    */
-  setTextContentDivs(textContentDivs?: HTMLElement[]) {
+  setTextContentDivs(textContentDivs?: HTMLCollection) {
     this.pdfTextContentLayout?.setDivs(textContentDivs);
   }
 

packages/discovery-react-components/src/components/DocumentPreview/components/PdfHighlight/utils/textLayout/PdfTextContentTextLayout.ts

@@ -1,6 +1,6 @@
 import { bboxesIntersect } from 'components/DocumentPreview/utils/box';
-import { TextItem } from 'pdfjs-dist/types/display/api';
-import { PageViewport, PageViewportParameters } from 'pdfjs-dist/types/display/display_utils';
+import { TextItem } from 'pdfjs-dist/types/src/display/api';
+import { PageViewport, PageViewportParameters } from 'pdfjs-dist/types/src/display/display_utils';
 import { Bbox, TextSpan } from '../../types';
 import { BaseTextLayoutCell } from './BaseTextLayout';
 import { getAdjustedCellByOffsetByDom } from './dom';
@@ -12,7 +12,7 @@ import { HtmlBboxInfo, PdfTextContentInfo, TextLayout } from './types';
 export class PdfTextContentTextLayout implements TextLayout<PdfTextContentTextLayoutCell> {
   private readonly textContentInfo: PdfTextContentInfo;
   readonly cells: PdfTextContentTextLayoutCell[];
-  private divs: HTMLElement[] | undefined;
+  private divs: HTMLCollection | undefined;
 
   constructor(textContentInfo: PdfTextContentInfo, pageNum: number, htmlBboxInfo?: HtmlBboxInfo) {
     this.textContentInfo = textContentInfo;
@@ -48,15 +48,15 @@ export class PdfTextContentTextLayout implements TextLayout<PdfTextContentTextLa
   /**
    * set PDF text content item divs
    */
-  setDivs(divs: HTMLElement[] | undefined) {
+  setDivs(divs: HTMLCollection | undefined) {
     this.divs = divs;
   }
 
   /**
    * get HTML element for a given cell id
    */
   divAt(id: number): HTMLElement | undefined {
-    return this.divs?.[id];
+    return this.divs?.[id] as HTMLElement;
   }
 }
 

packages/discovery-react-components/src/components/DocumentPreview/components/PdfHighlight/utils/textLayout/types.ts

@@ -1,6 +1,6 @@
 import { TextMappings } from 'components/DocumentPreview/types';
-import { TextContent } from 'pdfjs-dist/types/display/api';
-import { PageViewport } from 'pdfjs-dist/types/display/display_utils';
+import { TextContent } from 'pdfjs-dist/types/src/display/api';
+import { PageViewport } from 'pdfjs-dist/types/src/display/display_utils';
 import { ProcessedDoc } from 'utils/document';
 import { Bbox, DocumentFields, TextSpan } from '../../types';
 

packages/discovery-react-components/src/components/DocumentPreview/components/PdfViewer/PdfViewer.stories.tsx

@@ -4,8 +4,8 @@ import PdfViewer from './PdfViewer';
 import { document as doc } from 'components/DocumentPreview/__fixtures__/Art Effects.pdf';
 import './PdfViewer.stories.scss';
 
-// pulled from pdfjs-dist (see main.js > staticDirs)
-const PDF_WORKER_URL = 'pdf.worker.min.js';
+// pulled from pdfjs-dist (see .storybook/main.ts > staticDirs)
+const PDF_WORKER_URL = 'pdf.worker.min.mjs';
 
 const sourceKnob = {
   label: 'Source',

packages/discovery-react-components/src/components/DocumentPreview/components/PdfViewer/PdfViewer.tsx

@@ -10,8 +10,8 @@ import {
 } from 'react';
 import cx from 'classnames';
 import * as PdfjsLib from 'pdfjs-dist';
-import { PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist/types/display/api';
-import { PageViewport } from 'pdfjs-dist/types/display/display_utils';
+import { PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist/types/src/display/api';
+import { PageViewport } from 'pdfjs-dist/types/src/display/display_utils';
 import { settings } from 'carbon-components';
 import useSafeRef from 'utils/useSafeRef';
 import useSize from 'utils/useSize';
@@ -21,8 +21,8 @@ import { QueryResult } from 'ibm-watson/discovery/v2';
 import { DocumentFile } from '../../types';
 import { getTextMappings } from '../../utils/documentData';
 import PdfViewerTextLayer, { PdfRenderedText } from './PdfViewerTextLayer';
-import { toPDFSource } from './utils';
 import { PdfDisplayProps } from './types';
+import { toPDFSource } from './utils';
 type RenderTask = ReturnType<PDFPageProxy['render']>;
 
 export interface PdfViewerProps extends PdfDisplayProps, HTMLAttributes<HTMLElement> {
@@ -263,7 +263,7 @@ function setupPdfjs(pdfWorkerUrl: string): void {
   // Only load the worker the first time the worker url is sent in
   // and don't load the worker in unit tests (see setupTests.ts)
   if (!!pdfWorkerUrl && pdfWorkerUrl !== currentPdfWorkerUrl && typeof Worker !== 'undefined') {
-    const pdfjsWorker = new Worker(pdfWorkerUrl);
+    const pdfjsWorker = new Worker(pdfWorkerUrl, { type: 'module' });
     setPdfJsGlobalWorkerOptions({ workerPort: pdfjsWorker });
     currentPdfWorkerUrl = pdfWorkerUrl;
   }