[breaking] Update pdfjs-dist to 4.0.379

wojtekmaj · Jan 4, 2024 · d82d593 · d82d593
1 parent d460425
commit d82d593
Show file tree

Hide file tree

Showing 29 changed files with 254 additions and 435 deletions.
diff --git a/packages/react-pdf/README.md b/packages/react-pdf/README.md
diff --git 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",
     "tiny-warning": "^1.0.0"

diff --git a/packages/react-pdf/src/Document.tsx b/packages/react-pdf/src/Document.tsx
@@ -199,12 +199,10 @@ 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 no longer maintained and may 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 'svg'
+   * @example 'custom'
    */
   renderMode?: RenderMode;
   /**

diff --git a/packages/react-pdf/src/Page.spec.tsx b/packages/react-pdf/src/Page.spec.tsx
@@ -1,4 +1,3 @@
-import { Blob } from 'node:buffer';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import React, { createRef } from 'react';
 import { fireEvent, render } from '@testing-library/react';
@@ -275,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<HTMLCanvasElement>();
@@ -394,15 +393,12 @@ describe('Page', () => {
       expect(page).toMatchObject(desiredLoadedPage);
     });
 
-    it('requests page to be rendered with default rotation when given nothing', async () => {
-      const originalBlob = globalThis.Blob;
-      globalThis.Blob = Blob as unknown as typeof globalThis.Blob;
-
+    it.skip('requests page to be rendered with default rotation when given nothing', async () => {
       const { func: onRenderSuccess, promise: onRenderSuccessPromise } =
         makeAsyncCallback<[PageCallback]>();
 
       const { container } = renderWithContext(
-        <Page onRenderSuccess={onRenderSuccess} pageIndex={0} renderMode="svg" />,
+        <Page onRenderSuccess={onRenderSuccess} pageIndex={0} />,
         {
           linkService,
           pdf,
@@ -411,29 +407,24 @@ describe('Page', () => {
 
       const [page] = await onRenderSuccessPromise;
 
-      const pageSvg = container.querySelector('.react-pdf__Page__svg') as SVGElement;
+      const pageCanvas = container.querySelector('.react-pdf__Page__canvas') as HTMLCanvasElement;
 
-      const { width, height } = window.getComputedStyle(pageSvg);
+      const { width, height } = window.getComputedStyle(pageCanvas);
 
       const viewport = page.getViewport({ scale: 1 });
 
-      // Expect the SVG layer not to be rotated
+      // Expect the canvas layer not to be rotated
       expect(parseInt(width, 10)).toBe(Math.floor(viewport.width));
       expect(parseInt(height, 10)).toBe(Math.floor(viewport.height));
-
-      globalThis.Blob = originalBlob;
     });
 
-    it('requests page to be rendered with given rotation when given rotate prop', async () => {
-      const originalBlob = globalThis.Blob;
-      globalThis.Blob = Blob as unknown as typeof globalThis.Blob;
-
+    it.skip('requests page to be rendered with given rotation when given rotate prop', async () => {
       const { func: onRenderSuccess, promise: onRenderSuccessPromise } =
         makeAsyncCallback<[PageCallback]>();
       const rotate = 90;
 
       const { container } = renderWithContext(
-        <Page onRenderSuccess={onRenderSuccess} pageIndex={0} renderMode="svg" rotate={rotate} />,
+        <Page onRenderSuccess={onRenderSuccess} pageIndex={0} rotate={rotate} />,
         {
           linkService,
           pdf,
@@ -442,17 +433,15 @@ describe('Page', () => {
 
       const [page] = await onRenderSuccessPromise;
 
-      const pageSvg = container.querySelector('.react-pdf__Page__svg') as SVGElement;
+      const pageCanvas = container.querySelector('.react-pdf__Page__canvas') as HTMLCanvasElement;
 
-      const { width, height } = window.getComputedStyle(pageSvg);
+      const { width, height } = window.getComputedStyle(pageCanvas);
 
       const viewport = page.getViewport({ scale: 1, rotation: rotate });
 
-      // Expect the SVG layer to be rotated
+      // Expect the canvas layer to be rotated
       expect(parseInt(width, 10)).toBe(Math.floor(viewport.width));
       expect(parseInt(height, 10)).toBe(Math.floor(viewport.height));
-
-      globalThis.Blob = originalBlob;
     });
 
     it('requests page to be rendered in canvas mode by default', async () => {
@@ -486,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 () => {
@@ -546,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(
-        <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();
 
@@ -676,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(
-        <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();
 

diff --git a/packages/react-pdf/src/Page.tsx b/packages/react-pdf/src/Page.tsx
@@ -12,8 +12,7 @@ import warning from 'tiny-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 `<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
@@ -271,12 +270,10 @@ 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 no longer maintained and may 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 'svg'
+   * @example 'custom'
    */
   renderMode?: RenderMode;
   /**
@@ -569,8 +566,6 @@ const Page: React.FC<PageProps> = 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<PageProps> = function Page(props) {
       }
       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} />;
     }
   }
 

diff --git a/...es/react-pdf/src/Page/PageCanvas.spec.tsx → packages/react-pdf/src/Page/Canvas.spec.tsx b/...es/react-pdf/src/Page/PageCanvas.spec.tsx → 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<PageConte
   };
 }
 
-describe('PageCanvas', () => {
+describe('Canvas', () => {
   // Loaded page
   let page: PDFPageProxy;
   let pageWithRendererMocked: PDFPageProxy;
@@ -59,7 +59,7 @@ describe('PageCanvas', () => {
 
       muteConsole();
 
-      renderWithContext(<PageCanvas />, {
+      renderWithContext(<Canvas />, {
         onRenderSuccess,
         page: pageWithRendererMocked,
         scale: 1,
@@ -77,7 +77,7 @@ describe('PageCanvas', () => {
 
       muteConsole();
 
-      renderWithContext(<PageCanvas />, {
+      renderWithContext(<Canvas />, {
         onRenderError,
         page: failingPage,
         scale: 1,
@@ -95,7 +95,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,
       });
@@ -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(<PageCanvas />, {
+      const { container } = renderWithContext(<Canvas />, {
         onRenderSuccess,
         page: pageWithRendererMocked,
         renderTextLayer: false,
@@ -124,7 +124,7 @@ describe('PageCanvas', () => {
       const { func: onGetStructTreeSuccess, promise: onGetStructTreeSuccessPromise } =
         makeAsyncCallback();
 
-      const { container } = renderWithContext(<PageCanvas />, {
+      const { container } = renderWithContext(<Canvas />, {
         onGetStructTreeSuccess,
         page: pageWithRendererMocked,
         renderTextLayer: true,

diff --git a/packages/react-pdf/src/Page/PageCanvas.tsx → packages/react-pdf/src/Page/Canvas.tsx b/packages/react-pdf/src/Page/PageCanvas.tsx → packages/react-pdf/src/Page/Canvas.tsx
@@ -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.');