svelte-pdf-view 0.1.3 → 0.1.5

package/README.md

@@ -19,11 +19,11 @@ A modern, modular PDF viewer component for Svelte 5. Built on top of [PDF.js](ht
 ## Installation
 
 ```bash
-npm install svelte-pdf-view
+npm install svelte-pdf-view pdfjs-dist
 # or
-pnpm add svelte-pdf-view
+pnpm add svelte-pdf-view pdfjs-dist
 # or
-yarn add svelte-pdf-view
+yarn add svelte-pdf-view pdfjs-dist
 ```
 
 If you want to use the default `<PdfToolbar>` component, also install:
@@ -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/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-pdf-view",
-	"version": "0.1.3",
+	"version": "0.1.5",
 	"description": "A modern, modular PDF viewer component for Svelte 5. Built on PDF.js with TypeScript support",
 	"author": "Louis Li",
 	"license": "Apache-2.0",
@@ -44,6 +44,7 @@
 	},
 	"peerDependencies": {
 		"@lucide/svelte": ">=0.500.0",
+		"pdfjs-dist": "^5.0.0",
 		"svelte": "^5.0.0"
 	},
 	"peerDependenciesMeta": {
@@ -64,6 +65,7 @@
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.13.0",
 		"globals": "^16.5.0",
+		"pdfjs-dist": "^5.4.394",
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
 		"publint": "^0.3.15",
@@ -84,7 +86,6 @@
 		"svelte-component"
 	],
 	"dependencies": {
-		"esm-env": "^1.2.2",
-		"pdfjs-dist": "^5.4.394"
+		"esm-env": "^1.2.2"
 	}
 }