@embedpdf/plugin-thumbnail 1.5.0 → 2.0.0-next.0

package/dist/vue/index.js

@@ -1,71 +1,116 @@
 import { usePlugin, useCapability } from "@embedpdf/core/vue";
 import { ThumbnailPlugin } from "@embedpdf/plugin-thumbnail";
 export * from "@embedpdf/plugin-thumbnail";
-import { defineComponent, useAttrs, ref, watchEffect, onMounted, onBeforeUnmount, nextTick, createElementBlock, openBlock, mergeProps, unref, createElementVNode, normalizeStyle, Fragment, renderList, renderSlot, watch, createCommentVNode } from "vue";
+import { defineComponent, ref, watch, nextTick, createElementBlock, openBlock, mergeProps, createElementVNode, normalizeStyle, Fragment, renderList, renderSlot, createCommentVNode } from "vue";
 import { ignore, PdfErrorCode } from "@embedpdf/models";
 const useThumbnailPlugin = () => usePlugin(ThumbnailPlugin.id);
 const useThumbnailCapability = () => useCapability(ThumbnailPlugin.id);
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "thumbnails-pane",
+  props: {
+    documentId: {}
+  },
   setup(__props) {
-    const attrs = useAttrs();
+    const props = __props;
     const { plugin: thumbnailPlugin } = useThumbnailPlugin();
     const viewportRef = ref(null);
+    const windowData = ref({ window: null, docId: null });
     const windowState = ref(null);
-    let offWindow = null;
-    let offScrollTo = null;
-    watchEffect((onCleanup) => {
-      if (!thumbnailPlugin.value) return;
-      offWindow == null ? void 0 : offWindow();
-      offWindow = thumbnailPlugin.value.onWindow((w) => windowState.value = w);
-      onCleanup(() => offWindow == null ? void 0 : offWindow());
-    });
-    onMounted(() => {
-      const vp = viewportRef.value;
-      if (!vp || !thumbnailPlugin.value) return;
-      const onScroll = () => thumbnailPlugin.value.updateWindow(vp.scrollTop, vp.clientHeight);
-      vp.addEventListener("scroll", onScroll);
-      const resizeObserver = new ResizeObserver(() => {
-        thumbnailPlugin.value.updateWindow(vp.scrollTop, vp.clientHeight);
-      });
-      resizeObserver.observe(vp);
-      thumbnailPlugin.value.updateWindow(vp.scrollTop, vp.clientHeight);
-      onBeforeUnmount(() => {
-        vp.removeEventListener("scroll", onScroll);
-        resizeObserver.disconnect();
-      });
-    });
-    watchEffect((onCleanup) => {
-      const vp = viewportRef.value;
-      if (!vp || !thumbnailPlugin.value || !windowState.value) return;
-      offScrollTo = thumbnailPlugin.value.onScrollTo(({ top, behavior }) => {
-        nextTick(() => {
-          vp.scrollTo({ top, behavior });
+    watch(
+      windowData,
+      (data) => {
+        windowState.value = data.docId === props.documentId ? data.window : null;
+      },
+      { deep: true }
+    );
+    watch(
+      [() => thumbnailPlugin.value, () => props.documentId],
+      ([plugin, docId], _, onCleanup) => {
+        if (!plugin) {
+          windowData.value = { window: null, docId: null };
+          return;
+        }
+        const scope = plugin.provides().forDocument(docId);
+        const initialWindow = scope.getWindow();
+        if (initialWindow) {
+          windowData.value = { window: initialWindow, docId };
+        }
+        const unsubscribe = scope.onWindow((newWindow) => {
+          windowData.value = { window: newWindow, docId };
+        });
+        onCleanup(() => {
+          unsubscribe();
+          windowData.value = { window: null, docId: null };
+        });
+      },
+      { immediate: true }
+    );
+    watch(
+      [viewportRef, () => thumbnailPlugin.value, () => props.documentId],
+      ([vp, plugin, docId], _, onCleanup) => {
+        if (!vp || !plugin) return;
+        const scope = plugin.provides().forDocument(docId);
+        const onScroll = () => scope.updateWindow(vp.scrollTop, vp.clientHeight);
+        vp.addEventListener("scroll", onScroll);
+        const resizeObserver = new ResizeObserver(() => {
+          scope.updateWindow(vp.scrollTop, vp.clientHeight);
+        });
+        resizeObserver.observe(vp);
+        scope.updateWindow(vp.scrollTop, vp.clientHeight);
+        onCleanup(() => {
+          vp.removeEventListener("scroll", onScroll);
+          resizeObserver.disconnect();
+        });
+      },
+      { immediate: true }
+    );
+    watch(
+      [viewportRef, () => thumbnailPlugin.value, () => props.documentId, windowState],
+      ([vp, plugin, docId]) => {
+        if (!vp || !plugin) return;
+        const scope = plugin.provides().forDocument(docId);
+        scope.updateWindow(vp.scrollTop, vp.clientHeight);
+      }
+    );
+    watch(
+      [viewportRef, () => thumbnailPlugin.value, () => props.documentId, () => !!windowState.value],
+      ([vp, plugin, docId, window2], _, onCleanup) => {
+        if (!vp || !plugin || !window2) return;
+        const scope = plugin.provides().forDocument(docId);
+        const unsubscribe = scope.onScrollTo(({ top, behavior }) => {
+          nextTick(() => {
+            vp.scrollTo({ top, behavior });
+          });
         });
-      });
-      onCleanup(() => offScrollTo == null ? void 0 : offScrollTo());
-    });
-    onBeforeUnmount(() => {
-      offWindow == null ? void 0 : offWindow();
-      offScrollTo == null ? void 0 : offScrollTo();
-    });
+        onCleanup(unsubscribe);
+      },
+      { immediate: true }
+    );
+    const paddingY = ref(0);
+    watch(
+      () => thumbnailPlugin.value,
+      (plugin) => {
+        paddingY.value = (plugin == null ? void 0 : plugin.cfg.paddingY) ?? 0;
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
-      var _a, _b, _c, _d, _e, _f;
+      var _a, _b;
       return openBlock(), createElementBlock("div", mergeProps({
         ref_key: "viewportRef",
         ref: viewportRef,
         style: {
           overflowY: "auto",
           position: "relative",
-          paddingTop: (((_b = (_a = unref(thumbnailPlugin)) == null ? void 0 : _a.cfg) == null ? void 0 : _b.paddingY) ?? 0) + "px",
-          paddingBottom: (((_d = (_c = unref(thumbnailPlugin)) == null ? void 0 : _c.cfg) == null ? void 0 : _d.paddingY) ?? 0) + "px",
+          paddingTop: `${paddingY.value}px`,
+          paddingBottom: `${paddingY.value}px`,
           height: "100%"
         }
-      }, unref(attrs)), [
+      }, _ctx.$attrs), [
         createElementVNode("div", {
-          style: normalizeStyle({ height: (((_e = windowState.value) == null ? void 0 : _e.totalHeight) ?? 0) + "px", position: "relative" })
+          style: normalizeStyle({ height: `${((_a = windowState.value) == null ? void 0 : _a.totalHeight) ?? 0}px`, position: "relative" })
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(((_f = windowState.value) == null ? void 0 : _f.items) ?? [], (m) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(((_b = windowState.value) == null ? void 0 : _b.items) ?? [], (m) => {
             return renderSlot(_ctx.$slots, "default", {
               key: m.pageIndex,
               meta: m
@@ -80,27 +125,30 @@ const _hoisted_1 = ["src"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "thumbnail-img",
   props: {
+    documentId: {},
     meta: {}
   },
   setup(__props) {
     const props = __props;
-    const attrs = useAttrs();
     const { provides: thumbs } = useThumbnailCapability();
     const { plugin: thumbnailPlugin } = useThumbnailPlugin();
     const url = ref(null);
     let urlToRevoke = null;
     const refreshTick = ref(0);
-    let offRefresh = null;
-    watchEffect((onCleanup) => {
-      if (!thumbnailPlugin.value) return;
-      offRefresh == null ? void 0 : offRefresh();
-      offRefresh = thumbnailPlugin.value.onRefreshPages((pages) => {
-        if (pages.includes(props.meta.pageIndex)) {
-          refreshTick.value++;
-        }
-      });
-      onCleanup(() => offRefresh == null ? void 0 : offRefresh());
-    });
+    watch(
+      [() => thumbnailPlugin.value, () => props.documentId, () => props.meta.pageIndex],
+      ([plugin, docId, pageIdx], _, onCleanup) => {
+        if (!plugin) return;
+        const scope = plugin.provides().forDocument(docId);
+        const unsubscribe = scope.onRefreshPages((pages) => {
+          if (pages.includes(pageIdx)) {
+            refreshTick.value++;
+          }
+        });
+        onCleanup(unsubscribe);
+      },
+      { immediate: true }
+    );
     function revoke() {
       if (urlToRevoke) {
         URL.revokeObjectURL(urlToRevoke);
@@ -108,37 +156,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     let abortTask = null;
-    function load() {
-      if (!thumbs.value) return;
-      const task = thumbs.value.renderThumb(props.meta.pageIndex, window.devicePixelRatio);
-      abortTask = () => task.abort({
-        code: PdfErrorCode.Cancelled,
-        message: "canceled render task"
-      });
-      task.wait((blob) => {
-        revoke();
-        const objectUrl = URL.createObjectURL(blob);
-        urlToRevoke = objectUrl;
-        url.value = objectUrl;
-      }, ignore);
-    }
     watch(
-      () => [props.meta.pageIndex, refreshTick.value, !!thumbs.value],
-      () => {
-        abortTask == null ? void 0 : abortTask();
-        load();
+      [() => thumbs.value, () => props.documentId, () => props.meta.pageIndex, refreshTick],
+      ([capability, docId, pageIdx], _, onCleanup) => {
+        if (abortTask) {
+          abortTask();
+          abortTask = null;
+        }
+        if (!capability) {
+          url.value = null;
+          return;
+        }
+        const scope = capability.forDocument(docId);
+        const task = scope.renderThumb(pageIdx, window.devicePixelRatio);
+        abortTask = () => task.abort({
+          code: PdfErrorCode.Cancelled,
+          message: "canceled render task"
+        });
+        task.wait((blob) => {
+          revoke();
+          const objectUrl = URL.createObjectURL(blob);
+          urlToRevoke = objectUrl;
+          url.value = objectUrl;
+          abortTask = null;
+        }, ignore);
+        onCleanup(() => {
+          if (abortTask) {
+            abortTask();
+            abortTask = null;
+          }
+          revoke();
+        });
       },
       { immediate: true }
     );
-    onBeforeUnmount(() => {
-      abortTask == null ? void 0 : abortTask();
-      revoke();
-    });
     return (_ctx, _cache) => {
       return url.value ? (openBlock(), createElementBlock("img", mergeProps({
         key: 0,
         src: url.value
-      }, unref(attrs), { onLoad: revoke }), null, 16, _hoisted_1)) : createCommentVNode("", true);
+      }, _ctx.$attrs, { onLoad: revoke }), null, 16, _hoisted_1)) : createCommentVNode("", true);
     };
   }
 });

package/dist/vue/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-thumbnail.ts","../../src/vue/components/thumbnails-pane.vue","../../src/vue/components/thumbnail-img.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","<script setup lang=\"ts\">\nimport { onMounted, onBeforeUnmount, ref, watchEffect, nextTick, useAttrs } from 'vue';\nimport { useThumbnailPlugin } from '../hooks';\nimport type { WindowState } from '@embedpdf/plugin-thumbnail';\n\nconst attrs = useAttrs();\n\nconst { plugin: thumbnailPlugin } = useThumbnailPlugin();\nconst viewportRef = ref<HTMLDivElement | null>(null);\nconst windowState = ref<WindowState | null>(null);\n\nlet offWindow: (() => void) | null = null;\nlet offScrollTo: (() => void) | null = null;\n\nwatchEffect((onCleanup) => {\n  if (!thumbnailPlugin.value) return;\n  offWindow?.();\n  offWindow = thumbnailPlugin.value.onWindow((w) => (windowState.value = w));\n  onCleanup(() => offWindow?.());\n});\n\n// Setup scroll listener on mount\nonMounted(() => {\n  const vp = viewportRef.value;\n  if (!vp || !thumbnailPlugin.value) return;\n\n  const onScroll = () => thumbnailPlugin.value!.updateWindow(vp.scrollTop, vp.clientHeight);\n  vp.addEventListener('scroll', onScroll);\n\n  // Setup resize observer for viewport changes\n  const resizeObserver = new ResizeObserver(() => {\n    thumbnailPlugin.value!.updateWindow(vp.scrollTop, vp.clientHeight);\n  });\n  resizeObserver.observe(vp);\n\n  // initial push\n  thumbnailPlugin.value.updateWindow(vp.scrollTop, vp.clientHeight);\n\n  onBeforeUnmount(() => {\n    vp.removeEventListener('scroll', onScroll);\n    resizeObserver.disconnect();\n  });\n});\n\n// Setup scrollTo subscription only after window is ready\nwatchEffect((onCleanup) => {\n  const vp = viewportRef.value;\n  if (!vp || !thumbnailPlugin.value || !windowState.value) return;\n\n  offScrollTo = thumbnailPlugin.value.onScrollTo(({ top, behavior }) => {\n    // Wait for Vue to finish rendering the content before scrolling\n    nextTick(() => {\n      vp.scrollTo({ top, behavior });\n    });\n  });\n\n  onCleanup(() => offScrollTo?.());\n});\n\nonBeforeUnmount(() => {\n  offWindow?.();\n  offScrollTo?.();\n});\n</script>\n\n<template>\n  <div\n    ref=\"viewportRef\"\n    :style=\"{\n      overflowY: 'auto',\n      position: 'relative',\n      paddingTop: (thumbnailPlugin?.cfg?.paddingY ?? 0) + 'px',\n      paddingBottom: (thumbnailPlugin?.cfg?.paddingY ?? 0) + 'px',\n      height: '100%',\n    }\"\n    v-bind=\"attrs\"\n  >\n    <div :style=\"{ height: (windowState?.totalHeight ?? 0) + 'px', position: 'relative' }\">\n      <!-- ✅ Use a template v-for to render the default scoped slot -->\n      <template v-for=\"m in windowState?.items ?? []\" :key=\"m.pageIndex\">\n        <slot :meta=\"m\" />\n      </template>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, watch, watchEffect, useAttrs } from 'vue';\nimport { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\nimport type { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nconst props = defineProps<{ meta: ThumbMeta }>();\nconst attrs = useAttrs();\n\nconst { provides: thumbs } = useThumbnailCapability();\nconst { plugin: thumbnailPlugin } = useThumbnailPlugin();\n\nconst url = ref<string | null>(null);\nlet urlToRevoke: string | null = null;\nconst refreshTick = ref(0);\n\nlet offRefresh: (() => void) | null = null;\n\nwatchEffect((onCleanup) => {\n  if (!thumbnailPlugin.value) return;\n  offRefresh?.();\n  offRefresh = thumbnailPlugin.value.onRefreshPages((pages) => {\n    if (pages.includes(props.meta.pageIndex)) {\n      refreshTick.value++;\n    }\n  });\n  onCleanup(() => offRefresh?.());\n});\n\nfunction revoke() {\n  if (urlToRevoke) {\n    URL.revokeObjectURL(urlToRevoke);\n    urlToRevoke = null;\n  }\n}\n\nlet abortTask: (() => void) | null = null;\n\nfunction load() {\n  if (!thumbs.value) return; // wait until capability exists\n\n  const task = thumbs.value.renderThumb(props.meta.pageIndex, window.devicePixelRatio);\n  abortTask = () =>\n    task.abort({\n      code: PdfErrorCode.Cancelled,\n      message: 'canceled render task',\n    });\n\n  task.wait((blob) => {\n    revoke();\n    const objectUrl = URL.createObjectURL(blob);\n    urlToRevoke = objectUrl;\n    url.value = objectUrl;\n  }, ignore);\n}\n\n/* 🔧 Re-run when:\n   - page changes,\n   - the plugin tells us to refresh,\n   - OR the capability becomes available later.\n*/\nwatch(\n  () => [props.meta.pageIndex, refreshTick.value, !!thumbs.value],\n  () => {\n    abortTask?.();\n    load();\n  },\n  { immediate: true },\n);\n\nonBeforeUnmount(() => {\n  abortTask?.();\n  revoke();\n});\n</script>\n\n<template>\n  <img v-if=\"url\" :src=\"url\" v-bind=\"attrs\" @load=\"revoke\" />\n</template>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeStyle","_Fragment","_renderList","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-thumbnail.ts","../../src/vue/components/thumbnails-pane.vue","../../src/vue/components/thumbnail-img.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { ThumbnailPlugin } from '@embedpdf/plugin-thumbnail';\n\nexport const useThumbnailPlugin = () => usePlugin<ThumbnailPlugin>(ThumbnailPlugin.id);\nexport const useThumbnailCapability = () => useCapability<ThumbnailPlugin>(ThumbnailPlugin.id);\n","<script setup lang=\"ts\">\nimport { ref, watch, nextTick } from 'vue';\nimport { useThumbnailPlugin } from '../hooks';\nimport type { WindowState } from '@embedpdf/plugin-thumbnail';\n\ninterface ThumbnailsPaneProps {\n  /**\n   * The ID of the document that this thumbnail pane displays\n   */\n  documentId: string;\n}\n\nconst props = defineProps<ThumbnailsPaneProps>();\n\nconst { plugin: thumbnailPlugin } = useThumbnailPlugin();\nconst viewportRef = ref<HTMLDivElement | null>(null);\n\n// Store window data along with the documentId it came from\nconst windowData = ref<{\n  window: WindowState | null;\n  docId: string | null;\n}>({ window: null, docId: null });\n\n// Only use the window if it matches the current documentId\nconst windowState = ref<WindowState | null>(null);\n\nwatch(\n  windowData,\n  (data) => {\n    windowState.value = data.docId === props.documentId ? data.window : null;\n  },\n  { deep: true },\n);\n\n// Subscribe to window updates for this document\nwatch(\n  [() => thumbnailPlugin.value, () => props.documentId],\n  ([plugin, docId], _, onCleanup) => {\n    if (!plugin) {\n      windowData.value = { window: null, docId: null };\n      return;\n    }\n\n    const scope = plugin.provides().forDocument(docId);\n\n    // Get initial window state immediately\n    const initialWindow = scope.getWindow();\n    if (initialWindow) {\n      windowData.value = { window: initialWindow, docId };\n    }\n\n    // Subscribe to future updates\n    const unsubscribe = scope.onWindow((newWindow) => {\n      windowData.value = { window: newWindow, docId };\n    });\n\n    // Clear state when documentId changes or component unmounts\n    onCleanup(() => {\n      unsubscribe();\n      windowData.value = { window: null, docId: null };\n    });\n  },\n  { immediate: true },\n);\n\n// Setup scroll listener\nwatch(\n  [viewportRef, () => thumbnailPlugin.value, () => props.documentId],\n  ([vp, plugin, docId], _, onCleanup) => {\n    if (!vp || !plugin) return;\n\n    const scope = plugin.provides().forDocument(docId);\n\n    const onScroll = () => scope.updateWindow(vp.scrollTop, vp.clientHeight);\n    vp.addEventListener('scroll', onScroll);\n\n    // Setup resize observer for viewport changes\n    const resizeObserver = new ResizeObserver(() => {\n      scope.updateWindow(vp.scrollTop, vp.clientHeight);\n    });\n    resizeObserver.observe(vp);\n\n    // Initial update\n    scope.updateWindow(vp.scrollTop, vp.clientHeight);\n\n    onCleanup(() => {\n      vp.removeEventListener('scroll', onScroll);\n      resizeObserver.disconnect();\n    });\n  },\n  { immediate: true },\n);\n\n// Kick-start after window state changes\nwatch(\n  [viewportRef, () => thumbnailPlugin.value, () => props.documentId, windowState],\n  ([vp, plugin, docId]) => {\n    if (!vp || !plugin) return;\n\n    const scope = plugin.provides().forDocument(docId);\n    scope.updateWindow(vp.scrollTop, vp.clientHeight);\n  },\n);\n\n// Setup scrollTo subscription\nwatch(\n  [viewportRef, () => thumbnailPlugin.value, () => props.documentId, () => !!windowState.value],\n  ([vp, plugin, docId, window], _, onCleanup) => {\n    if (!vp || !plugin || !window) return;\n\n    const scope = plugin.provides().forDocument(docId);\n    const unsubscribe = scope.onScrollTo(({ top, behavior }) => {\n      // Wait for Vue to finish rendering the content before scrolling\n      nextTick(() => {\n        vp.scrollTo({ top, behavior });\n      });\n    });\n\n    onCleanup(unsubscribe);\n  },\n  { immediate: true },\n);\n\nconst paddingY = ref(0);\n\nwatch(\n  () => thumbnailPlugin.value,\n  (plugin) => {\n    paddingY.value = plugin?.cfg.paddingY ?? 0;\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <div\n    ref=\"viewportRef\"\n    :style=\"{\n      overflowY: 'auto',\n      position: 'relative',\n      paddingTop: `${paddingY}px`,\n      paddingBottom: `${paddingY}px`,\n      height: '100%',\n    }\"\n    v-bind=\"$attrs\"\n  >\n    <div :style=\"{ height: `${windowState?.totalHeight ?? 0}px`, position: 'relative' }\">\n      <template v-for=\"m in windowState?.items ?? []\" :key=\"m.pageIndex\">\n        <slot :meta=\"m\" />\n      </template>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, watch } from 'vue';\nimport { useThumbnailCapability, useThumbnailPlugin } from '../hooks';\nimport type { ThumbMeta } from '@embedpdf/plugin-thumbnail';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\ninterface ThumbImgProps {\n  /**\n   * The ID of the document that this thumbnail belongs to\n   */\n  documentId: string;\n  meta: ThumbMeta;\n}\n\nconst props = defineProps<ThumbImgProps>();\n\nconst { provides: thumbs } = useThumbnailCapability();\nconst { plugin: thumbnailPlugin } = useThumbnailPlugin();\n\nconst url = ref<string | null>(null);\nlet urlToRevoke: string | null = null;\nconst refreshTick = ref(0);\n\n// Watch for refresh events for this specific document\nwatch(\n  [() => thumbnailPlugin.value, () => props.documentId, () => props.meta.pageIndex],\n  ([plugin, docId, pageIdx], _, onCleanup) => {\n    if (!plugin) return;\n\n    const scope = plugin.provides().forDocument(docId);\n    const unsubscribe = scope.onRefreshPages((pages) => {\n      if (pages.includes(pageIdx)) {\n        refreshTick.value++;\n      }\n    });\n\n    onCleanup(unsubscribe);\n  },\n  { immediate: true },\n);\n\nfunction revoke() {\n  if (urlToRevoke) {\n    URL.revokeObjectURL(urlToRevoke);\n    urlToRevoke = null;\n  }\n}\n\nlet abortTask: (() => void) | null = null;\n\n// Render thumbnail when dependencies change\nwatch(\n  [() => thumbs.value, () => props.documentId, () => props.meta.pageIndex, refreshTick],\n  ([capability, docId, pageIdx], _, onCleanup) => {\n    // Cancel previous task\n    if (abortTask) {\n      abortTask();\n      abortTask = null;\n    }\n\n    if (!capability) {\n      url.value = null;\n      return;\n    }\n\n    const scope = capability.forDocument(docId);\n    const task = scope.renderThumb(pageIdx, window.devicePixelRatio);\n\n    abortTask = () =>\n      task.abort({\n        code: PdfErrorCode.Cancelled,\n        message: 'canceled render task',\n      });\n\n    task.wait((blob) => {\n      revoke();\n      const objectUrl = URL.createObjectURL(blob);\n      urlToRevoke = objectUrl;\n      url.value = objectUrl;\n      abortTask = null;\n    }, ignore);\n\n    onCleanup(() => {\n      if (abortTask) {\n        abortTask();\n        abortTask = null;\n      }\n      revoke();\n    });\n  },\n  { immediate: true },\n);\n</script>\n\n<template>\n  <img v-if=\"url\" :src=\"url\" v-bind=\"$attrs\" @load=\"revoke\" />\n</template>\n"],"names":["window","_openBlock","_createElementBlock","_mergeProps","$attrs","_createElementVNode","_normalizeStyle","_Fragment","_renderList","_renderSlot"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-thumbnail",
-  "version": "1.5.0",
+  "version": "2.0.0-next.0",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -34,14 +34,14 @@
     }
   },
   "dependencies": {
-    "@embedpdf/models": "1.5.0"
+    "@embedpdf/models": "2.0.0-next.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0",
-    "@embedpdf/core": "1.5.0",
-    "@embedpdf/plugin-render": "1.5.0",
-    "@embedpdf/plugin-scroll": "1.5.0",
+    "@embedpdf/core": "2.0.0-next.0",
+    "@embedpdf/plugin-render": "2.0.0-next.0",
+    "@embedpdf/plugin-scroll": "2.0.0-next.0",
     "@embedpdf/build": "1.1.0"
   },
   "peerDependencies": {
@@ -50,8 +50,8 @@
     "preact": "^10.26.4",
     "vue": ">=3.2.0",
     "svelte": ">=5 <6",
-    "@embedpdf/plugin-render": "1.5.0",
-    "@embedpdf/core": "1.5.0"
+    "@embedpdf/core": "2.0.0-next.0",
+    "@embedpdf/plugin-render": "2.0.0-next.0"
   },
   "files": [
     "dist",