From d2d2a0ff659e80319511ab107320fedc5e9a5e80 Mon Sep 17 00:00:00 2001 From: Alf Eaton Date: Tue, 14 Nov 2023 09:51:30 +0000 Subject: [PATCH] Upgrade PDF.js (#15157) GitOrigin-RevId: a0a241da08c06a7e345a710559cb47fb59685e5a --- package-lock.json | 53 ++++++------------- .../src/Features/Project/ProjectController.js | 2 +- .../web/cypress/support/webpack.cypress.ts | 6 +-- .../pdf-preview/util/pdf-js-versions.js | 34 ++++++------ .../frontend/stories/pdf-preview.stories.jsx | 5 +- .../frontend/stories/pdf-viewer.stories.jsx | 5 +- services/web/package.json | 2 +- services/web/webpack.config.js | 4 +- 8 files changed, 50 insertions(+), 61 deletions(-) diff --git a/package-lock.json b/package-lock.json index 561416e8ad..6a1f076994 100644 --- a/package-lock.json +++ b/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": { diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js index 50d5dccff8..4c39199407 100644 --- a/services/web/app/src/Features/Project/ProjectController.js +++ b/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 diff --git a/services/web/cypress/support/webpack.cypress.ts b/services/web/cypress/support/webpack.cypress.ts index cf2e86545d..b210d80e5c 100644 --- a/services/web/cypress/support/webpack.cypress.ts +++ b/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 } diff --git a/services/web/frontend/js/features/pdf-preview/util/pdf-js-versions.js b/services/web/frontend/js/features/pdf-preview/util/pdf-js-versions.js index c061fe2281..08e6129852 100644 --- a/services/web/frontend/js/features/pdf-preview/util/pdf-js-versions.js +++ b/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() } } diff --git a/services/web/frontend/stories/pdf-preview.stories.jsx b/services/web/frontend/stories/pdf-preview.stories.jsx index 37768196b6..296da8e317 100644 --- a/services/web/frontend/stories/pdf-preview.stories.jsx +++ b/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 (
- + + +
) } diff --git a/services/web/frontend/stories/pdf-viewer.stories.jsx b/services/web/frontend/stories/pdf-viewer.stories.jsx index 5f217e9c0a..b527d02612 100644 --- a/services/web/frontend/stories/pdf-viewer.stories.jsx +++ b/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 = () => {
- + + +
diff --git a/services/web/package.json b/services/web/package.json index e202ad3d27..189be05d2c 100644 --- a/services/web/package.json +++ b/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", diff --git a/services/web/webpack.config.js b/services/web/webpack.config.js index 6da8f627f6..ee6728bc7a 100644 --- a/services/web/webpack.config.js +++ b/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'), },