Runen in Svelte mit der Rune-Klasse teilen

Während ich in meinen TypeScript-Projekten im Allgemeinen Klassen vermeide und Funktionen aufgrund ihrer Einfachheit und Tree-Shaking-Vorteile bevorzuge, kann die Verwendung von Klassen mit den reaktiven $state-Variablen von Svelte Leistungsvorteile bieten. Rich Harris selbst schlägt diesen Ansatz in bestimmten Situationen vor. Der Schlüssel liegt darin, dass Klassen den Kompilierungsaufwand umgehen, der mit Gettern und Settern für $state-Variablen verbunden ist.

Eine gemeinsam nutzbare Runenklasse

Dies erfordert eine gemeinsam nutzbare Rune Klasse, die die Kontext-API von Svelte nutzt.

<code class="language-typescript">// rune.svelte.ts
import { getContext, hasContext, setContext } from "svelte";

type RCurrent<TValue> = { current: TValue };

export class Rune<TRune> {
    readonly #key: symbol;

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

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

    get(): RCurrent<TRune> {
        return getContext(this.#key);
    }

    init(value: TRune): RCurrent<TRune> {
        const _value = $state({ current: value }); // Assuming '$state' is available from a library like 'svelte-state'
        return setContext(this.#key, _value);
    }

    update(getter: () => TRune): void {
        const context = this.get();
        $effect(() => { // Assuming '$effect' is available from a library like 'svelte-state'
            context.current = getter();
        });
    }
}</code>

Wir können dann nach Bedarf benutzerdefinierte Runen exportieren:

<code class="language-typescript">// counter.svelte.ts
import { Rune } from "./rune.svelte";

export const counter = new Rune<number>('counter');</code>

Diese Methode ähnelt zwar gängigen $state Freigabetechniken, bietet jedoch serverseitige Kompatibilität (wie in früheren Beiträgen besprochen). Die Kontextbenennung folgt Standardkonventionen.

Initialisierung

Die Initialisierung der Variable $state erfolgt nur einmal innerhalb der übergeordneten Komponente:

<code class="language-svelte"><script>
    import { counter } from '$lib/counter.svelte';

    const count = counter.init(0);
</script></code>

Den Wert lesen

Untergeordnete Komponenten können sicher auf den aktuellen Wert zugreifen und ihn lesen:

<code class="language-svelte"><script>
    import { counter } from '$lib/counter.svelte';
    const count = counter.get();
</script>

<h1>Hello from Child: {count.current}</h1>
<button on:click={() => count.current++}>Increment From Child</button></code>

Reaktive Updates

Das Aktualisieren der freigegebenen $state erfordert eine Funktion zum Auslösen von Reaktivität:

<code class="language-svelte"><script>
    import { counter } from '$lib/counter.svelte';
    let value = $state(8); // Assuming '$state' is available
    counter.update(() => value);
</script></code>

Dies ermöglicht reaktive Aktualisierungen, die Verarbeitung von Signalen und das Speichern von Variablen ähnlich wie $derived.

Direkte Updates

Direkte Updates werden ebenfalls unterstützt:

<code class="language-svelte"><script>
    import { counter } from '$lib/counter.svelte';
    const count = counter.get();
    count.current = 9;
</script></code>

• Repo-Link (bitte angeben, falls verfügbar)
• Demo-Link (bitte angeben, falls verfügbar)

Dieser Ansatz bietet eine strukturierte und leistungsstarke Möglichkeit, den gemeinsamen reaktiven Zustand in Svelte-Anwendungen zu verwalten.

Das obige ist der detaillierte Inhalt vonRunen in Svelte mit der Rune-Klasse teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!