Merge branch 'main' into main

Author: svd-sea

packages/react-pdf/README.md

@@ -1,45 +1,30 @@
 {
   "name": "react-pdf",
-  "version": "9.2.1",
+  "version": "10.0.1",
   "description": "Display PDFs in your React app as easily as if they were images.",
   "type": "module",
   "sideEffects": [
     "*.css"
   ],
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
+  "main": "./dist/index.js",
   "source": "./src/index.ts",
-  "types": "./dist/cjs/index.d.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    },
-    "./dist/Page/AnnotationLayer.css": {
-      "import": "./dist/esm/Page/AnnotationLayer.css",
-      "require": "./dist/cjs/Page/AnnotationLayer.css"
-    },
-    "./dist/Page/TextLayer.css": {
-      "import": "./dist/esm/Page/TextLayer.css",
-      "require": "./dist/cjs/Page/TextLayer.css"
-    },
+    ".": "./dist/index.js",
     "./*": "./*"
   },
   "scripts": {
     "build": "yarn build-js && yarn copy-styles",
-    "build-js": "yarn build-js-esm && yarn build-js-cjs && yarn build-js-cjs-package",
-    "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm",
-    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs --moduleResolution node --verbatimModuleSyntax false",
-    "build-js-cjs-package": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
+    "build-js": "tsc --project tsconfig.build.json",
     "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true })\"",
-    "copy-styles": "cpy 'src/**/*.css' dist/esm && cpy 'src/**/*.css' dist/cjs",
+    "copy-styles": "cpy 'src/**/*.css' dist",
     "format": "biome format",
     "lint": "biome lint",
     "prepack": "yarn clean && yarn build",
     "test": "yarn lint && yarn tsc && yarn format && yarn unit",
     "tsc": "tsc",
     "unit": "vitest",
-    "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & node --eval \"fs.watch('src', () => child_process.exec('yarn copy-styles'))\""
+    "watch": "yarn build-js --watch & node --eval \"fs.watch('src', () => child_process.exec('yarn copy-styles'))\""
   },
   "keywords": [
     "pdf",
@@ -55,9 +40,9 @@
     "clsx": "^2.0.0",
     "dequal": "^2.0.3",
     "make-cancellable-promise": "^2.0.0",
-    "make-event-props": "^1.6.0",
-    "merge-refs": "^1.3.0",
-    "pdfjs-dist": "4.8.69",
+    "make-event-props": "^2.0.0",
+    "merge-refs": "^2.0.0",
+    "pdfjs-dist": "5.3.31",
     "tiny-invariant": "^1.0.0",
     "warning": "^4.0.0"
   },

packages/react-pdf/package.json

@@ -24,11 +24,15 @@ const OK = Symbol('OK');
 function ChildInternal({
   renderMode,
   rotate,
+  scale,
 }: {
   renderMode?: string | null;
   rotate?: number | null;
+  scale?: number | null;
 }) {
-  return <div data-testid="child" data-rendermode={renderMode} data-rotate={rotate} />;
+  return (
+    <div data-testid="child" data-rendermode={renderMode} data-rotate={rotate} data-scale={scale} />
+  );
 }
 
 function Child(props: React.ComponentProps<typeof ChildInternal>) {
@@ -392,6 +396,24 @@ describe('Document', () => {
       expect(child.dataset.rotate).toBe('90');
     });
 
+    it('passes scale prop to its children', async () => {
+      const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
+
+      const { container } = render(
+        <Document file={pdfFile.file} loading="Loading" onLoadSuccess={onLoadSuccess} scale={1.5}>
+          <Child />
+        </Document>,
+      );
+
+      expect.assertions(1);
+
+      await onLoadSuccessPromise;
+
+      const child = getByTestId(container, 'child');
+
+      expect(child.dataset.scale).toBe('1.5');
+    });
+
     it('does not overwrite renderMode prop in its children when given renderMode prop to both Document and its children', async () => {
       const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
 
@@ -433,6 +455,24 @@ describe('Document', () => {
       expect(child.dataset.rotate).toBe('180');
     });
 
+    it('does not overwrite scale prop in its children when given scale prop to both Document and its children', async () => {
+      const { func: onLoadSuccess, promise: onLoadSuccessPromise } = makeAsyncCallback();
+
+      const { container } = render(
+        <Document file={pdfFile.file} loading="Loading" onLoadSuccess={onLoadSuccess} scale={1.5}>
+          <Child scale={2} />
+        </Document>,
+      );
+
+      expect.assertions(1);
+
+      await onLoadSuccessPromise;
+
+      const child = getByTestId(container, 'child');
+
+      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();

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

@@ -205,6 +205,12 @@ 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.
@@ -268,6 +274,7 @@ const Document: React.ForwardRefExoticComponent<
     options,
     renderMode,
     rotate,
+    scale,
     optionalContentConfig,
     ...otherProps
   },
@@ -587,6 +594,7 @@ const Document: React.ForwardRefExoticComponent<
       registerPage,
       renderMode,
       rotate,
+      scale,
       unregisterPage,
       optionalContentConfig,
     }),
@@ -597,6 +605,7 @@ const Document: React.ForwardRefExoticComponent<
       registerPage,
       renderMode,
       rotate,
+      scale,
       unregisterPage,
       optionalContentConfig,
     ],
@@ -635,9 +644,6 @@ const Document: React.ForwardRefExoticComponent<
       className={clsx('react-pdf__Document', className)}
       // Assertion is needed for React 18 compatibility
       ref={inputRef as React.Ref<HTMLDivElement>}
-      style={{
-        ['--scale-factor' as string]: '1',
-      }}
       {...eventProps}
     >
       {renderContent()}

packages/react-pdf/src/Document.tsx

@@ -627,13 +627,19 @@ export default function Page(props: PageProps): React.ReactElement {
       data-page-number={pageNumber}
       // Assertion is needed for React 18 compatibility
       ref={mergeRefs(inputRef as React.Ref<HTMLDivElement>, pageElement)}
-      style={{
-        ['--scale-factor' as string]: `${scale}`,
-        backgroundColor: canvasBackground || 'white',
-        position: 'relative',
-        minWidth: 'min-content',
-        minHeight: 'min-content',
-      }}
+      style={
+        {
+          '--scale-round-x': '1px',
+          '--scale-round-y': '1px',
+          '--scale-factor': '1',
+          '--user-unit': `${scale}`,
+          '--total-scale-factor': 'calc(var(--scale-factor) * var(--user-unit))',
+          backgroundColor: canvasBackground || 'white',
+          position: 'relative',
+          minWidth: 'min-content',
+          minHeight: 'min-content',
+        } as React.CSSProperties
+      }
       {...eventProps}
     >
       {renderContent()}

packages/react-pdf/src/Page.tsx

@@ -115,7 +115,7 @@
   background-image: var(--annotation-unfocused-field-background);
   border: 2px solid var(--input-unfocused-border-color);
   box-sizing: border-box;
-  font: calc(9px * var(--scale-factor)) sans-serif;
+  font: calc(9px * var(--total-scale-factor)) sans-serif;
   height: 100%;
   margin: 0;
   vertical-align: top;
@@ -246,21 +246,21 @@
 
 .annotationLayer .popupWrapper {
   position: absolute;
-  font-size: calc(9px * var(--scale-factor));
+  font-size: calc(9px * var(--total-scale-factor));
   width: 100%;
-  min-width: calc(180px * var(--scale-factor));
+  min-width: calc(180px * var(--total-scale-factor));
   pointer-events: none;
 }
 
 .annotationLayer .popup {
   position: absolute;
-  max-width: calc(180px * var(--scale-factor));
+  max-width: calc(180px * var(--total-scale-factor));
   background-color: rgba(255, 255, 153, 1);
-  box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
+  box-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor))
     rgba(136, 136, 136, 1);
-  border-radius: calc(2px * var(--scale-factor));
-  padding: calc(6px * var(--scale-factor));
-  margin-left: calc(5px * var(--scale-factor));
+  border-radius: calc(2px * var(--total-scale-factor));
+  padding: calc(6px * var(--total-scale-factor));
+  margin-left: calc(5px * var(--total-scale-factor));
   cursor: pointer;
   font: message-box;
   white-space: normal;
@@ -269,7 +269,7 @@
 }
 
 .annotationLayer .popup > * {
-  font-size: calc(9px * var(--scale-factor));
+  font-size: calc(9px * var(--total-scale-factor));
 }
 
 .annotationLayer .popup h1 {
@@ -278,18 +278,18 @@
 
 .annotationLayer .popupDate {
   display: inline-block;
-  margin-left: calc(5px * var(--scale-factor));
+  margin-left: calc(5px * var(--total-scale-factor));
 }
 
 .annotationLayer .popupContent {
   border-top: 1px solid rgba(51, 51, 51, 1);
-  margin-top: calc(2px * var(--scale-factor));
-  padding-top: calc(2px * var(--scale-factor));
+  margin-top: calc(2px * var(--total-scale-factor));
+  padding-top: calc(2px * var(--total-scale-factor));
 }
 
 .annotationLayer .richText > * {
   white-space: pre-wrap;
-  font-size: calc(9px * var(--scale-factor));
+  font-size: calc(9px * var(--total-scale-factor));
 }
 
 .annotationLayer .highlightAnnotation,

packages/react-pdf/src/Page/AnnotationLayer.css

@@ -15,6 +15,13 @@ export type { DocumentProps } from './Document.js';
 export type { OutlineProps } from './Outline.js';
 export type { PageProps } from './Page.js';
 export type { ThumbnailProps } from './Thumbnail.js';
+export type {
+  PasswordResponses as PasswordResponsesType,
+  StructTreeNode,
+  TextContent,
+  TextItem,
+  TextMarkedContent,
+} from './shared/types.js';
 
 import { displayWorkerWarning } from './shared/utils.js';
 

packages/react-pdf/src/index.ts

@@ -3,8 +3,8 @@
 import { useCallback, useId, useState } from 'react';
 import { useResizeObserver } from '@wojtekmaj/react-hooks';
 import { pdfjs, Document, Page } from 'react-pdf';
-import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
-import 'react-pdf/dist/esm/Page/TextLayer.css';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
 
 import './Sample.css';
 

sample/next-app/app/Sample.tsx

@@ -1,4 +1,10 @@
-import Sample from './Sample.js';
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const Sample = dynamic(() => import('./Sample.js'), {
+  ssr: false,
+});
 
 export default function Page() {
   return <Sample />;