@embedpdf/plugin-render 1.5.0 → 2.0.0-next.1

package/dist/vue/index.js

@@ -1,6 +1,6 @@
-import { defineComponent, computed, ref, watchEffect, onBeforeUnmount, createElementBlock, createCommentVNode, openBlock } from "vue";
+import { defineComponent, ref, computed, watch, createElementBlock, createCommentVNode, openBlock, mergeProps } from "vue";
 import { ignore, PdfErrorCode } from "@embedpdf/models";
-import { useCapability, usePlugin } from "@embedpdf/core/vue";
+import { useCapability, usePlugin, useDocumentState } from "@embedpdf/core/vue";
 import { RenderPlugin } from "@embedpdf/plugin-render";
 export * from "@embedpdf/plugin-render";
 const useRenderPlugin = () => usePlugin(RenderPlugin.id);
@@ -9,86 +9,98 @@ const _hoisted_1 = ["src"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "render-layer",
   props: {
+    documentId: {},
     pageIndex: {},
     scale: {},
-    scaleFactor: {},
     dpr: {}
   },
   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 documentState = useDocumentState(() => props.documentId);
     const imageUrl = ref(null);
-    const refreshTick = ref(0);
     let urlRef = null;
     let hasLoaded = false;
-    watchEffect((onCleanup) => {
-      if (!renderPlugin.value) return;
-      const unsubscribe = renderPlugin.value.onRefreshPages((pages) => {
-        if (pages.includes(props.pageIndex)) {
-          refreshTick.value++;
-        }
-      });
-      onCleanup(unsubscribe);
+    const refreshVersion = computed(() => {
+      if (!documentState.value) return 0;
+      return documentState.value.pageRefreshVersions[props.pageIndex] || 0;
+    });
+    const actualScale = computed(() => {
+      var _a;
+      if (props.scale !== void 0) return props.scale;
+      return ((_a = documentState.value) == null ? void 0 : _a.scale) ?? 1;
     });
-    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
+    const actualDpr = computed(() => {
+      if (props.dpr !== void 0) return props.dpr;
+      return window.devicePixelRatio;
+    });
+    watch(
+      [
+        () => props.documentId,
+        () => props.pageIndex,
+        actualScale,
+        actualDpr,
+        renderProvides,
+        refreshVersion
+      ],
+      ([docId, pageIdx, scale, dpr, capability], [prevDocId], onCleanup) => {
+        if (!capability) {
+          imageUrl.value = null;
+          return;
         }
-      });
-      task.wait((blob) => {
-        const objectUrl = URL.createObjectURL(blob);
-        urlRef = objectUrl;
-        imageUrl.value = objectUrl;
-        hasLoaded = false;
-      }, ignore);
-      onCleanup(() => {
-        if (urlRef) {
-          if (hasLoaded) {
+        if (prevDocId !== void 0 && prevDocId !== docId) {
+          imageUrl.value = null;
+          if (urlRef && hasLoaded) {
             URL.revokeObjectURL(urlRef);
             urlRef = null;
             hasLoaded = false;
           }
-        } else {
-          task.abort({
-            code: PdfErrorCode.Cancelled,
-            message: "canceled render task"
-          });
         }
-      });
-    });
-    onBeforeUnmount(() => {
-      if (urlRef) {
-        URL.revokeObjectURL(urlRef);
-        urlRef = null;
-      }
-    });
+        if (urlRef && hasLoaded && prevDocId === docId) {
+          URL.revokeObjectURL(urlRef);
+          urlRef = null;
+          hasLoaded = false;
+        }
+        const task = capability.forDocument(docId).renderPage({
+          pageIndex: pageIdx,
+          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"
+            });
+          }
+        });
+      },
+      { immediate: true }
+    );
     function handleImageLoad() {
       hasLoaded = true;
     }
     return (_ctx, _cache) => {
-      return imageUrl.value ? (openBlock(), createElementBlock("img", {
+      return imageUrl.value ? (openBlock(), createElementBlock("img", mergeProps({
         key: 0,
         src: imageUrl.value,
         style: { width: "100%", height: "100%" },
         onLoad: handleImageLoad
-      }, null, 40, _hoisted_1)) : createCommentVNode("", true);
+      }, _ctx.$attrs), null, 16, _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, 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;;;;"}
+{"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, computed, watch } from 'vue';\nimport { ignore, PdfErrorCode } from '@embedpdf/models';\nimport { useDocumentState } from '@embedpdf/core/vue';\nimport { useRenderCapability } from '../hooks';\n\ninterface RenderLayerProps {\n  /**\n   * The ID of the document to render from\n   */\n  documentId: string;\n  /**\n   * The page index to render (0-based)\n   */\n  pageIndex: number;\n  /**\n   * Optional scale override. If not provided, uses document's current scale.\n   */\n  scale?: number;\n  /**\n   * Optional device pixel ratio override. If not provided, uses window.devicePixelRatio.\n   */\n  dpr?: number;\n}\n\nconst props = defineProps<RenderLayerProps>();\n\nconst { provides: renderProvides } = useRenderCapability();\nconst documentState = useDocumentState(() => props.documentId);\n\nconst imageUrl = ref<string | null>(null);\nlet urlRef: string | null = null;\nlet hasLoaded = false;\n\n// Get refresh version from core state\nconst refreshVersion = computed(() => {\n  if (!documentState.value) return 0;\n  return documentState.value.pageRefreshVersions[props.pageIndex] || 0;\n});\n\n// Determine actual render options: use overrides if provided, otherwise fall back to document state\nconst actualScale = computed(() => {\n  if (props.scale !== undefined) return props.scale;\n  return documentState.value?.scale ?? 1;\n});\n\nconst actualDpr = computed(() => {\n  if (props.dpr !== undefined) return props.dpr;\n  return window.devicePixelRatio;\n});\n\n// Render page when dependencies change\nwatch(\n  [\n    () => props.documentId,\n    () => props.pageIndex,\n    actualScale,\n    actualDpr,\n    renderProvides,\n    refreshVersion,\n  ],\n  ([docId, pageIdx, scale, dpr, capability], [prevDocId], onCleanup) => {\n    if (!capability) {\n      imageUrl.value = null;\n      return;\n    }\n\n    // CRITICAL: Clear image immediately when documentId changes (not for zoom/scale)\n    if (prevDocId !== undefined && prevDocId !== docId) {\n      imageUrl.value = null;\n      if (urlRef && hasLoaded) {\n        URL.revokeObjectURL(urlRef);\n        urlRef = null;\n        hasLoaded = false;\n      }\n    }\n\n    // Revoke old URL before creating new one (if it's been loaded)\n    if (urlRef && hasLoaded && prevDocId === docId) {\n      URL.revokeObjectURL(urlRef);\n      urlRef = null;\n      hasLoaded = false;\n    }\n\n    const task = capability.forDocument(docId).renderPage({\n      pageIndex: pageIdx,\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  { immediate: true },\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    v-bind=\"$attrs\"\n  />\n</template>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$attrs"],"mappings":";;;;;AAGO,MAAM,kBAAkB,MAAM,UAAwB,aAAa,EAAE;AACrE,MAAM,sBAAsB,MAAM,cAA4B,aAAa,EAAE;;;;;;;;;;;ACqBpF,UAAM,QAAQ;AAEd,UAAM,EAAE,UAAU,eAAA,IAAmB,oBAAA;AACrC,UAAM,gBAAgB,iBAAiB,MAAM,MAAM,UAAU;AAE7D,UAAM,WAAW,IAAmB,IAAI;AACxC,QAAI,SAAwB;AAC5B,QAAI,YAAY;AAGhB,UAAM,iBAAiB,SAAS,MAAM;AACpC,UAAI,CAAC,cAAc,MAAO,QAAO;AACjC,aAAO,cAAc,MAAM,oBAAoB,MAAM,SAAS,KAAK;AAAA,IACrE,CAAC;AAGD,UAAM,cAAc,SAAS,MAAM;;AACjC,UAAI,MAAM,UAAU,OAAW,QAAO,MAAM;AAC5C,eAAO,mBAAc,UAAd,mBAAqB,UAAS;AAAA,IACvC,CAAC;AAED,UAAM,YAAY,SAAS,MAAM;AAC/B,UAAI,MAAM,QAAQ,OAAW,QAAO,MAAM;AAC1C,aAAO,OAAO;AAAA,IAChB,CAAC;AAGD;AAAA,MACE;AAAA,QACE,MAAM,MAAM;AAAA,QACZ,MAAM,MAAM;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,CAAC,CAAC,OAAO,SAAS,OAAO,KAAK,UAAU,GAAG,CAAC,SAAS,GAAG,cAAc;AACpE,YAAI,CAAC,YAAY;AACf,mBAAS,QAAQ;AACjB;AAAA,QACF;AAGA,YAAI,cAAc,UAAa,cAAc,OAAO;AAClD,mBAAS,QAAQ;AACjB,cAAI,UAAU,WAAW;AACvB,gBAAI,gBAAgB,MAAM;AAC1B,qBAAS;AACT,wBAAY;AAAA,UACd;AAAA,QACF;AAGA,YAAI,UAAU,aAAa,cAAc,OAAO;AAC9C,cAAI,gBAAgB,MAAM;AAC1B,mBAAS;AACT,sBAAY;AAAA,QACd;AAEA,cAAM,OAAO,WAAW,YAAY,KAAK,EAAE,WAAW;AAAA,UACpD,WAAW;AAAA,UACX,SAAS;AAAA,YACP,aAAa;AAAA,YACb;AAAA,UAAA;AAAA,QACF,CACD;AAED,aAAK,KAAK,CAAC,SAAS;AAClB,gBAAM,YAAY,IAAI,gBAAgB,IAAI;AAC1C,mBAAS;AACT,mBAAS,QAAQ;AACjB,sBAAY;AAAA,QACd,GAAG,MAAM;AAET,kBAAU,MAAM;AACd,cAAI,QAAQ;AAEV,gBAAI,WAAW;AACb,kBAAI,gBAAgB,MAAM;AAC1B,uBAAS;AACT,0BAAY;AAAA,YACd;AAAA,UACF,OAAO;AAEL,iBAAK,MAAM;AAAA,cACT,MAAM,aAAa;AAAA,cACnB,SAAS;AAAA,YAAA,CACV;AAAA,UACH;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,EAAE,WAAW,KAAA;AAAA,IAAK;AAGpB,aAAS,kBAAkB;AACzB,kBAAY;AAAA,IACd;;aAKU,SAAA,SADRA,UAAA,GAAAC,mBAME,OANFC,WAME;AAAA;QAJC,KAAK,SAAA;AAAA,QACL,OAAO,EAAA,OAAA,QAAA,QAAA,OAAA;AAAA,QACP,QAAM;AAAA,MAAA,GACCC,KAAAA,MAAM,GAAA,MAAA,IAAA,UAAA;;;;"}

package/package.json

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