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>

Advanced Shared Class

If you know you're always going to be sharing a class, then you can make a generic SharedClass class to simplify things even more.

import { getContext, hasContext, setContext } from "svelte";

type Constructor<T, Args extends unknown[]> = new (...args: Args) => T;


export class SharedClass<T, Args extends unknown[]> {

    readonly #key: symbol;
    #class: Constructor<T, Args>;

    constructor(name: string, className: Constructor<T, Args>) {
        this.#key = Symbol(name);
        this.#class = className;
    }

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

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

    init(...args: Args): T {
        const _value = new this.#class(...args);
        return setContext(this.#key, _value);
    }
}

And use it like so:

import { SharedClass } from "./shared-class.svelte";


class MyCounter {

    current = $state(0);

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

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

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

export const useCustomCounter = new SharedClass('counter', MyCounter);

That's it!

Updated Code

• Repo
• Demo

J