Upgrade PDF.js (#15157)

GitOrigin-RevId: a0a241da08c06a7e345a710559cb47fb59685e5a

package-lock.json

@@ -29813,6 +29813,7 @@
       "resolved": "https://registry.npmjs.org/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz",
       "integrity": "sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==",
       "dev": true,
+      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -29854,30 +29855,18 @@
         }
       }
     },
-    "node_modules/pdfjs-dist36": {
+    "node_modules/pdfjs-dist401": {
       "name": "pdfjs-dist",
-      "version": "3.6.172",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.6.172.tgz",
-      "integrity": "sha512-bfOhCg+S9DXh/ImWhWYTOiq3aVMFSCvzGiBzsIJtdMC71kVWDBw7UXr32xh0y56qc5wMVylIeqV3hBaRsu+e+w==",
+      "version": "4.0.189",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.0.189.tgz",
+      "integrity": "sha512-5IWbLRJjQJhk3cu3nNFAvIYoSzT8xRYlRkFCIV1tn7hK1eq9H+6vOP0ytJhZz9YI35IXlu33uQspvmYO6Oir4g==",
       "dev": true,
-      "dependencies": {
-        "path2d-polyfill": "^2.0.1",
-        "web-streams-polyfill": "^3.2.1"
-      },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       },
       "optionalDependencies": {
-        "canvas": "^2.11.2"
-      }
-    },
-    "node_modules/pdfjs-dist36/node_modules/web-streams-polyfill": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
-      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
+        "canvas": "^2.11.2",
+        "path2d-polyfill": "^2.0.1"
       }
     },
     "node_modules/peek-stream": {
@@ -39750,7 +39739,7 @@
         "node-fetch": "^2.6.7",
         "nvd3": "^1.8.6",
         "pdfjs-dist213": "npm:pdfjs-dist@2.13.216",
-        "pdfjs-dist36": "npm:pdfjs-dist@3.6.172",
+        "pdfjs-dist401": "npm:pdfjs-dist@4.0.189",
         "pirates": "^4.0.1",
         "postcss": "^8.4.31",
         "postcss-loader": "^7.3.3",
@@ -47966,7 +47955,7 @@
         "passport-saml": "^3.2.4",
         "passport-twitter": "^1.0.4",
         "pdfjs-dist213": "npm:pdfjs-dist@2.13.216",
-        "pdfjs-dist36": "npm:pdfjs-dist@3.6.172",
+        "pdfjs-dist401": "npm:pdfjs-dist@4.0.189",
         "pirates": "^4.0.1",
         "postcss": "^8.4.31",
         "postcss-loader": "^7.3.3",
@@ -65721,7 +65710,8 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz",
       "integrity": "sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "pathe": {
       "version": "1.1.1",
@@ -65748,23 +65738,14 @@
         "web-streams-polyfill": "^3.2.0"
       }
     },
-    "pdfjs-dist36": {
-      "version": "npm:pdfjs-dist@3.6.172",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.6.172.tgz",
-      "integrity": "sha512-bfOhCg+S9DXh/ImWhWYTOiq3aVMFSCvzGiBzsIJtdMC71kVWDBw7UXr32xh0y56qc5wMVylIeqV3hBaRsu+e+w==",
+    "pdfjs-dist401": {
+      "version": "npm:pdfjs-dist@4.0.189",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.0.189.tgz",
+      "integrity": "sha512-5IWbLRJjQJhk3cu3nNFAvIYoSzT8xRYlRkFCIV1tn7hK1eq9H+6vOP0ytJhZz9YI35IXlu33uQspvmYO6Oir4g==",
       "dev": true,
       "requires": {
         "canvas": "^2.11.2",
-        "path2d-polyfill": "^2.0.1",
-        "web-streams-polyfill": "^3.2.1"
-      },
-      "dependencies": {
-        "web-streams-polyfill": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
-          "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
-          "dev": true
-        }
+        "path2d-polyfill": "^2.0.1"
       }
     },
     "peek-stream": {

services/web/app/src/Features/Project/ProjectController.js

@@ -565,7 +565,7 @@ const ProjectController = {
           SplitTestHandler.getAssignment(
             req,
             res,
-            'pdfjs-36',
+            'pdfjs-40',
             {},
             (error, assignment) => {
               // do not fail editor load if assignment fails

services/web/cypress/support/webpack.cypress.ts

@@ -35,10 +35,8 @@ const buildConfig = () => {
   )
 
   // add entrypoints under '/' for pdfjs workers
-  const pdfjsVersions = ['pdfjs-dist213', 'pdfjs-dist36']
-  for (const name of pdfjsVersions) {
-    addWorker(name, `${name}/legacy/build/pdf.worker`)
-  }
+  addWorker('pdfjs-dist213', 'pdfjs-dist213/legacy/build/pdf.worker.js')
+  addWorker('pdfjs-dist401', 'pdfjs-dist401/legacy/build/pdf.worker.mjs')
 
   return webpackConfig
 }

services/web/frontend/js/features/pdf-preview/util/pdf-js-versions.js

@@ -3,23 +3,25 @@
 
 import 'core-js/stable/global-this' // polyfill for globalThis (used by pdf.js)
 import 'core-js/stable/promise/all-settled' // polyfill for Promise.allSettled (used by pdf.js)
-import getMeta from '../../../utils/meta'
-import { createWorker } from '../../../utils/worker'
+import getMeta from '@/utils/meta'
+import { createWorker } from '@/utils/worker'
 
-async function importPDFJS36() {
-  const cMapUrl = '/js/pdfjs-dist36/cmaps/'
-  const standardFontDataUrl = '/fonts/pdfjs-dist36/'
-  const imageResourcesPath = '/images/pdfjs-dist36/'
+async function importPDFJS401() {
+  const cMapUrl = '/js/pdfjs-dist401/cmaps/'
+  const standardFontDataUrl = '/fonts/pdfjs-dist401/'
+  const imageResourcesPath = '/images/pdfjs-dist401/'
 
-  const [PDFJS, PDFJSViewer] = await Promise.all([
-    import('pdfjs-dist36/legacy/build/pdf'),
-    import('pdfjs-dist36/legacy/web/pdf_viewer'),
-    import('pdfjs-dist36/legacy/web/pdf_viewer.css'),
+  // ensure that PDF.js is loaded before importing the viewer
+  const PDFJS = await import('pdfjs-dist401/legacy/build/pdf')
+
+  const [PDFJSViewer] = await Promise.all([
+    import('pdfjs-dist401/legacy/web/pdf_viewer'),
+    import('pdfjs-dist401/legacy/web/pdf_viewer.css'),
   ])
 
   createWorker(() => {
     PDFJS.GlobalWorkerOptions.workerPort = new Worker(
-      new URL('pdfjs-dist36/legacy/build/pdf.worker.js', import.meta.url)
+      new URL('pdfjs-dist401/legacy/build/pdf.worker.mjs', import.meta.url) // NOTE: .mjs extension
     )
   })
 
@@ -37,8 +39,10 @@ async function importPDFJS213() {
   const standardFontDataUrl = '/fonts/pdfjs-dist213/'
   const imageResourcesPath = '/images/pdfjs-dist213/'
 
-  const [PDFJS, PDFJSViewer] = await Promise.all([
-    import('pdfjs-dist213/legacy/build/pdf'),
+  // ensure that PDF.js is loaded before importing the viewer
+  const PDFJS = await import('pdfjs-dist213/legacy/build/pdf')
+
+  const [PDFJSViewer] = await Promise.all([
     import('pdfjs-dist213/legacy/web/pdf_viewer'),
     import('pdfjs-dist213/legacy/web/pdf_viewer.css'),
   ])
@@ -67,8 +71,8 @@ async function importPDFJS() {
     case 'default':
       return importPDFJS213()
 
-    case '36172':
-      return importPDFJS36()
+    case '401':
+      return importPDFJS401()
   }
 }
 

services/web/frontend/stories/pdf-preview.stories.jsx

@@ -21,6 +21,7 @@ import {
 } from './fixtures/compile'
 import { cloneDeep } from 'lodash'
 import { ScopeDecorator } from './decorators/scope'
+import { PdfPreviewProvider } from '@/features/pdf-preview/components/pdf-preview-provider'
 
 export default {
   title: 'Editor / PDF Preview',
@@ -332,7 +333,9 @@ export const Logs = () => {
 
   return (
     <div className="pdf">
-      <PdfLogsViewer />
+      <PdfPreviewProvider>
+        <PdfLogsViewer />
+      </PdfPreviewProvider>
     </div>
   )
 }

services/web/frontend/stories/pdf-viewer.stories.jsx

@@ -9,6 +9,7 @@ import {
 } from './fixtures/compile'
 import { useEffect, Suspense } from 'react'
 import { ScopeDecorator } from './decorators/scope'
+import { PdfPreviewProvider } from '@/features/pdf-preview/components/pdf-preview-provider'
 
 export default {
   title: 'Editor / PDF Viewer',
@@ -36,7 +37,9 @@ export const Interactive = () => {
     <div>
       <div className="pdf-viewer">
         <Suspense fallback={null}>
-          <PdfViewer />
+          <PdfPreviewProvider>
+            <PdfViewer />
+          </PdfPreviewProvider>
         </Suspense>
       </div>
       <div style={{ position: 'absolute', top: 150, left: 50 }}>

services/web/package.json

@@ -302,7 +302,7 @@
     "node-fetch": "^2.6.7",
     "nvd3": "^1.8.6",
     "pdfjs-dist213": "npm:pdfjs-dist@2.13.216",
-    "pdfjs-dist36": "npm:pdfjs-dist@3.6.172",
+    "pdfjs-dist401": "npm:pdfjs-dist@4.0.189",
     "pirates": "^4.0.1",
     "postcss": "^8.4.31",
     "postcss-loader": "^7.3.3",

services/web/webpack.config.js

@@ -65,7 +65,7 @@ const mathjaxDir = getModuleDirectory('mathjax')
 const mathjax3Dir = getModuleDirectory('mathjax-3')
 const aceDir = getModuleDirectory('ace-builds')
 
-const pdfjsVersions = ['pdfjs-dist213', 'pdfjs-dist36']
+const pdfjsVersions = ['pdfjs-dist213', 'pdfjs-dist401']
 
 const vendorDir = path.join(__dirname, 'frontend/js/vendor')
 
@@ -247,7 +247,7 @@ module.exports = {
       '@': path.resolve(__dirname, './frontend/js/'),
     },
     // symlinks: false, // enable this while using `npm link`
-    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs', '.cjs', '.json'],
     fallback: {
       events: require.resolve('events'),
     },