@svuick/core NPM

@svuick/core

Install

Install with npm

npm i @svuick/core

Install with pnpm

pnpm i @svuick/core

Install with yarn

yarn add @svuick/core

Setup

Hooks

src/hooks.ts

import { register } from '@svuick/core/hooks';

// import someplugin from '@svuick/someplugin/hooks';
// register(someplugin, { configEntry: 'configValue' });

export { handle, getSession } from '@svuick/core/hooks';

App

src/routes/__layout.svelte

<script context="module">
	import { register load, Svuick } from '@svuick/core/app';

	// import someplugin from '@svuick/someplugin/app';
	// register(someplugin, { configEntry: 'configValue' });

	export { load };
</script>

<Svuick />

In SvelteKit, there is also an option to ignore all parent layouts using a __layout.reset.svelte file. To avoid writing the code repeatedly in every __layout.reset.svelte file, it is a good idea to move the plugin initialization to an external file and include it everywhere needed.

src/lib/svuick.ts

import { register } from '@svuick/core/app';

// import someplugin from '@svuick/someplugin/app';
// register(someplugin, { configEntry: 'configValue' });

export { load, Svuick } from '@svuick/core/app';

src/routes/__layout.svelte

<script context="module">
	import { load, Svuick } from '$lib/svuick';

	export { load };
</script>

<Svuick />

Documentation

register plugins

hooks

import { register } from '@svuick/core/hooks';
import someplugin from '@svuick/someplugin/hooks';
register(someplugin, { configEntry: 'configValue' });

app

import { register } from '@svuick/core/app';
import someplugin from '@svuick/someplugin/app';
register(someplugin, { configEntry: 'configValue' });

chaining hooks

import { handleSequence, getSessionSequence } from '@svuick/core/hooks';

async function handle1({ request, resolve }) {
    const response = await resolve(request);
    console.log('handle 1');
    return response;
}
function handle2({ request, resolve }) {
    console.log('handle 2');
    return resolve(request);
}

function getSession1(request) {
    return {
        cookieValue: request.locals.cookieValue ?? null
    }
}
function getSession2(request) {
    return {
        user: request.locals.user ?? null
    }
}

export const handle = handleSequence(handle1, handle2);
export const getSession = getSessionSequence(getSession1, getSession2);

// output
handle 2
handle 1
// session data
{
    cookieValue: null,
    user: null,
}

chaining load functions

import { loadSequence } from '@svuick/core/app';

async function load1({ context, session }) {
	return {
		props: {}
	};
}
function load2({ request, resolve }) {
	return {
		props: {}
	};
}

export const load = handleSequence(load1, load2);

setHeaders

Utility function to set headers. Takes care of different behavior for set-cookie and vary headers.

import { setHeaders } from '@svuick/core/headers';

export function handle({ request, resolve }) {
    const response = await resolve(request);
    response.headers = setHeaders(response.headers ?? {}, {
        'set-cookie': 'key=value';
    });
    return response;
}

Typings

The @svuick/core package provides a global Svuick namespace (This may change in a future version in favour of imported types). It provides the interfaces

Locals
Stuff
Session

which can be extended by the user or plugins to provide types everywhere.

declare global {
	namespace Svuick {
		interface Locals {
			user: MyCustomUserDefinition;
		}
		interface Stuff {
			key: string;
		}
		interface Session {
			user: MyCustomUserDefinition;
		}
	}
}

Furthermore Svuick changes the type of the writable session store imported from $app/stores to reflect the types defined in Svuick.Session.

import { session } from '@app/stores';

// $session is typed and exposes a key called user
// with the type of <MyCustomUserDefinition> (from the example above)
$session.user;