SvelteKit Remote Debug

Making Remote Functions a breeze!

What's this?

This component allows you to debug your remote functions in the style of the sveltekit-superforms library SuperDebug.

With the remote functions from SvelteKit, the superforms library isn't always necessary - but still needs a visual debugger when developing.

Limitations Notice

Remote Functions is currently experimental and subject to change. At this stage, it is not possible to collect all fields before they are interacted with. As a result, fields cannot be rendered in advance. This means the debugger will only display fields after they have been touched or once the form has been submitted.

How to use

Install the package

npm i -D sveltekit-remote-debug

Then you simply import the debugger in your project together with your remote function

import { RemoteDebug } from 'sveltekit-remote-debug';
import { myRemoteFormFunction } from '$lib/remote-functions/my-remote-form-function.ts';

The RemoteDebug takes the form as a property to collect it's data.

Be sure to also add oninput to your form, to debug in real time!

<RemoteDebug form="{myRemoteFormFunction}" />

<form {...myRemoteFormFunction} oninput={() => myRemoteFormFunction.validate()}>
  ...
</form>

Having this in your code, will show a box with your fields and it's values, such as

{
    "firstname": "foo",
    "lastname": "bar"
}

Options

showIssues?: boolean;
windowed?: boolean;
theme?: BundledTheme;
space?: number;

showIssues

Enabling this property will also show you a list of all the issues that is generated from your validation schema. This also separates the input data in it's own data property.

{
    "data": {
        "firstname": undefined,
        "lastname": "bar"
    },
    "issues": {
        "firstname": ["Firstname is required"],
        "lastname": undefined
    }
}

windowed

Enabling this property will instead make the debugger an absolute div which you can move around. Here you can also minimize it and copy the content (json) from the box.

theme

Thanks to the simplicity with shiki that this debugger is using for highlighting, you can also change the theme of your output.

space

This option takes a number that defines the tab-spacing for each row of your output.

Contributing

If you wish for something, please drop an issue and I will look into it ⭐