SvelteKit Superactions

Call your server code from the client like normal functions.

🚧 This library is in an early state, and breaking changes will likely happen before the API is stabilised for a v1.0 release! 🚧

Documentation

Why?

While SvelteKit's data fetching patterns are great, but the ease-of-use of React Server Actions doesn't seem to have an equivalent in SvelteKit. The ability to just 'call a function' in the client-side, have it perform logic on the server and return the result to the client is sometimes very useful.

SvelteKit's form actions are a great fit for many cases, but they can be clunky when you want to call an endpoint without a form element, or when you need to send data that is too complex to be represented in FormData.

This library aims to provide additional tools alongside SvelteKit's API routes:

Features

• Type satefy between server and client
• Automatic JSON conversion (request/response)
• Schema validation
  • zod helper function
  • joi helper function

Installation

Install Superactions with your favourite package manager:

1# npm, yarn, pnpm, bun, etc
2npm i sveltekit-superactions

Usage

A minimal setup requires the following.

In a +server.ts file, define the actions that you want to use:

1// src/routes/api/+server.ts
2import { endpoint } from 'sveltekit-superactions';
3import { db } from '$lib/server/db';
4import { deleteTodo, findTodo, type TodoUpdate } from '$lib/server/handlers';
5
6// Always attach the endpoint as a POST handler
7export const POST = endpoint({
8	// e is the RequestEvent provided by SvelteKit,
9	// and the second argument is the request body decoded as JSON.
10	editTodo: async (e, body: TodoUpdate) => {
11		// The returned value is automatically serialized as JSON.
12		// The client-side function gets its return type directly from the return type of its server action
13		return await db.update(body.id, body);
14	},
15
16	// You can also just import handlers from other files and group them here.
17	deleteTodo,
18
19	// Or give them custom names
20	my_handler: findTodo
21});
22
23// export the type of the endpoint, so that we get types in the client
24export type API = typeof POST;

And in any Svelte component import the superActions function and the exported types to instantiate the client.

1<!-- src/routes/+page.svelte -->
2<script lang="ts">
3	import { superActions } from 'sveltekit-superactions';
4	import type { API } from './api/+server.js'; // exported API type
5
6	// give the client the path and API types to instantiate it.
7	const api = superActions<API>('/api');
8</script>
9
10{#await api.getTodos()}
11	<p>Loading TODOs...</p>
12{:then todos}
13	<ul>
14		{#each todos as todo}
15			<li>
16				{todo.text}
17				<input type="checkbox" checked={todo.checked} />
18			</li>
19		{/each}
20	</ul>
21{/await}