svelte-pdf-view 0.1.6 → 0.1.8

package/README.md

@@ -60,11 +60,13 @@ This is especially important in monorepo setups where Vite's optimizer may incor
 <div style="height: 100vh;">
 	<PdfViewer src="/document.pdf">
 		<PdfToolbar />
-		<PdfRenderer src="/document.pdf" />
+		<PdfRenderer />
 	</PdfViewer>
 </div>
 ```
 
+The `src` prop is passed to `PdfViewer` and automatically shared with `PdfRenderer` via context - no need to pass it twice!
+
 ### Loading from Different Sources
 
 ```svelte
@@ -94,7 +96,7 @@ This is especially important in monorepo setups where Vite's optimizer may incor
 
 <PdfViewer src={pdfSource}>
 	<PdfToolbar />
-	<PdfRenderer src={pdfSource} />
+	<PdfRenderer />
 </PdfViewer>
 ```
 

package/dist/PdfRenderer.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">
 	import { BROWSER } from 'esm-env';
 	import { onDestroy, onMount } from 'svelte';
-	import { getPdfViewerContext, type PdfViewerActions } from './pdf-viewer/context.js';
+	import {
+		getPdfViewerContext,
+		type PdfViewerActions,
+		type PdfSource
+	} from './pdf-viewer/context.js';
+	import { getPdfJs } from './pdf-viewer/pdfjs-singleton.js';
 	import { rendererStyles } from './pdf-viewer/renderer-styles.js';
 
-	/** PDF source - can be a URL string, ArrayBuffer, Uint8Array, or Blob */
-	export type PdfSource = string | ArrayBuffer | Uint8Array | Blob;
+	// Re-export PdfSource type for convenience
+	export type { PdfSource };
 
 	interface Props {
-		/** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob */
-		src: PdfSource;
+		/** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob. If not provided, uses src from PdfViewer context. */
+		src?: PdfSource;
 		/** Background color of the scroll container */
 		backgroundColor?: string;
 		/** Page shadow style */
@@ -25,7 +30,7 @@
 	}
 
 	let {
-		src,
+		src: srcProp,
 		backgroundColor = '#e8e8e8',
 		pageShadow = '0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08)',
 		scrollbarTrackColor = '#f1f1f1',
@@ -34,7 +39,10 @@
 		scrollbarWidth = '10px'
 	}: Props = $props();
 
-	const { state: viewerState, _registerRenderer } = getPdfViewerContext();
+	const { state: viewerState, src: contextSrc, _registerRenderer } = getPdfViewerContext();
+
+	// Use prop src if provided, otherwise fall back to context src
+	let src = $derived(srcProp ?? contextSrc);
 
 	let hostEl: HTMLDivElement | undefined = $state();
 	let shadowRoot: ShadowRoot | null = null;
@@ -44,29 +52,6 @@
 	// Core instances
 	let viewer: import('./pdf-viewer/PDFViewerCore.js').PDFViewerCore | null = null;
 	let findController: import('./pdf-viewer/FindController.js').FindController | null = null;
-	let pdfjsLib: typeof import('pdfjs-dist/legacy/build/pdf.mjs') | null = null;
-	let pdfWorker: import('pdfjs-dist/legacy/build/pdf.mjs').PDFWorker | null = null;
-	let rawWorker: Worker | null = null;
-
-	async function initPdfJs() {
-		if (!BROWSER) return null;
-
-		// Return cached instance if already initialized
-		if (pdfjsLib && pdfWorker) return pdfjsLib;
-
-		pdfjsLib = await import('pdfjs-dist/legacy/build/pdf.mjs');
-
-		// Create worker only once using import.meta.url for proper bundler resolution
-		rawWorker = new Worker(new URL('pdfjs-dist/legacy/build/pdf.worker.mjs', import.meta.url), {
-			type: 'module'
-		});
-		pdfWorker = new pdfjsLib.PDFWorker({
-			port: rawWorker as unknown as null
-		});
-		pdfjsLib.GlobalWorkerOptions.workerPort = pdfWorker.port;
-
-		return pdfjsLib;
-	}
 
 	async function loadPdf(source: PdfSource) {
 		if (!BROWSER || !scrollContainerEl) return;
@@ -75,7 +60,7 @@
 		viewerState.error = null;
 
 		try {
-			const pdfjs = await initPdfJs();
+			const pdfjs = await getPdfJs();
 			if (!pdfjs) return;
 
 			const { PDFViewerCore } = await import('./pdf-viewer/PDFViewerCore.js');
@@ -183,7 +168,8 @@
 				viewerState.searchCurrent = 0;
 				viewerState.searchTotal = 0;
 			}
-		}
+		},
+		download: () => {} // Download is handled by PdfViewer, not renderer
 	};
 
 	onMount(async () => {
@@ -234,17 +220,8 @@
 			viewer = null;
 		}
 		findController = null;
-
-		// Cleanup worker to prevent memory leaks
-		if (pdfWorker) {
-			pdfWorker.destroy();
-			pdfWorker = null;
-		}
-		if (rawWorker) {
-			rawWorker.terminate();
-			rawWorker = null;
-		}
-		pdfjsLib = null;
+		// Note: Worker is a global singleton, not cleaned up per-component
+		// Use destroyPdfJs() from pdfjs-singleton.js if you need to fully cleanup
 	});
 </script>
 

package/dist/PdfRenderer.svelte.d.ts

@@ -1,8 +1,7 @@
-/** PDF source - can be a URL string, ArrayBuffer, Uint8Array, or Blob */
-export type PdfSource = string | ArrayBuffer | Uint8Array | Blob;
+import { type PdfSource } from './pdf-viewer/context.js';
 interface Props {
-    /** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob */
-    src: PdfSource;
+    /** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob. If not provided, uses src from PdfViewer context. */
+    src?: PdfSource;
     /** Background color of the scroll container */
     backgroundColor?: string;
     /** Page shadow style */
@@ -16,6 +15,8 @@ interface Props {
     /** Scrollbar width */
     scrollbarWidth?: string;
 }
-declare const PdfRenderer: import("svelte").Component<Props, {}, "">;
+declare const PdfRenderer: import("svelte").Component<Props, {
+    PdfSource: typeof PdfSource;
+}, "">;
 type PdfRenderer = ReturnType<typeof PdfRenderer>;
 export default PdfRenderer;

package/dist/PdfToolbar.svelte

@@ -6,7 +6,8 @@
 		RotateCw,
 		Search,
 		ChevronLeft,
-		ChevronRight
+		ChevronRight,
+		Download
 	} from '@lucide/svelte';
 	import { getPdfViewerContext } from './pdf-viewer/context.js';
 
@@ -114,6 +115,13 @@
 			<span class="match-info">{viewerState.searchCurrent}/{viewerState.searchTotal}</span>
 		{/if}
 	</div>
+
+	<!-- Download -->
+	<div class="pdf-toolbar-group">
+		<button onclick={() => actions.download()} aria-label="Download PDF" title="Download">
+			<Download size={18} />
+		</button>
+	</div>
 </div>
 
 <style>

package/dist/PdfViewer.svelte

@@ -9,9 +9,9 @@
 	import {
 		setPdfViewerContext,
 		type PdfViewerState,
-		type PdfViewerActions
+		type PdfViewerActions,
+		type PdfSource
 	} from './pdf-viewer/context.js';
-	import type { PdfSource } from './PdfRenderer.svelte';
 
 	interface Props {
 		/** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob */
@@ -43,6 +43,48 @@
 	// Renderer actions - will be populated when renderer mounts
 	let rendererActions: PdfViewerActions | null = null;
 
+	// Download helper function
+	function downloadPdf(filename?: string) {
+		const downloadName =
+			filename ||
+			(typeof src === 'string' ? src.split('/').pop() : 'document.pdf') ||
+			'document.pdf';
+
+		if (typeof src === 'string') {
+			// URL - fetch and download
+			const link = document.createElement('a');
+			link.href = src;
+			link.download = downloadName;
+			link.click();
+		} else if (src instanceof Blob) {
+			// Blob - create object URL
+			const url = URL.createObjectURL(src);
+			const link = document.createElement('a');
+			link.href = url;
+			link.download = downloadName;
+			link.click();
+			URL.revokeObjectURL(url);
+		} else if (src instanceof ArrayBuffer) {
+			// ArrayBuffer
+			const blob = new Blob([src], { type: 'application/pdf' });
+			const url = URL.createObjectURL(blob);
+			const link = document.createElement('a');
+			link.href = url;
+			link.download = downloadName;
+			link.click();
+			URL.revokeObjectURL(url);
+		} else {
+			// Uint8Array - create a copy as ArrayBuffer
+			const blob = new Blob([new Uint8Array(src)], { type: 'application/pdf' });
+			const url = URL.createObjectURL(blob);
+			const link = document.createElement('a');
+			link.href = url;
+			link.download = downloadName;
+			link.click();
+			URL.revokeObjectURL(url);
+		}
+	}
+
 	// Actions that proxy to the renderer
 	const actions: PdfViewerActions = {
 		zoomIn: () => rendererActions?.zoomIn(),
@@ -58,13 +100,15 @@
 		},
 		searchNext: () => rendererActions?.searchNext(),
 		searchPrevious: () => rendererActions?.searchPrevious(),
-		clearSearch: () => rendererActions?.clearSearch()
+		clearSearch: () => rendererActions?.clearSearch(),
+		download: downloadPdf
 	};
 
 	// Set up context
 	setPdfViewerContext({
 		state,
 		actions,
+		src,
 		_registerRenderer: (renderer: PdfViewerActions) => {
 			rendererActions = renderer;
 		}

package/dist/PdfViewer.svelte.d.ts

@@ -1,7 +1,7 @@
 export { default as Toolbar } from './PdfToolbar.svelte';
 export { default as Renderer } from './PdfRenderer.svelte';
 import type { Snippet } from 'svelte';
-import type { PdfSource } from './PdfRenderer.svelte';
+import { type PdfSource } from './pdf-viewer/context.js';
 interface Props {
     /** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob */
     src: PdfSource;

package/dist/PdfViewerInner.svelte

@@ -42,29 +42,6 @@
 	// Core instances (loaded dynamically)
 	let viewer: import('./pdf-viewer/PDFViewerCore.js').PDFViewerCore | null = null;
 	let findController: import('./pdf-viewer/FindController.js').FindController | null = null;
-	let pdfjsLib: typeof import('pdfjs-dist/legacy/build/pdf.mjs') | null = null;
-	let pdfWorker: import('pdfjs-dist/legacy/build/pdf.mjs').PDFWorker | null = null;
-	let rawWorker: Worker | null = null;
-
-	async function initPdfJs() {
-		if (!BROWSER) return null;
-
-		// Return cached instance if already initialized
-		if (pdfjsLib && pdfWorker) return pdfjsLib;
-
-		pdfjsLib = await import('pdfjs-dist/legacy/build/pdf.mjs');
-
-		// Create worker only once using import.meta.url
-		rawWorker = new Worker(new URL('pdfjs-dist/legacy/build/pdf.worker.mjs', import.meta.url), {
-			type: 'module'
-		});
-		pdfWorker = new pdfjsLib.PDFWorker({
-			port: rawWorker as unknown as null
-		});
-		pdfjsLib.GlobalWorkerOptions.workerPort = pdfWorker.port;
-
-		return pdfjsLib;
-	}
 
 	async function loadPdf(url: string) {
 		if (!BROWSER || !scrollContainerEl) return;
@@ -73,8 +50,9 @@
 		error = null;
 
 		try {
-			// Initialize PDF.js
-			const pdfjs = await initPdfJs();
+			// Get PDF.js from global singleton
+			const { getPdfJs } = await import('./pdf-viewer/pdfjs-singleton.js');
+			const pdfjs = await getPdfJs();
 			if (!pdfjs) return;
 
 			// Initialize viewer
@@ -229,17 +207,8 @@
 			viewer = null;
 		}
 		findController = null;
-
-		// Cleanup worker to prevent memory leaks
-		if (pdfWorker) {
-			pdfWorker.destroy();
-			pdfWorker = null;
-		}
-		if (rawWorker) {
-			rawWorker.terminate();
-			rawWorker = null;
-		}
-		pdfjsLib = null;
+		// Note: Worker is a global singleton, not cleaned up per-component
+		// Use destroyPdfJs() from pdfjs-singleton.js if you need to fully cleanup
 	});
 </script>
 

package/dist/index.d.ts

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

package/dist/index.js

@@ -2,3 +2,5 @@
 export { default as PdfViewer, Toolbar as PdfToolbar, Renderer as PdfRenderer } from './PdfViewer.svelte';
 // Export context for custom toolbars
 export { getPdfViewerContext } from './pdf-viewer/context.js';
+// Export PDF.js singleton utilities
+export { destroyPdfJs } from './pdf-viewer/pdfjs-singleton.js';

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

@@ -1,3 +1,5 @@
+/** PDF source - can be a URL string, ArrayBuffer, Uint8Array, or Blob */
+export type PdfSource = string | ArrayBuffer | Uint8Array | Blob;
 export interface PdfViewerState {
     loading: boolean;
     error: string | null;
@@ -21,10 +23,13 @@ export interface PdfViewerActions {
     searchNext: () => void;
     searchPrevious: () => void;
     clearSearch: () => void;
+    download: (filename?: string) => void;
 }
 export interface PdfViewerContext {
     state: PdfViewerState;
     actions: PdfViewerActions;
+    /** The PDF source - shared from PdfViewer to PdfRenderer */
+    src: PdfSource;
     _registerRenderer: (renderer: PdfViewerActions) => void;
 }
 export declare function setPdfViewerContext(ctx: PdfViewerContext): void;

package/dist/pdf-viewer/pdfjs-singleton.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Get the PDF.js library instance. Creates the worker on first call.
+ * Subsequent calls return the cached instance.
+ */
+export declare function getPdfJs(): Promise<typeof import('pdfjs-dist/legacy/build/pdf.mjs') | null>;
+/**
+ * Destroy the PDF.js worker and cleanup resources.
+ * Call this when you're completely done with PDF viewing in your app.
+ * Note: After calling this, the next getPdfJs() call will create a new worker.
+ */
+export declare function destroyPdfJs(): void;

package/dist/pdf-viewer/pdfjs-singleton.js

@@ -0,0 +1,51 @@
+import { BROWSER } from 'esm-env';
+// Global singleton state
+let pdfjsLib = null;
+let pdfWorker = null;
+let rawWorker = null;
+let initPromise = null;
+/**
+ * Get the PDF.js library instance. Creates the worker on first call.
+ * Subsequent calls return the cached instance.
+ */
+export async function getPdfJs() {
+    if (!BROWSER)
+        return null;
+    // Return cached instance
+    if (pdfjsLib && pdfWorker)
+        return pdfjsLib;
+    // If initialization is in progress, wait for it
+    if (initPromise)
+        return initPromise;
+    // Start initialization
+    initPromise = (async () => {
+        pdfjsLib = await import('pdfjs-dist/legacy/build/pdf.mjs');
+        // Create worker only once using import.meta.url for proper bundler resolution
+        rawWorker = new Worker(new URL('pdfjs-dist/legacy/build/pdf.worker.mjs', import.meta.url), {
+            type: 'module'
+        });
+        pdfWorker = new pdfjsLib.PDFWorker({
+            port: rawWorker
+        });
+        pdfjsLib.GlobalWorkerOptions.workerPort = pdfWorker.port;
+        return pdfjsLib;
+    })();
+    return initPromise;
+}
+/**
+ * Destroy the PDF.js worker and cleanup resources.
+ * Call this when you're completely done with PDF viewing in your app.
+ * Note: After calling this, the next getPdfJs() call will create a new worker.
+ */
+export function destroyPdfJs() {
+    if (pdfWorker) {
+        pdfWorker.destroy();
+        pdfWorker = null;
+    }
+    if (rawWorker) {
+        rawWorker.terminate();
+        rawWorker = null;
+    }
+    pdfjsLib = null;
+    initPromise = null;
+}

package/package.json

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