1.0.9 - error handling, update docs, new tests, fix types export. Update app refs when document is opened form pdf.js

Author: tuttarealstep

.gitignore

@@ -176,4 +176,7 @@ dist
 
 # Vitepress
 docs/.vitepress/cache
-docs/.vitepress/dist
+docs/.vitepress/dist
+
+# In any tests directory ignore __screenshots__ directory
+__screenshots__/

docs/.vitepress/config.ts

@@ -47,6 +47,10 @@ export default defineConfig({
 
     socialLinks: [
       { icon: "github", link: "https://github.com/tuttarealstep/vue-pdf.js" },
+      {
+        icon: "npm",
+        link: "https://www.npmjs.com/package/@tuttarealstep/vue-pdf.js",
+      },
     ],
   },
 });

docs/components/PdfViewer.vue

@@ -27,6 +27,15 @@ const options = reactive<NonNullable<VuePDFjsProps['options']>>({
     }
 })
 
+const onErrorHandler = (error: Error) => {
+    console.error('Error loading PDF:', error)
+    alert('An error occurred with the PDF')
+}
+
+const sourceOptions = {
+    onError: onErrorHandler
+}
+
 watchEffect(() => {
     if (options.toolbar) {
         options.toolbar.visible = !hideToolbar.value
@@ -62,6 +71,8 @@ const onPdfAppLoaded = () => {
         //Set the number of pages in the ref
         pages.value = e.pagesCount
     })
+
+    vuepdfjs.value.pdfApp.eventBus.on('documenterror', onErrorHandler)
 }
 
 const pdf = 'https://raw.githubusercontent.com/mozilla/pdf.js/v4.10.38/web/compressed.tracemonkey-pldi-09.pdf'
@@ -73,8 +84,12 @@ const pdf = 'https://raw.githubusercontent.com/mozilla/pdf.js/v4.10.38/web/compr
     <div>
         <input type="checkbox" v-model="hideToolbar" /> Hide Toolbar
         <input type="checkbox" v-model="hideSidebar" /> Hide Sidebar
+        <button type="button" class="custom-button">
+            Load Invalid PDF
+        </button>
     </div>
-    <VuePDFjs ref="vuepdfjs" :source="pdf" :options="options" @pdf-app:loaded="onPdfAppLoaded" />
+    <VuePDFjs ref="vuepdfjs" :source="pdf" :options="options" :source-options="sourceOptions"
+        @pdf-app:loaded="onPdfAppLoaded" />
 </template>
 
 <style>
@@ -85,4 +100,13 @@ const pdf = 'https://raw.githubusercontent.com/mozilla/pdf.js/v4.10.38/web/compr
     display: flex;
     flex-direction: column;
 }
+
+.custom-button {
+    padding: 0.25rem 0.75rem;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
 </style>

docs/examples/basic-examples.md

@@ -127,3 +127,220 @@ body {
 }
 </style>
 ```
+
+## Handle errors
+
+### Handle errors with the `usePDF` composable
+
+In this example, we handle errors in the `usePDF` composable and display a message to the user.
+
+```vue
+<script setup lang="ts">
+import { reactive, useTemplateRef } from "vue";
+import {
+  VuePDFjs,
+  usePDF,
+  type VuePDFjsProps,
+} from "@tuttarealstep/vue-pdf.js";
+import "@tuttarealstep/vue-pdf.js/dist/style.css";
+import enUS_FTL from "@tuttarealstep/vue-pdf.js/l10n/en-US/viewer.ftl?raw";
+
+const vuepdfjs = useTemplateRef<typeof VuePDFjs>("vuepdfjs");
+
+const options = reactive<NonNullable<VuePDFjsProps["options"]>>({
+  locale: {
+    code: "en-US",
+    ftl: enUS_FTL,
+  },
+});
+
+const {
+  pdf: document,
+  info,
+  pages,
+} = usePDF("invalid-source", {
+  onError: (error) => {
+    console.error("Error loading the PDF file", error);
+    alert("Error loading the PDF file");
+  },
+});
+
+console.log(document, info, pages);
+</script>
+
+<template>
+  <div id="app">
+    <VuePDFjs ref="vuepdfjs" :source="document" :options="options" />
+  </div>
+</template>
+
+<style>
+html,
+body,
+#app {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>
+```
+
+### Handle errors only with the `VuePDFjs` component
+
+In this example, we handle errors only with the `VuePDFjs` component and display a message to the user.
+
+```vue
+<script setup lang="ts">
+import { reactive, useTemplateRef } from "vue";
+import {
+  VuePDFjs,
+  usePDF,
+  type VuePDFjsProps,
+} from "@tuttarealstep/vue-pdf.js";
+import "@tuttarealstep/vue-pdf.js/dist/style.css";
+import enUS_FTL from "@tuttarealstep/vue-pdf.js/l10n/en-US/viewer.ftl?raw";
+
+const vuepdfjs = useTemplateRef<typeof VuePDFjs>("vuepdfjs");
+
+const options = reactive<NonNullable<VuePDFjsProps["options"]>>({
+  locale: {
+    code: "en-US",
+    ftl: enUS_FTL,
+  },
+});
+
+// Custom error handler
+const onPdfAppError = (error: unknown) => {
+  console.error(error);
+
+  alert("An error occurred while loading the PDF document.");
+};
+
+// Source options
+const sourceOptions = reactive<NonNullable<VuePDFjsProps["sourceOptions"]>>({
+  onError: onPdfAppError,
+});
+
+const source = "invalid-source";
+</script>
+
+<template>
+  <div id="app">
+    <VuePDFjs
+      ref="vuepdfjs"
+      :source="source"
+      :options="options"
+      :source-options="sourceOptions"
+    />
+  </div>
+</template>
+
+<style>
+html,
+body,
+#app {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>
+```
+
+### Handle pdf.js document errors
+
+If we try to load a PDF document with the pdf.js interface it dispach a "documenterror" event. We can listen to this event and handle the error.
+
+```vue
+<script setup lang="ts">
+import { reactive, useTemplateRef } from "vue";
+import {
+  VuePDFjs,
+  usePDF,
+  type VuePDFjsProps,
+} from "@tuttarealstep/vue-pdf.js";
+import "@tuttarealstep/vue-pdf.js/dist/style.css";
+import enUS_FTL from "@tuttarealstep/vue-pdf.js/l10n/en-US/viewer.ftl?raw";
+
+const vuepdfjs = useTemplateRef<typeof VuePDFjs>("vuepdfjs");
+
+const options = reactive<NonNullable<VuePDFjsProps["options"]>>({
+  locale: {
+    code: "en-US",
+    ftl: enUS_FTL,
+  },
+});
+
+// Custom error handler
+const onPdfAppError = (error: unknown) => {
+  console.error(error);
+
+  alert("An error occurred with the PDF document.");
+};
+
+const onPdfAppLoaded = () => {
+  console.log("pdf-app:loaded");
+  console.log(vuepdfjs.value?.pdfApp);
+
+  if (!vuepdfjs.value?.pdfApp) {
+    return;
+  }
+
+  // Wait for the pages to be loaded
+  vuepdfjs.value.pdfApp.eventBus.on("pagesloaded", (e: any) => {
+    // Search for a specific text in the document
+    vuepdfjs.value?.pdfApp.eventBus.dispatch("find", {
+      query: [
+        "Dynamic languages such as JavaScript are more difficult to compile than statically typed ones.",
+      ],
+      caseSensitive: false,
+      entireWord: false,
+      highlightAll: true,
+    });
+  });
+
+  // Listen to the documenterror event
+  vuepdfjs.value.pdfApp.eventBus.on("documenterror", onPdfAppError);
+};
+
+const {
+  pdf: document,
+  info,
+  pages,
+} = usePDF("compressed.tracemonkey-pldi-09.pdf");
+
+console.log(document, info, pages);
+</script>
+
+<template>
+  <div id="app">
+    <VuePDFjs
+      ref="vuepdfjs"
+      :source="document"
+      :options="options"
+      @pdf-app:loaded="onPdfAppLoaded"
+    />
+  </div>
+</template>
+
+<style>
+html,
+body,
+#app {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>
+```

docs/index.md

@@ -31,22 +31,22 @@ features:
 
 <style>
 :root {
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(45deg, #3fb984 45%, #31475e);
+  --vp-home-hero-name-color: transparent !important;
+  --vp-home-hero-name-background: -webkit-linear-gradient(45deg, #3fb984 45%, #31475e) !important;
 
-  --vp-home-hero-image-background-image: linear-gradient(45deg, #3fb984 50%, #31475e 50%);
-  --vp-home-hero-image-filter: blur(44px);
+  --vp-home-hero-image-background-image: linear-gradient(45deg, #3fb984 50%, #31475e 50%) !important;
+  --vp-home-hero-image-filter: blur(44px) !important;
 }
 
 @media (min-width: 640px) {
   :root {
-    --vp-home-hero-image-filter: blur(56px);
+    --vp-home-hero-image-filter: blur(56px) !important;
   }
 }
 
 @media (min-width: 960px) {
   :root {
-    --vp-home-hero-image-filter: blur(68px);
+    --vp-home-hero-image-filter: blur(68px) !important;
   }
 }
 </style>