document-viewer-ts - npm Package Compare versions

Comparing version 0.4.2 to 0.5.0-legacy

dist/es2015/base.d.ts

@@ -0,2 +1,3 @@
+export declare const renderPDF: (containerDiv: Element, documentUrl: string) => Promise<unknown>;
 export declare const renderDocument: (containerDiv: Element) => void;
-export declare const init: () => void;
+export declare const init: (workerSrc: string) => void;

dist/es2015/base.js

@@ -0,13 +1,188 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { GlobalWorkerOptions, getDocument, renderTextLayer } from 'pdfjs-dist/legacy/build/pdf';
+const chevronLeft = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
+<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
+</svg>`;
+const chevronRight = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+</svg>`;
 const handleError = (containerDiv) => (err) => {
     renderErrorMessage(containerDiv)(`There was an error fetching your document. Please try again later. Error: ${err}`);
 };
-const renderPDF = (containerDiv, documentUrl) => {
-    const mozillaPDFViewer = document.createElement('iframe');
-    mozillaPDFViewer.width = '100%';
-    mozillaPDFViewer.height = '100%';
-    mozillaPDFViewer.setAttribute('frameborder', '0');
-    const params = new URLSearchParams({ file: documentUrl });
-    mozillaPDFViewer.setAttribute('src', `https://mozilla.github.io/pdf.js/web/viewer.html?${params.toString()}`);
-    containerDiv.appendChild(mozillaPDFViewer);
+const zoomValues = [50, 80, 100, 125, 150, 200, 300, 400];
+const defaultWidth = 80;
+const PDFtoCSSConvert = 96 / 72;
+const defaultPageWidth = 700;
+const scaleTextLayer = (textLayerDiv, textContent, pdfPage, canvas, viewport, pdfScale) => __awaiter(void 0, void 0, void 0, function* () {
+    textLayerDiv.innerHTML = '';
+    const textLayerFragment = document.createDocumentFragment();
+    const scale = pdfScale * (canvas.offsetWidth / viewport.width);
+    const vs = pdfPage.getViewport({ scale });
+    textLayerDiv.style.width = `${vs.width}px`;
+    textLayerDiv.style.height = `${vs.height}px`;
+    yield renderTextLayer({
+        textContent,
+        container: textLayerFragment,
+        viewport: vs
+    }).promise;
+    textLayerDiv.appendChild(textLayerFragment);
+});
+const createLoadingIndicator = () => {
+    const container = document.createElement('div');
+    container.className = 'indicator-container';
+    const indicator = document.createElement('div');
+    indicator.className = 'lds-ring';
+    indicator.innerHTML = '<div></div><div></div><div></div><div></div></div>';
+    container.appendChild(indicator);
+    return container;
 };
+export const renderPDF = (containerDiv, documentUrl) => __awaiter(void 0, void 0, void 0, function* () {
+    const loadingIndicator = createLoadingIndicator();
+    containerDiv.appendChild(loadingIndicator);
+    const documentId = containerDiv.id;
+    const canvasContainer = document.createElement('div');
+    canvasContainer.className = 'canvas-container';
+    const controlsDiv = document.createElement('div');
+    controlsDiv.className = 'viewer-controls';
+    const fullPageNumberDiv = document.createElement('div');
+    fullPageNumberDiv.className = 'page-number';
+    const pageNumberInput = document.createElement('input');
+    pageNumberInput.className = 'page-number-input';
+    pageNumberInput.type = 'number';
+    const pageDiv = document.createElement('div');
+    const outOfDiv = document.createElement('div');
+    const pageCountDiv = document.createElement('div');
+    const nextButton = document.createElement('button');
+    nextButton.className = 'next-button';
+    const prevButton = document.createElement('button');
+    prevButton.className = 'prev-button';
+    const loadingTask = getDocument(documentUrl);
+    const zoomSelect = document.createElement('select');
+    zoomSelect.className = 'zoom-select';
+    zoomValues.forEach((v) => {
+        const zoomOption = document.createElement('option');
+        zoomOption.value = `${v}`;
+        zoomOption.textContent = `${v}%`;
+        zoomSelect.appendChild(zoomOption);
+    });
+    zoomSelect.value = `${defaultWidth}`;
+    const getZoomVal = () => {
+        const pageWidth = containerDiv.offsetWidth * (parseInt(zoomSelect.value) / 100);
+        const scaledBy = pageWidth / defaultPageWidth * PDFtoCSSConvert;
+        return scaledBy * 2.5;
+    };
+    try {
+        const pdfDocument = yield loadingTask.promise;
+        containerDiv.removeChild(loadingIndicator);
+        const isValidPage = (page) => page <= pdfDocument.numPages && page > 0;
+        // initial viewer setup
+        pageNumberInput.value = '1';
+        pageDiv.textContent = 'Page ';
+        outOfDiv.textContent = '/';
+        pageCountDiv.textContent = `${pdfDocument.numPages}`;
+        fullPageNumberDiv.appendChild(pageDiv);
+        fullPageNumberDiv.appendChild(pageNumberInput);
+        fullPageNumberDiv.appendChild(outOfDiv);
+        fullPageNumberDiv.appendChild(pageCountDiv);
+        // page container setup
+        const pageContainer = document.createElement('div');
+        pageContainer.className = 'page-container';
+        pageContainer.style.width = `${defaultWidth}%`;
+        canvasContainer.style.alignItems = 'center';
+        canvasContainer.appendChild(pageContainer);
+        const canvas = document.createElement('canvas');
+        canvas.className = 'pdf-viewer-canvas';
+        canvas.id = `${documentId}-canvas`;
+        pageContainer.appendChild(canvas);
+        // text layer setup
+        const textLayerDiv = document.createElement('div');
+        textLayerDiv.className = 'text-layer';
+        pageContainer.appendChild(textLayerDiv);
+        nextButton.innerHTML = chevronRight;
+        prevButton.innerHTML = chevronLeft;
+        containerDiv.appendChild(controlsDiv);
+        controlsDiv.appendChild(prevButton);
+        controlsDiv.appendChild(fullPageNumberDiv);
+        controlsDiv.appendChild(nextButton);
+        controlsDiv.appendChild(zoomSelect);
+        containerDiv.appendChild(canvasContainer);
+        const displayPage = (page, scale) => __awaiter(void 0, void 0, void 0, function* () {
+            pageNumberInput.value = `${page}`;
+            const pdfPage = yield pdfDocument.getPage(page);
+            const viewport = pdfPage.getViewport({ scale });
+            canvas.width = viewport.width;
+            canvas.height = viewport.height;
+            canvas.style.width = '100%';
+            const ctx = canvas.getContext('2d');
+            ctx === null || ctx === void 0 ? void 0 : ctx.fillRect(0, 0, canvas.width, canvas.height);
+            yield pdfPage.render({
+                canvasContext: ctx || {},
+                viewport,
+            });
+            const textContent = yield pdfPage.getTextContent();
+            scaleTextLayer(textLayerDiv, textContent, pdfPage, canvas, viewport, getZoomVal());
+            window.addEventListener('resize', () => {
+                scaleTextLayer(textLayerDiv, textContent, pdfPage, canvas, viewport, getZoomVal());
+            });
+        });
+        zoomSelect.onchange = () => __awaiter(void 0, void 0, void 0, function* () {
+            const pageNumber = parseInt(pageNumberInput.value || '1');
+            const zoomVal = parseInt(zoomSelect.value);
+            pageContainer.style.width = `${zoomSelect.value}%`;
+            if (zoomVal > 100) {
+                canvasContainer.style.alignItems = 'flex-start';
+            }
+            else {
+                canvasContainer.style.alignItems = 'center';
+            }
+            yield displayPage(pageNumber, getZoomVal());
+        });
+        const skipPage = (direction) => () => {
+            const pageNumber = parseInt(pageNumberInput.value || '1');
+            const nextPageNumber = pageNumber + direction;
+            if (isValidPage(nextPageNumber)) {
+                displayPage(nextPageNumber, getZoomVal());
+            }
+        };
+        nextButton.onclick = skipPage(1);
+        prevButton.onclick = skipPage(-1);
+        pageNumberInput.onchange = () => {
+            const pageNumber = Math.max(Math.min(parseInt(pageNumberInput.value), pdfDocument.numPages), 1);
+            displayPage(pageNumber, getZoomVal());
+        };
+        pageNumberInput.addEventListener('click', (e) => e.stopPropagation());
+        zoomSelect.addEventListener('click', (e) => e.stopPropagation());
+        containerDiv.addEventListener('keydown', (e) => {
+            e.stopPropagation();
+            switch (e.key) {
+                case ('ArrowLeft'):
+                    skipPage(-1)();
+                    return;
+                case ('ArrowRight'):
+                    skipPage(1)();
+                    return;
+                default:
+                    return;
+            }
+        });
+        containerDiv.addEventListener('click', () => {
+            containerDiv.focus();
+        });
+        containerDiv.setAttribute('tabIndex', '1');
+        containerDiv.focus();
+        yield displayPage(1, getZoomVal());
+    }
+    catch (err) {
+        handleError(containerDiv)(err);
+        return err;
+    }
+});
 const renderDocx = (containerDiv, documentUrl) => {
@@ -85,3 +260,4 @@ const microsoftViewer = document.createElement('iframe');
 };
-export const init = () => {
+export const init = (workerSrc) => {
+    GlobalWorkerOptions.workerSrc = workerSrc;
     loadDocuments();
@@ -88,0 +264,0 @@ window.addEventListener('load', loadDocuments);

dist/es2015/Viewer.d.ts

@@ -5,4 +5,5 @@ import React from 'react';
     documentUrl: string;
+    workerSrc: string;
 };
 export declare const Viewer: React.FC<ViewerProps>;
 export {};

dist/es2015/Viewer.js

 import React, { useEffect, useRef } from 'react';
+import { GlobalWorkerOptions } from 'pdfjs-dist';
 import { renderDocument } from './base';
 export const Viewer = (props) => {
+    GlobalWorkerOptions.workerSrc = props.workerSrc;
     const viewerContainer = useRef(null);
@@ -5,0 +7,0 @@ useEffect(() => {

dist/lib/base.d.ts

@@ -0,2 +1,3 @@
+export declare const renderPDF: (containerDiv: Element, documentUrl: string) => Promise<unknown>;
 export declare const renderDocument: (containerDiv: Element) => void;
-export declare const init: () => void;
+export declare const init: (workerSrc: string) => void;

dist/lib/base.js

 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.init = exports.renderDocument = void 0;
+exports.init = exports.renderDocument = exports.renderPDF = void 0;
+const pdf_1 = require("pdfjs-dist/legacy/build/pdf");
+const chevronLeft = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
+<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
+</svg>`;
+const chevronRight = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+</svg>`;
 const handleError = (containerDiv) => (err) => {
     renderErrorMessage(containerDiv)(`There was an error fetching your document. Please try again later. Error: ${err}`);
 };
-const renderPDF = (containerDiv, documentUrl) => {
-    const mozillaPDFViewer = document.createElement('iframe');
-    mozillaPDFViewer.width = '100%';
-    mozillaPDFViewer.height = '100%';
-    mozillaPDFViewer.setAttribute('frameborder', '0');
-    const params = new URLSearchParams({ file: documentUrl });
-    mozillaPDFViewer.setAttribute('src', `https://mozilla.github.io/pdf.js/web/viewer.html?${params.toString()}`);
-    containerDiv.appendChild(mozillaPDFViewer);
+const zoomValues = [50, 80, 100, 125, 150, 200, 300, 400];
+const defaultWidth = 80;
+const PDFtoCSSConvert = 96 / 72;
+const defaultPageWidth = 700;
+const scaleTextLayer = (textLayerDiv, textContent, pdfPage, canvas, viewport, pdfScale) => __awaiter(void 0, void 0, void 0, function* () {
+    textLayerDiv.innerHTML = '';
+    const textLayerFragment = document.createDocumentFragment();
+    const scale = pdfScale * (canvas.offsetWidth / viewport.width);
+    const vs = pdfPage.getViewport({ scale });
+    textLayerDiv.style.width = `${vs.width}px`;
+    textLayerDiv.style.height = `${vs.height}px`;
+    yield (0, pdf_1.renderTextLayer)({
+        textContent,
+        container: textLayerFragment,
+        viewport: vs
+    }).promise;
+    textLayerDiv.appendChild(textLayerFragment);
+});
+const createLoadingIndicator = () => {
+    const container = document.createElement('div');
+    container.className = 'indicator-container';
+    const indicator = document.createElement('div');
+    indicator.className = 'lds-ring';
+    indicator.innerHTML = '<div></div><div></div><div></div><div></div></div>';
+    container.appendChild(indicator);
+    return container;
 };
+const renderPDF = (containerDiv, documentUrl) => __awaiter(void 0, void 0, void 0, function* () {
+    const loadingIndicator = createLoadingIndicator();
+    containerDiv.appendChild(loadingIndicator);
+    const documentId = containerDiv.id;
+    const canvasContainer = document.createElement('div');
+    canvasContainer.className = 'canvas-container';
+    const controlsDiv = document.createElement('div');
+    controlsDiv.className = 'viewer-controls';
+    const fullPageNumberDiv = document.createElement('div');
+    fullPageNumberDiv.className = 'page-number';
+    const pageNumberInput = document.createElement('input');
+    pageNumberInput.className = 'page-number-input';
+    pageNumberInput.type = 'number';
+    const pageDiv = document.createElement('div');
+    const outOfDiv = document.createElement('div');
+    const pageCountDiv = document.createElement('div');
+    const nextButton = document.createElement('button');
+    nextButton.className = 'next-button';
+    const prevButton = document.createElement('button');
+    prevButton.className = 'prev-button';
+    const loadingTask = (0, pdf_1.getDocument)(documentUrl);
+    const zoomSelect = document.createElement('select');
+    zoomSelect.className = 'zoom-select';
+    zoomValues.forEach((v) => {
+        const zoomOption = document.createElement('option');
+        zoomOption.value = `${v}`;
+        zoomOption.textContent = `${v}%`;
+        zoomSelect.appendChild(zoomOption);
+    });
+    zoomSelect.value = `${defaultWidth}`;
+    const getZoomVal = () => {
+        const pageWidth = containerDiv.offsetWidth * (parseInt(zoomSelect.value) / 100);
+        const scaledBy = pageWidth / defaultPageWidth * PDFtoCSSConvert;
+        return scaledBy * 2.5;
+    };
+    try {
+        const pdfDocument = yield loadingTask.promise;
+        containerDiv.removeChild(loadingIndicator);
+        const isValidPage = (page) => page <= pdfDocument.numPages && page > 0;
+        // initial viewer setup
+        pageNumberInput.value = '1';
+        pageDiv.textContent = 'Page ';
+        outOfDiv.textContent = '/';
+        pageCountDiv.textContent = `${pdfDocument.numPages}`;
+        fullPageNumberDiv.appendChild(pageDiv);
+        fullPageNumberDiv.appendChild(pageNumberInput);
+        fullPageNumberDiv.appendChild(outOfDiv);
+        fullPageNumberDiv.appendChild(pageCountDiv);
+        // page container setup
+        const pageContainer = document.createElement('div');
+        pageContainer.className = 'page-container';
+        pageContainer.style.width = `${defaultWidth}%`;
+        canvasContainer.style.alignItems = 'center';
+        canvasContainer.appendChild(pageContainer);
+        const canvas = document.createElement('canvas');
+        canvas.className = 'pdf-viewer-canvas';
+        canvas.id = `${documentId}-canvas`;
+        pageContainer.appendChild(canvas);
+        // text layer setup
+        const textLayerDiv = document.createElement('div');
+        textLayerDiv.className = 'text-layer';
+        pageContainer.appendChild(textLayerDiv);
+        nextButton.innerHTML = chevronRight;
+        prevButton.innerHTML = chevronLeft;
+        containerDiv.appendChild(controlsDiv);
+        controlsDiv.appendChild(prevButton);
+        controlsDiv.appendChild(fullPageNumberDiv);
+        controlsDiv.appendChild(nextButton);
+        controlsDiv.appendChild(zoomSelect);
+        containerDiv.appendChild(canvasContainer);
+        const displayPage = (page, scale) => __awaiter(void 0, void 0, void 0, function* () {
+            pageNumberInput.value = `${page}`;
+            const pdfPage = yield pdfDocument.getPage(page);
+            const viewport = pdfPage.getViewport({ scale });
+            canvas.width = viewport.width;
+            canvas.height = viewport.height;
+            canvas.style.width = '100%';
+            const ctx = canvas.getContext('2d');
+            ctx === null || ctx === void 0 ? void 0 : ctx.fillRect(0, 0, canvas.width, canvas.height);
+            yield pdfPage.render({
+                canvasContext: ctx || {},
+                viewport,
+            });
+            const textContent = yield pdfPage.getTextContent();
+            scaleTextLayer(textLayerDiv, textContent, pdfPage, canvas, viewport, getZoomVal());
+            window.addEventListener('resize', () => {
+                scaleTextLayer(textLayerDiv, textContent, pdfPage, canvas, viewport, getZoomVal());
+            });
+        });
+        zoomSelect.onchange = () => __awaiter(void 0, void 0, void 0, function* () {
+            const pageNumber = parseInt(pageNumberInput.value || '1');
+            const zoomVal = parseInt(zoomSelect.value);
+            pageContainer.style.width = `${zoomSelect.value}%`;
+            if (zoomVal > 100) {
+                canvasContainer.style.alignItems = 'flex-start';
+            }
+            else {
+                canvasContainer.style.alignItems = 'center';
+            }
+            yield displayPage(pageNumber, getZoomVal());
+        });
+        const skipPage = (direction) => () => {
+            const pageNumber = parseInt(pageNumberInput.value || '1');
+            const nextPageNumber = pageNumber + direction;
+            if (isValidPage(nextPageNumber)) {
+                displayPage(nextPageNumber, getZoomVal());
+            }
+        };
+        nextButton.onclick = skipPage(1);
+        prevButton.onclick = skipPage(-1);
+        pageNumberInput.onchange = () => {
+            const pageNumber = Math.max(Math.min(parseInt(pageNumberInput.value), pdfDocument.numPages), 1);
+            displayPage(pageNumber, getZoomVal());
+        };
+        pageNumberInput.addEventListener('click', (e) => e.stopPropagation());
+        zoomSelect.addEventListener('click', (e) => e.stopPropagation());
+        containerDiv.addEventListener('keydown', (e) => {
+            e.stopPropagation();
+            switch (e.key) {
+                case ('ArrowLeft'):
+                    skipPage(-1)();
+                    return;
+                case ('ArrowRight'):
+                    skipPage(1)();
+                    return;
+                default:
+                    return;
+            }
+        });
+        containerDiv.addEventListener('click', () => {
+            containerDiv.focus();
+        });
+        containerDiv.setAttribute('tabIndex', '1');
+        containerDiv.focus();
+        yield displayPage(1, getZoomVal());
+    }
+    catch (err) {
+        handleError(containerDiv)(err);
+        return err;
+    }
+});
+exports.renderPDF = renderPDF;
 const renderDocx = (containerDiv, documentUrl) => {
@@ -51,3 +227,3 @@ const microsoftViewer = document.createElement('iframe');
                     new File([], 'test.txt');
-                    renderPDF(containerDiv, documentUrl);
+                    (0, exports.renderPDF)(containerDiv, documentUrl);
                 }
@@ -90,3 +266,4 @@ catch (err) {
 };
-const init = () => {
+const init = (workerSrc) => {
+    pdf_1.GlobalWorkerOptions.workerSrc = workerSrc;
     loadDocuments();
@@ -93,0 +270,0 @@ window.addEventListener('load', loadDocuments);

dist/lib/Viewer.d.ts

@@ -5,4 +5,5 @@ import React from 'react';
     documentUrl: string;
+    workerSrc: string;
 };
 export declare const Viewer: React.FC<ViewerProps>;
 export {};

dist/lib/Viewer.js

@@ -5,4 +5,6 @@ "use strict";
 const react_1 = require("react");
+const pdfjs_dist_1 = require("pdfjs-dist");
 const base_1 = require("./base");
 const Viewer = (props) => {
+    pdfjs_dist_1.GlobalWorkerOptions.workerSrc = props.workerSrc;
     const viewerContainer = (0, react_1.useRef)(null);
@@ -9,0 +11,0 @@ (0, react_1.useEffect)(() => {

package.json

 {
   "name": "document-viewer-ts",
-  "version": "0.4.2",
+  "version": "0.5.0-legacy",
   "description": "PDF and MS Doc viewer written in TypeScript for React and vanilla JavaScript",
@@ -18,5 +18,7 @@ "main": "dist/lib/index.js",
     "clean": "rimraf ./dist ./build",
-    "lint:no-fix": "eslint --config='.eslintrc.js' './src/*.{ts,tsx}'",
+    "lint:no-fix": "eslint --config='.eslintrc.js' './src/*.{ts,tsx}' './test/*.{ts,tsx}'",
     "lint": "npm run lint:no-fix -- --fix",
-    "prepublishOnly": "npm run clean && npm run build && npm run lint:no-fix -- --max-warnings 0"
+    "prepublishOnly": "npm run clean && npm run build && npm run test -- --ci --silent && npm run lint:no-fix -- --max-warnings 0",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
@@ -53,2 +55,4 @@ "repository": {
   "devDependencies": {
+    "@testing-library/react-hooks": "^7.0.2",
+    "@types/jest": "~27.4.1",
     "@types/react": "^16.8.0",
@@ -62,6 +66,11 @@ "@types/react-dom": "^16.8.0",
     "eslint": "~8.10.0",
+    "jest": "~28.1.1",
+    "jest-environment-jsdom": "~28.1.1",
+    "pdfjs-dist": "~2.14.305",
     "process": "~0.11.10",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-test-renderer": "~16.14.0",
     "smoothscroll-polyfill": "~0.4.4",
+    "ts-jest": "~28.0.5",
     "ts-node": "~10.4.0",
@@ -74,3 +83,4 @@ "typescript": "~4.6.2",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "pdfjs-dist": ">=2.14.0"
   },
@@ -77,0 +87,0 @@ "peerDependenciesMeta": {

README.md

@@ -9,5 +9,9 @@
 
-Note: this viewer has been stripped to essentially a wrapper around a few separate third-party applications, for the original version that used a custom integration of the pdf.js library use version 0.3.2-legacy or below.
+### Installation
+Requires peer dependency `pdfjs-dist` at version `2.14.0` or higher:
 
-### Installation
+```
+npm install pdfjs-dist
+```
+
 Install the package:
@@ -19,5 +23,31 @@
 ### Example Usage
+If using webpack, copy `PATH/TO/NODE_MODULES/pdfjs-dist/build/pdf.worker.min.js` to a local directory:
+
+`webpack.config.ts`
+```
+import CopyPlugin from "copy-webpack-plugin";
+
+...
+
+const config = {
+  ...
+  plugins: [
+    ...
+    new CopyPlugin({
+      patterns: [
+        {
+          from: "PATH/TO/NODE_MODULES/document-viewer/dist/worker/pdf.worker.min.js",
+          to: "PATH/TO/WORKER/FILE"
+        }
+      ]
+    }
+  ]
+}
+
+...
+
+```
 #### With HTML and Vanilla JS
 
-Call the init script in the root of your JS application.
+Call the init script in the root of your JS application using the path to your worker file.
 
@@ -28,3 +58,3 @@ `index.js`
 
-init();
+init("PATH/TO/WORKER/FILE");
 ```
@@ -51,3 +81,3 @@
 
-Import the `Viewer` component and call it with the proper `documentId` and `documentUrl` props. Also make sure to import `styles.css` in your app.
+Import the `Viewer` component and call it with the proper `documentId`, `documentUrl`, and `workerSrc` props. Also make sure to import `styles.css` in your app.
 
@@ -62,4 +92,5 @@ `index.jsx`
     documentUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+    workerSrc="PATH/TO/WORKER/FILE"
   />
 ```
 

No alert changes

Improved metrics

Total package byte prevSize

59269

increased by118.87%

Lines of code

766

increased by89.14%

Number of lines in readme file

92

increased by50.82%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

23

increased by43.75%

No dependency changes