Partager des runes dans Svelte avec la classe rune

Bien que j'évite généralement les classes dans mes projets TypeScript, privilégiant les fonctions pour leur simplicité et leurs avantages en matière d'arborescence, l'utilisation de classes avec les variables réactives $state de Svelte peut offrir des avantages en termes de performances. Rich Harris lui-même suggère cette approche dans certaines situations. La clé est que les classes contournent la surcharge de compilation associée aux getters et setters pour les $state variables.

Une classe de runes partageable

Cela nécessite une classe Rune partageable exploitant l'API contextuelle de Svelte.

<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>

Nous pouvons ensuite exporter des runes personnalisées selon les besoins :

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

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

Cette méthode, bien que similaire aux $state techniques de partage courantes, offre une compatibilité côté serveur (comme indiqué dans les articles précédents). La dénomination du contexte suit les conventions standard.

Initialisation

L'initialisation de la variable $state n'a lieu qu'une seule fois, au sein du composant parent :

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

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

Lecture de la valeur

Les composants enfants peuvent accéder et lire en toute sécurité la valeur actuelle :

<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>

Mises à jour réactives

La mise à jour du $state partagé nécessite une fonction pour déclencher la réactivité :

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

Cela permet des mises à jour réactives, la gestion des signaux et le stockage des variables de la même manière que $derived.

Mises à jour directes

Les mises à jour directes sont également prises en charge :

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

• Lien Repo (Veuillez fournir si disponible)
• Lien de démonstration (veuillez fournir si disponible)

Cette approche fournit un moyen structuré et performant de gérer l'état réactif partagé dans les applications Svelte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!