svelte-pdf-view 0.1.2 → 0.1.4

package/README.md

@@ -32,6 +32,22 @@ If you want to use the default `<PdfToolbar>` component, also install:
 npm install @lucide/svelte
 ```
 
+### Vite Configuration
+
+If you're using Vite (including SvelteKit), you may need to exclude `pdfjs-dist` from dependency optimization to ensure the PDF.js worker loads correctly:
+
+```ts
+// vite.config.ts
+export default defineConfig({
+	// ... other config
+	optimizeDeps: {
+		exclude: ['pdfjs-dist']
+	}
+});
+```
+
+This is especially important in monorepo setups where Vite's optimizer may incorrectly bundle the worker.
+
 ## Quick Start
 
 ### Basic Usage

package/dist/PdfRenderer.svelte

@@ -1,11 +1,7 @@
 <script lang="ts">
 	import { BROWSER } from 'esm-env';
 	import { onDestroy, onMount } from 'svelte';
-	import {
-		getPdfViewerContext,
-		getPdfWorkerContext,
-		type PdfViewerActions
-	} from './pdf-viewer/context.js';
+	import { getPdfViewerContext, type PdfViewerActions } from './pdf-viewer/context.js';
 	import { rendererStyles } from './pdf-viewer/renderer-styles.js';
 
 	/** PDF source - can be a URL string, ArrayBuffer, Uint8Array, or Blob */
@@ -45,9 +41,6 @@
 	let scrollContainerEl: HTMLDivElement | null = null;
 	let mounted = $state(false);
 
-	// Get worker from context (if set via initPdfWorker)
-	const workerContext = getPdfWorkerContext();
-
 	// Core instances
 	let viewer: import('./pdf-viewer/PDFViewerCore.js').PDFViewerCore | null = null;
 	let findController: import('./pdf-viewer/FindController.js').FindController | null = null;
@@ -58,18 +51,13 @@
 
 		pdfjsLib = await import('pdfjs-dist/legacy/build/pdf.mjs');
 
-		// Use worker from context if available, otherwise create inline worker
-		if (workerContext?.worker) {
-			// Worker was set up via initPdfWorker()
-		} else {
-			// Fallback: create worker using import.meta.url
-			const worker = new pdfjsLib.PDFWorker({
-				port: new Worker(new URL('pdfjs-dist/legacy/build/pdf.worker.mjs', import.meta.url), {
-					type: 'module'
-				}) as unknown as null
-			});
-			pdfjsLib.GlobalWorkerOptions.workerPort = worker.port;
-		}
+		// Create worker using import.meta.url for proper bundler resolution
+		const worker = new pdfjsLib.PDFWorker({
+			port: new Worker(new URL('pdfjs-dist/legacy/build/pdf.worker.mjs', import.meta.url), {
+				type: 'module'
+			}) as unknown as null
+		});
+		pdfjsLib.GlobalWorkerOptions.workerPort = worker.port;
 
 		return pdfjsLib;
 	}

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { default as PdfViewer, Toolbar as PdfToolbar, Renderer as PdfRenderer } from './PdfViewer.svelte';
 export type { PdfSource } from './PdfRenderer.svelte';
-export { getPdfViewerContext, initPdfWorker, type PdfViewerState, type PdfViewerActions, type PdfViewerContext } from './pdf-viewer/context.js';
+export { getPdfViewerContext, type PdfViewerState, type PdfViewerActions, type PdfViewerContext } from './pdf-viewer/context.js';

package/dist/index.js

@@ -1,4 +1,4 @@
 // Reexport your entry components here
 export { default as PdfViewer, Toolbar as PdfToolbar, Renderer as PdfRenderer } from './PdfViewer.svelte';
 // Export context for custom toolbars
-export { getPdfViewerContext, initPdfWorker } from './pdf-viewer/context.js';
+export { getPdfViewerContext } from './pdf-viewer/context.js';

package/dist/pdf-viewer/PDFPageView.js

@@ -12,7 +12,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { setLayerDimensions } from 'pdfjs-dist/legacy/build/pdf.mjs';
+// Dynamically loaded pdfjs utilities
+let setLayerDimensions;
+async function ensurePdfJsLoaded() {
+    if (!setLayerDimensions) {
+        const pdfjs = await import('pdfjs-dist/legacy/build/pdf.mjs');
+        setLayerDimensions = pdfjs.setLayerDimensions;
+    }
+}
 export const RenderingStates = {
     INITIAL: 0,
     RUNNING: 1,
@@ -61,7 +68,7 @@ export class PDFPageView {
         this.loadingDiv.textContent = 'Loading...';
         this.div.appendChild(this.loadingDiv);
     }
-    setDimensions() {
+    async setDimensions() {
         const { width, height } = this.viewport;
         this.div.style.width = `${Math.floor(width)}px`;
         this.div.style.height = `${Math.floor(height)}px`;
@@ -75,6 +82,7 @@ export class PDFPageView {
         // mustFlip=false because the text layer uses raw page coordinates
         // and rotation is handled via CSS transforms
         if (this.textLayerDiv) {
+            await ensurePdfJsLoaded();
             setLayerDimensions(this.textLayerDiv, this.viewport, /* mustFlip */ false);
         }
     }
@@ -227,7 +235,10 @@ export class PDFPageView {
         this.div.appendChild(this.textLayerDiv);
         try {
             // Import TextLayer from pdfjs-dist
-            const { TextLayer } = await import('pdfjs-dist/legacy/build/pdf.mjs');
+            const [{ TextLayer }] = await Promise.all([
+                import('pdfjs-dist/legacy/build/pdf.mjs'),
+                ensurePdfJsLoaded()
+            ]);
             const textContent = await this.pdfPage.getTextContent();
             this.textDivs = [];
             this.textContentItemsStr = [];

package/dist/pdf-viewer/context.d.ts

@@ -29,21 +29,3 @@ export interface PdfViewerContext {
 }
 export declare function setPdfViewerContext(ctx: PdfViewerContext): void;
 export declare function getPdfViewerContext(): PdfViewerContext;
-export interface PdfWorkerContext {
-    worker: import('pdfjs-dist/legacy/build/pdf.mjs').PDFWorker;
-}
-export declare function setPdfWorkerContext(worker: PdfWorkerContext['worker']): void;
-export declare function getPdfWorkerContext(): PdfWorkerContext | undefined;
-/**
- * Initialize PDF.js worker and set it in context.
- * Call this in your root layout or page component.
- *
- * @example
- * ```svelte
- * <script>
- *   import { initPdfWorker } from 'svelte-pdf-view';
- *   initPdfWorker();
- * </script>
- * ```
- */
-export declare function initPdfWorker(): void;

package/dist/pdf-viewer/context.js

@@ -1,10 +1,8 @@
 /**
  * PDF Viewer Context - Shared state between toolbar and renderer
  */
-import { BROWSER } from 'esm-env';
-import { getContext, setContext, onDestroy } from 'svelte';
+import { getContext, setContext } from 'svelte';
 const PDF_VIEWER_CONTEXT_KEY = Symbol('pdf-viewer');
-const PDF_WORKER_CONTEXT_KEY = Symbol('pdf-worker');
 export function setPdfViewerContext(ctx) {
     setContext(PDF_VIEWER_CONTEXT_KEY, ctx);
 }
@@ -15,34 +13,3 @@ export function getPdfViewerContext() {
     }
     return ctx;
 }
-export function setPdfWorkerContext(worker) {
-    setContext(PDF_WORKER_CONTEXT_KEY, { worker });
-}
-export function getPdfWorkerContext() {
-    return getContext(PDF_WORKER_CONTEXT_KEY);
-}
-/**
- * Initialize PDF.js worker and set it in context.
- * Call this in your root layout or page component.
- *
- * @example
- * ```svelte
- * <script>
- *   import { initPdfWorker } from 'svelte-pdf-view';
- *   initPdfWorker();
- * </script>
- * ```
- */
-export function initPdfWorker() {
-    if (!BROWSER)
-        return;
-    import('pdfjs-dist/legacy/build/pdf.mjs').then((pdfjs) => {
-        const worker = new pdfjs.PDFWorker({
-            port: new Worker(new URL('pdfjs-dist/legacy/build/pdf.worker.mjs', import.meta.url), {
-                type: 'module'
-            })
-        });
-        setPdfWorkerContext(worker);
-        onDestroy(() => worker.destroy());
-    });
-}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-pdf-view",
-	"version": "0.1.2",
+	"version": "0.1.4",
 	"description": "A modern, modular PDF viewer component for Svelte 5. Built on PDF.js with TypeScript support",
 	"author": "Louis Li",
 	"license": "Apache-2.0",