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

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