svelte-pdf-view 0.1.1 → 0.1.3

package/dist/PdfRenderer.svelte

@@ -1,9 +1,8 @@
 <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 { 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;
@@ -48,17 +47,23 @@
 	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');
-		const pdfjsWorker = await import('pdfjs-dist/legacy/build/pdf.worker.min.mjs?url');
-		pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker.default;
+
+		// 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;
 	}
 
 	async function loadPdf(source: PdfSource) {
-		if (!browser || !scrollContainerEl) return;
+		if (!BROWSER || !scrollContainerEl) return;
 
 		viewerState.loading = true;
 		viewerState.error = null;
@@ -176,7 +181,7 @@
 	};
 
 	onMount(async () => {
-		if (browser && hostEl) {
+		if (BROWSER && hostEl) {
 			// Create shadow root for style isolation
 			shadowRoot = hostEl.attachShadow({ mode: 'open' });
 
@@ -212,7 +217,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,
@@ -46,17 +45,23 @@
 	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');
-		const pdfjsWorker = await import('pdfjs-dist/legacy/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/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.1",
+	"version": "0.1.3",
 	"description": "A modern, modular PDF viewer component for Svelte 5. Built on PDF.js with TypeScript support",
 	"author": "Louis Li",
 	"license": "Apache-2.0",
@@ -84,6 +84,7 @@
 		"svelte-component"
 	],
 	"dependencies": {
+		"esm-env": "^1.2.2",
 		"pdfjs-dist": "^5.4.394"
 	}
 }