Svelte-viewpoint NPM

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

Name	Type	Description	Required	Default
`component`	`Function`	Returns target component.	No	null
`delay`	`Number`	Delay in ms before the loading component is shown.	No	200
`timeout`	`Number`	Timeout in ms before the waiting component is shown. If not defined or 0 waiting component won't be shown.	No	0
`abort`	`Number`	Timeout in ms before target component loading will be aborted. If not defined or 0 loading won't be aborted until the error.	No	0
`preloading`	`Boolean`	Activates data preloading.	No	true