react-pdf - npm Package Compare versions

Comparing version 7.6.0 to 7.7.0

dist/cjs/Document.d.ts

@@ -139,6 +139,6 @@ import React from 'react';
      *
-     * **Warning**: SVG render mode is no longer maintained and may be removed in the future.
+     * **Warning**: SVG render mode is deprecated and will be removed in the future.
      *
      * @default 'canvas'
-     * @example 'svg'
+     * @example 'custom'
      */
@@ -318,6 +318,6 @@ renderMode?: RenderMode;
      *
-     * **Warning**: SVG render mode is no longer maintained and may be removed in the future.
+     * **Warning**: SVG render mode is deprecated and will be removed in the future.
      *
      * @default 'canvas'
-     * @example 'svg'
+     * @example 'custom'
      */
@@ -324,0 +324,0 @@ renderMode?: RenderMode | undefined;

dist/cjs/Document.js

@@ -56,3 +56,4 @@ "use strict";
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
-const tiny_warning_1 = __importDefault(require("tiny-warning"));
+const warning_1 = __importDefault(require("warning"));
+const dequal_1 = require("dequal");
 const pdfjs_js_1 = __importDefault(require("./pdfjs.js"));
@@ -84,2 +85,7 @@ const DocumentContext_js_1 = __importDefault(require("./DocumentContext.js"));
 };
+function isParameterObject(file) {
+    return (typeof file === 'object' &&
+        file !== null &&
+        ('data' in file || 'range' in file || 'url' in file));
+}
 /**
@@ -96,2 +102,17 @@ * Loads a document passed using `file` prop.
     const pages = (0, react_1.useRef)([]);
+    const prevFile = (0, react_1.useRef)();
+    const prevOptions = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        if (file && file !== prevFile.current && isParameterObject(file)) {
+            (0, warning_1.default)(!(0, dequal_1.dequal)(file, prevFile.current), `File prop passed to <Document /> changed, but it's equal to previous one. This might result in unnecessary reloads. Consider memoizing the value passed to "file" prop.`);
+            prevFile.current = file;
+        }
+    }, [file]);
+    // Detect non-memoized changes in options prop
+    (0, react_1.useEffect)(() => {
+        if (options && options !== prevOptions.current) {
+            (0, warning_1.default)(!(0, dequal_1.dequal)(options, prevOptions.current), `Options prop passed to <Document /> changed, but it's equal to previous one. This might result in unnecessary reloads. Consider memoizing the value passed to "options" prop.`);
+            prevOptions.current = options;
+        }
+    }, [options]);
     const viewer = (0, react_1.useRef)({
@@ -113,3 +134,3 @@ // Handling jumping to internal links target
             }
-            (0, tiny_warning_1.default)(false, `An internal link leading to page ${pageNumber} was clicked, but neither <Document> was provided with onItemClick nor it was able to find the page within itself. Either provide onItemClick to <Document> and handle navigating by yourself or ensure that all pages are rendered within <Document>.`);
+            (0, warning_1.default)(false, `An internal link leading to page ${pageNumber} was clicked, but neither <Document> was provided with onItemClick nor it was able to find the page within itself. Either provide onItemClick to <Document> and handle navigating by yourself or ensure that all pages are rendered within <Document>.`);
         },
@@ -138,3 +159,3 @@ });
         }
-        (0, tiny_warning_1.default)(false, sourceError.toString());
+        (0, warning_1.default)(false, sourceError.toString());
         if (onSourceErrorProps) {
@@ -182,3 +203,3 @@ onSourceErrorProps(sourceError);
         (0, tiny_invariant_1.default)(typeof file === 'object', 'Invalid parameter in file, need either Uint8Array, string or a parameter object');
-        (0, tiny_invariant_1.default)('data' in file || 'range' in file || 'url' in file, 'Invalid parameter object: need either .data, .range or .url');
+        (0, tiny_invariant_1.default)(isParameterObject(file), 'Invalid parameter object: need either .data, .range or .url');
         // File .url is a string
@@ -243,3 +264,3 @@ if ('url' in file && typeof file.url === 'string') {
         }
-        (0, tiny_warning_1.default)(false, pdfError.toString());
+        (0, warning_1.default)(false, pdfError.toString());
         if (onLoadErrorProps) {
@@ -246,0 +267,0 @@ onLoadErrorProps(pdfError);

dist/cjs/Outline.js

@@ -47,3 +47,3 @@ "use strict";
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
-const tiny_warning_1 = __importDefault(require("tiny-warning"));
+const warning_1 = __importDefault(require("warning"));
 const OutlineContext_js_1 = __importDefault(require("./OutlineContext.js"));
@@ -87,3 +87,3 @@ const OutlineItem_js_1 = __importDefault(require("./OutlineItem.js"));
         }
-        (0, tiny_warning_1.default)(false, outlineError.toString());
+        (0, warning_1.default)(false, outlineError.toString());
         if (onLoadErrorProps) {
@@ -90,0 +90,0 @@ onLoadErrorProps(outlineError);

dist/cjs/Page.d.ts

@@ -219,6 +219,6 @@ import React from 'react';
      *
-     * **Warning**: SVG render mode is no longer maintained and may be removed in the future.
+     * **Warning**: SVG render mode is deprecated and will be removed in the future.
      *
      * @default 'canvas'
-     * @example 'svg'
+     * @example 'custom'
      */
@@ -225,0 +225,0 @@ renderMode?: RenderMode;

dist/cjs/Page.js

@@ -48,3 +48,3 @@ "use strict";
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
-const tiny_warning_1 = __importDefault(require("tiny-warning"));
+const warning_1 = __importDefault(require("warning"));
 const PageContext_js_1 = __importDefault(require("./PageContext.js"));
@@ -137,3 +137,3 @@ const Message_js_1 = __importDefault(require("./Message.js"));
         }
-        (0, tiny_warning_1.default)(false, pageError.toString());
+        (0, warning_1.default)(false, pageError.toString());
         if (onLoadErrorProps) {
@@ -140,0 +140,0 @@ onLoadErrorProps(pageError);

dist/cjs/Page/AnnotationLayer.js

@@ -34,3 +34,3 @@ "use strict";
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
-const tiny_warning_1 = __importDefault(require("tiny-warning"));
+const warning_1 = __importDefault(require("warning"));
 const pdfjs_js_1 = __importDefault(require("../pdfjs.js"));
@@ -52,3 +52,3 @@ const useDocumentContext_js_1 = __importDefault(require("../shared/hooks/useDocumentContext.js"));
     const layerElement = (0, react_1.useRef)(null);
-    (0, tiny_warning_1.default)(parseInt(window.getComputedStyle(document.body).getPropertyValue('--react-pdf-annotation-layer'), 10) === 1, 'AnnotationLayer styles not found. Read more: https://github.com/wojtekmaj/react-pdf#support-for-annotations');
+    (0, warning_1.default)(parseInt(window.getComputedStyle(document.body).getPropertyValue('--react-pdf-annotation-layer'), 10) === 1, 'AnnotationLayer styles not found. Read more: https://github.com/wojtekmaj/react-pdf#support-for-annotations');
     function onLoadSuccess() {
@@ -68,3 +68,3 @@ if (!annotations) {
         }
-        (0, tiny_warning_1.default)(false, annotationsError.toString());
+        (0, warning_1.default)(false, annotationsError.toString());
         if (onGetAnnotationsErrorProps) {
@@ -115,3 +115,3 @@ onGetAnnotationsErrorProps(annotationsError);
     function onRenderError(error) {
-        (0, tiny_warning_1.default)(false, `${error}`);
+        (0, warning_1.default)(false, `${error}`);
         if (onRenderAnnotationLayerErrorProps) {
@@ -118,0 +118,0 @@ onRenderAnnotationLayerErrorProps(error);

dist/cjs/Page/PageCanvas.js

@@ -33,3 +33,3 @@ "use strict";
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
-const tiny_warning_1 = __importDefault(require("tiny-warning"));
+const warning_1 = __importDefault(require("warning"));
 const pdfjs_js_1 = __importDefault(require("../pdfjs.js"));
@@ -67,3 +67,3 @@ const StructTree_js_1 = __importDefault(require("../StructTree.js"));
         }
-        (0, tiny_warning_1.default)(false, error.toString());
+        (0, warning_1.default)(false, error.toString());
         if (onRenderErrorProps) {
@@ -70,0 +70,0 @@ onRenderErrorProps(error);

dist/cjs/Page/PageSVG.js

@@ -32,3 +32,3 @@ "use strict";
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
-const tiny_warning_1 = __importDefault(require("tiny-warning"));
+const warning_1 = __importDefault(require("warning"));
 const pdfjs_js_1 = __importDefault(require("../pdfjs.js"));
@@ -68,3 +68,3 @@ const usePageContext_js_1 = __importDefault(require("../shared/hooks/usePageContext.js"));
         }
-        (0, tiny_warning_1.default)(false, svgError.toString());
+        (0, warning_1.default)(false, svgError.toString());
         if (onRenderErrorProps) {
@@ -71,0 +71,0 @@ onRenderErrorProps(svgError);

dist/cjs/Page/TextLayer.js

@@ -34,3 +34,3 @@ "use strict";
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
-const tiny_warning_1 = __importDefault(require("tiny-warning"));
+const warning_1 = __importDefault(require("warning"));
 const pdfjs_js_1 = __importDefault(require("../pdfjs.js"));
@@ -52,3 +52,3 @@ const usePageContext_js_1 = __importDefault(require("../shared/hooks/usePageContext.js"));
     const endElement = (0, react_1.useRef)();
-    (0, tiny_warning_1.default)(parseInt(window.getComputedStyle(document.body).getPropertyValue('--react-pdf-text-layer'), 10) === 1, 'TextLayer styles not found. Read more: https://github.com/wojtekmaj/react-pdf#support-for-text-layer');
+    (0, warning_1.default)(parseInt(window.getComputedStyle(document.body).getPropertyValue('--react-pdf-text-layer'), 10) === 1, 'TextLayer styles not found. Read more: https://github.com/wojtekmaj/react-pdf#support-for-text-layer');
     /**
@@ -74,3 +74,3 @@ * Called when a page text content is read successfully
         }
-        (0, tiny_warning_1.default)(false, textContentError.toString());
+        (0, warning_1.default)(false, textContentError.toString());
         if (onGetTextError) {
@@ -125,3 +125,3 @@ onGetTextError(textContentError);
     const onRenderError = (0, react_1.useCallback)((error) => {
-        (0, tiny_warning_1.default)(false, error.toString());
+        (0, warning_1.default)(false, error.toString());
         if (onRenderTextLayerError) {
@@ -128,0 +128,0 @@ onRenderTextLayerError(error);

dist/cjs/shared/utils.js

@@ -8,3 +8,3 @@ "use strict";
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
-const tiny_warning_1 = __importDefault(require("tiny-warning"));
+const warning_1 = __importDefault(require("warning"));
 /**
@@ -89,7 +89,7 @@ * Checks if we're running in a browser environment.
 function displayCORSWarning() {
-    (0, tiny_warning_1.default)(!exports.isLocalFileSystem, `Loading PDF as base64 strings/URLs may not work on protocols other than HTTP/HTTPS. ${allowFileAccessFromFilesTip}`);
+    (0, warning_1.default)(!exports.isLocalFileSystem, `Loading PDF as base64 strings/URLs may not work on protocols other than HTTP/HTTPS. ${allowFileAccessFromFilesTip}`);
 }
 exports.displayCORSWarning = displayCORSWarning;
 function displayWorkerWarning() {
-    (0, tiny_warning_1.default)(!exports.isLocalFileSystem, `Loading PDF.js worker may not work on protocols other than HTTP/HTTPS. ${allowFileAccessFromFilesTip}`);
+    (0, warning_1.default)(!exports.isLocalFileSystem, `Loading PDF.js worker may not work on protocols other than HTTP/HTTPS. ${allowFileAccessFromFilesTip}`);
 }
@@ -96,0 +96,0 @@ exports.displayWorkerWarning = displayWorkerWarning;

dist/cjs/StructTree.js

@@ -32,3 +32,3 @@ "use strict";
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
-const tiny_warning_1 = __importDefault(require("tiny-warning"));
+const warning_1 = __importDefault(require("warning"));
 const StructTreeItem_js_1 = __importDefault(require("./StructTreeItem.js"));
@@ -59,3 +59,3 @@ const usePageContext_js_1 = __importDefault(require("./shared/hooks/usePageContext.js"));
         }
-        (0, tiny_warning_1.default)(false, structTreeError.toString());
+        (0, warning_1.default)(false, structTreeError.toString());
         if (onGetStructTreeErrorProps) {
@@ -62,0 +62,0 @@ onGetStructTreeErrorProps(structTreeError);

dist/esm/Document.d.ts

@@ -139,6 +139,6 @@ import React from 'react';
      *
-     * **Warning**: SVG render mode is no longer maintained and may be removed in the future.
+     * **Warning**: SVG render mode is deprecated and will be removed in the future.
      *
      * @default 'canvas'
-     * @example 'svg'
+     * @example 'custom'
      */
@@ -318,6 +318,6 @@ renderMode?: RenderMode;
      *
-     * **Warning**: SVG render mode is no longer maintained and may be removed in the future.
+     * **Warning**: SVG render mode is deprecated and will be removed in the future.
      *
      * @default 'canvas'
-     * @example 'svg'
+     * @example 'custom'
      */
@@ -324,0 +324,0 @@ renderMode?: RenderMode | undefined;

dist/esm/Document.js

@@ -28,3 +28,4 @@ 'use client';
 import invariant from 'tiny-invariant';
-import warning from 'tiny-warning';
+import warning from 'warning';
+import { dequal } from 'dequal';
 import pdfjs from './pdfjs.js';
@@ -56,2 +57,7 @@ import DocumentContext from './DocumentContext.js';
 };
+function isParameterObject(file) {
+    return (typeof file === 'object' &&
+        file !== null &&
+        ('data' in file || 'range' in file || 'url' in file));
+}
 /**
@@ -68,2 +74,17 @@ * Loads a document passed using `file` prop.
     const pages = useRef([]);
+    const prevFile = useRef();
+    const prevOptions = useRef();
+    useEffect(() => {
+        if (file && file !== prevFile.current && isParameterObject(file)) {
+            warning(!dequal(file, prevFile.current), `File prop passed to <Document /> changed, but it's equal to previous one. This might result in unnecessary reloads. Consider memoizing the value passed to "file" prop.`);
+            prevFile.current = file;
+        }
+    }, [file]);
+    // Detect non-memoized changes in options prop
+    useEffect(() => {
+        if (options && options !== prevOptions.current) {
+            warning(!dequal(options, prevOptions.current), `Options prop passed to <Document /> changed, but it's equal to previous one. This might result in unnecessary reloads. Consider memoizing the value passed to "options" prop.`);
+            prevOptions.current = options;
+        }
+    }, [options]);
     const viewer = useRef({
@@ -152,3 +173,3 @@ // Handling jumping to internal links target
         invariant(typeof file === 'object', 'Invalid parameter in file, need either Uint8Array, string or a parameter object');
-        invariant('data' in file || 'range' in file || 'url' in file, 'Invalid parameter object: need either .data, .range or .url');
+        invariant(isParameterObject(file), 'Invalid parameter object: need either .data, .range or .url');
         // File .url is a string
@@ -155,0 +176,0 @@ if ('url' in file && typeof file.url === 'string') {

dist/esm/Outline.js

@@ -19,3 +19,3 @@ 'use client';
 import invariant from 'tiny-invariant';
-import warning from 'tiny-warning';
+import warning from 'warning';
 import OutlineContext from './OutlineContext.js';
@@ -22,0 +22,0 @@ import OutlineItem from './OutlineItem.js';

dist/esm/Page.d.ts

@@ -219,6 +219,6 @@ import React from 'react';
      *
-     * **Warning**: SVG render mode is no longer maintained and may be removed in the future.
+     * **Warning**: SVG render mode is deprecated and will be removed in the future.
      *
      * @default 'canvas'
-     * @example 'svg'
+     * @example 'custom'
      */
@@ -225,0 +225,0 @@ renderMode?: RenderMode;

dist/esm/Page.js

@@ -20,3 +20,3 @@ 'use client';
 import invariant from 'tiny-invariant';
-import warning from 'tiny-warning';
+import warning from 'warning';
 import PageContext from './PageContext.js';
@@ -23,0 +23,0 @@ import Message from './Message.js';

dist/esm/Page/AnnotationLayer.js

@@ -6,3 +6,3 @@ 'use client';
 import invariant from 'tiny-invariant';
-import warning from 'tiny-warning';
+import warning from 'warning';
 import pdfjs from '../pdfjs.js';
@@ -9,0 +9,0 @@ import useDocumentContext from '../shared/hooks/useDocumentContext.js';

dist/esm/Page/PageCanvas.js

@@ -5,3 +5,3 @@ 'use client';
 import invariant from 'tiny-invariant';
-import warning from 'tiny-warning';
+import warning from 'warning';
 import pdfjs from '../pdfjs.js';
@@ -8,0 +8,0 @@ import StructTree from '../StructTree.js';

dist/esm/Page/PageSVG.js

 import React, { useEffect, useMemo } from 'react';
 import makeCancellable from 'make-cancellable-promise';
 import invariant from 'tiny-invariant';
-import warning from 'tiny-warning';
+import warning from 'warning';
 import pdfjs from '../pdfjs.js';
@@ -6,0 +6,0 @@ import usePageContext from '../shared/hooks/usePageContext.js';

dist/esm/Page/TextLayer.js

@@ -6,3 +6,3 @@ 'use client';
 import invariant from 'tiny-invariant';
-import warning from 'tiny-warning';
+import warning from 'warning';
 import pdfjs from '../pdfjs.js';
@@ -9,0 +9,0 @@ import usePageContext from '../shared/hooks/usePageContext.js';

dist/esm/pdf.worker.entry.d.ts

@@ -7,1 +7,2 @@ /**
  */
+export {};

dist/esm/pdf.worker.entry.js

@@ -1,2 +0,1 @@
-"use strict";
 /**
@@ -9,1 +8,2 @@ * PDF.js worker entry file.
 (typeof window !== 'undefined' ? window : {}).pdfjsWorker = require('pdfjs-dist/build/pdf.worker');
+export {};

dist/esm/shared/utils.js

 import invariant from 'tiny-invariant';
-import warning from 'tiny-warning';
+import warning from 'warning';
 /**
@@ -4,0 +4,0 @@ * Checks if we're running in a browser environment.

dist/esm/StructTree.js

 import React, { useEffect } from 'react';
 import makeCancellable from 'make-cancellable-promise';
 import invariant from 'tiny-invariant';
-import warning from 'tiny-warning';
+import warning from 'warning';
 import StructTreeItem from './StructTreeItem.js';
@@ -6,0 +6,0 @@ import usePageContext from './shared/hooks/usePageContext.js';

package.json

 {
   "name": "react-pdf",
-  "version": "7.6.0",
+  "version": "7.7.0",
   "description": "Display PDFs in your React app as easily as if they were images.",
@@ -35,3 +35,3 @@ "type": "module",
     "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm",
-    "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs --verbatimModuleSyntax false",
+    "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",
@@ -60,2 +60,3 @@ "clean": "rimraf dist",
     "clsx": "^2.0.0",
+    "dequal": "^2.0.3",
     "make-cancellable-promise": "^1.3.1",
@@ -67,3 +68,3 @@ "make-event-props": "^1.6.0",
     "tiny-invariant": "^1.0.0",
-    "tiny-warning": "^1.0.0"
+    "warning": "^4.0.0"
   },
@@ -76,2 +77,4 @@ "devDependencies": {
     "@types/react": "*",
+    "@types/warning": "^3.0.0",
+    "canvas": "^2.11.2",
     "cpy-cli": "^5.0.0",
@@ -87,4 +90,3 @@ "eslint": "^8.26.0",
     "typescript": "^5.3.2",
-    "vitest": "^1.0.2",
-    "vitest-canvas-mock": "^0.2.2"
+    "vitest": "^1.0.2"
   },
@@ -111,3 +113,3 @@ "peerDependencies": {
     "type": "git",
-    "url": "https://github.com/wojtekmaj/react-pdf.git",
+    "url": "git+https://github.com/wojtekmaj/react-pdf.git",
     "directory": "packages/react-pdf"
@@ -114,0 +116,0 @@ },

src/index.spec.ts

@@ -6,6 +6,2 @@ import { describe, expect, it } from 'vitest';
   describe('has pdfjs exported properly', () => {
-    it('has pdfjs exported properly', () => {
-      expect(pdfjs).toBeInstanceOf(Object);
-    });
-
     it('has pdfjs.version exported properly', () => {
@@ -12,0 +8,0 @@ expect(typeof pdfjs.version).toBe('string');

src/shared/utils.ts

 import invariant from 'tiny-invariant';
-import warning from 'tiny-warning';
+import warning from 'warning';
 
@@ -4,0 +4,0 @@ import type { PDFPageProxy } from 'pdfjs-dist';

No alert changes

Improved metrics

Total package byte prevSize

648354

increased by0.78%

Lines of code

14486

increased by0.77%

Worsened metrics

Dependency count

12

increased by9.09%

Dev dependency count

18

increased by5.88%

Dependency changes

• + Addeddequal@^2.0.3

• + Addedwarning@^4.0.0

• + Addeddequal@2.0.3(transitive)

• + Addedwarning@4.0.3(transitive)

• - Removedtiny-warning@^1.0.0

• - Removedtiny-warning@1.0.3(transitive)