@embedpdf/plugin-render 1.3.12 → 1.3.14

package/dist/vue/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r=require("@embedpdf/models"),n=require("@embedpdf/core/vue"),t=require("@embedpdf/plugin-render"),l=()=>n.usePlugin(t.RenderPlugin.id),a=()=>n.useCapability(t.RenderPlugin.id),o=["src"],u=e.defineComponent({__name:"render-layer",props:{pageIndex:{},scale:{},scaleFactor:{},dpr:{}},setup(n){const t=n,u=e.computed((()=>t.scale??t.scaleFactor??1)),{provides:d}=a(),{plugin:c}=l(),i=e.ref(null),s=e.ref(0);let p=null,f=null;function g(){f&&!p&&f.abort({code:r.PdfErrorCode.Cancelled,message:"canceled render task"})}function v(){p&&(URL.revokeObjectURL(p),p=null)}return e.watchEffect((e=>{if(!c.value)return;e(c.value.onRefreshPages((e=>{e.includes(t.pageIndex)&&s.value++})))})),e.watch((()=>[t.pageIndex,u.value,t.dpr,d.value,s.value]),(function(){if(g(),v(),f=null,!d.value)return;const e=d.value.renderPage({pageIndex:t.pageIndex,options:{scaleFactor:u.value,dpr:t.dpr||window.devicePixelRatio}});f=e,e.wait((e=>{p=URL.createObjectURL(e),i.value=p,f=null}),r.ignore)}),{immediate:!0}),e.onBeforeUnmount((()=>{g(),v()})),(r,n)=>i.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:i.value,style:{width:"100%",height:"100%"},onLoad:v},null,40,o)):e.createCommentVNode("",!0)}});exports.RenderLayer=u,exports.useRenderCapability=a,exports.useRenderPlugin=l,Object.keys(t).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})}));
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r=require("@embedpdf/models"),t=require("@embedpdf/core/vue"),n=require("@embedpdf/plugin-render"),o=()=>t.usePlugin(n.RenderPlugin.id),l=()=>t.useCapability(n.RenderPlugin.id),a=["src"],c=e.defineComponent({__name:"render-layer",props:{pageIndex:{},scale:{},scaleFactor:{},dpr:{}},setup(t){const n=t,c=e.computed((()=>n.scale??n.scaleFactor??1)),u=e.computed((()=>n.dpr??window.devicePixelRatio)),{provides:d}=l(),{plugin:s}=o(),i=e.ref(null),p=e.ref(0);let f=null,g=!1;function v(){g=!0}return e.watchEffect((e=>{if(!s.value)return;e(s.value.onRefreshPages((e=>{e.includes(n.pageIndex)&&p.value++})))})),e.watchEffect((e=>{const t=n.pageIndex,o=c.value,l=u.value;p.value;const a=d.value;if(!a)return;f&&g&&(URL.revokeObjectURL(f),f=null,g=!1);const s=a.renderPage({pageIndex:t,options:{scaleFactor:o,dpr:l}});s.wait((e=>{const r=URL.createObjectURL(e);f=r,i.value=r,g=!1}),r.ignore),e((()=>{f?g&&(URL.revokeObjectURL(f),f=null,g=!1):s.abort({code:r.PdfErrorCode.Cancelled,message:"canceled render task"})}))})),e.onBeforeUnmount((()=>{f&&(URL.revokeObjectURL(f),f=null)})),(r,t)=>i.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:i.value,style:{width:"100%",height:"100%"},onLoad:v},null,40,a)):e.createCommentVNode("",!0)}});exports.RenderLayer=c,exports.useRenderCapability=l,exports.useRenderPlugin=o,Object.keys(n).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>n[e]})}));
 //# sourceMappingURL=index.cjs.map

package/dist/vue/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-render.ts","../../src/vue/components/render-layer.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","<script setup lang=\"ts\">\nimport { ref, watch, onBeforeUnmount, computed, watchEffect } from 'vue';\nimport { ignore, PdfErrorCode, PdfErrorReason, Task } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks';\n\ninterface Props {\n  pageIndex: number;\n  /**\n   * The scale factor for rendering the page.\n   */\n  scale?: number;\n  /**\n   * @deprecated Use `scale` instead. Will be removed in the next major release.\n   */\n  scaleFactor?: number;\n  dpr?: number;\n}\n\nconst props = defineProps<Props>();\n\n// Handle deprecation: prefer scale over scaleFactor, but fall back to scaleFactor if scale is not provided\nconst actualScale = computed(() => props.scale ?? props.scaleFactor ?? 1);\n\nconst { provides: renderProvides } = useRenderCapability();\nconst { plugin: renderPlugin } = useRenderPlugin();\n\nconst imageUrl = ref<string | null>(null);\nconst refreshTick = ref(0);\n\nlet currentBlobUrl: string | null = null;\nlet currentTask: Task<Blob, PdfErrorReason> | null = null;\n\n/* ------------------------------------------ */\n/* Helper function to abort current task */\n/* ------------------------------------------ */\nfunction abortCurrentTask() {\n  if (currentTask && !currentBlobUrl) {\n    currentTask.abort({\n      code: PdfErrorCode.Cancelled,\n      message: 'canceled render task',\n    });\n  }\n}\n\n/* ------------------------------------------ */\n/* render whenever pageIndex/scale/dpr/tick change */\n/* ------------------------------------------ */\nfunction revoke() {\n  if (currentBlobUrl) {\n    URL.revokeObjectURL(currentBlobUrl);\n    currentBlobUrl = null;\n  }\n}\n\nfunction startRender() {\n  abortCurrentTask();\n  revoke();\n  currentTask = null;\n\n  if (!renderProvides.value) return;\n\n  const task = renderProvides.value.renderPage({\n    pageIndex: props.pageIndex,\n    options: {\n      scaleFactor: actualScale.value,\n      dpr: props.dpr || window.devicePixelRatio,\n    },\n  });\n\n  currentTask = task;\n\n  task.wait((blob) => {\n    currentBlobUrl = URL.createObjectURL(blob);\n    imageUrl.value = currentBlobUrl;\n    currentTask = null;\n  }, ignore);\n}\n\n// Watch for external refresh events\nwatchEffect((onCleanup) => {\n  if (!renderPlugin.value) return;\n  const unsubscribe = renderPlugin.value.onRefreshPages((pages: number[]) => {\n    if (pages.includes(props.pageIndex)) {\n      refreshTick.value++;\n    }\n  });\n  onCleanup(unsubscribe);\n});\n\n// Watch for changes that require a re-render\nwatch(\n  () => [props.pageIndex, actualScale.value, props.dpr, renderProvides.value, refreshTick.value],\n  startRender,\n  { immediate: true },\n);\n\n/* ------------------------------------------ */\nonBeforeUnmount(() => {\n  abortCurrentTask();\n  revoke();\n});\n</script>\n\n<template>\n  <img v-if=\"imageUrl\" :src=\"imageUrl\" :style=\"{ width: '100%', height: '100%' }\" @load=\"revoke\" />\n</template>\n"],"names":["useRenderPlugin","usePlugin","RenderPlugin","id","useRenderCapability","useCapability","props","__props","actualScale","computed","scale","scaleFactor","provides","renderProvides","plugin","renderPlugin","imageUrl","ref","refreshTick","currentBlobUrl","currentTask","abortCurrentTask","abort","code","PdfErrorCode","Cancelled","message","revoke","URL","revokeObjectURL","vue$1","watchEffect","onCleanup","value","onRefreshPages","pages","includes","pageIndex","watch","dpr","task","renderPage","options","window","devicePixelRatio","wait","blob","createObjectURL","ignore","immediate","onBeforeUnmount","_createElementBlock","src","style","width","height","onLoad"],"mappings":"0MAGaA,EAAkB,IAAMC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAAsB,IAAMC,gBAA4BH,EAAAA,aAAaC,sHCelF,MAAMG,EAAQC,EAGRC,EAAcC,EAAAA,UAAS,IAAMH,EAAMI,OAASJ,EAAMK,aAAe,KAE/DC,SAAUC,GAAmBT,KAC7BU,OAAQC,GAAiBf,IAE3BgB,EAAWC,MAAmB,MAC9BC,EAAcD,MAAI,GAExB,IAAIE,EAAgC,KAChCC,EAAiD,KAKrD,SAASC,IACHD,IAAgBD,GAClBC,EAAYE,MAAM,CAChBC,KAAMC,EAAaA,aAAAC,UACnBC,QAAS,wBAEb,CAMF,SAASC,IACHR,IACFS,IAAIC,gBAAgBV,GACHA,EAAA,KACnB,QA4BFW,EAAAC,aAAaC,IACP,IAACjB,EAAakB,MAAO,OAMzBD,EALoBjB,EAAakB,MAAMC,gBAAgBC,IACjDA,EAAMC,SAAS9B,EAAM+B,YACXnB,EAAAe,OAAA,IAGK,IAIvBH,EAAAQ,OACE,IAAM,CAAChC,EAAM+B,UAAW7B,EAAYyB,MAAO3B,EAAMiC,IAAK1B,EAAeoB,MAAOf,EAAYe,SArC1F,WAKM,GAJaZ,IACVM,IACOP,EAAA,MAETP,EAAeoB,MAAO,OAErB,MAAAO,EAAO3B,EAAeoB,MAAMQ,WAAW,CAC3CJ,UAAW/B,EAAM+B,UACjBK,QAAS,CACP/B,YAAaH,EAAYyB,MACzBM,IAAKjC,EAAMiC,KAAOI,OAAOC,oBAIfxB,EAAAoB,EAETA,EAAAK,MAAMC,IACQ3B,EAAAS,IAAImB,gBAAgBD,GACrC9B,EAASiB,MAAQd,EACHC,EAAA,IAAA,GACb4B,SAAM,GAkBT,CAAEC,WAAW,IAIfC,EAAAA,iBAAgB,KACG7B,IACVM,GAAA,WAKIX,EAAQiB,qBAAnBkB,EAAAA,mBAAiG,MAAA,OAA3EC,IAAKpC,EAAQiB,MAAGoB,MAAO,CAAiCC,MAAA,OAAAC,OAAA,QAAGC,OAAM7B"}
+{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-render.ts","../../src/vue/components/render-layer.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","<script setup lang=\"ts\">\nimport { ref, onBeforeUnmount, computed, watchEffect } from 'vue';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks';\n\ninterface Props {\n  pageIndex: number;\n  /**\n   * The scale factor for rendering the page.\n   */\n  scale?: number;\n  /**\n   * @deprecated Use `scale` instead. Will be removed in the next major release.\n   */\n  scaleFactor?: number;\n  dpr?: number;\n}\n\nconst props = defineProps<Props>();\n\n// Handle deprecation: prefer scale over scaleFactor, but fall back to scaleFactor if scale is not provided\nconst actualScale = computed(() => props.scale ?? props.scaleFactor ?? 1);\nconst actualDpr = computed(() => props.dpr ?? window.devicePixelRatio);\n\nconst { provides: renderProvides } = useRenderCapability();\nconst { plugin: renderPlugin } = useRenderPlugin();\n\nconst imageUrl = ref<string | null>(null);\nconst refreshTick = ref(0);\n\nlet urlRef: string | null = null;\nlet hasLoaded = false;\n\n// Listen for external page refresh events\nwatchEffect((onCleanup) => {\n  if (!renderPlugin.value) return;\n\n  const unsubscribe = renderPlugin.value.onRefreshPages((pages: number[]) => {\n    if (pages.includes(props.pageIndex)) {\n      refreshTick.value++;\n    }\n  });\n\n  onCleanup(unsubscribe);\n});\n\n// Render page when dependencies change\nwatchEffect((onCleanup) => {\n  // Capture reactive dependencies\n  const pageIndex = props.pageIndex;\n  const scale = actualScale.value;\n  const dpr = actualDpr.value;\n  const tick = refreshTick.value;\n  const capability = renderProvides.value;\n\n  if (!capability) return;\n\n  // Revoke old URL before creating new one (if it's been loaded)\n  if (urlRef && hasLoaded) {\n    URL.revokeObjectURL(urlRef);\n    urlRef = null;\n    hasLoaded = false;\n  }\n\n  const task = capability.renderPage({\n    pageIndex,\n    options: {\n      scaleFactor: scale,\n      dpr,\n    },\n  });\n\n  task.wait((blob) => {\n    const objectUrl = URL.createObjectURL(blob);\n    urlRef = objectUrl;\n    imageUrl.value = objectUrl;\n    hasLoaded = false;\n  }, ignore);\n\n  onCleanup(() => {\n    if (urlRef) {\n      // Only revoke if image has loaded\n      if (hasLoaded) {\n        URL.revokeObjectURL(urlRef);\n        urlRef = null;\n        hasLoaded = false;\n      }\n    } else {\n      // Task still in progress, abort it\n      task.abort({\n        code: PdfErrorCode.Cancelled,\n        message: 'canceled render task',\n      });\n    }\n  });\n});\n\nonBeforeUnmount(() => {\n  if (urlRef) {\n    URL.revokeObjectURL(urlRef);\n    urlRef = null;\n  }\n});\n\nfunction handleImageLoad() {\n  hasLoaded = true;\n}\n</script>\n\n<template>\n  <img\n    v-if=\"imageUrl\"\n    :src=\"imageUrl\"\n    :style=\"{ width: '100%', height: '100%' }\"\n    @load=\"handleImageLoad\"\n  />\n</template>\n"],"names":["useRenderPlugin","usePlugin","RenderPlugin","id","useRenderCapability","useCapability","props","__props","actualScale","computed","scale","scaleFactor","actualDpr","dpr","window","devicePixelRatio","provides","renderProvides","plugin","renderPlugin","imageUrl","ref","refreshTick","urlRef","hasLoaded","handleImageLoad","vue$1","watchEffect","onCleanup","value","onRefreshPages","pages","includes","pageIndex","capability","URL","revokeObjectURL","task","renderPage","options","wait","blob","objectUrl","createObjectURL","ignore","abort","code","PdfErrorCode","Cancelled","message","onBeforeUnmount","_createElementBlock","src","style","width","height","onLoad"],"mappings":"0MAGaA,EAAkB,IAAMC,YAAwBC,EAAAA,aAAaC,IAC7DC,EAAsB,IAAMC,gBAA4BH,EAAAA,aAAaC,sHCelF,MAAMG,EAAQC,EAGRC,EAAcC,EAAAA,UAAS,IAAMH,EAAMI,OAASJ,EAAMK,aAAe,IACjEC,EAAYH,EAAAA,UAAS,IAAMH,EAAMO,KAAOC,OAAOC,oBAE7CC,SAAUC,GAAmBb,KAC7Bc,OAAQC,GAAiBnB,IAE3BoB,EAAWC,MAAmB,MAC9BC,EAAcD,MAAI,GAExB,IAAIE,EAAwB,KACxBC,GAAY,EAyEhB,SAASC,IACKD,GAAA,CAAA,QAvEdE,EAAAC,aAAaC,IACP,IAACT,EAAaU,MAAO,OAQzBD,EANoBT,EAAaU,MAAMC,gBAAgBC,IACjDA,EAAMC,SAAS1B,EAAM2B,YACXX,EAAAO,OAAA,IAIK,IAIvBH,EAAAC,aAAaC,IAEX,MAAMK,EAAY3B,EAAM2B,UAClBvB,EAAQF,EAAYqB,MACpBhB,EAAMD,EAAUiB,MACGP,EAAAO,MACzB,MAAMK,EAAajB,EAAeY,MAElC,IAAKK,EAAY,OAGbX,GAAUC,IACZW,IAAIC,gBAAgBb,GACXA,EAAA,KACGC,GAAA,GAGR,MAAAa,EAAOH,EAAWI,WAAW,CACjCL,YACAM,QAAS,CACP5B,YAAaD,EACbG,SAICwB,EAAAG,MAAMC,IACH,MAAAC,EAAYP,IAAIQ,gBAAgBF,GAC7BlB,EAAAmB,EACTtB,EAASS,MAAQa,EACLlB,GAAA,CAAA,GACXoB,UAEHhB,GAAU,KACJL,EAEEC,IACFW,IAAIC,gBAAgBb,GACXA,EAAA,KACGC,GAAA,GAIda,EAAKQ,MAAM,CACTC,KAAMC,EAAaA,aAAAC,UACnBC,QAAS,wBACV,GAEJ,IAGHC,EAAAA,iBAAgB,KACV3B,IACFY,IAAIC,gBAAgBb,GACXA,EAAA,KAAA,WAWHH,EAAQS,qBADhBsB,EAAAA,mBAKE,MAAA,OAHCC,IAAKhC,EAAQS,MACbwB,MAAO,CAAiCC,MAAA,OAAAC,OAAA,QACxCC,OAAM/B"}

package/dist/vue/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, watchEffect, watch, onBeforeUnmount, createElementBlock, createCommentVNode, openBlock } from "vue";
+import { defineComponent, computed, ref, watchEffect, onBeforeUnmount, createElementBlock, createCommentVNode, openBlock } from "vue";
 import { ignore, PdfErrorCode } from "@embedpdf/models";
 import { useCapability, usePlugin } from "@embedpdf/core/vue";
 import { RenderPlugin } from "@embedpdf/plugin-render";
@@ -17,45 +17,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const actualScale = computed(() => props.scale ?? props.scaleFactor ?? 1);
+    const actualDpr = computed(() => props.dpr ?? window.devicePixelRatio);
     const { provides: renderProvides } = useRenderCapability();
     const { plugin: renderPlugin } = useRenderPlugin();
     const imageUrl = ref(null);
     const refreshTick = ref(0);
-    let currentBlobUrl = null;
-    let currentTask = null;
-    function abortCurrentTask() {
-      if (currentTask && !currentBlobUrl) {
-        currentTask.abort({
-          code: PdfErrorCode.Cancelled,
-          message: "canceled render task"
-        });
-      }
-    }
-    function revoke() {
-      if (currentBlobUrl) {
-        URL.revokeObjectURL(currentBlobUrl);
-        currentBlobUrl = null;
-      }
-    }
-    function startRender() {
-      abortCurrentTask();
-      revoke();
-      currentTask = null;
-      if (!renderProvides.value) return;
-      const task = renderProvides.value.renderPage({
-        pageIndex: props.pageIndex,
-        options: {
-          scaleFactor: actualScale.value,
-          dpr: props.dpr || window.devicePixelRatio
-        }
-      });
-      currentTask = task;
-      task.wait((blob) => {
-        currentBlobUrl = URL.createObjectURL(blob);
-        imageUrl.value = currentBlobUrl;
-        currentTask = null;
-      }, ignore);
-    }
+    let urlRef = null;
+    let hasLoaded = false;
     watchEffect((onCleanup) => {
       if (!renderPlugin.value) return;
       const unsubscribe = renderPlugin.value.onRefreshPages((pages) => {
@@ -65,21 +33,61 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
       onCleanup(unsubscribe);
     });
-    watch(
-      () => [props.pageIndex, actualScale.value, props.dpr, renderProvides.value, refreshTick.value],
-      startRender,
-      { immediate: true }
-    );
+    watchEffect((onCleanup) => {
+      const pageIndex = props.pageIndex;
+      const scale = actualScale.value;
+      const dpr = actualDpr.value;
+      refreshTick.value;
+      const capability = renderProvides.value;
+      if (!capability) return;
+      if (urlRef && hasLoaded) {
+        URL.revokeObjectURL(urlRef);
+        urlRef = null;
+        hasLoaded = false;
+      }
+      const task = capability.renderPage({
+        pageIndex,
+        options: {
+          scaleFactor: scale,
+          dpr
+        }
+      });
+      task.wait((blob) => {
+        const objectUrl = URL.createObjectURL(blob);
+        urlRef = objectUrl;
+        imageUrl.value = objectUrl;
+        hasLoaded = false;
+      }, ignore);
+      onCleanup(() => {
+        if (urlRef) {
+          if (hasLoaded) {
+            URL.revokeObjectURL(urlRef);
+            urlRef = null;
+            hasLoaded = false;
+          }
+        } else {
+          task.abort({
+            code: PdfErrorCode.Cancelled,
+            message: "canceled render task"
+          });
+        }
+      });
+    });
     onBeforeUnmount(() => {
-      abortCurrentTask();
-      revoke();
+      if (urlRef) {
+        URL.revokeObjectURL(urlRef);
+        urlRef = null;
+      }
     });
+    function handleImageLoad() {
+      hasLoaded = true;
+    }
     return (_ctx, _cache) => {
       return imageUrl.value ? (openBlock(), createElementBlock("img", {
         key: 0,
         src: imageUrl.value,
         style: { width: "100%", height: "100%" },
-        onLoad: revoke
+        onLoad: handleImageLoad
       }, null, 40, _hoisted_1)) : createCommentVNode("", true);
     };
   }

package/dist/vue/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-render.ts","../../src/vue/components/render-layer.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","<script setup lang=\"ts\">\nimport { ref, watch, onBeforeUnmount, computed, watchEffect } from 'vue';\nimport { ignore, PdfErrorCode, PdfErrorReason, Task } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks';\n\ninterface Props {\n  pageIndex: number;\n  /**\n   * The scale factor for rendering the page.\n   */\n  scale?: number;\n  /**\n   * @deprecated Use `scale` instead. Will be removed in the next major release.\n   */\n  scaleFactor?: number;\n  dpr?: number;\n}\n\nconst props = defineProps<Props>();\n\n// Handle deprecation: prefer scale over scaleFactor, but fall back to scaleFactor if scale is not provided\nconst actualScale = computed(() => props.scale ?? props.scaleFactor ?? 1);\n\nconst { provides: renderProvides } = useRenderCapability();\nconst { plugin: renderPlugin } = useRenderPlugin();\n\nconst imageUrl = ref<string | null>(null);\nconst refreshTick = ref(0);\n\nlet currentBlobUrl: string | null = null;\nlet currentTask: Task<Blob, PdfErrorReason> | null = null;\n\n/* ------------------------------------------ */\n/* Helper function to abort current task */\n/* ------------------------------------------ */\nfunction abortCurrentTask() {\n  if (currentTask && !currentBlobUrl) {\n    currentTask.abort({\n      code: PdfErrorCode.Cancelled,\n      message: 'canceled render task',\n    });\n  }\n}\n\n/* ------------------------------------------ */\n/* render whenever pageIndex/scale/dpr/tick change */\n/* ------------------------------------------ */\nfunction revoke() {\n  if (currentBlobUrl) {\n    URL.revokeObjectURL(currentBlobUrl);\n    currentBlobUrl = null;\n  }\n}\n\nfunction startRender() {\n  abortCurrentTask();\n  revoke();\n  currentTask = null;\n\n  if (!renderProvides.value) return;\n\n  const task = renderProvides.value.renderPage({\n    pageIndex: props.pageIndex,\n    options: {\n      scaleFactor: actualScale.value,\n      dpr: props.dpr || window.devicePixelRatio,\n    },\n  });\n\n  currentTask = task;\n\n  task.wait((blob) => {\n    currentBlobUrl = URL.createObjectURL(blob);\n    imageUrl.value = currentBlobUrl;\n    currentTask = null;\n  }, ignore);\n}\n\n// Watch for external refresh events\nwatchEffect((onCleanup) => {\n  if (!renderPlugin.value) return;\n  const unsubscribe = renderPlugin.value.onRefreshPages((pages: number[]) => {\n    if (pages.includes(props.pageIndex)) {\n      refreshTick.value++;\n    }\n  });\n  onCleanup(unsubscribe);\n});\n\n// Watch for changes that require a re-render\nwatch(\n  () => [props.pageIndex, actualScale.value, props.dpr, renderProvides.value, refreshTick.value],\n  startRender,\n  { immediate: true },\n);\n\n/* ------------------------------------------ */\nonBeforeUnmount(() => {\n  abortCurrentTask();\n  revoke();\n});\n</script>\n\n<template>\n  <img v-if=\"imageUrl\" :src=\"imageUrl\" :style=\"{ width: '100%', height: '100%' }\" @load=\"revoke\" />\n</template>\n"],"names":["_createElementBlock"],"mappings":";;;;;AAGO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;;;;;;;;;;;ACepF,UAAM,QAAQ;AAGd,UAAM,cAAc,SAAS,MAAM,MAAM,SAAS,MAAM,eAAe,CAAC;AAExE,UAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,UAAM,EAAE,QAAQ,aAAa,IAAI,gBAAgB;AAE3C,UAAA,WAAW,IAAmB,IAAI;AAClC,UAAA,cAAc,IAAI,CAAC;AAEzB,QAAI,iBAAgC;AACpC,QAAI,cAAiD;AAKrD,aAAS,mBAAmB;AACtB,UAAA,eAAe,CAAC,gBAAgB;AAClC,oBAAY,MAAM;AAAA,UAChB,MAAM,aAAa;AAAA,UACnB,SAAS;AAAA,QAAA,CACV;AAAA,MAAA;AAAA,IACH;AAMF,aAAS,SAAS;AAChB,UAAI,gBAAgB;AAClB,YAAI,gBAAgB,cAAc;AACjB,yBAAA;AAAA,MAAA;AAAA,IACnB;AAGF,aAAS,cAAc;AACJ,uBAAA;AACV,aAAA;AACO,oBAAA;AAEV,UAAA,CAAC,eAAe,MAAO;AAErB,YAAA,OAAO,eAAe,MAAM,WAAW;AAAA,QAC3C,WAAW,MAAM;AAAA,QACjB,SAAS;AAAA,UACP,aAAa,YAAY;AAAA,UACzB,KAAK,MAAM,OAAO,OAAO;AAAA,QAAA;AAAA,MAC3B,CACD;AAEa,oBAAA;AAET,WAAA,KAAK,CAAC,SAAS;AACD,yBAAA,IAAI,gBAAgB,IAAI;AACzC,iBAAS,QAAQ;AACH,sBAAA;AAAA,SACb,MAAM;AAAA,IAAA;AAIX,gBAAY,CAAC,cAAc;AACrB,UAAA,CAAC,aAAa,MAAO;AACzB,YAAM,cAAc,aAAa,MAAM,eAAe,CAAC,UAAoB;AACzE,YAAI,MAAM,SAAS,MAAM,SAAS,GAAG;AACvB,sBAAA;AAAA,QAAA;AAAA,MACd,CACD;AACD,gBAAU,WAAW;AAAA,IAAA,CACtB;AAGD;AAAA,MACE,MAAM,CAAC,MAAM,WAAW,YAAY,OAAO,MAAM,KAAK,eAAe,OAAO,YAAY,KAAK;AAAA,MAC7F;AAAA,MACA,EAAE,WAAW,KAAK;AAAA,IACpB;AAGA,oBAAgB,MAAM;AACH,uBAAA;AACV,aAAA;AAAA,IAAA,CACR;;aAIY,SAAQ,sBAAnBA,mBAAiG,OAAA;AAAA;QAA3E,KAAK,SAAQ;AAAA,QAAG,OAAO,EAAiC,OAAA,QAAA,QAAA,OAAA;AAAA,QAAG,QAAM;AAAA,MAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-render.ts","../../src/vue/components/render-layer.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { RenderPlugin } from '@embedpdf/plugin-render';\n\nexport const useRenderPlugin = () => usePlugin<RenderPlugin>(RenderPlugin.id);\nexport const useRenderCapability = () => useCapability<RenderPlugin>(RenderPlugin.id);\n","<script setup lang=\"ts\">\nimport { ref, onBeforeUnmount, computed, watchEffect } from 'vue';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\n\nimport { useRenderCapability, useRenderPlugin } from '../hooks';\n\ninterface Props {\n  pageIndex: number;\n  /**\n   * The scale factor for rendering the page.\n   */\n  scale?: number;\n  /**\n   * @deprecated Use `scale` instead. Will be removed in the next major release.\n   */\n  scaleFactor?: number;\n  dpr?: number;\n}\n\nconst props = defineProps<Props>();\n\n// Handle deprecation: prefer scale over scaleFactor, but fall back to scaleFactor if scale is not provided\nconst actualScale = computed(() => props.scale ?? props.scaleFactor ?? 1);\nconst actualDpr = computed(() => props.dpr ?? window.devicePixelRatio);\n\nconst { provides: renderProvides } = useRenderCapability();\nconst { plugin: renderPlugin } = useRenderPlugin();\n\nconst imageUrl = ref<string | null>(null);\nconst refreshTick = ref(0);\n\nlet urlRef: string | null = null;\nlet hasLoaded = false;\n\n// Listen for external page refresh events\nwatchEffect((onCleanup) => {\n  if (!renderPlugin.value) return;\n\n  const unsubscribe = renderPlugin.value.onRefreshPages((pages: number[]) => {\n    if (pages.includes(props.pageIndex)) {\n      refreshTick.value++;\n    }\n  });\n\n  onCleanup(unsubscribe);\n});\n\n// Render page when dependencies change\nwatchEffect((onCleanup) => {\n  // Capture reactive dependencies\n  const pageIndex = props.pageIndex;\n  const scale = actualScale.value;\n  const dpr = actualDpr.value;\n  const tick = refreshTick.value;\n  const capability = renderProvides.value;\n\n  if (!capability) return;\n\n  // Revoke old URL before creating new one (if it's been loaded)\n  if (urlRef && hasLoaded) {\n    URL.revokeObjectURL(urlRef);\n    urlRef = null;\n    hasLoaded = false;\n  }\n\n  const task = capability.renderPage({\n    pageIndex,\n    options: {\n      scaleFactor: scale,\n      dpr,\n    },\n  });\n\n  task.wait((blob) => {\n    const objectUrl = URL.createObjectURL(blob);\n    urlRef = objectUrl;\n    imageUrl.value = objectUrl;\n    hasLoaded = false;\n  }, ignore);\n\n  onCleanup(() => {\n    if (urlRef) {\n      // Only revoke if image has loaded\n      if (hasLoaded) {\n        URL.revokeObjectURL(urlRef);\n        urlRef = null;\n        hasLoaded = false;\n      }\n    } else {\n      // Task still in progress, abort it\n      task.abort({\n        code: PdfErrorCode.Cancelled,\n        message: 'canceled render task',\n      });\n    }\n  });\n});\n\nonBeforeUnmount(() => {\n  if (urlRef) {\n    URL.revokeObjectURL(urlRef);\n    urlRef = null;\n  }\n});\n\nfunction handleImageLoad() {\n  hasLoaded = true;\n}\n</script>\n\n<template>\n  <img\n    v-if=\"imageUrl\"\n    :src=\"imageUrl\"\n    :style=\"{ width: '100%', height: '100%' }\"\n    @load=\"handleImageLoad\"\n  />\n</template>\n"],"names":["_createElementBlock"],"mappings":";;;;;AAGO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;;;;;;;;;;;ACepF,UAAM,QAAQ;AAGd,UAAM,cAAc,SAAS,MAAM,MAAM,SAAS,MAAM,eAAe,CAAC;AACxE,UAAM,YAAY,SAAS,MAAM,MAAM,OAAO,OAAO,gBAAgB;AAErE,UAAM,EAAE,UAAU,eAAe,IAAI,oBAAoB;AACzD,UAAM,EAAE,QAAQ,aAAa,IAAI,gBAAgB;AAE3C,UAAA,WAAW,IAAmB,IAAI;AAClC,UAAA,cAAc,IAAI,CAAC;AAEzB,QAAI,SAAwB;AAC5B,QAAI,YAAY;AAGhB,gBAAY,CAAC,cAAc;AACrB,UAAA,CAAC,aAAa,MAAO;AAEzB,YAAM,cAAc,aAAa,MAAM,eAAe,CAAC,UAAoB;AACzE,YAAI,MAAM,SAAS,MAAM,SAAS,GAAG;AACvB,sBAAA;AAAA,QAAA;AAAA,MACd,CACD;AAED,gBAAU,WAAW;AAAA,IAAA,CACtB;AAGD,gBAAY,CAAC,cAAc;AAEzB,YAAM,YAAY,MAAM;AACxB,YAAM,QAAQ,YAAY;AAC1B,YAAM,MAAM,UAAU;AACT,kBAAY;AACzB,YAAM,aAAa,eAAe;AAElC,UAAI,CAAC,WAAY;AAGjB,UAAI,UAAU,WAAW;AACvB,YAAI,gBAAgB,MAAM;AACjB,iBAAA;AACG,oBAAA;AAAA,MAAA;AAGR,YAAA,OAAO,WAAW,WAAW;AAAA,QACjC;AAAA,QACA,SAAS;AAAA,UACP,aAAa;AAAA,UACb;AAAA,QAAA;AAAA,MACF,CACD;AAEI,WAAA,KAAK,CAAC,SAAS;AACZ,cAAA,YAAY,IAAI,gBAAgB,IAAI;AACjC,iBAAA;AACT,iBAAS,QAAQ;AACL,oBAAA;AAAA,SACX,MAAM;AAET,gBAAU,MAAM;AACd,YAAI,QAAQ;AAEV,cAAI,WAAW;AACb,gBAAI,gBAAgB,MAAM;AACjB,qBAAA;AACG,wBAAA;AAAA,UAAA;AAAA,QACd,OACK;AAEL,eAAK,MAAM;AAAA,YACT,MAAM,aAAa;AAAA,YACnB,SAAS;AAAA,UAAA,CACV;AAAA,QAAA;AAAA,MACH,CACD;AAAA,IAAA,CACF;AAED,oBAAgB,MAAM;AACpB,UAAI,QAAQ;AACV,YAAI,gBAAgB,MAAM;AACjB,iBAAA;AAAA,MAAA;AAAA,IACX,CACD;AAED,aAAS,kBAAkB;AACb,kBAAA;AAAA,IAAA;;aAMJ,SAAQ,sBADhBA,mBAKE,OAAA;AAAA;QAHC,KAAK,SAAQ;AAAA,QACb,OAAO,EAAiC,OAAA,QAAA,QAAA,OAAA;AAAA,QACxC,QAAM;AAAA,MAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-render",
-  "version": "1.3.12",
+  "version": "1.3.14",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -29,20 +29,20 @@
     }
   },
   "dependencies": {
-    "@embedpdf/models": "1.3.12"
+    "@embedpdf/models": "1.3.14"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0",
     "@embedpdf/build": "1.0.1",
-    "@embedpdf/core": "1.3.12"
+    "@embedpdf/core": "1.3.14"
   },
   "peerDependencies": {
     "preact": "^10.26.4",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "vue": ">=3.2.0",
-    "@embedpdf/core": "1.3.12"
+    "@embedpdf/core": "1.3.14"
   },
   "files": [
     "dist",