From 06afe595961d95251e58c3cad0ffb369ff215c78 Mon Sep 17 00:00:00 2001 From: Wojciech Maj Date: Wed, 17 Jan 2024 21:52:23 +0100 Subject: [PATCH] [breaking] Update pdfjs-dist to 4.0.379 --- packages/react-pdf/README.md | 30 ++-- packages/react-pdf/package.json | 2 +- packages/react-pdf/src/Document.tsx | 6 +- packages/react-pdf/src/Page.spec.tsx | 46 +---- packages/react-pdf/src/Page.tsx | 17 +- .../react-pdf/src/Page/AnnotationLayer.tsx | 2 +- .../{PageCanvas.spec.tsx => Canvas.spec.tsx} | 14 +- .../src/Page/{PageCanvas.tsx => Canvas.tsx} | 6 +- packages/react-pdf/src/Page/PageSVG.spec.tsx | 89 ---------- packages/react-pdf/src/Page/PageSVG.tsx | 160 ------------------ packages/react-pdf/src/Page/TextLayer.tsx | 2 +- packages/react-pdf/src/Thumbnail.spec.tsx | 21 +-- packages/react-pdf/src/index.test.ts | 2 +- packages/react-pdf/src/index.ts | 4 +- packages/react-pdf/src/pdf.worker.entry.ts | 6 +- packages/react-pdf/src/pdfjs.ts | 7 - packages/react-pdf/src/shared/propTypes.ts | 4 +- packages/react-pdf/src/shared/types.ts | 2 +- sample/create-react-app-5/.gitignore | 2 +- .../create-react-app-5/scripts/copy-worker.ts | 4 +- sample/create-react-app-5/src/Sample.tsx | 2 +- sample/next-app/app/Sample.tsx | 2 +- sample/next-pages/pages/Sample.tsx | 2 +- sample/parcel2/Sample.tsx | 2 +- sample/vite/Sample.tsx | 2 +- sample/vite/vite.config.ts | 8 + sample/webpack5/Sample.tsx | 2 +- test/Test.tsx | 2 +- test/ViewOptions.tsx | 11 -- test/shared/types.ts | 2 +- test/vite.config.ts | 8 + yarn.lock | 10 +- 32 files changed, 81 insertions(+), 398 deletions(-) rename packages/react-pdf/src/Page/{PageCanvas.spec.tsx => Canvas.spec.tsx} (91%) rename packages/react-pdf/src/Page/{PageCanvas.tsx => Canvas.tsx} (97%) delete mode 100644 packages/react-pdf/src/Page/PageSVG.spec.tsx delete mode 100644 packages/react-pdf/src/Page/PageSVG.tsx delete mode 100644 packages/react-pdf/src/pdfjs.ts diff --git a/packages/react-pdf/README.md b/packages/react-pdf/README.md index cf5fb75f5..7be9ca3d5 100644 --- a/packages/react-pdf/README.md +++ b/packages/react-pdf/README.md @@ -99,7 +99,7 @@ For most cases, the following example will work: import { pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/build/pdf.worker.min.js', + 'pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString(); ``` @@ -122,8 +122,8 @@ For Parcel 2, you need to use a slightly different code: ```diff pdfjs.GlobalWorkerOptions.workerSrc = new URL( -- 'pdfjs-dist/build/pdf.worker.min.js', -+ 'npm:pdfjs-dist/build/pdf.worker.min.js', +- 'pdfjs-dist/build/pdf.worker.min.mjs', ++ 'npm:pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString(); ``` @@ -132,7 +132,7 @@ For Parcel 2, you need to use a slightly different code: #### Copy worker to public directory -You will have to make sure on your own that `pdf.worker.js` file from `pdfjs-dist/build` is copied to your project's output folder. +You will have to make sure on your own that `pdf.worker.mjs` file from `pdfjs-dist/build` is copied to your project's output folder. For example, you could use a custom script like: @@ -141,9 +141,9 @@ import path from 'node:path'; import fs from 'node:fs'; const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json')); -const pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.js'); +const pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.mjs'); -fs.copyFileSync(pdfWorkerPath, './dist/pdf.worker.js'); +fs.copyFileSync(pdfWorkerPath, './dist/pdf.worker.mjs'); ``` #### Use external CDN @@ -151,7 +151,7 @@ fs.copyFileSync(pdfWorkerPath, './dist/pdf.worker.js'); ```ts import { pdfjs } from 'react-pdf'; -pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`; +pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`; ``` #### Legacy PDF.js worker @@ -160,8 +160,8 @@ If you need to support older browsers, you may use legacy PDF.js worker. To do s ```diff pdfjs.GlobalWorkerOptions.workerSrc = new URL( -- 'pdfjs-dist/build/pdf.worker.min.js', -+ 'pdfjs-dist/legacy/build/pdf.worker.min.js', +- 'pdfjs-dist/build/pdf.worker.min.mjs', ++ 'pdfjs-dist/legacy/build/pdf.worker.min.mjs', import.meta.url, ).toString(); ``` @@ -169,8 +169,8 @@ If you need to support older browsers, you may use legacy PDF.js worker. To do s or: ```diff --pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`; -+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`; +-pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`; ++pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`; ``` ### Usage @@ -470,7 +470,7 @@ Loads a document passed using `file` prop. | onSourceError | Function called in case of an error while retrieving document source from `file` prop. | n/a | `(error) => alert('Error while retrieving document source! ' + error.message)` | | onSourceSuccess | Function called when document source is successfully retrieved from `file` prop. | n/a | `() => alert('Document source retrieved!')` | | options | An object in which additional parameters to be passed to PDF.js can be defined. Most notably:For a full list of possible parameters, check [PDF.js documentation on DocumentInitParameters](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html#~DocumentInitParameters). **Note**: Make sure to define options object outside of your React component, and use `useMemo` if you can't. | n/a | `{ cMapUrl: '/cmaps/' }` | -| renderMode | Rendering mode of the document. Can be `"canvas"`, `"custom"`, `"none"` or `"svg"`. If set to `"custom"`, `customRenderer` must also be provided.
**Warning**: SVG render mode is deprecated and will be removed in the future. | `"canvas"` | `"custom"` | +| renderMode | Rendering mode of the document. Can be `"canvas"`, `"custom"` or `"none"`. If set to `"custom"`, `customRenderer` must also be provided. | `"canvas"` | `"custom"` | | rotate | Rotation of the document in degrees. If provided, will change rotation globally, even for the pages which were given `rotate` prop of their own. `90` = rotated to the right, `180` = upside down, `270` = rotated to the left. | n/a | `90` | ### Page @@ -481,8 +481,8 @@ Displays a page. Should be placed inside ``. Alternatively, it can h | Prop name | Description | Default value | Example values | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| canvasBackground | Canvas background color. Any valid `canvas.fillStyle` can be used. If you set `renderMode` to `"svg"` this prop will be ignored. | n/a | `"transparent"` | -| canvasRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to `` rendered by `` component. If you set `renderMode` to `"svg"` this prop will be ignored. | n/a |
  • Function:
    `(ref) => { this.myCanvas = ref; }`
  • Ref created using `createRef`:
    `this.ref = createRef();`
    …
    `inputRef={this.ref}`
  • Ref created using `useRef`:
    `const ref = useRef();`
    …
    `inputRef={ref}`
| +| canvasBackground | Canvas background color. Any valid `canvas.fillStyle` can be used. | n/a | `"transparent"` | +| canvasRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to `` rendered by `` component. | n/a |
  • Function:
    `(ref) => { this.myCanvas = ref; }`
  • Ref created using `createRef`:
    `this.ref = createRef();`
    …
    `inputRef={this.ref}`
  • Ref created using `useRef`:
    `const ref = useRef();`
    …
    `inputRef={ref}`
| | className | Class name(s) that will be added to rendered element along with the default `react-pdf__Page`. | n/a |
  • String:
    `"custom-class-name-1 custom-class-name-2"`
  • Array of strings:
    `["custom-class-name-1", "custom-class-name-2"]`
| | customRenderer | Function that customizes how a page is rendered. You must set `renderMode` to `"custom"` to use this prop. | n/a | `MyCustomRenderer` | | customTextRenderer | Function that customizes how a text layer is rendered. | n/a | ``({ str, itemIndex }) => str.replace(/ipsum/g, value => `${value}`)`` | @@ -512,7 +512,7 @@ Displays a page. Should be placed inside ``. Alternatively, it can h | pdf | pdf object obtained from ``'s `onLoadSuccess` callback function. | (automatically obtained from parent ``) | `pdf` | | renderAnnotationLayer | Whether annotations (e.g. links) should be rendered. | `true` | `false` | | renderForms | Whether forms should be rendered. `renderAnnotationLayer` prop must be set to `true`. | `false` | `true` | -| renderMode | Rendering mode of the document. Can be `"canvas"`, `"custom"`, `"none"` or `"svg"`. If set to `"custom"`, `customRenderer` must also be provided.
**Warning**: SVG render mode is deprecated and will be removed in the future. | `"canvas"` | `"custom"` | +| renderMode | Rendering mode of the document. Can be `"canvas"`, `"custom"` or `"none"`. If set to `"custom"`, `customRenderer` must also be provided. | `"canvas"` | `"custom"` | | renderTextLayer | Whether a text layer should be rendered. | `true` | `false` | | rotate | Rotation of the page in degrees. `90` = rotated to the right, `180` = upside down, `270` = rotated to the left. | Page's default setting, usually `0` | `90` | | scale | Page scale. | `1` | `0.5` | diff --git a/packages/react-pdf/package.json b/packages/react-pdf/package.json index 48d02bb7a..876a7254a 100644 --- a/packages/react-pdf/package.json +++ b/packages/react-pdf/package.json @@ -59,7 +59,7 @@ "make-cancellable-promise": "^1.3.1", "make-event-props": "^1.6.0", "merge-refs": "^1.2.1", - "pdfjs-dist": "3.11.174", + "pdfjs-dist": "4.0.379", "prop-types": "^15.6.2", "tiny-invariant": "^1.0.0", "warning": "^4.0.0" diff --git a/packages/react-pdf/src/Document.tsx b/packages/react-pdf/src/Document.tsx index 09dd4d5e1..c5549e6fd 100644 --- a/packages/react-pdf/src/Document.tsx +++ b/packages/react-pdf/src/Document.tsx @@ -14,7 +14,7 @@ import makeCancellable from 'make-cancellable-promise'; import clsx from 'clsx'; import invariant from 'tiny-invariant'; import warning from 'warning'; -import pdfjs from './pdfjs.js'; +import * as pdfjs from 'pdfjs-dist'; import DocumentContext from './DocumentContext.js'; @@ -199,9 +199,7 @@ export type DocumentProps = { */ options?: Options; /** - * Rendering mode of the document. Can be `"canvas"`, `"custom"`, `"none"` or `"svg"`. If set to `"custom"`, `customRenderer` must also be provided. - * - * **Warning**: SVG render mode is deprecated and will be removed in the future. + * Rendering mode of the document. Can be `"canvas"`, `"custom"` or `"none"``. If set to `"custom"`, `customRenderer` must also be provided. * * @default 'canvas' * @example 'custom' diff --git a/packages/react-pdf/src/Page.spec.tsx b/packages/react-pdf/src/Page.spec.tsx index c5bed63a6..83d75418f 100644 --- a/packages/react-pdf/src/Page.spec.tsx +++ b/packages/react-pdf/src/Page.spec.tsx @@ -274,7 +274,7 @@ describe('Page', () => { expect(inputRef.current).toBeInstanceOf(HTMLDivElement); }); - it('passes canvas element to PageCanvas properly', async () => { + it('passes canvas element to Canvas properly', async () => { const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback(); const canvasRef = createRef(); @@ -475,15 +475,13 @@ describe('Page', () => { }, ); - expect.assertions(2); + expect.assertions(1); await onLoadSuccessPromise; const pageCanvas = container.querySelector('.react-pdf__Page__canvas'); - const pageSVG = container.querySelector('.react-pdf__Page__svg'); expect(pageCanvas).not.toBeInTheDocument(); - expect(pageSVG).not.toBeInTheDocument(); }); it('requests page to be rendered in canvas mode when given renderMode = "canvas"', async () => { @@ -535,26 +533,6 @@ describe('Page', () => { expect(customRenderer).toBeInTheDocument(); }); - it('requests page to be rendered in SVG mode when given renderMode = "svg"', async () => { - const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback(); - - const { container } = renderWithContext( - , - { - linkService, - pdf, - }, - ); - - expect.assertions(1); - - await onLoadSuccessPromise; - - const pageSVG = container.querySelector('.react-pdf__Page__svg'); - - expect(pageSVG).toBeInTheDocument(); - }); - it('requests text content to be rendered by default', async () => { const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback(); @@ -665,26 +643,6 @@ describe('Page', () => { expect(textLayer).toBeInTheDocument(); }); - it('renders TextLayer when given renderMode = "svg"', async () => { - const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback(); - - const { container } = renderWithContext( - , - { - linkService, - pdf, - }, - ); - - expect.assertions(1); - - await onLoadSuccessPromise; - - const textLayer = container.querySelector('.react-pdf__Page__textContent'); - - expect(textLayer).toBeInTheDocument(); - }); - it('requests annotations to be rendered by default', async () => { const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback(); diff --git a/packages/react-pdf/src/Page.tsx b/packages/react-pdf/src/Page.tsx index d9ca45ca5..b4bec29d9 100644 --- a/packages/react-pdf/src/Page.tsx +++ b/packages/react-pdf/src/Page.tsx @@ -12,8 +12,7 @@ import warning from 'warning'; import PageContext from './PageContext.js'; import Message from './Message.js'; -import PageCanvas from './Page/PageCanvas.js'; -import PageSVG from './Page/PageSVG.js'; +import Canvas from './Page/Canvas.js'; import TextLayer from './Page/TextLayer.js'; import AnnotationLayer from './Page/AnnotationLayer.js'; @@ -63,13 +62,13 @@ export type PageProps = { _className?: string; _enableRegisterUnregisterPage?: boolean; /** - * Canvas background color. Any valid `canvas.fillStyle` can be used. If you set `renderMode` to `"svg"` this prop will be ignored. + * Canvas background color. Any valid `canvas.fillStyle` can be used. * * @example 'transparent' */ canvasBackground?: string; /** - * A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to `` rendered by `` component. If you set `renderMode` to `"svg"` this prop will be ignored. + * A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to `` rendered by `` component. * * @example (ref) => { this.myCanvas = ref; } * @example this.ref @@ -271,9 +270,7 @@ export type PageProps = { */ renderForms?: boolean; /** - * Rendering mode of the document. Can be `"canvas"`, `"custom"`, `"none"` or `"svg"`. If set to `"custom"`, `customRenderer` must also be provided. - * - * **Warning**: SVG render mode is deprecated and will be removed in the future. + * Rendering mode of the document. Can be `"canvas"`, `"custom"` or `"none"`. If set to `"custom"`, `customRenderer` must also be provided. * * @default 'canvas' * @example 'custom' @@ -569,8 +566,6 @@ const Page: React.FC = function Page(props) { const pageKey = `${pageIndex}@${scale}/${rotate}`; - const pageKeyNoScale = `${pageIndex}/${rotate}`; - function renderMainLayer() { switch (renderMode) { case 'custom': { @@ -583,11 +578,9 @@ const Page: React.FC = function Page(props) { } case 'none': return null; - case 'svg': - return ; case 'canvas': default: - return ; + return ; } } diff --git a/packages/react-pdf/src/Page/AnnotationLayer.tsx b/packages/react-pdf/src/Page/AnnotationLayer.tsx index a1c36f1b7..7e3191498 100644 --- a/packages/react-pdf/src/Page/AnnotationLayer.tsx +++ b/packages/react-pdf/src/Page/AnnotationLayer.tsx @@ -5,7 +5,7 @@ import makeCancellable from 'make-cancellable-promise'; import clsx from 'clsx'; import invariant from 'tiny-invariant'; import warning from 'warning'; -import pdfjs from '../pdfjs.js'; +import * as pdfjs from 'pdfjs-dist'; import useDocumentContext from '../shared/hooks/useDocumentContext.js'; import usePageContext from '../shared/hooks/usePageContext.js'; diff --git a/packages/react-pdf/src/Page/PageCanvas.spec.tsx b/packages/react-pdf/src/Page/Canvas.spec.tsx similarity index 91% rename from packages/react-pdf/src/Page/PageCanvas.spec.tsx rename to packages/react-pdf/src/Page/Canvas.spec.tsx index e94bb3975..f90f50779 100644 --- a/packages/react-pdf/src/Page/PageCanvas.spec.tsx +++ b/packages/react-pdf/src/Page/Canvas.spec.tsx @@ -4,7 +4,7 @@ import { render } from '@testing-library/react'; import { pdfjs } from '../index.test.js'; -import PageCanvas from './PageCanvas.js'; +import Canvas from './Canvas.js'; import failingPage from '../../../../__mocks__/_failing_page.js'; @@ -33,7 +33,7 @@ function renderWithContext(children: React.ReactNode, context: Partial { +describe('Canvas', () => { // Loaded page let page: PDFPageProxy; let pageWithRendererMocked: PDFPageProxy; @@ -59,7 +59,7 @@ describe('PageCanvas', () => { muteConsole(); - renderWithContext(, { + renderWithContext(, { onRenderSuccess, page: pageWithRendererMocked, scale: 1, @@ -77,7 +77,7 @@ describe('PageCanvas', () => { muteConsole(); - renderWithContext(, { + renderWithContext(, { onRenderError, page: failingPage, scale: 1, @@ -95,7 +95,7 @@ describe('PageCanvas', () => { it('passes canvas element to canvasRef properly', () => { const canvasRef = vi.fn(); - renderWithContext(, { + renderWithContext(, { page: pageWithRendererMocked, scale: 1, }); @@ -107,7 +107,7 @@ describe('PageCanvas', () => { it('does not request structure tree to be rendered when renderTextLayer = false', async () => { const { func: onRenderSuccess, promise: onRenderSuccessPromise } = makeAsyncCallback(); - const { container } = renderWithContext(, { + const { container } = renderWithContext(, { onRenderSuccess, page: pageWithRendererMocked, renderTextLayer: false, @@ -124,7 +124,7 @@ describe('PageCanvas', () => { const { func: onGetStructTreeSuccess, promise: onGetStructTreeSuccessPromise } = makeAsyncCallback(); - const { container } = renderWithContext(, { + const { container } = renderWithContext(, { onGetStructTreeSuccess, page: pageWithRendererMocked, renderTextLayer: true, diff --git a/packages/react-pdf/src/Page/PageCanvas.tsx b/packages/react-pdf/src/Page/Canvas.tsx similarity index 97% rename from packages/react-pdf/src/Page/PageCanvas.tsx rename to packages/react-pdf/src/Page/Canvas.tsx index 3304a834f..53cafd34d 100644 --- a/packages/react-pdf/src/Page/PageCanvas.tsx +++ b/packages/react-pdf/src/Page/Canvas.tsx @@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import mergeRefs from 'merge-refs'; import invariant from 'tiny-invariant'; import warning from 'warning'; -import pdfjs from '../pdfjs.js'; +import * as pdfjs from 'pdfjs-dist'; import StructTree from '../StructTree.js'; @@ -20,11 +20,11 @@ import type { RenderParameters } from 'pdfjs-dist/types/src/display/api.js'; const ANNOTATION_MODE = pdfjs.AnnotationMode; -type PageCanvasProps = { +type CanvasProps = { canvasRef?: React.Ref; }; -export default function PageCanvas(props: PageCanvasProps) { +export default function Canvas(props: CanvasProps) { const pageContext = usePageContext(); invariant(pageContext, 'Unable to find Page context.'); diff --git a/packages/react-pdf/src/Page/PageSVG.spec.tsx b/packages/react-pdf/src/Page/PageSVG.spec.tsx deleted file mode 100644 index 0753d1eea..000000000 --- a/packages/react-pdf/src/Page/PageSVG.spec.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { Blob } from 'node:buffer'; -import { beforeAll, describe, expect, it } from 'vitest'; -import React from 'react'; -import { render } from '@testing-library/react'; - -import { pdfjs } from '../index.test.js'; - -import PageSVG from './PageSVG.js'; - -import failingPage from '../../../../__mocks__/_failing_page.js'; - -import { loadPDF, makeAsyncCallback, muteConsole, restoreConsole } from '../../../../test-utils.js'; - -import PageContext from '../PageContext.js'; - -import type { PDFPageProxy } from 'pdfjs-dist'; -import type { PageContextType } from '../shared/types.js'; - -const pdfFile = loadPDF('./../../__mocks__/_pdf.pdf'); - -function renderWithContext(children: React.ReactNode, context: Partial) { - const { rerender, ...otherResult } = render( - {children}, - ); - - return { - ...otherResult, - rerender: (nextChildren: React.ReactNode, nextContext: Partial = context) => - rerender( - - {nextChildren} - , - ), - }; -} - -describe('PageSVG', () => { - // Loaded page - let page: PDFPageProxy; - - beforeAll(async () => { - const pdf = await pdfjs.getDocument({ data: pdfFile.arrayBuffer }).promise; - - page = await pdf.getPage(1); - }); - - describe('loading', () => { - it('renders a page and calls onRenderSuccess callback properly', async () => { - const originalBlob = globalThis.Blob; - globalThis.Blob = Blob as unknown as typeof globalThis.Blob; - - const { func: onRenderSuccess, promise: onRenderSuccessPromise } = makeAsyncCallback(); - - muteConsole(); - - renderWithContext(, { - onRenderSuccess, - page, - scale: 1, - }); - - expect.assertions(1); - - await expect(onRenderSuccessPromise).resolves.toMatchObject([{}]); - - restoreConsole(); - - globalThis.Blob = originalBlob; - }); - - it('calls onRenderError when failed to render canvas', async () => { - const { func: onRenderError, promise: onRenderErrorPromise } = makeAsyncCallback(); - - muteConsole(); - - renderWithContext(, { - onRenderError, - page: failingPage, - scale: 1, - }); - - expect.assertions(1); - - await expect(onRenderErrorPromise).resolves.toMatchObject([expect.any(Error)]); - - restoreConsole(); - }); - }); -}); diff --git a/packages/react-pdf/src/Page/PageSVG.tsx b/packages/react-pdf/src/Page/PageSVG.tsx deleted file mode 100644 index 8d58eda8c..000000000 --- a/packages/react-pdf/src/Page/PageSVG.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import React, { useEffect, useMemo } from 'react'; -import makeCancellable from 'make-cancellable-promise'; -import invariant from 'tiny-invariant'; -import warning from 'warning'; -import pdfjs from '../pdfjs.js'; - -import usePageContext from '../shared/hooks/usePageContext.js'; -import useResolver from '../shared/hooks/useResolver.js'; -import { cancelRunningTask, isCancelException, makePageCallback } from '../shared/utils.js'; - -export default function PageSVG() { - const pageContext = usePageContext(); - - invariant(pageContext, 'Unable to find Page context.'); - - const { - _className, - onRenderSuccess: onRenderSuccessProps, - onRenderError: onRenderErrorProps, - page, - rotate, - scale, - } = pageContext; - - invariant(page, 'Attempted to render page SVG, but no page was specified.'); - - const [svgState, svgDispatch] = useResolver(); - const { value: svg, error: svgError } = svgState; - - /** - * Called when a page is rendered successfully - */ - function onRenderSuccess() { - if (!page) { - // Impossible, but TypeScript doesn't know that - return; - } - - if (onRenderSuccessProps) { - onRenderSuccessProps(makePageCallback(page, scale)); - } - } - - /** - * Called when a page fails to render - */ - function onRenderError() { - if (!svgError) { - // Impossible, but TypeScript doesn't know that - return; - } - - if (isCancelException(svgError)) { - return; - } - - warning(false, svgError.toString()); - - if (onRenderErrorProps) { - onRenderErrorProps(svgError); - } - } - - const viewport = useMemo( - () => page.getViewport({ scale, rotation: rotate }), - [page, rotate, scale], - ); - - function resetSVG() { - svgDispatch({ type: 'RESET' }); - } - - useEffect(resetSVG, [page, svgDispatch, viewport]); - - function renderSVG() { - if (!page) { - return; - } - - const cancellable = makeCancellable(page.getOperatorList()); - - cancellable.promise - .then((operatorList) => { - const svgGfx = new pdfjs.SVGGraphics(page.commonObjs, page.objs); - - svgGfx - .getSVG(operatorList, viewport) - .then((nextSvg: unknown) => { - // See https://github.com/mozilla/pdf.js/issues/16745 - if (!(nextSvg instanceof SVGElement)) { - throw new Error('getSVG returned unexpected result.'); - } - - svgDispatch({ type: 'RESOLVE', value: nextSvg }); - }) - .catch((error) => { - svgDispatch({ type: 'REJECT', error }); - }); - }) - .catch((error) => { - svgDispatch({ type: 'REJECT', error }); - }); - - return () => cancelRunningTask(cancellable); - } - - useEffect(renderSVG, [page, svgDispatch, viewport]); - - useEffect( - () => { - if (svg === undefined) { - return; - } - - if (svg === false) { - onRenderError(); - return; - } - - onRenderSuccess(); - }, - // Ommitted callbacks so they are not called every time they change - // eslint-disable-next-line react-hooks/exhaustive-deps - [svg], - ); - - function drawPageOnContainer(element: HTMLDivElement | null) { - if (!element || !svg) { - return; - } - - // Append SVG element to the main container, if this hasn't been done already - if (!element.firstElementChild) { - element.appendChild(svg); - } - - const { width, height } = viewport; - - svg.setAttribute('width', `${width}`); - svg.setAttribute('height', `${height}`); - } - - const { width, height } = viewport; - - return ( -
drawPageOnContainer(ref)} - style={{ - display: 'block', - backgroundColor: 'white', - overflow: 'hidden', - width, - height, - userSelect: 'none', - }} - /> - ); -} diff --git a/packages/react-pdf/src/Page/TextLayer.tsx b/packages/react-pdf/src/Page/TextLayer.tsx index 8bffa350d..53c17b6d0 100644 --- a/packages/react-pdf/src/Page/TextLayer.tsx +++ b/packages/react-pdf/src/Page/TextLayer.tsx @@ -5,7 +5,7 @@ import makeCancellable from 'make-cancellable-promise'; import clsx from 'clsx'; import invariant from 'tiny-invariant'; import warning from 'warning'; -import pdfjs from '../pdfjs.js'; +import * as pdfjs from 'pdfjs-dist'; import usePageContext from '../shared/hooks/usePageContext.js'; import useResolver from '../shared/hooks/useResolver.js'; diff --git a/packages/react-pdf/src/Thumbnail.spec.tsx b/packages/react-pdf/src/Thumbnail.spec.tsx index dcd79ad12..37e57761f 100644 --- a/packages/react-pdf/src/Thumbnail.spec.tsx +++ b/packages/react-pdf/src/Thumbnail.spec.tsx @@ -402,15 +402,13 @@ describe('Thumbnail', () => { { pdf }, ); - expect.assertions(2); + expect.assertions(1); await onLoadSuccessPromise; const pageCanvas = container.querySelector('.react-pdf__Thumbnail__page__canvas'); - const pageSVG = container.querySelector('.react-pdf__Thumbnail__page__svg'); expect(pageCanvas).not.toBeInTheDocument(); - expect(pageSVG).not.toBeInTheDocument(); }); it('requests page to be rendered in canvas mode when given renderMode = "canvas"', async () => { @@ -455,23 +453,6 @@ describe('Thumbnail', () => { expect(customRenderer).toBeInTheDocument(); }); - - it('requests page to be rendered in SVG mode when given renderMode = "svg"', async () => { - const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback(); - - const { container } = renderWithContext( - , - { pdf }, - ); - - expect.assertions(1); - - await onLoadSuccessPromise; - - const pageSVG = container.querySelector('.react-pdf__Thumbnail__page__svg'); - - expect(pageSVG).toBeInTheDocument(); - }); }); it('requests page to be rendered at its original size given nothing', async () => { diff --git a/packages/react-pdf/src/index.test.ts b/packages/react-pdf/src/index.test.ts index df1d707ab..7af8b7e86 100644 --- a/packages/react-pdf/src/index.test.ts +++ b/packages/react-pdf/src/index.test.ts @@ -1,4 +1,4 @@ -import pdfjs from './pdfjs.js'; +import * as pdfjs from 'pdfjs-dist'; import Document from './Document.js'; import Outline from './Outline.js'; diff --git a/packages/react-pdf/src/index.ts b/packages/react-pdf/src/index.ts index 409375250..1d5a79371 100644 --- a/packages/react-pdf/src/index.ts +++ b/packages/react-pdf/src/index.ts @@ -1,4 +1,4 @@ -import pdfjs from './pdfjs.js'; +import * as pdfjs from 'pdfjs-dist'; import Document from './Document.js'; import Outline from './Outline.js'; @@ -20,7 +20,7 @@ import { displayWorkerWarning } from './shared/utils.js'; displayWorkerWarning(); -pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.js'; +pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.mjs'; export { pdfjs, diff --git a/packages/react-pdf/src/pdf.worker.entry.ts b/packages/react-pdf/src/pdf.worker.entry.ts index 78aa9a2d4..3ae639931 100644 --- a/packages/react-pdf/src/pdf.worker.entry.ts +++ b/packages/react-pdf/src/pdf.worker.entry.ts @@ -8,4 +8,8 @@ ( (typeof window !== 'undefined' ? window : {}) as Window & typeof globalThis & { pdfjsWorker: unknown } -).pdfjsWorker = require('pdfjs-dist/build/pdf.worker'); +).pdfjsWorker = + // @ts-expect-error - pdfjs-dist does not ship with types + await import('pdfjs-dist/build/pdf.worker.mjs'); + +export {}; diff --git a/packages/react-pdf/src/pdfjs.ts b/packages/react-pdf/src/pdfjs.ts deleted file mode 100644 index d09d1b7fa..000000000 --- a/packages/react-pdf/src/pdfjs.ts +++ /dev/null @@ -1,7 +0,0 @@ -import * as pdfjsModule from 'pdfjs-dist'; - -const pdfjs = ( - 'default' in pdfjsModule ? pdfjsModule['default'] : pdfjsModule -) as typeof pdfjsModule; - -export default pdfjs; diff --git a/packages/react-pdf/src/shared/propTypes.ts b/packages/react-pdf/src/shared/propTypes.ts index ce04485da..b4de38566 100644 --- a/packages/react-pdf/src/shared/propTypes.ts +++ b/packages/react-pdf/src/shared/propTypes.ts @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import { allEvents } from 'make-event-props'; -import pdfjs from '../pdfjs.js'; +import * as pdfjs from 'pdfjs-dist'; import { isDefined } from './utils.js'; @@ -162,6 +162,6 @@ export const isRef = PropTypes.oneOfType([ }), ]); -export const isRenderMode = PropTypes.oneOf(['canvas', 'custom', 'none', 'svg'] as const); +export const isRenderMode = PropTypes.oneOf(['canvas', 'custom', 'none'] as const); export const isRotate = PropTypes.oneOf([0, 90, 180, 270] as const); diff --git a/packages/react-pdf/src/shared/types.ts b/packages/react-pdf/src/shared/types.ts index 88314b7e6..127a9c1fd 100644 --- a/packages/react-pdf/src/shared/types.ts +++ b/packages/react-pdf/src/shared/types.ts @@ -49,7 +49,7 @@ export type OnLoadProgressArgs = { export type RegisterPage = (pageIndex: number, ref: HTMLDivElement) => void; -export type RenderMode = 'canvas' | 'custom' | 'none' | 'svg'; +export type RenderMode = 'canvas' | 'custom' | 'none'; export type ScrollPageIntoViewArgs = { dest?: ResolvedDest; diff --git a/sample/create-react-app-5/.gitignore b/sample/create-react-app-5/.gitignore index 930de56c1..8c637049e 100644 --- a/sample/create-react-app-5/.gitignore +++ b/sample/create-react-app-5/.gitignore @@ -2,4 +2,4 @@ build node_modules public/cmaps public/standard_fonts -public/pdf.worker.js +public/pdf.worker.mjs diff --git a/sample/create-react-app-5/scripts/copy-worker.ts b/sample/create-react-app-5/scripts/copy-worker.ts index caf4b48f0..0b0bfd066 100644 --- a/sample/create-react-app-5/scripts/copy-worker.ts +++ b/sample/create-react-app-5/scripts/copy-worker.ts @@ -5,10 +5,10 @@ import { createRequire } from 'node:module'; const require = createRequire(import.meta.url); const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json')); -const pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.js'); +const pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.mjs'); const targetDir = 'public'; -const targetPath = path.join(targetDir, 'pdf.worker.js'); +const targetPath = path.join(targetDir, 'pdf.worker.mjs'); // Ensure target directory exists fs.mkdirSync(targetDir, { recursive: true }); diff --git a/sample/create-react-app-5/src/Sample.tsx b/sample/create-react-app-5/src/Sample.tsx index 96af07507..408e5661d 100644 --- a/sample/create-react-app-5/src/Sample.tsx +++ b/sample/create-react-app-5/src/Sample.tsx @@ -9,7 +9,7 @@ import './Sample.css'; import type { PDFDocumentProxy } from 'pdfjs-dist'; pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/build/pdf.worker.min.js', + 'pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString(); diff --git a/sample/next-app/app/Sample.tsx b/sample/next-app/app/Sample.tsx index e5f9afb39..98b27d174 100644 --- a/sample/next-app/app/Sample.tsx +++ b/sample/next-app/app/Sample.tsx @@ -11,7 +11,7 @@ import './Sample.css'; import type { PDFDocumentProxy } from 'pdfjs-dist'; pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/build/pdf.worker.min.js', + 'pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString(); diff --git a/sample/next-pages/pages/Sample.tsx b/sample/next-pages/pages/Sample.tsx index 96af07507..408e5661d 100644 --- a/sample/next-pages/pages/Sample.tsx +++ b/sample/next-pages/pages/Sample.tsx @@ -9,7 +9,7 @@ import './Sample.css'; import type { PDFDocumentProxy } from 'pdfjs-dist'; pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/build/pdf.worker.min.js', + 'pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString(); diff --git a/sample/parcel2/Sample.tsx b/sample/parcel2/Sample.tsx index b41e5b451..404ccba25 100644 --- a/sample/parcel2/Sample.tsx +++ b/sample/parcel2/Sample.tsx @@ -11,7 +11,7 @@ import type { PDFDocumentProxy } from 'pdfjs-dist'; const pdfFile = new URL('./sample.pdf', import.meta.url).toString(); pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'npm:pdfjs-dist/build/pdf.worker.min.js', + 'npm:pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString(); diff --git a/sample/vite/Sample.tsx b/sample/vite/Sample.tsx index 96af07507..408e5661d 100644 --- a/sample/vite/Sample.tsx +++ b/sample/vite/Sample.tsx @@ -9,7 +9,7 @@ import './Sample.css'; import type { PDFDocumentProxy } from 'pdfjs-dist'; pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/build/pdf.worker.min.js', + 'pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString(); diff --git a/sample/vite/vite.config.ts b/sample/vite/vite.config.ts index 82739d335..3505c83dd 100644 --- a/sample/vite/vite.config.ts +++ b/sample/vite/vite.config.ts @@ -12,6 +12,14 @@ const standardFontsDir = path.join( ); export default defineConfig({ + build: { + target: 'es2022', + }, + optimizeDeps: { + esbuildOptions: { + target: 'es2022', + }, + }, plugins: [ viteStaticCopy({ targets: [ diff --git a/sample/webpack5/Sample.tsx b/sample/webpack5/Sample.tsx index 96af07507..408e5661d 100644 --- a/sample/webpack5/Sample.tsx +++ b/sample/webpack5/Sample.tsx @@ -9,7 +9,7 @@ import './Sample.css'; import type { PDFDocumentProxy } from 'pdfjs-dist'; pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/build/pdf.worker.min.js', + 'pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString(); diff --git a/test/Test.tsx b/test/Test.tsx index dd8d38c04..6f57059e8 100644 --- a/test/Test.tsx +++ b/test/Test.tsx @@ -20,7 +20,7 @@ import type { ExternalLinkTarget, File, PassMethod, RenderMode } from './shared/ const { PDFDataRangeTransport } = pdfjs; pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/build/pdf.worker.min.js', + 'pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString(); diff --git a/test/ViewOptions.tsx b/test/ViewOptions.tsx index 878c54f4e..d637026ec 100644 --- a/test/ViewOptions.tsx +++ b/test/ViewOptions.tsx @@ -262,17 +262,6 @@ export default function ViewOptions({ />
-
- - -
diff --git a/test/shared/types.ts b/test/shared/types.ts index 817d3bd28..f03c9adcb 100644 --- a/test/shared/types.ts +++ b/test/shared/types.ts @@ -12,4 +12,4 @@ export type File = string | ArrayBuffer | Blob | Source | null; export type PassMethod = 'blob' | 'normal' | 'object' | 'string'; -export type RenderMode = 'canvas' | 'custom' | 'none' | 'svg'; +export type RenderMode = 'canvas' | 'custom' | 'none'; diff --git a/test/vite.config.ts b/test/vite.config.ts index 217e1aef0..7bd6824e9 100644 --- a/test/vite.config.ts +++ b/test/vite.config.ts @@ -14,6 +14,14 @@ const standardFontsDir = path.join( export default defineConfig({ base: './', + build: { + target: 'es2022', + }, + optimizeDeps: { + esbuildOptions: { + target: 'es2022', + }, + }, plugins: [ react(), viteStaticCopy({ diff --git a/yarn.lock b/yarn.lock index 900c15b27..6b72d0db7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4304,9 +4304,9 @@ __metadata: languageName: node linkType: hard -"pdfjs-dist@npm:3.11.174": - version: 3.11.174 - resolution: "pdfjs-dist@npm:3.11.174" +"pdfjs-dist@npm:4.0.379": + version: 4.0.379 + resolution: "pdfjs-dist@npm:4.0.379" dependencies: canvas: "npm:^2.11.2" path2d-polyfill: "npm:^2.0.1" @@ -4315,7 +4315,7 @@ __metadata: optional: true path2d-polyfill: optional: true - checksum: 0cb26561fd9bea90f2c1c8029d4cf972d338838de0f7f7aa3f369b2e555b99a2d8bbf1b81cc682fb26331241201a432726ae356a7ad3a930d86a308ca941d29c + checksum: ac6bdc600ead7811482d5265a8b19ba40742babd0939823b31bda0fbc371d21ede86b173ef9c2adb3dbfcb27eab20e6cdba0a8811196e893d138bd280f2a7028 languageName: node linkType: hard @@ -4535,7 +4535,7 @@ __metadata: make-event-props: "npm:^1.6.0" merge-refs: "npm:^1.2.1" nodemon: "npm:^3.0.0" - pdfjs-dist: "npm:3.11.174" + pdfjs-dist: "npm:4.0.379" prettier: "npm:^3.0.0" prop-types: "npm:^15.6.2" react: "npm:^18.2.0"