Sort props, improve type safety

Author: wojtekmaj

packages/react-pdf/src/Document.spec.tsx

@@ -13,7 +13,6 @@ import { makeAsyncCallback, loadPDF, muteConsole, restoreConsole } from '../../.
 import type { PDFDocumentProxy } from 'pdfjs-dist';
 import type { DocumentContextType, ScrollPageIntoViewArgs } from './shared/types.js';
 import type LinkService from './LinkService.js';
-import type { OptionalContentConfig } from 'pdfjs-dist/types/src/display/optional_content_config.js';
 
 const pdfFile = await loadPDF('../../__mocks__/_pdf.pdf');
 const pdfFile2 = await loadPDF('../../__mocks__/_pdf2.pdf');
@@ -50,13 +49,13 @@ async function waitForAsync() {
 }
 
 describe('Document', () => {
-  // Loaded PDF file
-  let pdf5: PDFDocumentProxy;
-
   // Object with basic loaded PDF information that shall match after successful loading
   const desiredLoadedPdf: Partial<PDFDocumentProxy> = {};
   const desiredLoadedPdf2: Partial<PDFDocumentProxy> = {};
 
+  // Loaded PDF file
+  let pdf5: PDFDocumentProxy;
+
   beforeAll(async () => {
     const pdf = await pdfjs.getDocument({ data: pdfFile.arrayBuffer }).promise;
     desiredLoadedPdf._pdfInfo = pdf._pdfInfo;
@@ -472,13 +471,11 @@ describe('Document', () => {
 
       expect(child.dataset.scale).toBe('2');
     });
-    
+
     it('passes optionalContentConfig prop to its children', async () => {
       const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
-      const optionalContentConfig: OptionalContentConfig = await pdf5.getOptionalContentConfig();
-
-      expect(optionalContentConfig.getGroup('1R').visible).toBe(true);
 
+      const optionalContentConfig = await pdf5.getOptionalContentConfig();
       optionalContentConfig.setVisibility('1R', false);
 
       let documentContext: DocumentContextType | undefined;
@@ -500,8 +497,17 @@ describe('Document', () => {
 
       await onLoadSuccessPromise;
 
-      expect(documentContext?.optionalContentConfig).toBeDefined();
-      expect(documentContext!.optionalContentConfig!.getGroup('1R').visible).toBe(false);
+      if (!documentContext) {
+        throw new Error('Document context is not set');
+      }
+
+      expect(documentContext.optionalContentConfig).toBeDefined();
+
+      if (!documentContext.optionalContentConfig) {
+        throw new Error('Optional content config is not set');
+      }
+
+      expect(documentContext.optionalContentConfig.getGroup('1R').visible).toBe(false);
     });
   });
 

packages/react-pdf/src/Document.tsx

@@ -179,6 +179,13 @@ export type DocumentProps = {
    * @example () => alert('Document source retrieved!')
    */
   onSourceSuccess?: OnSourceSuccess;
+  /**
+   * An {@link OptionalContentConfig} created from {@link PDFDocumentProxy.getOptionalContentConfig}.
+   * If `null`, the configuration will be fetched automatically with the default visibility states set.
+   *
+   * @example pdfDocument.getOptionalContentConfig().then(optionalContentConfig => optionalContentConfig.setVisibility('1R', false));
+   */
+  optionalContentConfig?: OptionalContentConfig | null;
   /**
    * An object in which additional parameters to be passed to PDF.js can be defined. Most notably:
    * - `cMapUrl`;
@@ -205,18 +212,13 @@ export type DocumentProps = {
    * @example 90
    */
   rotate?: number | null;
-  /*
+  /**
    * Document scale.
    *
    * @default 1
    * @example 0.5
    */
   scale?: number;
-  /**
-   * An {@link OptionalContentConfig} created from {@link PDFDocumentProxy.getOptionalContentConfig}.
-   * If `null`, the configuration will be fetched automatically with the default visibility states set.
-   */
-  optionalContentConfig?: OptionalContentConfig | null;
 } & EventProps<DocumentCallback | false | undefined>;
 
 const defaultOnPassword: OnPassword = (callback, reason) => {
@@ -272,11 +274,11 @@ const Document: React.ForwardRefExoticComponent<
     onPassword = defaultOnPassword,
     onSourceError: onSourceErrorProps,
     onSourceSuccess: onSourceSuccessProps,
+    optionalContentConfig,
     options,
     renderMode,
     rotate,
     scale,
-    optionalContentConfig,
     ...otherProps
   },
   ref,
@@ -591,24 +593,24 @@ const Document: React.ForwardRefExoticComponent<
       imageResourcesPath,
       linkService: linkService.current,
       onItemClick,
+      optionalContentConfig,
       pdf,
       registerPage,
       renderMode,
       rotate,
       scale,
       unregisterPage,
-      optionalContentConfig,
     }),
     [
       imageResourcesPath,
       onItemClick,
+      optionalContentConfig,
       pdf,
       registerPage,
       renderMode,
       rotate,
       scale,
       unregisterPage,
-      optionalContentConfig,
     ],
   );
 

packages/react-pdf/src/Page.spec.tsx

@@ -15,7 +15,6 @@ import DocumentContext from './DocumentContext.js';
 
 import type { PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist';
 import type { DocumentContextType, PageCallback } from './shared/types.js';
-import type { OptionalContentConfig } from 'pdfjs-dist/types/src/display/optional_content_config.js';
 
 const pdfFile = await loadPDF('../../__mocks__/_pdf.pdf');
 const pdfFile2 = await loadPDF('../../__mocks__/_pdf2.pdf');
@@ -739,7 +738,7 @@ describe('Page', () => {
       expect(annotationLayer).not.toBeInTheDocument();
     });
 
-    it('requests page to be rendered with default visibility for optionalContentConfig', async () => {
+    it('requests page to be rendered with default visibility given no optionalContentConfig', async () => {
       const { func: onRenderSuccess, promise: onRenderSuccessPromise } =
         makeAsyncCallback<[PageCallback]>();
 
@@ -754,36 +753,46 @@ describe('Page', () => {
       await onRenderSuccessPromise;
 
       const pageCanvas = container.querySelector('.react-pdf__Page__canvas') as HTMLCanvasElement;
-      const context: CanvasRenderingContext2D = pageCanvas.getContext('2d')!;
-      const imageData: ImageData = context.getImageData(100, 100, 1, 1);
+      const context = pageCanvas.getContext('2d');
 
-      // should render green pixel because the layer is visible
+      if (!context) {
+        throw new Error('CanvasRenderingContext2D is not available');
+      }
+
+      const imageData = context.getImageData(100, 100, 1, 1);
+
+      // Should render green pixel because the layer is visible
       expect(imageData.data).toStrictEqual(new Uint8ClampedArray([191, 255, 191, 255]));
     });
 
     it('requests page to be rendered with given optionalContentConfig', async () => {
       const { func: onRenderSuccess, promise: onRenderSuccessPromise } =
         makeAsyncCallback<[PageCallback]>();
-      const optionalContentConfig: OptionalContentConfig = await pdf5.getOptionalContentConfig();
 
+      const optionalContentConfig = await pdf5.getOptionalContentConfig();
       optionalContentConfig.setVisibility('1R', false);
 
       const { container } = renderWithContext(
         <Page onRenderSuccess={onRenderSuccess} pageIndex={0} />,
         {
-          optionalContentConfig,
           linkService,
+          optionalContentConfig,
           pdf: pdf5,
         },
       );
 
       await onRenderSuccessPromise;
 
       const pageCanvas = container.querySelector('.react-pdf__Page__canvas') as HTMLCanvasElement;
-      const context: CanvasRenderingContext2D = pageCanvas.getContext('2d')!;
-      const imageData: ImageData = context.getImageData(100, 100, 1, 1);
+      const context = pageCanvas.getContext('2d');
+
+      if (!context) {
+        throw new Error('CanvasRenderingContext2D is not available');
+      }
+
+      const imageData = context.getImageData(100, 100, 1, 1);
 
-      // should render white pixel because the layer is hidden
+      // Should render white pixel because the layer is hidden
       expect(imageData.data).toStrictEqual(new Uint8ClampedArray([255, 255, 255, 255]));
     });
   });

packages/react-pdf/src/Page.tsx

@@ -333,6 +333,7 @@ export default function Page(props: PageProps): React.ReactElement {
     onRenderSuccess: onRenderSuccessProps,
     onRenderTextLayerError: onRenderTextLayerErrorProps,
     onRenderTextLayerSuccess: onRenderTextLayerSuccessProps,
+    optionalContentConfig,
     pageIndex: pageIndexProps,
     pageNumber: pageNumberProps,
     pdf,
@@ -345,7 +346,6 @@ export default function Page(props: PageProps): React.ReactElement {
     scale: scaleProps = defaultScale,
     unregisterPage,
     width,
-    optionalContentConfig,
     ...otherProps
   } = mergedProps;
 
@@ -509,14 +509,14 @@ export default function Page(props: PageProps): React.ReactElement {
             onRenderSuccess: onRenderSuccessProps,
             onRenderTextLayerError: onRenderTextLayerErrorProps,
             onRenderTextLayerSuccess: onRenderTextLayerSuccessProps,
+            optionalContentConfig,
             page,
             pageIndex,
             pageNumber,
             renderForms,
             renderTextLayer: renderTextLayerProps,
             rotate,
             scale,
-            optionalContentConfig,
           }
         : null,
     [
@@ -536,14 +536,14 @@ export default function Page(props: PageProps): React.ReactElement {
       onRenderSuccessProps,
       onRenderTextLayerErrorProps,
       onRenderTextLayerSuccessProps,
+      optionalContentConfig,
       page,
       pageIndex,
       pageNumber,
       renderForms,
       renderTextLayerProps,
       rotate,
       scale,
-      optionalContentConfig,
     ],
   );
 

packages/react-pdf/src/Page/Canvas.tsx

@@ -13,8 +13,8 @@ import {
   cancelRunningTask,
   getDevicePixelRatio,
   isCancelException,
-  makePageCallback,
   isProvided,
+  makePageCallback,
 } from '../shared/utils.js';
 
 import type { RenderParameters } from 'pdfjs-dist/types/src/display/api.js';
@@ -37,12 +37,12 @@ export default function Canvas(props: CanvasProps): React.ReactElement {
     devicePixelRatio = getDevicePixelRatio(),
     onRenderError: onRenderErrorProps,
     onRenderSuccess: onRenderSuccessProps,
+    optionalContentConfig,
     page,
     renderForms,
     renderTextLayer,
     rotate,
     scale,
-    optionalContentConfig,
   } = mergedProps;
   const { canvasRef } = props;
 

packages/react-pdf/src/shared/types.ts

@@ -17,7 +17,14 @@ import type { AnnotationLayerParameters } from 'pdfjs-dist/types/src/display/ann
 import type { OptionalContentConfig } from 'pdfjs-dist/types/src/display/optional_content_config.js';
 import type LinkService from '../LinkService.js';
 
-export type { PasswordResponses, StructTreeNode, TextContent, TextItem, TextMarkedContent };
+export type {
+  OptionalContentConfig,
+  PasswordResponses,
+  StructTreeNode,
+  TextContent,
+  TextItem,
+  TextMarkedContent,
+};
 
 type NullableObject<T extends object> = { [P in keyof T]: T[P] | null };
 
@@ -135,12 +142,12 @@ export type DocumentContextType = {
   imageResourcesPath?: ImageResourcesPath;
   linkService: LinkService;
   onItemClick?: (args: OnItemClickArgs) => void;
+  optionalContentConfig?: OptionalContentConfig | null;
   pdf?: PDFDocumentProxy | false;
   registerPage: RegisterPage;
   renderMode?: RenderMode;
   rotate?: number | null;
   unregisterPage: UnregisterPage;
-  optionalContentConfig?: OptionalContentConfig | null;
 } | null;
 
 export type PageContextType = {
@@ -160,14 +167,14 @@ export type PageContextType = {
   onRenderSuccess?: OnRenderSuccess;
   onRenderTextLayerError?: OnRenderTextLayerError;
   onRenderTextLayerSuccess?: OnRenderTextLayerSuccess;
+  optionalContentConfig?: OptionalContentConfig | null;
   page: PDFPageProxy | false | undefined;
   pageIndex: number;
   pageNumber: number;
   renderForms: boolean;
   renderTextLayer: boolean;
   rotate: number;
   scale: number;
-  optionalContentConfig?: OptionalContentConfig | null;
 } | null;
 
 export type OutlineContextType = {