Fix some issues in Svelte version

Author: bobsingor

packages/plugin-capture/src/svelte/components/MarqueeCapture.svelte

@@ -26,7 +26,7 @@
     fill = 'rgba(33,150,243,0.15)',
   }: MarqueeCaptureProps = $props();
 
-  const { provides: capturePlugin } = useCaptureCapability();
+  const captureCapability = useCaptureCapability();
   const documentState = useDocumentState(documentId);
 
   let rect = $state<Rect | null>(null);
@@ -38,11 +38,11 @@
   $effect(() => {
     rect = null;
 
-    if (!capturePlugin) {
+    if (!captureCapability.provides) {
       return;
     }
 
-    return capturePlugin.registerMarqueeOnPage({
+    return captureCapability.provides.registerMarqueeOnPage({
       documentId,
       pageIndex,
       scale: actualScale,

packages/plugin-interaction-manager/src/svelte/components/GlobalPointerProvider.svelte

@@ -18,12 +18,16 @@
   }: GlobalPointerProviderProps = $props();
 
   let ref = $state<HTMLDivElement | null>(null);
-  const { provides: cap } = useInteractionManagerCapability();
+  const interactionManagerCapability = useInteractionManagerCapability();
 
   $effect(() => {
-    if (!cap || !ref) return;
+    if (!interactionManagerCapability.provides || !ref) return;
 
-    return createPointerProvider(cap, { type: 'global', documentId }, ref);
+    return createPointerProvider(
+      interactionManagerCapability.provides,
+      { type: 'global', documentId },
+      ref,
+    );
   });
 </script>
 

packages/plugin-interaction-manager/src/svelte/components/PagePointerProvider.svelte

@@ -29,7 +29,7 @@
 
   let ref = $state<HTMLDivElement | null>(null);
 
-  const { provides: cap } = useInteractionManagerCapability();
+  const interactionManagerCapability = useInteractionManagerCapability();
   const isPageExclusive = useIsPageExclusive(documentId);
   const documentState = useDocumentState(documentId);
 
@@ -64,10 +64,10 @@
   });
 
   $effect(() => {
-    if (!cap || !ref) return;
+    if (!interactionManagerCapability.provides || !ref) return;
 
     return createPointerProvider(
-      cap,
+      interactionManagerCapability.provides,
       { type: 'page', documentId, pageIndex },
       ref,
       convertEventToPoint || defaultConvertEventToPoint,

packages/plugin-render/src/svelte/components/RenderLayer.svelte

@@ -22,56 +22,106 @@
      */
     dpr?: number;
     class?: string;
+    style?: string;
   }
 
+  // Single allowed $props() call
+  const allProps: RenderLayerProps = $props();
+
+  // Keep the rest reactive (Svelte will wire these to prop updates)
   let {
     documentId,
-    pageIndex,
     scale: scaleOverride,
     dpr: dprOverride,
     class: propsClass,
-    ...props
-  }: RenderLayerProps = $props();
+    style: propsStyle,
+    pageIndex,
+    ...attrs
+  } = allProps;
+
+  // Local non-reactive page index that only updates on actual change
+  let localPageIndex = $state(pageIndex);
+
+  // Watcher effect: only update localPageIndex if prop actually changes
+  $effect(() => {
+    if (pageIndex !== localPageIndex) {
+      localPageIndex = pageIndex;
+    }
+  });
+
+  const renderCapability = useRenderCapability();
 
-  const { provides: renderProvides } = useRenderCapability();
+  // Make document state follow the (reactive) documentId
   const documentState = useDocumentState(documentId);
 
   let imageUrl = $state<string | null>(null);
   let urlRef: string | null = null;
 
-  // Get refresh version from core state
+  // Track page refreshes from core
   const refreshVersion = $derived(documentState.current?.pageRefreshVersions?.[pageIndex] ?? 0);
 
-  // Determine actual render options: use overrides if provided, otherwise fall back to document state
+  // Resolve actual scale / dpr (overrides win, otherwise follow document state)
   const actualScale = $derived(
     scaleOverride !== undefined ? scaleOverride : (documentState.current?.scale ?? 1),
   );
 
   const actualDpr = $derived(dprOverride !== undefined ? dprOverride : window.devicePixelRatio);
 
-  // Render whenever inputs change (documentId, pageIndex, actualScale, actualDpr, renderProvides, refreshVersion)
+  // Effect: reruns when:
+  // - documentId changes
+  // - actualScale changes
+  // - actualDpr changes
+  // - refreshVersion changes
+  // - renderCapability.provides changes
+  // It does NOT track pageIndex reactively.
   $effect(() => {
-    if (!renderProvides) return;
+    const capability = renderCapability.provides;
+    const docId = documentId;
+    const scale = actualScale;
+    const dpr = actualDpr;
+    const refresh = refreshVersion;
+    const page = localPageIndex;
 
-    const task = renderProvides.forDocument(documentId).renderPage({
-      pageIndex,
+    if (!capability || !docId) {
+      // Cleanup if no capability/doc
+      if (urlRef) {
+        URL.revokeObjectURL(urlRef);
+        urlRef = null;
+      }
+      imageUrl = null;
+      return;
+    }
+
+    const scoped = capability.forDocument(docId);
+
+    const task = scoped.renderPage({
+      pageIndex: page,
       options: {
-        scaleFactor: actualScale,
-        dpr: actualDpr,
+        scaleFactor: scale,
+        dpr,
       },
     });
 
     task.wait((blob) => {
       const url = URL.createObjectURL(blob);
-      imageUrl = url;
+
+      // Revoke previous URL if it existed
+      if (urlRef) {
+        URL.revokeObjectURL(urlRef);
+      }
+
       urlRef = url;
+      imageUrl = url;
     }, ignore);
 
     return () => {
+      // Cleanup for this render run
       if (urlRef) {
         URL.revokeObjectURL(urlRef);
         urlRef = null;
+        imageUrl = null;
       } else {
+        // If render not finished, abort task
         task.abort({
           code: PdfErrorCode.Cancelled,
           message: 'canceled render task',
@@ -81,6 +131,7 @@
   });
 
   function handleImageLoad() {
+    // Once image is loaded, we can drop the objectURL reference
     if (urlRef) {
       URL.revokeObjectURL(urlRef);
       urlRef = null;
@@ -92,8 +143,8 @@
   <img
     src={imageUrl}
     onload={handleImageLoad}
-    {...props}
-    style="width: 100%; height: 100%;"
+    style={`width: 100%; height: 100%; ${propsStyle ?? ''}`}
+    {...attrs}
     class={propsClass}
     alt=""
   />

packages/plugin-rotate/src/svelte/components/Rotate.svelte

@@ -1,26 +1,32 @@
 <script lang="ts">
   import type { Rotation } from '@embedpdf/models';
   import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
   import { useDocumentState } from '@embedpdf/core/svelte';
   import { useRotatePlugin } from '../hooks';
 
-  interface RotateProps {
+  type RotateProps = HTMLAttributes<HTMLDivElement> & {
     documentId: string;
     pageIndex: number;
     rotation?: Rotation;
     scale?: number;
     children?: Snippet;
-  }
+    class?: string;
+    style?: string;
+  };
 
   let {
     documentId,
     pageIndex,
     rotation: rotationOverride,
     scale: scaleOverride,
     children,
+    class: propsClass,
+    style: propsStyle,
+    ...restProps
   }: RotateProps = $props();
 
-  const { plugin: rotatePlugin } = useRotatePlugin();
+  const rotatePlugin = useRotatePlugin();
   const documentState = useDocumentState(documentId);
 
   const page = $derived(documentState.current?.document?.pages?.[pageIndex]);
@@ -36,8 +42,8 @@
   );
 
   const matrix = $derived(
-    rotatePlugin
-      ? rotatePlugin.getMatrixAsString({
+    rotatePlugin.plugin
+      ? rotatePlugin.plugin.getMatrixAsString({
           width: width * scale,
           height: height * scale,
           rotation: rotation,
@@ -47,7 +53,14 @@
 </script>
 
 {#if page}
-  <div style:position="absolute" style:transform-origin="0 0" style:transform={matrix}>
+  <div
+    class={propsClass}
+    style:position="absolute"
+    style:transform-origin="0 0"
+    style:transform={matrix}
+    style={propsStyle}
+    {...restProps}
+  >
     {@render children?.()}
   </div>
 {/if}

packages/plugin-search/src/svelte/components/SearchLayer.svelte

@@ -21,12 +21,12 @@
     ...divProps
   }: SearchLayerProps = $props();
 
-  const { provides: searchProvides } = useSearchCapability();
+  const searchCapability = useSearchCapability();
   const documentState = useDocumentState(documentId);
 
   let searchResultState = $state<SearchResultState | null>(null);
 
-  const scope = $derived(searchProvides?.forDocument(documentId) ?? null);
+  const scope = $derived(searchCapability.provides?.forDocument(documentId) ?? null);
 
   const actualScale = $derived(
     scaleOverride !== undefined ? scaleOverride : (documentState.current?.scale ?? 1),

packages/plugin-selection/src/svelte/components/SelectionLayer.svelte

@@ -21,7 +21,7 @@
     background = 'rgba(33,150,243)',
   }: SelectionLayerProps = $props();
 
-  const { plugin: selPlugin } = useSelectionPlugin();
+  const selectionPlugin = useSelectionPlugin();
   const documentState = useDocumentState(documentId);
 
   let rects = $state<Rect[]>([]);
@@ -32,13 +32,13 @@
   );
 
   $effect(() => {
-    if (!selPlugin || !documentId) {
+    if (!selectionPlugin.plugin || !documentId) {
       rects = [];
       boundingRect = null;
       return;
     }
 
-    return selPlugin.registerSelectionOnPage({
+    return selectionPlugin.plugin.registerSelectionOnPage({
       documentId,
       pageIndex,
       onRectsChange: ({ rects: newRects, boundingRect: newBoundingRect }) => {

packages/plugin-zoom/src/svelte/components/MarqueeZoom.svelte

@@ -26,7 +26,7 @@
     fill = 'rgba(33,150,243,0.15)',
   }: MarqueeZoomProps = $props();
 
-  const { provides: zoomPlugin } = useZoomCapability();
+  const zoomCapability = useZoomCapability();
   const documentState = useDocumentState(documentId);
 
   let rect = $state<Rect | null>(null);
@@ -38,11 +38,11 @@
   $effect(() => {
     rect = null;
 
-    if (!zoomPlugin) {
+    if (!zoomCapability.provides) {
       return;
     }
 
-    return zoomPlugin.registerMarqueeOnPage({
+    return zoomCapability.provides.registerMarqueeOnPage({
       documentId,
       pageIndex,
       scale: actualScale,