Skip to content

Commit 0455681

Browse files
bobsingorbobsingor
committed
Refactor examples Svelte to use DocumentManager plugin
Replaces LoaderPlugin usage with DocumentManagerPlugin across all Svelte example files. Updates all example content components to accept and use a documentId prop, passing it to plugin hooks and components. Refactors page rendering snippets and plugin usage to be document-aware, and wraps EmbedPDF usage with DocumentContext and DocumentContent for proper document lifecycle management. This improves multi-document support and aligns with the latest plugin architecture.
1 parent aeee92d commit 0455681

28 files changed

Lines changed: 583 additions & 286 deletions

‎examples/svelte-tailwind/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.vercel
2+
dist
3+
node_modules
4+
.svelte-kit

‎examples/svelte-tailwind/src/examples/capture-example-content.svelte‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
type CaptureAreaEvent,
1111
} from '@embedpdf/plugin-capture/svelte';
1212
13-
const capture = useCapture();
13+
let { documentId }: { documentId: string } = $props();
14+
15+
const capture = useCapture(() => documentId);
1416
1517
let captureResult = $state<CaptureAreaEvent | null>(null);
1618
let imageUrl = $state<string | null>(null);
@@ -41,16 +43,10 @@
4143
};
4244
</script>
4345

44-
{#snippet RenderPageSnippet(page: RenderPageProps)}
45-
<PagePointerProvider
46-
pageIndex={page.pageIndex}
47-
pageWidth={page.width}
48-
pageHeight={page.height}
49-
rotation={page.rotation}
50-
scale={page.scale}
51-
>
52-
<RenderLayer pageIndex={page.pageIndex} />
53-
<MarqueeCapture pageIndex={page.pageIndex} scale={page.scale} />
46+
{#snippet renderPage(page: RenderPageProps)}
47+
<PagePointerProvider {documentId} pageIndex={page.pageIndex}>
48+
<RenderLayer {documentId} pageIndex={page.pageIndex} scale={1} />
49+
<MarqueeCapture {documentId} pageIndex={page.pageIndex} />
5450
</PagePointerProvider>
5551
{/snippet}
5652

@@ -61,17 +57,20 @@
6157
<button
6258
onclick={() => capture.provides?.toggleMarqueeCapture()}
6359
class={`rounded-md px-3 py-1 text-sm font-medium transition-colors ${
64-
capture.isMarqueeCaptureActive ? 'bg-blue-500 text-white' : 'bg-gray-100 hover:bg-gray-200'
60+
capture.state.isMarqueeCaptureActive
61+
? 'bg-blue-500 text-white'
62+
: 'bg-gray-100 hover:bg-gray-200'
6563
}`}
6664
>
67-
{capture.isMarqueeCaptureActive ? 'Cancel Capture' : 'Capture Area'}
65+
{capture.state.isMarqueeCaptureActive ? 'Cancel Capture' : 'Capture Area'}
6866
</button>
6967
</div>
7068
<div class="flex-grow" style="position: relative; overflow: hidden">
7169
<Viewport
70+
{documentId}
7271
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #f1f3f5"
7372
>
74-
<Scroller {RenderPageSnippet} />
73+
<Scroller {documentId} {renderPage} />
7574
</Viewport>
7675
</div>
7776
</div>

‎examples/svelte-tailwind/src/examples/capture-example.svelte‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
<script lang="ts">
22
import { usePdfiumEngine } from '@embedpdf/engines/svelte';
33
import { EmbedPDF } from '@embedpdf/core/svelte';
4-
import { createPluginRegistration } from '@embedpdf/core';
5-
import { LoaderPluginPackage } from '@embedpdf/plugin-loader/svelte';
4+
import { createPluginRegistration, type PluginRegistry } from '@embedpdf/core';
5+
import {
6+
DocumentManagerPluginPackage,
7+
DocumentManagerPlugin,
8+
DocumentContext,
9+
DocumentContent,
10+
} from '@embedpdf/plugin-document-manager/svelte';
611
import { ViewportPluginPackage } from '@embedpdf/plugin-viewport/svelte';
712
import { ScrollPluginPackage } from '@embedpdf/plugin-scroll/svelte';
813
import { RenderPluginPackage } from '@embedpdf/plugin-render/svelte';
@@ -13,24 +18,39 @@
1318
const pdfEngine = usePdfiumEngine();
1419
1520
const plugins = [
16-
createPluginRegistration(LoaderPluginPackage, {
17-
loadingOptions: {
18-
type: 'url',
19-
pdfFile: { id: 'example-pdf', url: 'https://snippet.embedpdf.com/ebook.pdf' },
20-
},
21-
}),
21+
createPluginRegistration(DocumentManagerPluginPackage),
2222
createPluginRegistration(ViewportPluginPackage),
2323
createPluginRegistration(ScrollPluginPackage),
2424
createPluginRegistration(RenderPluginPackage),
2525
createPluginRegistration(InteractionManagerPluginPackage),
2626
createPluginRegistration(CapturePluginPackage, { scale: 2.0, imageType: 'image/png' }),
2727
];
28+
29+
const onInitialized = async (registry: PluginRegistry) => {
30+
registry
31+
.getPlugin<DocumentManagerPlugin>(DocumentManagerPlugin.id)
32+
?.provides()
33+
?.openDocumentUrl({ url: 'https://snippet.embedpdf.com/ebook.pdf' });
34+
};
2835
</script>
2936

3037
{#if pdfEngine.isLoading || !pdfEngine.engine}
3138
<div>Loading PDF Engine...</div>
3239
{:else}
33-
<EmbedPDF engine={pdfEngine.engine} {plugins}>
34-
<CaptureExampleContent />
40+
<EmbedPDF engine={pdfEngine.engine} {plugins} {onInitialized}>
41+
<DocumentContext>
42+
{#snippet children(context)}
43+
{#if context.activeDocumentId}
44+
{@const documentId = context.activeDocumentId}
45+
<DocumentContent {documentId}>
46+
{#snippet children(documentContent)}
47+
{#if documentContent.isLoaded}
48+
<CaptureExampleContent {documentId} />
49+
{/if}
50+
{/snippet}
51+
</DocumentContent>
52+
{/if}
53+
{/snippet}
54+
</DocumentContext>
3555
</EmbedPDF>
3656
{/if}

‎examples/svelte-tailwind/src/examples/export-example-content.svelte‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@
44
import { RenderLayer } from '@embedpdf/plugin-render/svelte';
55
import { useExportCapability } from '@embedpdf/plugin-export/svelte';
66
7-
const exportApi = useExportCapability();
7+
let { documentId }: { documentId: string } = $props();
8+
9+
const exportCapability = useExportCapability();
10+
const exportApi = $derived(exportCapability.provides?.forDocument(documentId));
811
</script>
912

10-
{#snippet RenderPageSnippet(page: RenderPageProps)}
13+
{#snippet renderPage(page: RenderPageProps)}
1114
<div style:width={`${page.width}px`} style:height={`${page.height}px`} style:position="relative">
12-
<RenderLayer pageIndex={page.pageIndex} scale={page.scale} />
15+
<RenderLayer {documentId} pageIndex={page.pageIndex} />
1316
</div>
1417
{/snippet}
1518

@@ -19,8 +22,8 @@
1922
class="mb-4 mt-4 flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm"
2023
>
2124
<button
22-
onclick={() => exportApi.provides?.download()}
23-
disabled={!exportApi.provides}
25+
onclick={() => exportApi?.download()}
26+
disabled={!exportApi}
2427
class="flex h-8 w-8 items-center justify-center rounded-md border border-gray-300 bg-white text-gray-700 transition-colors duration-150 hover:border-gray-400 hover:bg-gray-50 hover:text-gray-900 active:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
2528
title="Download PDF"
2629
>
@@ -40,6 +43,7 @@
4043
</div>
4144
<div class="flex-grow" style="position: relative">
4245
<Viewport
46+
{documentId}
4347
style="
4448
background-color: #f1f3f5;
4549
position: absolute;
@@ -49,7 +53,7 @@
4953
bottom: 0;
5054
"
5155
>
52-
<Scroller {RenderPageSnippet} />
56+
<Scroller {documentId} {renderPage} />
5357
</Viewport>
5458
</div>
5559
</div>

‎examples/svelte-tailwind/src/examples/export-example.svelte‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
<script lang="ts">
22
import { usePdfiumEngine } from '@embedpdf/engines/svelte';
33
import { EmbedPDF } from '@embedpdf/core/svelte';
4-
import { createPluginRegistration } from '@embedpdf/core';
5-
import { LoaderPluginPackage } from '@embedpdf/plugin-loader/svelte';
4+
import { createPluginRegistration, type PluginRegistry } from '@embedpdf/core';
5+
import {
6+
DocumentManagerPluginPackage,
7+
DocumentManagerPlugin,
8+
DocumentContext,
9+
DocumentContent,
10+
} from '@embedpdf/plugin-document-manager/svelte';
611
import { ViewportPluginPackage } from '@embedpdf/plugin-viewport/svelte';
712
import { ScrollPluginPackage } from '@embedpdf/plugin-scroll/svelte';
813
import { RenderPluginPackage } from '@embedpdf/plugin-render/svelte';
@@ -12,23 +17,38 @@
1217
const pdfEngine = usePdfiumEngine();
1318
1419
const plugins = [
15-
createPluginRegistration(LoaderPluginPackage, {
16-
loadingOptions: {
17-
type: 'url',
18-
pdfFile: { id: 'example-pdf', url: 'https://snippet.embedpdf.com/ebook.pdf' },
19-
},
20-
}),
20+
createPluginRegistration(DocumentManagerPluginPackage),
2121
createPluginRegistration(ViewportPluginPackage),
2222
createPluginRegistration(ScrollPluginPackage),
2323
createPluginRegistration(RenderPluginPackage),
2424
createPluginRegistration(ExportPluginPackage, { defaultFileName: 'downloaded-ebook.pdf' }),
2525
];
26+
27+
const onInitialized = async (registry: PluginRegistry) => {
28+
registry
29+
.getPlugin<DocumentManagerPlugin>(DocumentManagerPlugin.id)
30+
?.provides()
31+
?.openDocumentUrl({ url: 'https://snippet.embedpdf.com/ebook.pdf' });
32+
};
2633
</script>
2734

2835
{#if pdfEngine.isLoading || !pdfEngine.engine}
2936
<div>Loading PDF Engine...</div>
3037
{:else}
31-
<EmbedPDF engine={pdfEngine.engine} {plugins}>
32-
<ExportExampleContent />
38+
<EmbedPDF engine={pdfEngine.engine} {plugins} {onInitialized}>
39+
<DocumentContext>
40+
{#snippet children(context)}
41+
{#if context.activeDocumentId}
42+
{@const documentId = context.activeDocumentId}
43+
<DocumentContent {documentId}>
44+
{#snippet children(documentContent)}
45+
{#if documentContent.isLoaded}
46+
<ExportExampleContent {documentId} />
47+
{/if}
48+
{/snippet}
49+
</DocumentContent>
50+
{/if}
51+
{/snippet}
52+
</DocumentContext>
3353
</EmbedPDF>
3454
{/if}

‎examples/svelte-tailwind/src/examples/getting-started.svelte‎

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import { usePdfiumEngine } from '@embedpdf/engines/svelte';
33
import { EmbedPDF } from '@embedpdf/core/svelte';
4-
import { createPluginRegistration } from '@embedpdf/core';
4+
import { createPluginRegistration, type PluginRegistry } from '@embedpdf/core';
55
66
// Import the essential plugins and their components
77
import { ViewportPluginPackage, Viewport } from '@embedpdf/plugin-viewport/svelte';
@@ -10,45 +10,66 @@
1010
ScrollPluginPackage,
1111
type RenderPageProps,
1212
} from '@embedpdf/plugin-scroll/svelte';
13-
import { LoaderPluginPackage } from '@embedpdf/plugin-loader/svelte';
13+
import {
14+
DocumentManagerPluginPackage,
15+
DocumentManagerPlugin,
16+
DocumentContext,
17+
DocumentContent,
18+
} from '@embedpdf/plugin-document-manager/svelte';
1419
import { RenderLayer, RenderPluginPackage } from '@embedpdf/plugin-render/svelte';
1520
1621
// 1. Initialize the engine with the Svelte store
1722
const pdfEngine = usePdfiumEngine();
1823
1924
// 2. Register the plugins you need
2025
const plugins = [
21-
createPluginRegistration(LoaderPluginPackage, {
22-
loadingOptions: {
23-
type: 'url',
24-
pdfFile: {
25-
id: 'example-pdf',
26-
url: 'https://snippet.embedpdf.com/ebook.pdf',
27-
},
28-
},
29-
}),
26+
createPluginRegistration(DocumentManagerPluginPackage),
3027
createPluginRegistration(ViewportPluginPackage),
3128
createPluginRegistration(ScrollPluginPackage),
3229
createPluginRegistration(RenderPluginPackage),
3330
];
34-
</script>
3531
36-
{#snippet RenderPageSnippet(page: RenderPageProps)}
37-
<div style:width="{page.width}px" style:height="{page.height}px" style:position="relative">
38-
<RenderLayer pageIndex={page.pageIndex} />
39-
</div>
40-
{/snippet}
32+
// 3. Load the document when the plugins are initialized
33+
const onInitialized = async (registry: PluginRegistry) => {
34+
registry
35+
.getPlugin<DocumentManagerPlugin>(DocumentManagerPlugin.id)
36+
?.provides()
37+
?.openDocumentUrl({ url: 'https://snippet.embedpdf.com/ebook.pdf' });
38+
};
39+
</script>
4140

4241
<div style="height: 500px; border: 1px solid black; margin-top: 10px;">
4342
{#if pdfEngine.isLoading || !pdfEngine.engine}
4443
<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
4544
Loading PDF Engine...
4645
</div>
4746
{:else}
48-
<EmbedPDF engine={pdfEngine.engine} {plugins}>
49-
<Viewport style="background-color: #f1f3f5;">
50-
<Scroller {RenderPageSnippet} />
51-
</Viewport>
47+
<EmbedPDF engine={pdfEngine.engine} {plugins} {onInitialized}>
48+
<DocumentContext>
49+
{#snippet children(context)}
50+
{#if context.activeDocumentId}
51+
{@const documentId = context.activeDocumentId}
52+
<DocumentContent {documentId}>
53+
{#snippet children(documentContent)}
54+
{#if documentContent.isLoaded}
55+
{#snippet renderPage(page: RenderPageProps)}
56+
<div
57+
style:width="{page.width}px"
58+
style:height="{page.height}px"
59+
style:position="relative"
60+
>
61+
<RenderLayer {documentId} pageIndex={page.pageIndex} />
62+
</div>
63+
{/snippet}
64+
<Viewport {documentId} style="background-color: #f1f3f5;">
65+
<Scroller {documentId} {renderPage} />
66+
</Viewport>
67+
{/if}
68+
{/snippet}
69+
</DocumentContent>
70+
{/if}
71+
{/snippet}
72+
</DocumentContext>
5273
</EmbedPDF>
5374
{/if}
5475
</div>

‎examples/svelte-tailwind/src/examples/pan-example-content.svelte‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@
55
import { GlobalPointerProvider } from '@embedpdf/plugin-interaction-manager/svelte';
66
import { usePan } from '@embedpdf/plugin-pan/svelte';
77
8-
const pan = usePan();
8+
let { documentId }: { documentId: string } = $props();
9+
10+
const pan = usePan(() => documentId);
911
</script>
1012

11-
{#snippet RenderPageSnippet(page: RenderPageProps)}
13+
{#snippet renderPage(page: RenderPageProps)}
1214
<div style:width={`${page.width}px`} style:height={`${page.height}px`} style:position="relative">
13-
<RenderLayer pageIndex={page.pageIndex} scale={page.scale} class="pointer-events-none" />
15+
<RenderLayer {documentId} pageIndex={page.pageIndex} class="pointer-events-none" />
1416
</div>
1517
{/snippet}
1618

@@ -53,9 +55,9 @@
5355
</div>
5456
{/if}
5557
<div class="relative flex w-full flex-1 overflow-hidden">
56-
<GlobalPointerProvider>
57-
<Viewport class="flex-grow bg-gray-100">
58-
<Scroller {RenderPageSnippet} />
58+
<GlobalPointerProvider {documentId}>
59+
<Viewport {documentId} class="flex-grow bg-gray-100">
60+
<Scroller {documentId} {renderPage} />
5961
</Viewport>
6062
</GlobalPointerProvider>
6163
</div>

0 commit comments

Comments
 (0)