Super tiny, loadable component for SvelteJS with blackjack and data preloading.

Features

• Static & dynamic components.
• loading placeholder component with delay.
• waiting placeholder component after timeout.
• error component.
• Proxes any additional props to target component.
• Preloads target component data using Sapper-like preload function in context of module.

Install

npm i svelte-viewpoint --save-dev

yarn add svelte-viewpoint

CDN: UNPKG | jsDelivr (available as window.Viewpoint)

<script src="https://unpkg.com/svelte-viewpoint/dist/viewpoint.min.js"></script>

<!-- OR in modern browsers -->

<script type="module" src="https://unpkg.com/svelte-viewpoint/dist/viewpoint.min.mjs"></script>

Usage

<Viewpoint {component} />

<script>
    import Viewpoint from 'svelte-viewpoint';

    const component = () => import('./Component.svelte');
</script>

Using loading, waiting & error components.

<Viewpoint {component} timeout={3000} delay={500}>
    <div slot="loading">
        <Spinner />
    </div>
    <div slot="waiting">
        Wait for a few seconds, please...
    </div>
    <div slot="error" let:error>
        <Error {error} />
    </div>
</Viewpoint>

<script>
    import Viewpoint from 'svelte-viewpoint';

    import Error from './Error.svelte';
    import Spinner from './Spinner.svelte';

    const component = () => import('./Component.svelte');
</script>

Pass any additional props and preload function.

<Viewpoint {component} {user} />

<script>
    import Viewpoint from 'svelte-viewpoint';

    const component = () => import('./UserProfile.svelte');

    let user = { firstname: 'John', lastname: 'Doe' };
</script>

Define preload in UserProfile.svelte:

<script context="module">
    export async function preload({ user }) {
        const res = await fetch(`/user/${user.id}/messages`);
        const messages = res.json();
        return { messages };
    }
</script>

API

Props

Slots

• waiting — elements to be placed on waiting
• loading — elements to be placed on loading
• error — elements to be placed on error

License

MIT © PaulMaly