svelte-pdf-view 0.1.0 → 0.1.2

package/README.md

@@ -2,6 +2,8 @@
 
 A modern, modular PDF viewer component for Svelte 5. Built on top of [PDF.js](https://mozilla.github.io/pdf.js/), with full TypeScript support and Shadow DOM isolation.
 
+**[Live Demo](https://nullpointerexceptionkek.github.io/svelte-pdf-view/)**
+
 ## Features
 
 - **PDF Rendering** - High-quality PDF rendering powered by PDF.js

package/dist/PdfRenderer.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+	import { BROWSER } from 'esm-env';
 	import { onDestroy, onMount } from 'svelte';
-
-	const browser = typeof window !== 'undefined';
-	import { getPdfViewerContext, type PdfViewerActions } from './pdf-viewer/context.js';
-	import rendererStyles from './pdf-viewer/renderer-styles.css?raw';
+	import {
+		getPdfViewerContext,
+		getPdfWorkerContext,
+		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 */
 	export type PdfSource = string | ArrayBuffer | Uint8Array | Blob;
@@ -42,23 +45,37 @@
 	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;
-	let pdfjsLib: typeof import('pdfjs-dist') | null = null;
+	let pdfjsLib: typeof import('pdfjs-dist/legacy/build/pdf.mjs') | null = null;
 
 	async function initPdfJs() {
-		if (!browser) return null;
-
-		pdfjsLib = await import('pdfjs-dist');
-		const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.min.mjs?url');
-		pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker.default;
+		if (!BROWSER) return null;
+
+		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;
+		}
 
 		return pdfjsLib;
 	}
 
 	async function loadPdf(source: PdfSource) {
-		if (!browser || !scrollContainerEl) return;
+		if (!BROWSER || !scrollContainerEl) return;
 
 		viewerState.loading = true;
 		viewerState.error = null;
@@ -176,7 +193,7 @@
 	};
 
 	onMount(async () => {
-		if (browser && hostEl) {
+		if (BROWSER && hostEl) {
 			// Create shadow root for style isolation
 			shadowRoot = hostEl.attachShadow({ mode: 'open' });
 
@@ -212,7 +229,7 @@
 
 	// Load PDF when src changes
 	$effect(() => {
-		if (browser && src && scrollContainerEl && mounted) {
+		if (BROWSER && src && scrollContainerEl && mounted) {
 			loadPdf(src);
 		}
 	});

package/dist/PdfViewerInner.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { BROWSER } from 'esm-env';
 	import { onDestroy, onMount } from 'svelte';
-
-	const browser = typeof window !== 'undefined';
 	import {
 		ZoomIn,
 		ZoomOut,
@@ -43,20 +42,26 @@
 	// 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') | null = null;
+	let pdfjsLib: typeof import('pdfjs-dist/legacy/build/pdf.mjs') | null = null;
 
 	async function initPdfJs() {
-		if (!browser) return null;
+		if (!BROWSER) return null;
+
+		pdfjsLib = await import('pdfjs-dist/legacy/build/pdf.mjs');
 
-		pdfjsLib = await import('pdfjs-dist');
-		const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.min.mjs?url');
-		pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker.default;
+		// 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;
 
 		return pdfjsLib;
 	}
 
 	async function loadPdf(url: string) {
-		if (!browser || !scrollContainerEl) return;
+		if (!BROWSER || !scrollContainerEl) return;
 
 		loading = true;
 		error = null;
@@ -203,7 +208,7 @@
 
 	// Load PDF when src changes
 	$effect(() => {
-		if (browser && src && scrollContainerEl && mounted) {
+		if (BROWSER && src && scrollContainerEl && mounted) {
 			loadPdf(src);
 		}
 	});

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, type PdfViewerState, type PdfViewerActions, type PdfViewerContext } from './pdf-viewer/context.js';
+export { getPdfViewerContext, initPdfWorker, 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 } from './pdf-viewer/context.js';
+export { getPdfViewerContext, initPdfWorker } from './pdf-viewer/context.js';

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

@@ -4,7 +4,7 @@
  */
 import type { EventBus } from './EventBus.js';
 import type { PDFViewerCore } from './PDFViewerCore.js';
-import type { PDFDocumentProxy } from 'pdfjs-dist';
+import type { PDFDocumentProxy } from 'pdfjs-dist/legacy/build/pdf.mjs';
 export declare const FindState: {
     readonly FOUND: 0;
     readonly NOT_FOUND: 1;

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

@@ -2,7 +2,7 @@
  * PDFPageView - Renders a single PDF page with canvas and text layer.
  * This is a derivative work based on PDF.js pdf_page_view.js
  */
-import type { PDFPageProxy, PageViewport } from 'pdfjs-dist';
+import type { PDFPageProxy, PageViewport } from 'pdfjs-dist/legacy/build/pdf.mjs';
 import type { EventBus } from './EventBus.js';
 export interface PDFPageViewOptions {
     container: HTMLElement;

package/dist/pdf-viewer/PDFPageView.js

@@ -12,7 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { setLayerDimensions } from 'pdfjs-dist';
+import { setLayerDimensions } from 'pdfjs-dist/legacy/build/pdf.mjs';
 export const RenderingStates = {
     INITIAL: 0,
     RUNNING: 1,
@@ -227,7 +227,7 @@ export class PDFPageView {
         this.div.appendChild(this.textLayerDiv);
         try {
             // Import TextLayer from pdfjs-dist
-            const { TextLayer } = await import('pdfjs-dist');
+            const { TextLayer } = await import('pdfjs-dist/legacy/build/pdf.mjs');
             const textContent = await this.pdfPage.getTextContent();
             this.textDivs = [];
             this.textContentItemsStr = [];

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

@@ -2,7 +2,7 @@
  * PDFViewerCore - Main viewer that manages all pages in a scroll container.
  * This is a derivative work based on PDF.js pdf_viewer.js
  */
-import type { PDFDocumentProxy } from 'pdfjs-dist';
+import type { PDFDocumentProxy } from 'pdfjs-dist/legacy/build/pdf.mjs';
 import { EventBus } from './EventBus.js';
 import { PDFPageView } from './PDFPageView.js';
 export interface PDFViewerOptions {

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

@@ -29,3 +29,21 @@ 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,8 +1,10 @@
 /**
  * PDF Viewer Context - Shared state between toolbar and renderer
  */
-import { getContext, setContext } from 'svelte';
+import { BROWSER } from 'esm-env';
+import { getContext, setContext, onDestroy } 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);
 }
@@ -13,3 +15,34 @@ 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/dist/pdf-viewer/renderer-styles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * PDF Renderer Styles - Shadow DOM Isolated
+ * This is a derivative work based on PDF.js text_layer_builder.css
+ */
+export declare const rendererStyles = "\n/* CSS Custom Properties with defaults */\n.pdf-renderer-container {\n\t--pdf-background-color: #e8e8e8;\n\t--pdf-page-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);\n\t--pdf-scrollbar-track-color: #f1f1f1;\n\t--pdf-scrollbar-thumb-color: #c1c1c1;\n\t--pdf-scrollbar-thumb-hover-color: #a1a1a1;\n\t--pdf-scrollbar-width: 10px;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: var(--pdf-background-color);\n\toverflow: hidden;\n}\n\n/* Scroll container */\n.pdf-scroll-container {\n\tflex: 1;\n\toverflow: auto;\n\tposition: relative;\n\tbackground-color: var(--pdf-background-color);\n}\n\n/* Custom scrollbar styling */\n.pdf-scroll-container::-webkit-scrollbar {\n\twidth: var(--pdf-scrollbar-width);\n\theight: var(--pdf-scrollbar-width);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-track {\n\tbackground: var(--pdf-scrollbar-track-color);\n\tborder-radius: calc(var(--pdf-scrollbar-width) / 2);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-thumb {\n\tbackground: var(--pdf-scrollbar-thumb-color);\n\tborder-radius: calc(var(--pdf-scrollbar-width) / 2);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-thumb:hover {\n\tbackground: var(--pdf-scrollbar-thumb-hover-color);\n}\n\n/* Firefox scrollbar */\n.pdf-scroll-container {\n\tscrollbar-width: thin;\n\tscrollbar-color: var(--pdf-scrollbar-thumb-color) var(--pdf-scrollbar-track-color);\n}\n\n/* Viewer - dynamically created */\n.pdfViewer {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tpadding: 20px;\n\tgap: 16px;\n}\n\n/* Page - dynamically created with CSS variables for text layer */\n.page {\n\t--user-unit: 1;\n\t--total-scale-factor: calc(var(--scale-factor, 1) * var(--user-unit));\n\t--scale-round-x: 1px;\n\t--scale-round-y: 1px;\n\n\tposition: relative;\n\tbackground-color: white;\n\tbox-shadow: var(--pdf-page-shadow);\n\tborder-radius: 2px;\n\tmargin: 0;\n\tdirection: ltr;\n}\n\n.page .loadingIcon {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tcolor: #666;\n\tfont-size: 14px;\n}\n\n.page .canvasWrapper {\n\tposition: absolute;\n\tinset: 0;\n\toverflow: hidden;\n\tz-index: 0;\n}\n\n.page .pdf-canvas {\n\tdisplay: block;\n}\n\n/* Text layer - essential styles from PDF.js */\n.textLayer {\n\tposition: absolute;\n\ttext-align: initial;\n\tinset: 0;\n\toverflow: clip;\n\topacity: 1;\n\tline-height: 1;\n\t-webkit-text-size-adjust: none;\n\t-moz-text-size-adjust: none;\n\ttext-size-adjust: none;\n\tforced-color-adjust: none;\n\ttransform-origin: 0 0;\n\tcaret-color: CanvasText;\n\tz-index: 2;\n}\n\n/* Text layer rotation transforms */\n.textLayer[data-main-rotation='90'] {\n\ttransform: rotate(90deg) translateY(-100%);\n}\n\n.textLayer[data-main-rotation='180'] {\n\ttransform: rotate(180deg) translate(-100%, -100%);\n}\n\n.textLayer[data-main-rotation='270'] {\n\ttransform: rotate(270deg) translateX(-100%);\n}\n\n.textLayer :is(span, br) {\n\tcolor: transparent;\n\tposition: absolute;\n\twhite-space: pre;\n\tcursor: text;\n\ttransform-origin: 0% 0%;\n}\n\n.textLayer > :not(.markedContent),\n.textLayer .markedContent span:not(.markedContent) {\n\tz-index: 1;\n}\n\n.textLayer span.markedContent {\n\ttop: 0;\n\theight: 0;\n}\n\n.textLayer ::-moz-selection {\n\tbackground: rgba(0, 0, 255, 0.25);\n}\n\n.textLayer ::selection {\n\tbackground: rgba(0, 0, 255, 0.25);\n}\n\n.textLayer br::-moz-selection,\n.textLayer br::selection {\n\tbackground: transparent;\n}\n\n/* Search highlights */\n.textLayer .highlight {\n\tmargin: -1px;\n\tpadding: 1px;\n\tbackground-color: rgba(255, 255, 0, 0.4);\n\tborder-radius: 4px;\n}\n\n.textLayer .highlight.appended {\n\tposition: initial;\n}\n\n.textLayer .highlight.selected {\n\tbackground-color: rgba(255, 128, 0, 0.6);\n}\n\n.textLayer .highlight.begin {\n\tborder-radius: 4px 0 0 4px;\n}\n\n.textLayer .highlight.end {\n\tborder-radius: 0 4px 4px 0;\n}\n\n.textLayer .highlight.middle {\n\tborder-radius: 0;\n}\n";

package/dist/pdf-viewer/{renderer-styles.css → renderer-styles.js}

@@ -12,12 +12,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/*
+/**
  * PDF Renderer Styles - Shadow DOM Isolated
  * This is a derivative work based on PDF.js text_layer_builder.css
  */
-
+export const rendererStyles = `
 /* CSS Custom Properties with defaults */
 .pdf-renderer-container {
 	--pdf-background-color: #e8e8e8;
@@ -201,3 +200,4 @@
 .textLayer .highlight.middle {
 	border-radius: 0;
 }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-pdf-view",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"description": "A modern, modular PDF viewer component for Svelte 5. Built on PDF.js with TypeScript support",
 	"author": "Louis Li",
 	"license": "Apache-2.0",
@@ -43,8 +43,8 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0",
-		"@lucide/svelte": "^0.400.0"
+		"@lucide/svelte": ">=0.500.0",
+		"svelte": "^5.0.0"
 	},
 	"peerDependenciesMeta": {
 		"@lucide/svelte": {
@@ -55,6 +55,7 @@
 		"@eslint/compat": "^1.4.0",
 		"@eslint/js": "^9.39.1",
 		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.48.5",
 		"@sveltejs/package": "^2.5.6",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
@@ -83,6 +84,7 @@
 		"svelte-component"
 	],
 	"dependencies": {
+		"esm-env": "^1.2.2",
 		"pdfjs-dist": "^5.4.394"
 	}
 }