[breaking] Update pdfjs-dist to 4.0.379

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"
   },

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'

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<HTMLCanvasElement>();
@@ -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(
-        <Page onLoadSuccess={onLoadSuccess} pageIndex={0} renderMode="svg" />,
-        {
-          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(
-        <Page onLoadSuccess={onLoadSuccess} pageIndex={0} renderMode="svg" renderTextLayer />,
-        {
-          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();
 

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 `<canvas>` rendered by `<PageCanvas>` 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 `<canvas>` rendered by `<PageCanvas>` 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 <PageSVG key={`${pageKeyNoScale}_svg`} />;
       case 'canvas':
       default:
-        return <PageCanvas key={`${pageKey}_canvas`} canvasRef={canvasRef} />;
+        return <Canvas key={`${pageKey}_canvas`} canvasRef={canvasRef} />;
     }
   }
 

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';

packages/react-pdf/src/Page/PageCanvas.spec.tsx → 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<PageConte
   };
 }
 
-describe('PageCanvas', () => {
+describe('Canvas', () => {
   // Loaded page
   let page: PDFPageProxy;
   let pageWithRendererMocked: PDFPageProxy;
@@ -58,7 +58,7 @@ describe('PageCanvas', () => {
 
       muteConsole();
 
-      renderWithContext(<PageCanvas />, {
+      renderWithContext(<Canvas />, {
         onRenderSuccess,
         page: pageWithRendererMocked,
         scale: 1,
@@ -76,7 +76,7 @@ describe('PageCanvas', () => {
 
       muteConsole();
 
-      renderWithContext(<PageCanvas />, {
+      renderWithContext(<Canvas />, {
         onRenderError,
         page: failingPage,
         scale: 1,
@@ -94,7 +94,7 @@ describe('PageCanvas', () => {
     it('passes canvas element to canvasRef properly', () => {
       const canvasRef = vi.fn();
 
-      renderWithContext(<PageCanvas canvasRef={canvasRef} />, {
+      renderWithContext(<Canvas canvasRef={canvasRef} />, {
         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(<PageCanvas />, {
+      const { container } = renderWithContext(<Canvas />, {
         onRenderSuccess,
         page: pageWithRendererMocked,
         renderTextLayer: false,
@@ -123,7 +123,7 @@ describe('PageCanvas', () => {
       const { func: onGetStructTreeSuccess, promise: onGetStructTreeSuccessPromise } =
         makeAsyncCallback();
 
-      const { container } = renderWithContext(<PageCanvas />, {
+      const { container } = renderWithContext(<Canvas />, {
         onGetStructTreeSuccess,
         page: pageWithRendererMocked,
         renderTextLayer: true,

packages/react-pdf/src/Page/PageCanvas.tsx → 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<HTMLCanvasElement>;
 };
 
-export default function PageCanvas(props: PageCanvasProps) {
+export default function Canvas(props: CanvasProps) {
   const pageContext = usePageContext();
 
   invariant(pageContext, 'Unable to find Page context.');