This Svelte library wraps Web2Paper core modeling utilities and integrate them with Svelte.

⚠️ Web2Paper and its ecosystem are under construction. Expect breaking change to API and bugs.

Usage

Data injection

The main interest of this library is to simplify the retrieval of data injected by Web2Paper when rendering a document. This done through the component <W2pDataProvider>, any component inside it will have access to data through the function getW2pData().

For browser preview, you can also provide the development data to load as a fallback.

schema.ts

// Imagine this is the real data schema used by your document model
export interface TestSchema {
    name: string
    age: number
}

Document.svelte

<script lang="ts">
    import {W2pDataProvider} from "@web2paper/modeling-svelte";
    import type {TestSchema} from "./schema.js";
    import Component from "./Component.svelte";

    // Provide dummy data to use during model development
    let developmentData: TestSchema = {
        name: "Bob",
        age: 42
    };

    // You can't access the data yet, you need to be in a child of W2pDataProvider
    // let data: TestSchema = getW2pData();
</script>

<W2pDataProvider {developmentData}>
    <Component/>
</W2pDataProvider>

Component.svelte

<script lang="ts">
    import type {TestSchema} from "./schema.js";
    import {getW2pData} from "@web2paper/modeling-svelte";

    // This is how you get the data to inject in your template
    let data: TestSchema = getW2pData();
</script>

<h1>Your name is {data.name}</h1>
<p>Your are {data.age} years old</p>

Common components

These components encapsulate common Web2Paper quirks, especially for basic types from @web2paper/modeling-schema.

<Image>

Inject an image with the type Image from @web2paper/modeling-schema passed with prop image. The underlying <img> element can be customized by passing class and style attributes.

<PageBreak>

Forces a page break.

<script lang="ts">
    import {type Image as ImageType} from "@web2paper/modeling-schema";
    import {Image} from "@web2paper/modeling-svelte";

    // Minimal image for testing
    // Found at https://gist.github.com/ondrek/7413434
    const image: ImageType = {
        mime: "image/png",
        base64: "iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"
    }
</script>

<!-- Passing classes allow you to use frameworks like TailwindCSS -->
<Image {image} class="object-contain h-20 aspect-square"/>