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