add vue example

examples/vue/package.json

@@ -13,6 +13,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "comlink": "^4.4.1",
+    "mupdf": "^0.2.2",
     "vue": "^3.4.29"
   },
   "devDependencies": {

examples/vue/src/App.vue

@@ -1,47 +1,21 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+import { useMupdf } from '@/composables/useMupdf'
+import { watch, ref } from 'vue'
+
+const { workerInitialized, loadDocument, renderPage, currentPage } = useMupdf()
+const pdfUrl = ref<string | null>(null)
+
+watch(workerInitialized, async (isInitialized) => {
+  if (isInitialized) {
+    const response = await fetch('/test.pdf')
+    const arrayBuffer = await response.arrayBuffer()
+    await loadDocument(arrayBuffer)
+    const pngData = await renderPage(0)
+    pdfUrl.value = URL.createObjectURL(new Blob([pngData], { type: 'image/png' }))
+  }
+})
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <img v-if="pdfUrl" :src="pdfUrl" alt="PDF page" />
 </template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>

examples/vue/src/composables/useMupdf.ts

@@ -0,0 +1,36 @@
+import * as Comlink from 'comlink';
+import { ref, shallowRef } from 'vue';
+import type { MupdfWorker } from '../types/mupdf';
+
+const worker = new Worker(new URL('../workers/mupdf.worker', import.meta.url), { type: 'module' });
+const mupdfWorker = Comlink.wrap<MupdfWorker>(worker);
+const workerInitialized = ref(false);
+
+worker.addEventListener('message', (event) => {
+  if (event.data === 'MUPDF_LOADED') {
+    workerInitialized.value = true;
+  }
+});
+
+export function useMupdf() {
+  const document = shallowRef<ArrayBuffer | null>(null);
+  const currentPage = ref(0);
+
+  const loadDocument = async (arrayBuffer: ArrayBuffer) => {
+    document.value = arrayBuffer;
+    return mupdfWorker.loadDocument(arrayBuffer);
+  };
+
+  const renderPage = async (pageIndex: number) => {
+    if (!document.value) throw new Error('Document not loaded');
+    currentPage.value = pageIndex;
+    return mupdfWorker.renderPageAsImage(pageIndex, (window.devicePixelRatio * 96) / 72);
+  };
+
+  return {
+    workerInitialized,
+    loadDocument,
+    renderPage,
+    currentPage,
+  };
+}

examples/vue/src/types/mupdf.d.ts

@@ -0,0 +1,4 @@
+export interface MupdfWorker {
+    loadDocument(document: ArrayBuffer): Promise<boolean>;
+    renderPageAsImage(pageIndex?: number, scale?: number): Promise<Uint8Array>;
+  }