svelte-page-router

Simple wrapper based on pagejs to make DX similar to config-based router. Play well with Svelte 3.

Usage

Install with npm or yarn:

npm install --save svelte-page-router

Then import router to your main.js file:

import Router from 'svelte-page-router';

import App from './App.svelte';

const options = {
	click: true,
	popstate: true,
	dispatch: true,
	hashbang: false,
};

const router = new Router({
	routes: [{
		path: '/static',
		component: import('./pages/Static')
	},{
		path: '/dynamic/:id/:type?',
		component: ctx => import('~/pages/Dynamic') // for lazy-loaded routes
	},{
		path: '/secure',
		component: import('~/pages/Secure'),
		before(ctx, next) {
			(/* check authorization */) ? 
				next() : 
				router.redirect('/static');
		}				
	}, {
		path: '*',
		component: import('~/pages/NotFound'),
	}],
	hooks: [
		(ctx, next) => {
			/* simple hooks to modify context for any route */
			next();
		}
	],
	...options
});

// simple integrate with Svelte

const app = new App({
	target: document.body,
	props: { component: null }
});

router.enter((ctx, next) => {
	app.$set({ ...ctx });
	tick().then(next);
});

router.exit((ctx, next) => {
	app.$set({ component: null });
	tick().then(next);
});

router.start();

Switch pages in App.svelte:

<svelte:component 
	this={component || Loading} 
	{...state} 
	{pathname} 
	{path} 
	{hash} 
	{params} 
	{query}
/>

<script>
	import Loading from './Loading.svelte';

	export let component = null,
		pathname = '',
		path = '',
		hash = '',
		params = {},
		query = {},
		state = {};
</script>

Use preload function to preload some data before page component will be rendered:

<ul>
{#each items as item}
	<li>{item.title}</li>
{/each}
</ul>

<script context="module">
	export async function preload(ctx) {
		const res = fetch(`/items/${ctx.params.id}?type=${ctx.params.type}&page=${ctx.query.page}`);
		const items = res.json();
		return { items };
	}
</script>

<script>
	export let items = [];
</script>

Context

Is a context object from pagejs with additional property component which is a Svelte component associated with the current route.

Methods

router.base(); // base path
router.strict(true); // strict matching

router.before((ctx, next) => { /* ... */ }); // guard before any route
router.after((ctx, next) => { /* ... */ }); // guard after any route

router.enter((ctx, next) => { /* ... */ }); // guard entring any route
router.exit((ctx, next) => { /* ... */ }); // guard exiting any route

router.start(); // start listening
router.stop(); // stop listening

router.redirect('/some'); // redirects
router.back(); // history back

License

MIT