From c92c179bf3703f36389e20766c17acae88af2550 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9E=C3=B3r=C3=B0ur=20Hafli=C3=B0ason?= Date: Wed, 2 Oct 2024 22:38:31 +0000 Subject: [PATCH 01/10] polyfill --- .../island-ui/core/src/lib/PdfViewer/PdfViewer.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx index 641aab7dff71..87139565a8ea 100644 --- a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx +++ b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx @@ -45,6 +45,20 @@ export const PdfViewer: FC> = ({ useEffect(() => { import('react-pdf') .then((pdf) => { + // @ts-expect-error This does not exist outside of polyfill. + if (typeof Promise.withResolvers === 'undefined') { + if (window) + // @ts-expect-error Need to polyfill withResolvers. + window.Promise.withResolvers = function () { + let resolve, reject + const promise = new Promise((res, rej) => { + resolve = res + reject = rej + }) + return { promise, resolve, reject } + } + } + pdf.pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdf.pdfjs.version}/pdf.worker.min.mjs` setPdfLib(pdf) }) From 3cd9554654e80ed0c10e9282dfc9d2e15d7f8b51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9E=C3=B3r=C3=B0ur=20Hafli=C3=B0ason?= Date: Thu, 3 Oct 2024 00:36:14 +0000 Subject: [PATCH 02/10] test --- .../core/src/lib/PdfViewer/PdfViewer.tsx | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx index 87139565a8ea..146e740d717a 100644 --- a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx +++ b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx @@ -11,6 +11,19 @@ import cn from 'classnames' const pdfError = 'Villa kom upp við að birta skjal, reyndu aftur síðar.' +// @ts-expect-error This does not exist outside of polyfill. +if (!Promise.withResolvers) { + // @ts-expect-error Need to polyfill withResolvers. + Promise.withResolvers = function () { + let resolve, reject + const promise = new Promise((res, rej) => { + resolve = res + reject = rej + }) + return { promise, resolve, reject } + } +} + export interface PdfViewerProps { file: string showAllPages?: boolean @@ -45,20 +58,6 @@ export const PdfViewer: FC> = ({ useEffect(() => { import('react-pdf') .then((pdf) => { - // @ts-expect-error This does not exist outside of polyfill. - if (typeof Promise.withResolvers === 'undefined') { - if (window) - // @ts-expect-error Need to polyfill withResolvers. - window.Promise.withResolvers = function () { - let resolve, reject - const promise = new Promise((res, rej) => { - resolve = res - reject = rej - }) - return { promise, resolve, reject } - } - } - pdf.pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdf.pdfjs.version}/pdf.worker.min.mjs` setPdfLib(pdf) }) From c9f71ed6b89f5f5d7c16e66865596681ca5620f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9E=C3=B3r=C3=B0ur=20Hafli=C3=B0ason?= Date: Thu, 3 Oct 2024 11:19:45 +0000 Subject: [PATCH 03/10] test --- .../core/src/lib/PdfViewer/PdfViewer.tsx | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx index 146e740d717a..8fcce1f956e4 100644 --- a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx +++ b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx @@ -11,19 +11,6 @@ import cn from 'classnames' const pdfError = 'Villa kom upp við að birta skjal, reyndu aftur síðar.' -// @ts-expect-error This does not exist outside of polyfill. -if (!Promise.withResolvers) { - // @ts-expect-error Need to polyfill withResolvers. - Promise.withResolvers = function () { - let resolve, reject - const promise = new Promise((res, rej) => { - resolve = res - reject = rej - }) - return { promise, resolve, reject } - } -} - export interface PdfViewerProps { file: string showAllPages?: boolean @@ -58,7 +45,8 @@ export const PdfViewer: FC> = ({ useEffect(() => { import('react-pdf') .then((pdf) => { - pdf.pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdf.pdfjs.version}/pdf.worker.min.mjs` + pdf.pdfjs.GlobalWorkerOptions.workerSrc = + 'https://unpkg.com/pdfjs-dist@4.4.168/legacy/build/pdf.worker.min.mjs' setPdfLib(pdf) }) .catch((e) => { From 50757623f6cd6a50fe0be5c34633f293317fd897 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9E=C3=B3r=C3=B0ur=20Hafli=C3=B0ason?= Date: Thu, 3 Oct 2024 13:12:02 +0000 Subject: [PATCH 04/10] add correct version --- libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx index 8fcce1f956e4..0fd2677f9f63 100644 --- a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx +++ b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx @@ -45,8 +45,7 @@ export const PdfViewer: FC> = ({ useEffect(() => { import('react-pdf') .then((pdf) => { - pdf.pdfjs.GlobalWorkerOptions.workerSrc = - 'https://unpkg.com/pdfjs-dist@4.4.168/legacy/build/pdf.worker.min.mjs' + pdf.pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdf.pdfjs.version}/legacy/build/pdf.worker.min.mjs` setPdfLib(pdf) }) .catch((e) => { From ec2ba49b06c81a7ac2cd0949137635286c5e5d02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9E=C3=B3r=C3=B0ur=20Hafli=C3=B0ason?= Date: Thu, 3 Oct 2024 14:09:55 +0000 Subject: [PATCH 05/10] Update --- .../core/src/lib/PdfViewer/PdfViewer.tsx | 118 ++++++++---------- package.json | 1 - yarn.lock | 20 --- 3 files changed, 54 insertions(+), 85 deletions(-) diff --git a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx index 0fd2677f9f63..9613cbad8a3a 100644 --- a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx +++ b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx @@ -1,6 +1,6 @@ import React, { FC, useEffect, useState, ReactNode } from 'react' import { Box } from '../Box/Box' -import type { Document, Page, Outline, pdfjs } from 'react-pdf' +import { Document, Page, Outline, pdfjs } from 'react-pdf' import { Pagination } from '../Pagination/Pagination' import { LoadingDots } from '../LoadingDots/LoadingDots' import { AlertMessage } from '../AlertMessage/AlertMessage' @@ -9,6 +9,11 @@ import 'react-pdf/dist/Page/AnnotationLayer.css' import * as styles from './PdfViewer.css' import cn from 'classnames' +pdfjs.GlobalWorkerOptions.workerSrc = new URL( + 'pdfjs-dist/build/pdf.worker.min.mjs', + import.meta.url, +).toString() + const pdfError = 'Villa kom upp við að birta skjal, reyndu aftur síðar.' export interface PdfViewerProps { @@ -39,20 +44,8 @@ export const PdfViewer: FC> = ({ }) => { const [numPages, setNumPages] = useState(0) const [pageNumber, setPageNumber] = useState(1) - const [pdfLib, setPdfLib] = useState() const [pdfLibError, setPdfLibError] = useState() - useEffect(() => { - import('react-pdf') - .then((pdf) => { - pdf.pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdf.pdfjs.version}/legacy/build/pdf.worker.min.mjs` - setPdfLib(pdf) - }) - .catch((e) => { - setPdfLibError(e) - }) - }, []) - const onDocumentLoadSuccess = ({ numPages }: PdfProps) => { setNumPages(numPages) } @@ -69,61 +62,58 @@ export const PdfViewer: FC> = ({ return errorComponent ?? } - if (pdfLib) { - return ( - <> - loadingView()} - error={errorComponent ?? pdfError} - externalLinkTarget="_blank" - > - {showAllPages ? ( - [...Array(numPages)].map((x, page) => ( - - )) - ) : ( - + loadingView()} + onError={(error) => setPdfLibError(error)} + error={errorComponent ?? pdfError} + externalLinkTarget="_blank" + > + {showAllPages ? ( + [...Array(numPages)].map((x, page) => ( + - )} - - - - ( - setPageNumber(page)} - > - {children} - - )} - totalPages={numPages} + )) + ) : ( + - - - ) - } + )} + - return loadingView() + + ( + setPageNumber(page)} + > + {children} + + )} + totalPages={numPages} + /> + + + ) } diff --git a/package.json b/package.json index 2cfe86b20cac..a1fecbc01584 100644 --- a/package.json +++ b/package.json @@ -126,7 +126,6 @@ "@types/react-csv": "1.1.1", "@types/react-input-mask": "3.0.0", "@types/react-modal": "3.13.1", - "@types/react-pdf": "5.0.9", "@types/react-table": "7.0.24", "@vanilla-extract/babel-plugin": "1.1.6", "@vanilla-extract/css": "1.7.0", diff --git a/yarn.lock b/yarn.lock index a448c7be1a3d..24ebf506ceef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20845,16 +20845,6 @@ __metadata: languageName: node linkType: hard -"@types/react-pdf@npm:5.0.9": - version: 5.0.9 - resolution: "@types/react-pdf@npm:5.0.9" - dependencies: - "@types/react": "*" - pdfjs-dist: ^2.10.377 - checksum: 5247dd76dc20beb504f13756d576d4036dab19416de648553f6405b44d4cf8467be3d50063f98cc07eed39b37d07bc834756a3f275b8bc7f635226fd59ae17c7 - languageName: node - linkType: hard - "@types/react-table@npm:7.0.24": version: 7.0.24 resolution: "@types/react-table@npm:7.0.24" @@ -37358,7 +37348,6 @@ __metadata: "@types/react-infinite-scroller": ^1.2.3 "@types/react-input-mask": 3.0.0 "@types/react-modal": 3.13.1 - "@types/react-pdf": 5.0.9 "@types/react-table": 7.0.24 "@types/request": 2.48.5 "@types/resolve": ^1.20.2 @@ -45296,15 +45285,6 @@ __metadata: languageName: node linkType: hard -"pdfjs-dist@npm:^2.10.377": - version: 2.10.377 - resolution: "pdfjs-dist@npm:2.10.377" - peerDependencies: - worker-loader: ^3.0.7 - checksum: 5a4c14777676e15aeca9a627cc1f368821071ae040154983edf21f1040cb89acd9b0168b43b64ac10d66f86094dcb48b33513b9810b6d422446c599fb172d5a4 - languageName: node - linkType: hard - "pdfkit@npm:0.11.0": version: 0.11.0 resolution: "pdfkit@npm:0.11.0" From aa9465380325487ba54fbcc3a204ce6e4cce9e28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9E=C3=B3r=C3=B0ur=20Hafli=C3=B0ason?= Date: Thu, 3 Oct 2024 14:43:19 +0000 Subject: [PATCH 06/10] Fix path --- libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx index 9613cbad8a3a..a959fcb44e83 100644 --- a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx +++ b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx @@ -10,7 +10,7 @@ import * as styles from './PdfViewer.css' import cn from 'classnames' pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/build/pdf.worker.min.mjs', + 'pdfjs-dist/legacy/build/pdf.worker.min.mjs', import.meta.url, ).toString() From f5e045da49dda87b353ae98686f1c982b8a7ae53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9E=C3=B3r=C3=B0ur=20Hafli=C3=B0ason?= Date: Thu, 3 Oct 2024 14:54:33 +0000 Subject: [PATCH 07/10] Remove unused --- libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx index a959fcb44e83..786f8b1bd70a 100644 --- a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx +++ b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx @@ -1,4 +1,4 @@ -import React, { FC, useEffect, useState, ReactNode } from 'react' +import React, { FC, useState, ReactNode } from 'react' import { Box } from '../Box/Box' import { Document, Page, Outline, pdfjs } from 'react-pdf' import { Pagination } from '../Pagination/Pagination' From cc1f34d6224f94ba5bfae06e3a64fbb1059b1dcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9E=C3=B3r=C3=B0ur=20Hafli=C3=B0ason?= Date: Thu, 3 Oct 2024 15:52:13 +0000 Subject: [PATCH 08/10] Test --- libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx index 786f8b1bd70a..18e50e643282 100644 --- a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx +++ b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx @@ -8,11 +8,7 @@ import 'react-pdf/dist/Page/TextLayer.css' import 'react-pdf/dist/Page/AnnotationLayer.css' import * as styles from './PdfViewer.css' import cn from 'classnames' - -pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/legacy/build/pdf.worker.min.mjs', - import.meta.url, -).toString() +import 'pdfjs-dist/build/pdf.worker.min.mjs' const pdfError = 'Villa kom upp við að birta skjal, reyndu aftur síðar.' From 6781dda102b5e25508982464611ce0915b179883 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9E=C3=B3r=C3=B0ur=20Hafli=C3=B0ason?= Date: Thu, 3 Oct 2024 21:27:21 +0000 Subject: [PATCH 09/10] Test --- jest.preset.js | 1 + libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/jest.preset.js b/jest.preset.js index 1651c8322bda..71c35bbdf10a 100644 --- a/jest.preset.js +++ b/jest.preset.js @@ -24,6 +24,7 @@ module.exports = { // PDF viewer external css can be excluded from tests, otherwise will cause an error. '^react-pdf/dist/Page/(.*)$': 'jest-transform-stub', }, + transformIgnorePatterns: ['/node_modules/(?!pdfjs-dist)'], /* TODO: Update to latest Jest snapshotFormat * By default Nx has kept the older style of Jest Snapshot formats * to prevent breaking of any existing tests with snapshots. diff --git a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx index 18e50e643282..786f8b1bd70a 100644 --- a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx +++ b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx @@ -8,7 +8,11 @@ import 'react-pdf/dist/Page/TextLayer.css' import 'react-pdf/dist/Page/AnnotationLayer.css' import * as styles from './PdfViewer.css' import cn from 'classnames' -import 'pdfjs-dist/build/pdf.worker.min.mjs' + +pdfjs.GlobalWorkerOptions.workerSrc = new URL( + 'pdfjs-dist/legacy/build/pdf.worker.min.mjs', + import.meta.url, +).toString() const pdfError = 'Villa kom upp við að birta skjal, reyndu aftur síðar.' From 24f48bc7a3f21e6a2cae452e331ab3656002ee83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9E=C3=B3r=C3=B0ur=20Hafli=C3=B0ason?= Date: Thu, 3 Oct 2024 22:07:58 +0000 Subject: [PATCH 10/10] Test --- .../core/src/lib/PdfViewer/PdfViewer.tsx | 15 +++++++++++---- libs/shared/types/src/lib/pdfjs-dist.d.ts | 5 +++++ 2 files changed, 16 insertions(+), 4 deletions(-) create mode 100644 libs/shared/types/src/lib/pdfjs-dist.d.ts diff --git a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx index 786f8b1bd70a..73c49825db29 100644 --- a/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx +++ b/libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx @@ -9,10 +9,17 @@ import 'react-pdf/dist/Page/AnnotationLayer.css' import * as styles from './PdfViewer.css' import cn from 'classnames' -pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/legacy/build/pdf.worker.min.mjs', - import.meta.url, -).toString() +if (typeof window !== 'undefined') { + // @ts-expect-error - dynamic import + import('pdfjs-dist/legacy/build/pdf.worker.min.mjs') + .then((workerSrc) => { + pdfjs.GlobalWorkerOptions.workerSrc = workerSrc + }) + .catch(() => { + pdfjs.GlobalWorkerOptions.workerSrc = + 'pdfjs-dist/legacy/build/pdf.worker.min.mjs' // Fallback if dynamic import fails + }) +} const pdfError = 'Villa kom upp við að birta skjal, reyndu aftur síðar.' diff --git a/libs/shared/types/src/lib/pdfjs-dist.d.ts b/libs/shared/types/src/lib/pdfjs-dist.d.ts new file mode 100644 index 000000000000..84a5bcfe0168 --- /dev/null +++ b/libs/shared/types/src/lib/pdfjs-dist.d.ts @@ -0,0 +1,5 @@ +declare module 'pdfjs-dist/legacy/build/pdf.worker.min.mjs' { + const workerSrc: string + + export default workerSrc +}