diff --git a/packages/react-pdf/README.md b/packages/react-pdf/README.md index 4d63709d4..a1e0a1ba0 100644 --- a/packages/react-pdf/README.md +++ b/packages/react-pdf/README.md @@ -118,7 +118,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(); ``` @@ -141,8 +141,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(); ``` @@ -151,7 +151,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: @@ -160,9 +160,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 @@ -170,7 +170,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 @@ -179,8 +179,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(); ``` @@ -188,8 +188,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 @@ -499,7 +499,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.

**Note**: `isEvalSupported` is forced to `false` to prevent [arbitrary JavaScript execution upon opening a malicious PDF file](https://github.com/mozilla/pdf.js/security/advisories/GHSA-wgrm-67xf-hhpq). | 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 @@ -510,8 +510,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}`)`` | @@ -541,7 +541,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 34321ce4d..3f849110c 100644 --- a/packages/react-pdf/package.json +++ b/packages/react-pdf/package.json @@ -60,7 +60,7 @@ "make-cancellable-promise": "^1.3.1", "make-event-props": "^1.6.0", "merge-refs": "^1.3.0", - "pdfjs-dist": "3.11.174", + "pdfjs-dist": "4.0.379", "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 5bb35c352..480268183 100644 --- a/packages/react-pdf/src/Document.tsx +++ b/packages/react-pdf/src/Document.tsx @@ -7,7 +7,7 @@ import clsx from 'clsx'; import invariant from 'tiny-invariant'; import warning from 'warning'; import { dequal } from 'dequal'; -import pdfjs from './pdfjs.js'; +import * as pdfjs from 'pdfjs-dist'; import DocumentContext from './DocumentContext.js'; @@ -193,9 +193,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 c1fed93a0..cc61fbce4 100644 --- a/packages/react-pdf/src/Page.spec.tsx +++ b/packages/react-pdf/src/Page.spec.tsx @@ -303,7 +303,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(); @@ -506,15 +506,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 () => { @@ -566,26 +564,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(); @@ -696,26 +674,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 a74c07c0a..26242ce4b 100644 --- a/packages/react-pdf/src/Page.tsx +++ b/packages/react-pdf/src/Page.tsx @@ -11,8 +11,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'; @@ -52,13 +51,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 @@ -260,9 +259,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' @@ -556,8 +553,6 @@ export default function Page(props: PageProps) { const pageKey = `${pageIndex}@${scale}/${rotate}`; - const pageKeyNoScale = `${pageIndex}/${rotate}`; - function renderMainLayer() { switch (renderMode) { case 'custom': { @@ -570,11 +565,9 @@ export default function Page(props: PageProps) { } 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 3e407d4b5..34e9237f8 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 a1e010129..f7d9decab 100644 --- a/packages/react-pdf/src/Page/PageCanvas.spec.tsx +++ b/packages/react-pdf/src/Page/Canvas.spec.tsx @@ -3,7 +3,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'; @@ -32,7 +32,7 @@ function renderWithContext(children: React.ReactNode, context: Partial { +describe('Canvas', () => { // Loaded page let page: PDFPageProxy; let pageWithRendererMocked: PDFPageProxy; @@ -58,7 +58,7 @@ describe('PageCanvas', () => { muteConsole(); - renderWithContext(, { + renderWithContext(, { onRenderSuccess, page: pageWithRendererMocked, scale: 1, @@ -76,7 +76,7 @@ describe('PageCanvas', () => { muteConsole(); - renderWithContext(, { + renderWithContext(, { onRenderError, page: failingPage, scale: 1, @@ -94,7 +94,7 @@ describe('PageCanvas', () => { it('passes canvas element to canvasRef properly', () => { const canvasRef = vi.fn(); - renderWithContext(, { + renderWithContext(, { page: pageWithRendererMocked, scale: 1, }); @@ -106,7 +106,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, @@ -123,7 +123,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 c67616ba3..2a0d2c18e 100644 --- a/packages/react-pdf/src/Page/PageCanvas.tsx +++ b/packages/react-pdf/src/Page/Canvas.tsx @@ -4,7 +4,7 @@ import { 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 3c5bb289d..000000000 --- a/packages/react-pdf/src/Page/PageSVG.spec.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { Blob } from 'node:buffer'; -import { beforeAll, describe, expect, it } from 'vitest'; -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 fb7df6082..000000000 --- a/packages/react-pdf/src/Page/PageSVG.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import { 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 36be738a3..038fd0807 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 4de0d82a4..bcade37de 100644 --- a/packages/react-pdf/src/Thumbnail.spec.tsx +++ b/packages/react-pdf/src/Thumbnail.spec.tsx @@ -412,15 +412,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 () => { @@ -465,23 +463,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/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/packages/react-pdf/tsconfig.json b/packages/react-pdf/tsconfig.json index 5ecdcca2d..6a00c2ab4 100644 --- a/packages/react-pdf/tsconfig.json +++ b/packages/react-pdf/tsconfig.json @@ -10,7 +10,7 @@ "outDir": "dist", "skipLibCheck": true, "strict": true, - "target": "es2015", + "target": "es2017", "verbatimModuleSyntax": true }, "exclude": ["dist"] diff --git a/sample/create-react-app-5/.gitignore b/sample/create-react-app-5/.gitignore index a77c78a9b..2b7c8032a 100644 --- a/sample/create-react-app-5/.gitignore +++ b/sample/create-react-app-5/.gitignore @@ -3,4 +3,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 6d3353fd7..a75b76bb6 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 e68abb5a1..0bfce3064 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 d27ca0dd6..c57921cab 100644 --- a/sample/next-pages/pages/Sample.tsx +++ b/sample/next-pages/pages/Sample.tsx @@ -7,7 +7,7 @@ import 'react-pdf/dist/esm/Page/TextLayer.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 804597b1b..db01b29c5 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 6d3353fd7..a75b76bb6 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 34ba61b72..a31f59049 100644 --- a/sample/vite/vite.config.ts +++ b/sample/vite/vite.config.ts @@ -13,6 +13,14 @@ const standardFontsDir = normalizePath( ); 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 6d3353fd7..a75b76bb6 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 fdc6e1f47..cb9b29234 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 2cf7f546c..fbe9abcd2 100644 --- a/test/vite.config.ts +++ b/test/vite.config.ts @@ -15,6 +15,14 @@ const standardFontsDir = normalizePath( export default defineConfig({ base: './', + build: { + target: 'es2022', + }, + optimizeDeps: { + esbuildOptions: { + target: 'es2022', + }, + }, plugins: [ react(), viteStaticCopy({ diff --git a/yarn.lock b/yarn.lock index 06593cfe4..d72e44179 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4290,9 +4290,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" @@ -4301,7 +4301,7 @@ __metadata: optional: true path2d-polyfill: optional: true - checksum: 10c0/0cb26561fd9bea90f2c1c8029d4cf972d338838de0f7f7aa3f369b2e555b99a2d8bbf1b81cc682fb26331241201a432726ae356a7ad3a930d86a308ca941d29c + checksum: 10c0/ac6bdc600ead7811482d5265a8b19ba40742babd0939823b31bda0fbc371d21ede86b173ef9c2adb3dbfcb27eab20e6cdba0a8811196e893d138bd280f2a7028 languageName: node linkType: hard @@ -4522,7 +4522,7 @@ __metadata: make-event-props: "npm:^1.6.0" merge-refs: "npm:^1.3.0" nodemon: "npm:^3.0.0" - pdfjs-dist: "npm:3.11.174" + pdfjs-dist: "npm:4.0.379" prettier: "npm:^3.2.0" react: "npm:^18.2.0" react-dom: "npm:^18.2.0"