Sharing Custom Rune Classes with SvelteKit

Following my last article on Svelte 5 Runes, there are cases when you need to add custom functionality to a Rune, and share it. This method is pretty simple if you have been following this thread. Implementation You can share classes in Svelte, but safely sharing them in SvelteKit, requires a bit more code... Create Your Class class MyCounter { current = $state(0); constructor(value: number) { this.current = value; } increment() { this.current += 1; } decrement() { this.current -= 1; } } This could be any class you want to share. This class happens to have a reactive $state() value, and shows an example of adding custom functionality like increment(). This method works best when you have complicated classes you want to share. Create Your Custom Sharable Class // add SSR protection with Context import { getContext, hasContext, setContext } from "svelte"; export class _Counter { readonly #key: symbol; constructor(name: string) { this.#key = Symbol(name); } exists(): boolean { return hasContext(this.#key); } get(): MyCounter { return getContext(this.#key); } init(initialNumber: number): MyCounter { // initialize any class const _value = new MyCounter(initialNumber); return setContext(this.#key, _value); } } Export the Class export const useCustomCounter = new _Counter('counter'); Usage The usage would be the same as the Rune class from before. // initialize value const customCounter = useCustomCounter.init(1); ... Hello from Parent Custom: {customCounter.current} And use it in children with your custom methods: const customCounter = useCustomCounter.get(); customCounter.increment()}> Increment Custom From Child Updated Code Repo Demo That's it! J

Feb 26, 2025 - 02:51

Sharing Custom Rune Classes with SvelteKit

Following my last article on Svelte 5 Runes, there are cases when you need to add custom functionality to a Rune, and share it. This method is pretty simple if you have been following this thread.

Implementation

You can share classes in Svelte, but safely sharing them in SvelteKit, requires a bit more code...

Create Your Class

class MyCounter {

    current = $state(0);

    constructor(value: number) {
        this.current = value;
    }

    increment() {
        this.current += 1;
    }

    decrement() {
        this.current -= 1;
    }
}

This could be any class you want to share. This class happens to have a reactive $state() value, and shows an example of adding custom functionality like increment(). This method works best when you have complicated classes you want to share.

Create Your Custom Sharable Class

// add SSR protection with Context
import { getContext, hasContext, setContext } from "svelte";

export class _Counter {

    readonly #key: symbol;

    constructor(name: string) {
        this.#key = Symbol(name);
    }

    exists(): boolean {
        return hasContext(this.#key);
    }

    get(): MyCounter {
        return getContext(this.#key);
    }

    init(initialNumber: number): MyCounter {
        // initialize any class
        const _value = new MyCounter(initialNumber);
        return setContext(this.#key, _value);
    }
}

Export the Class

export const useCustomCounter = new _Counter('counter');

Usage

The usage would be the same as the Rune class from before.

// initialize value
const customCounter = useCustomCounter.init(1);
...
<h1>Hello from Parent Custom: {customCounter.current}</h1>

And use it in children with your custom methods:

const customCounter = useCustomCounter.get();

<button type="button" onclick={() => customCounter.increment()}>
Increment Custom From Child
</button>

Updated Code

Repo
Demo

That's it!