svelte-pdf-view 0.1.0

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2025 Louis Li
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,293 @@
+# svelte-pdf-view
+
+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.
+
+## Features
+
+- **PDF Rendering** - High-quality PDF rendering powered by PDF.js
+- **Text Search** - Full-text search with highlight navigation
+- **Rotation** - Rotate pages clockwise/counter-clockwise
+- **Zoom** - Zoom in/out controls
+- **Responsive** - Works on desktop and mobile
+- **Customizable** - Style the scrollbar, background, and more
+- **Modular** - Use the default layout or build your own toolbar
+- **Shadow DOM** - Renderer styles are isolated and won't leak
+- **Multiple Sources** - Load from URL, ArrayBuffer, Uint8Array, or Blob
+
+## Installation
+
+```bash
+npm install svelte-pdf-view
+# or
+pnpm add svelte-pdf-view
+# or
+yarn add svelte-pdf-view
+```
+
+If you want to use the default `<PdfToolbar>` component, also install:
+
+```bash
+npm install @lucide/svelte
+```
+
+## Quick Start
+
+### Basic Usage
+
+```svelte
+<script lang="ts">
+	import { PdfViewer, PdfToolbar, PdfRenderer } from 'svelte-pdf-view';
+</script>
+
+<div style="height: 100vh;">
+	<PdfViewer src="/document.pdf">
+		<PdfToolbar />
+		<PdfRenderer src="/document.pdf" />
+	</PdfViewer>
+</div>
+```
+
+### Loading from Different Sources
+
+```svelte
+<script lang="ts">
+	import { PdfViewer, PdfToolbar, PdfRenderer, type PdfSource } from 'svelte-pdf-view';
+
+	// From URL
+	let pdfSource: PdfSource = '/document.pdf';
+
+	// From file input
+	function handleFileSelect(e: Event) {
+		const file = (e.target as HTMLInputElement).files?.[0];
+		if (file) {
+			pdfSource = file; // Blob works directly
+		}
+	}
+
+	// From fetch response
+	async function loadFromApi() {
+		const response = await fetch('/api/document');
+		const arrayBuffer = await response.arrayBuffer();
+		pdfSource = arrayBuffer;
+	}
+</script>
+
+<input type="file" accept=".pdf" onchange={handleFileSelect} />
+
+<PdfViewer src={pdfSource}>
+	<PdfToolbar />
+	<PdfRenderer src={pdfSource} />
+</PdfViewer>
+```
+
+## Components
+
+### `<PdfViewer>`
+
+The main container component that provides context for toolbar and renderer.
+
+```svelte
+<PdfViewer src={pdfSource} scale={1.0} class="my-viewer">
+	<!-- Children -->
+</PdfViewer>
+```
+
+| Prop    | Type        | Default  | Description                                        |
+| ------- | ----------- | -------- | -------------------------------------------------- |
+| `src`   | `PdfSource` | required | PDF source (URL, ArrayBuffer, Uint8Array, or Blob) |
+| `scale` | `number`    | `1.0`    | Initial zoom scale                                 |
+| `class` | `string`    | `''`     | CSS class for the container                        |
+
+### `<PdfToolbar>`
+
+The default toolbar with page navigation, zoom, rotation, and search controls.
+
+```svelte
+<PdfToolbar />
+```
+
+The toolbar automatically connects to the viewer context - no props needed.
+
+### `<PdfRenderer>`
+
+The PDF rendering component. Uses Shadow DOM for style isolation.
+
+```svelte
+<PdfRenderer
+	src={pdfSource}
+	backgroundColor="#e8e8e8"
+	scrollbarThumbColor="#c1c1c1"
+	scrollbarTrackColor="#f1f1f1"
+	scrollbarThumbHoverColor="#a1a1a1"
+	scrollbarWidth="10px"
+	pageShadow="0 2px 8px rgba(0, 0, 0, 0.12)"
+/>
+```
+
+| Prop                       | Type        | Default                             | Description                          |
+| -------------------------- | ----------- | ----------------------------------- | ------------------------------------ |
+| `src`                      | `PdfSource` | required                            | PDF source                           |
+| `backgroundColor`          | `string`    | `'#e8e8e8'`                         | Background color of scroll container |
+| `pageShadow`               | `string`    | `'0 2px 8px rgba(0,0,0,0.12), ...'` | Box shadow for PDF pages             |
+| `scrollbarTrackColor`      | `string`    | `'#f1f1f1'`                         | Scrollbar track background           |
+| `scrollbarThumbColor`      | `string`    | `'#c1c1c1'`                         | Scrollbar thumb color                |
+| `scrollbarThumbHoverColor` | `string`    | `'#a1a1a1'`                         | Scrollbar thumb hover color          |
+| `scrollbarWidth`           | `string`    | `'10px'`                            | Scrollbar width                      |
+
+## Custom Toolbar
+
+You can create your own toolbar using the context API:
+
+```svelte
+<script lang="ts">
+	import { PdfViewer, PdfRenderer, getPdfViewerContext } from 'svelte-pdf-view';
+</script>
+
+<PdfViewer src="/document.pdf">
+	<MyCustomToolbar />
+	<PdfRenderer src="/document.pdf" />
+</PdfViewer>
+```
+
+```svelte
+<!-- MyCustomToolbar.svelte -->
+<script lang="ts">
+	import { getPdfViewerContext } from 'svelte-pdf-view';
+
+	const { state, actions } = getPdfViewerContext();
+</script>
+
+<div class="toolbar">
+	<span>Page {state.currentPage} of {state.totalPages}</span>
+
+	<button onclick={() => actions.zoomOut()}>-</button>
+	<span>{Math.round(state.scale * 100)}%</span>
+	<button onclick={() => actions.zoomIn()}>+</button>
+
+	<button onclick={() => actions.rotateCounterClockwise()}>↺</button>
+	<button onclick={() => actions.rotateClockwise()}>↻</button>
+</div>
+
+<style>
+	/* Your custom styles */
+</style>
+```
+
+### Context API
+
+#### `state: PdfViewerState`
+
+| Property        | Type             | Description                        |
+| --------------- | ---------------- | ---------------------------------- |
+| `loading`       | `boolean`        | Whether the PDF is loading         |
+| `error`         | `string \| null` | Error message if loading failed    |
+| `totalPages`    | `number`         | Total number of pages              |
+| `currentPage`   | `number`         | Current visible page               |
+| `scale`         | `number`         | Current zoom scale                 |
+| `rotation`      | `number`         | Current rotation (0, 90, 180, 270) |
+| `searchQuery`   | `string`         | Current search query               |
+| `searchCurrent` | `number`         | Current match index                |
+| `searchTotal`   | `number`         | Total number of matches            |
+| `isSearching`   | `boolean`        | Whether search is in progress      |
+
+#### `actions: PdfViewerActions`
+
+| Method                     | Description                  |
+| -------------------------- | ---------------------------- |
+| `zoomIn()`                 | Increase zoom level          |
+| `zoomOut()`                | Decrease zoom level          |
+| `setScale(scale: number)`  | Set specific zoom scale      |
+| `rotateClockwise()`        | Rotate 90° clockwise         |
+| `rotateCounterClockwise()` | Rotate 90° counter-clockwise |
+| `goToPage(page: number)`   | Navigate to specific page    |
+| `search(query: string)`    | Search for text              |
+| `searchNext()`             | Go to next search match      |
+| `searchPrevious()`         | Go to previous search match  |
+| `clearSearch()`            | Clear search highlights      |
+
+## Types
+
+```typescript
+// PDF source can be URL, ArrayBuffer, Uint8Array, or Blob
+type PdfSource = string | ArrayBuffer | Uint8Array | Blob;
+
+interface PdfViewerState {
+	loading: boolean;
+	error: string | null;
+	totalPages: number;
+	currentPage: number;
+	scale: number;
+	rotation: number;
+	searchQuery: string;
+	searchCurrent: number;
+	searchTotal: number;
+	isSearching: boolean;
+}
+
+interface PdfViewerActions {
+	zoomIn: () => void;
+	zoomOut: () => void;
+	setScale: (scale: number) => void;
+	rotateClockwise: () => void;
+	rotateCounterClockwise: () => void;
+	goToPage: (page: number) => void;
+	search: (query: string) => Promise<void>;
+	searchNext: () => void;
+	searchPrevious: () => void;
+	clearSearch: () => void;
+}
+```
+
+## Styling Examples
+
+### Dark Theme
+
+```svelte
+<PdfRenderer
+	src={pdfSource}
+	backgroundColor="#1a1a1a"
+	scrollbarTrackColor="#2d2d2d"
+	scrollbarThumbColor="#555"
+	scrollbarThumbHoverColor="#666"
+	pageShadow="0 4px 12px rgba(0, 0, 0, 0.5)"
+/>
+```
+
+### Minimal Theme
+
+```svelte
+<PdfRenderer
+	src={pdfSource}
+	backgroundColor="#ffffff"
+	scrollbarWidth="6px"
+	scrollbarTrackColor="transparent"
+	scrollbarThumbColor="#ddd"
+	pageShadow="none"
+/>
+```
+
+## Browser Support
+
+- Chrome/Edge 88+
+- Firefox 78+
+- Safari 14+
+
+## License
+
+Apache 2.0
+
+## Attribution
+
+This project is built on top of [PDF.js](https://mozilla.github.io/pdf.js/) by Mozilla, licensed under the Apache License 2.0.
+
+Several files in this project are derivative works based on PDF.js viewer source code:
+
+| File                  | Based on                                                |
+| --------------------- | ------------------------------------------------------- |
+| `EventBus.ts`         | `web/event_utils.js`                                    |
+| `FindController.ts`   | `web/pdf_find_controller.js`, `web/text_highlighter.js` |
+| `PDFPageView.ts`      | `web/pdf_page_view.js`                                  |
+| `PDFViewerCore.ts`    | `web/pdf_viewer.js`                                     |
+| `renderer-styles.css` | `web/text_layer_builder.css`                            |
+
+These files retain the original Apache 2.0 license headers with attribution to the Mozilla Foundation.

package/dist/PdfRenderer.svelte

@@ -0,0 +1,238 @@
+<script lang="ts">
+	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';
+
+	/** PDF source - can be a URL string, ArrayBuffer, Uint8Array, or Blob */
+	export type PdfSource = string | ArrayBuffer | Uint8Array | Blob;
+
+	interface Props {
+		/** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob */
+		src: PdfSource;
+		/** Background color of the scroll container */
+		backgroundColor?: string;
+		/** Page shadow style */
+		pageShadow?: string;
+		/** Scrollbar track color */
+		scrollbarTrackColor?: string;
+		/** Scrollbar thumb color */
+		scrollbarThumbColor?: string;
+		/** Scrollbar thumb hover color */
+		scrollbarThumbHoverColor?: string;
+		/** Scrollbar width */
+		scrollbarWidth?: string;
+	}
+
+	let {
+		src,
+		backgroundColor = '#e8e8e8',
+		pageShadow = '0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08)',
+		scrollbarTrackColor = '#f1f1f1',
+		scrollbarThumbColor = '#c1c1c1',
+		scrollbarThumbHoverColor = '#a1a1a1',
+		scrollbarWidth = '10px'
+	}: Props = $props();
+
+	const { state: viewerState, _registerRenderer } = getPdfViewerContext();
+
+	let hostEl: HTMLDivElement | undefined = $state();
+	let shadowRoot: ShadowRoot | null = null;
+	let scrollContainerEl: HTMLDivElement | null = null;
+	let mounted = $state(false);
+
+	// 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;
+
+	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;
+
+		return pdfjsLib;
+	}
+
+	async function loadPdf(source: PdfSource) {
+		if (!browser || !scrollContainerEl) return;
+
+		viewerState.loading = true;
+		viewerState.error = null;
+
+		try {
+			const pdfjs = await initPdfJs();
+			if (!pdfjs) return;
+
+			const { PDFViewerCore } = await import('./pdf-viewer/PDFViewerCore.js');
+			const { FindController } = await import('./pdf-viewer/FindController.js');
+			const { EventBus } = await import('./pdf-viewer/EventBus.js');
+
+			if (viewer) {
+				viewer.destroy();
+			}
+
+			const eventBus = new EventBus();
+
+			const newViewer = new PDFViewerCore({
+				container: scrollContainerEl,
+				eventBus,
+				initialScale: viewerState.scale,
+				initialRotation: viewerState.rotation
+			});
+
+			findController = new FindController(newViewer, eventBus);
+
+			// Setup event listeners
+			eventBus.on('scalechanged', (data: Record<string, unknown>) => {
+				viewerState.scale = data.scale as number;
+			});
+
+			eventBus.on('rotationchanged', (data: Record<string, unknown>) => {
+				viewerState.rotation = data.rotation as number;
+			});
+
+			eventBus.on('updateviewarea', (data: Record<string, unknown>) => {
+				const location = data.location as { pageNumber: number };
+				viewerState.currentPage = location.pageNumber;
+			});
+
+			eventBus.on('pagesloaded', (data: Record<string, unknown>) => {
+				viewerState.totalPages = data.pagesCount as number;
+			});
+
+			eventBus.on('updatefindmatchescount', (data: Record<string, unknown>) => {
+				const matchesCount = data.matchesCount as { current: number; total: number };
+				viewerState.searchCurrent = matchesCount.current;
+				viewerState.searchTotal = matchesCount.total;
+			});
+
+			// Handle different source types
+			let documentSource: string | { data: ArrayBuffer } | { data: Uint8Array };
+
+			if (typeof source === 'string') {
+				// URL string
+				documentSource = source;
+			} else if (source instanceof Blob) {
+				// Convert Blob to ArrayBuffer
+				const arrayBuffer = await source.arrayBuffer();
+				documentSource = { data: arrayBuffer };
+			} else if (source instanceof ArrayBuffer) {
+				documentSource = { data: source };
+			} else if (source instanceof Uint8Array) {
+				documentSource = { data: source };
+			} else {
+				throw new Error('Invalid PDF source type');
+			}
+
+			const loadingTask = pdfjs.getDocument(documentSource);
+			const pdfDocument = await loadingTask.promise;
+
+			await newViewer.setDocument(pdfDocument);
+			findController.setDocument(pdfDocument);
+
+			viewer = newViewer;
+			viewerState.loading = false;
+		} catch (e) {
+			viewerState.error = e instanceof Error ? e.message : 'Failed to load PDF';
+			viewerState.loading = false;
+		}
+	}
+
+	// Register actions with context
+	const rendererActions: PdfViewerActions = {
+		zoomIn: () => viewer?.zoomIn(),
+		zoomOut: () => viewer?.zoomOut(),
+		setScale: (scale: number) => {
+			if (viewer) viewer.scale = scale;
+		},
+		rotateClockwise: () => viewer?.rotateClockwise(),
+		rotateCounterClockwise: () => viewer?.rotateCounterClockwise(),
+		goToPage: (page: number) => viewer?.scrollToPage(page),
+		search: async (query: string) => {
+			if (!findController) return;
+			viewerState.isSearching = true;
+			viewerState.searchQuery = query;
+			await findController.find({
+				query,
+				highlightAll: true,
+				caseSensitive: false
+			});
+			viewerState.isSearching = false;
+		},
+		searchNext: () => findController?.findNext(),
+		searchPrevious: () => findController?.findPrevious(),
+		clearSearch: () => {
+			if (findController) {
+				findController.reset();
+				viewerState.searchQuery = '';
+				viewerState.searchCurrent = 0;
+				viewerState.searchTotal = 0;
+			}
+		}
+	};
+
+	onMount(async () => {
+		if (browser && hostEl) {
+			// Create shadow root for style isolation
+			shadowRoot = hostEl.attachShadow({ mode: 'open' });
+
+			// Inject styles
+			const styleEl = document.createElement('style');
+			styleEl.textContent = rendererStyles;
+			shadowRoot.appendChild(styleEl);
+
+			// Create container structure inside shadow DOM
+			const container = document.createElement('div');
+			container.className = 'pdf-renderer-container';
+
+			// Apply CSS custom properties for customization
+			container.style.setProperty('--pdf-background-color', backgroundColor);
+			container.style.setProperty('--pdf-page-shadow', pageShadow);
+			container.style.setProperty('--pdf-scrollbar-track-color', scrollbarTrackColor);
+			container.style.setProperty('--pdf-scrollbar-thumb-color', scrollbarThumbColor);
+			container.style.setProperty('--pdf-scrollbar-thumb-hover-color', scrollbarThumbHoverColor);
+			container.style.setProperty('--pdf-scrollbar-width', scrollbarWidth);
+
+			scrollContainerEl = document.createElement('div');
+			scrollContainerEl.className = 'pdf-scroll-container';
+			container.appendChild(scrollContainerEl);
+
+			shadowRoot.appendChild(container);
+
+			// Register actions
+			_registerRenderer(rendererActions);
+
+			mounted = true;
+		}
+	});
+
+	// Load PDF when src changes
+	$effect(() => {
+		if (browser && src && scrollContainerEl && mounted) {
+			loadPdf(src);
+		}
+	});
+
+	onDestroy(() => {
+		if (viewer) {
+			viewer.destroy();
+			viewer = null;
+		}
+		findController = null;
+	});
+</script>
+
+<div bind:this={hostEl} class="pdf-renderer-host"></div>
+
+<style>
+	.pdf-renderer-host {
+		display: block;
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+	}
+</style>

package/dist/PdfRenderer.svelte.d.ts

@@ -0,0 +1,21 @@
+/** PDF source - can be a URL string, ArrayBuffer, Uint8Array, or Blob */
+export type PdfSource = string | ArrayBuffer | Uint8Array | Blob;
+interface Props {
+    /** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob */
+    src: PdfSource;
+    /** Background color of the scroll container */
+    backgroundColor?: string;
+    /** Page shadow style */
+    pageShadow?: string;
+    /** Scrollbar track color */
+    scrollbarTrackColor?: string;
+    /** Scrollbar thumb color */
+    scrollbarThumbColor?: string;
+    /** Scrollbar thumb hover color */
+    scrollbarThumbHoverColor?: string;
+    /** Scrollbar width */
+    scrollbarWidth?: string;
+}
+declare const PdfRenderer: import("svelte").Component<Props, {}, "">;
+type PdfRenderer = ReturnType<typeof PdfRenderer>;
+export default PdfRenderer;