Skip to main content

Déclarations réactives $:

En mode runes, les réactions aux mises à jour d'état sont gérées avec les runes $derived et $effect.

En mode legacy, toute déclaration à la racine (par ex. pas dans un bloc ou une fonction) peut être rendue réactive en la préfixant avec un label $:. Ces déclarations sont exécutées après tout autre code du <script> et avant le rendu du markup du composant, puis lorsque les valeurs dont elles dépendent changent.

<script>
	let a = 1;
	let b = 2;

	// ceci est une "déclaration réactive", et sera rejouée
	// lorsque `a`, `b` ou `sum` change
	$: console.log(`${a} + ${b} = ${sum}`);

	// ceci est une "assignatin réactive" — `sum` sera
	// recalculée lorsque `a` ou `b` change. Il n'est
	// pas nécessaire de déclarer `sum` séparément
	$: sum = a + b;
</script>

Les déclarations sont ordonnées topologiquement par leurs dépendences et leurs assignations : puisque la déclaration console.log dépend de sum, sum est calculée en premier même si elle apparaît plus loin dans le code.

Plusieurs déclarations peuvent être combinée en les mettant dans un bloc :

$: {
	// recalcule `total` lorsque `items` change
	total = 0;

	for (const const item: anyitem of items) {
		total += const item: anyitem.value;
	}
}

La partie à gauche d'une assignation réactive peut être un identifiant, ou une assignation de déstructuration :

$: ({ larry: anylarry, moe: anymoe, curly: anycurly } = stooges);

Comprendre les dépendances

Les dépendances d'une déclaration $: sont déterminées au moment de la compilation — il s'agit de toutes les variables référencées (mais pas assignées) dans la déclaration.

En d'autres termes, une déclaration comme celle-ci ne sera pas rejouée lorsque count change, car le compilateur ne peut pas "voir" la dépendance :

let let count: numbercount = 0;
let let double: () => numberdouble = () => let count: numbercount * 2;

$: doubled = let double: () => numberdouble();

De même, l'ordre topologique sera cassé si les dépendances sont référencées indirectement : z ne sera jamais mis à jour, car y n'est pas considérée comme ayant changé lorsque la mise à jour se produit. Déplacer $: z = y en-dessous de $: setY(x) permet de corriger le problème :

<script>
	let x = 0;
	let y = 0;

	$: z = y;
	$: setY(x);

	function setY(value) {
		y = value;
	}
</script>

Code uniquement pour le navigateur

Les déclarations réactives sont jouées lors du rendu côté serveur ainsi que dans le navigateur. Ceci signifie que tout code qui devrait être uniquement exécuté dans le navigateur devrait être placé dans un bloc if :

$: if (browser) {
	var document: Document

window.document returns a reference to the document contained in the window.

MDN Reference

document
.Document.title: string

The document.title property gets or sets the current title of the document. When present, it defaults to the value of the .</p> <p><a href="https://developer.mozilla.org/docs/Web/API/Document/title">MDN Reference</a></p> </div></span>title</span></span> <span style="color:var(--shiki-foreground)"></span><span style="color:var(--shiki-token-keyword)">=</span> <span style="color:var(--shiki-foreground)"></span><span style="color:var(--shiki-foreground)">title</span><span style="color:var(--shiki-foreground)">;</span></span> <span class="line"><span style="color:var(--shiki-foreground)">}</span></span></code></pre></div><!----><!----></div><!----></div> <p class="edit svelte-s202gb"><a href="https://github.com/bleucitron/svelte.dev/edit/french/apps/svelte.dev/content/docs/svelte/99-legacy/02-legacy-reactive-assignments.md" class="svelte-s202gb"><svg width="20" height="20" class="svelte-hfc14b"><use href="#edit"></use></svg><!----> Modifier cette page sur Github</a> <!--[0--><a href="/docs/svelte/legacy-reactive-assignments/llms.txt" class="svelte-s202gb"><svg width="20" height="20" class="svelte-hfc14b"><use href="#contents"></use></svg><!----> llms.txt</a><!--]--></p> <div class="controls svelte-s202gb"><div class="flex svelte-s202gb"><span class="svelte-s202gb">précédent</span> <span class="next svelte-s202gb">suivant</span></div> <div class="flex svelte-s202gb"><!--[0--><a href="/docs/svelte/legacy-let" class="svelte-s202gb">Déclarations réactives let/var</a><!--]--> <!--[0--><a class="next svelte-s202gb" href="/docs/svelte/legacy-export-let">export let</a><!--]--></div></div><!----></div><!--]--><!----></div></div><!--]--><!--]--><!----><!----></main> <!--[0--><!--[-1--><!--]--><!--]--><!----><!----> <!--[-1--><!--]--><!--]--><!--]--> <!--[-1--><!--]--><!--]--> <script> { __sveltekit_19n8q3e = { base: new URL("../..", location).pathname.slice(0, -1) }; const element = document.currentScript.parentElement; Promise.all([ import("../../_app/immutable/entry/start.CwdW3qsS.js"), import("../../_app/immutable/entry/app.BviMDZB7.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 3, 16], data: [{type:"data",data:{nav_links:[{title:"Docs",slug:"docs",sections:[{title:"Svelte",path:"/docs/svelte",sections:[{title:"Introduction",sections:[{title:"Aperçu",path:"/docs/svelte/overview"},{title:"Débuter avec Svelte",path:"/docs/svelte/getting-started"},{title:"Fichiers .svelte",path:"/docs/svelte/svelte-files"},{title:"Fichiers .svelte.js et .svelte.ts",path:"/docs/svelte/svelte-js-files"}]},{title:"Runes",sections:[{title:"C’est quoi une rune ?",path:"/docs/svelte/what-are-runes"},{title:"$state",path:"/docs/svelte/$state"},{title:"$derived",path:"/docs/svelte/$derived"},{title:"$effect",path:"/docs/svelte/$effect"},{title:"$props",path:"/docs/svelte/$props"},{title:"$bindable",path:"/docs/svelte/$bindable"},{title:"$inspect",path:"/docs/svelte/$inspect"},{title:"$host",path:"/docs/svelte/$host"}]},{title:"Syntaxe de template",sections:[{title:"Bases du markup",path:"/docs/svelte/basic-markup"},{title:"{#if ...}",path:"/docs/svelte/if"},{title:"{#each ...}",path:"/docs/svelte/each"},{title:"{#key ...}",path:"/docs/svelte/key"},{title:"{#await ...}",path:"/docs/svelte/await"},{title:"{#snippet ...}",path:"/docs/svelte/snippet"},{title:"{@render ...}",path:"/docs/svelte/@render"},{title:"{@html ...}",path:"/docs/svelte/@html"},{title:"{@attach ...}",path:"/docs/svelte/@attach"},{title:"{@const ...}",path:"/docs/svelte/@const"},{title:"{@debug ...}",path:"/docs/svelte/@debug"},{title:"{let/const ...}",path:"/docs/svelte/declaration-tags"},{title:"bind:",path:"/docs/svelte/bind"},{title:"use:",path:"/docs/svelte/use"},{title:"transition:",path:"/docs/svelte/transition"},{title:"in: et out:",path:"/docs/svelte/in-and-out"},{title:"animate:",path:"/docs/svelte/animate"},{title:"style:",path:"/docs/svelte/style"},{title:"class",path:"/docs/svelte/class"},{title:"await",path:"/docs/svelte/await-expressions"}]},{title:"Styles",sections:[{title:"Styles scopés",path:"/docs/svelte/scoped-styles"},{title:"Styles globaux",path:"/docs/svelte/global-styles"},{title:"Propriétés personnalisées",path:"/docs/svelte/custom-properties"},{title:"Éléments \u003Cstyle> imbriqués",path:"/docs/svelte/nested-style-elements"}]},{title:"Éléments spéciaux",sections:[{title:"\u003Csvelte:boundary>",path:"/docs/svelte/svelte-boundary"},{title:"\u003Csvelte:window>",path:"/docs/svelte/svelte-window"},{title:"\u003Csvelte:document>",path:"/docs/svelte/svelte-document"},{title:"\u003Csvelte:body>",path:"/docs/svelte/svelte-body"},{title:"\u003Csvelte:head>",path:"/docs/svelte/svelte-head"},{title:"\u003Csvelte:element>",path:"/docs/svelte/svelte-element"},{title:"\u003Csvelte:options>",path:"/docs/svelte/svelte-options"}]},{title:"Runtime",sections:[{title:"Stores",path:"/docs/svelte/stores"},{title:"Contexte",path:"/docs/svelte/context"},{title:"Méthodes de cycle de vie",path:"/docs/svelte/lifecycle-hooks"},{title:"API de composant impérative",path:"/docs/svelte/imperative-component-api"},{title:"Données hydratables",path:"/docs/svelte/hydratable"}]},{title:"Divers",sections:[{title:"Bonnes pratiques",path:"/docs/svelte/best-practices"},{title:"Tests",path:"/docs/svelte/testing"},{title:"TypeScript",path:"/docs/svelte/typescript"},{title:"Éléments personnalisés",path:"/docs/svelte/custom-elements"},{title:"Support des navigateurs",path:"/docs/svelte/browser-support"},{title:"Migrer vers Svelte 4",path:"/docs/svelte/v4-migration-guide"},{title:"Migrer vers Svelte 5",path:"/docs/svelte/v5-migration-guide"},{title:"Foire aux questions",path:"/docs/svelte/faq"}]},{title:"Référence",sections:[{title:"svelte",path:"/docs/svelte/svelte"},{title:"svelte/action",path:"/docs/svelte/svelte-action"},{title:"svelte/animate",path:"/docs/svelte/svelte-animate"},{title:"svelte/attachments",path:"/docs/svelte/svelte-attachments"},{title:"svelte/compiler",path:"/docs/svelte/svelte-compiler"},{title:"svelte/easing",path:"/docs/svelte/svelte-easing"},{title:"svelte/events",path:"/docs/svelte/svelte-events"},{title:"svelte/legacy",path:"/docs/svelte/svelte-legacy"},{title:"svelte/motion",path:"/docs/svelte/svelte-motion"},{title:"svelte/reactivity/window",path:"/docs/svelte/svelte-reactivity-window"},{title:"svelte/reactivity",path:"/docs/svelte/svelte-reactivity"},{title:"svelte/server",path:"/docs/svelte/svelte-server"},{title:"svelte/store",path:"/docs/svelte/svelte-store"},{title:"svelte/transition",path:"/docs/svelte/svelte-transition"},{title:"Erreurs de compilation",path:"/docs/svelte/compiler-errors"},{title:"Avertissements de compilation",path:"/docs/svelte/compiler-warnings"},{title:"Erreurs d’exécution",path:"/docs/svelte/runtime-errors"},{title:"Warnings d’exécution",path:"/docs/svelte/runtime-warnings"}]},{title:"Anciennes APIs",sections:[{title:"Aperçu",path:"/docs/svelte/legacy-overview"},{title:"Déclarations réactives let/var",path:"/docs/svelte/legacy-let"},{title:"Déclarations réactives $:",path:"/docs/svelte/legacy-reactive-assignments"},{title:"export let",path:"/docs/svelte/legacy-export-let"},{title:"$$props et $$restProps",path:"/docs/svelte/legacy-$$props-and-$$restProps"},{title:"on:",path:"/docs/svelte/legacy-on"},{title:"\u003Cslot>",path:"/docs/svelte/legacy-slots"},{title:"$$slots",path:"/docs/svelte/legacy-$$slots"},{title:"\u003Csvelte:fragment>",path:"/docs/svelte/legacy-svelte-fragment"},{title:"\u003Csvelte:component>",path:"/docs/svelte/legacy-svelte-component"},{title:"\u003Csvelte:self>",path:"/docs/svelte/legacy-svelte-self"},{title:"API de composant impérative",path:"/docs/svelte/legacy-component-api"}]}]},{title:"SvelteKit",path:"/docs/kit",sections:[{title:"Débuter avec SvelteKit",sections:[{title:"Introduction",path:"/docs/kit/introduction"},{title:"Créer un projet",path:"/docs/kit/creating-a-project"},{title:"Types de projet",path:"/docs/kit/project-types"},{title:"Structure d’un projet",path:"/docs/kit/project-structure"},{title:"Standards du web",path:"/docs/kit/web-standards"}]},{title:"Concepts clés",sections:[{title:"Routing",path:"/docs/kit/routing"},{title:"Charger des données",path:"/docs/kit/load"},{title:"Actions de formulaire",path:"/docs/kit/form-actions"},{title:"Options de page",path:"/docs/kit/page-options"},{title:"Gestion de l’état",path:"/docs/kit/state-management"},{title:"Fonctions distantes",path:"/docs/kit/remote-functions"},{title:"Variables d’environment",path:"/docs/kit/environment-variables"}]},{title:"Compiler et déployer",sections:[{title:"Compiler votre application",path:"/docs/kit/building-your-app"},{title:"Adaptateurs",path:"/docs/kit/adapters"},{title:"Déploiements zéro config",path:"/docs/kit/adapter-auto"},{title:"Serveurs Node",path:"/docs/kit/adapter-node"},{title:"Génération de site statique",path:"/docs/kit/adapter-static"},{title:"SPAs",path:"/docs/kit/single-page-apps"},{title:"Cloudflare",path:"/docs/kit/adapter-cloudflare"},{title:"Cloudflare Workers",path:"/docs/kit/adapter-cloudflare-workers"},{title:"Netlify",path:"/docs/kit/adapter-netlify"},{title:"Vercel",path:"/docs/kit/adapter-vercel"},{title:"Écrire un adaptateur",path:"/docs/kit/writing-adapters"}]},{title:"Advanced",sections:[{title:"Routing avancé",path:"/docs/kit/advanced-routing"},{title:"Hooks",path:"/docs/kit/hooks"},{title:"Erreurs",path:"/docs/kit/errors"},{title:"Options de lien",path:"/docs/kit/link-options"},{title:"Service workers",path:"/docs/kit/service-workers"},{title:"Modules serveur",path:"/docs/kit/server-only-modules"},{title:"Snapshots",path:"/docs/kit/snapshots"},{title:"Shallow routing",path:"/docs/kit/shallow-routing"},{title:"Observabilité",path:"/docs/kit/observability"},{title:"Packaging",path:"/docs/kit/packaging"}]},{title:"Bonnes pratiques",sections:[{title:"Auth",path:"/docs/kit/auth"},{title:"Performance",path:"/docs/kit/performance"},{title:"Icônes",path:"/docs/kit/icons"},{title:"Images",path:"/docs/kit/images"},{title:"Accessibilité",path:"/docs/kit/accessibility"},{title:"Référencement",path:"/docs/kit/seo"}]},{title:"Annexes",sections:[{title:"Foire À Questions",path:"/docs/kit/faq"},{title:"Intégrations",path:"/docs/kit/integrations"},{title:"Débugger avec des breakpoints",path:"/docs/kit/debugging"},{title:"Migrer vers SvelteKit v2",path:"/docs/kit/migrating-to-sveltekit-2"},{title:"Migrer depuis Sapper",path:"/docs/kit/migrating"},{title:"Ressources supplémentaires",path:"/docs/kit/additional-resources"},{title:"Glossaire",path:"/docs/kit/glossary"}]},{title:"Reference",sections:[{title:"@sveltejs/kit",path:"/docs/kit/@sveltejs-kit"},{title:"@sveltejs/kit/hooks",path:"/docs/kit/@sveltejs-kit-hooks"},{title:"@sveltejs/kit/node/polyfills",path:"/docs/kit/@sveltejs-kit-node-polyfills"},{title:"@sveltejs/kit/node",path:"/docs/kit/@sveltejs-kit-node"},{title:"@sveltejs/kit/vite",path:"/docs/kit/@sveltejs-kit-vite"},{title:"$app/env",path:"/docs/kit/$app-env"},{title:"$app/env/private",path:"/docs/kit/$app-env-private"},{title:"$app/env/public",path:"/docs/kit/$app-env-public"},{title:"$app/environment",path:"/docs/kit/$app-environment"},{title:"$app/forms",path:"/docs/kit/$app-forms"},{title:"$app/navigation",path:"/docs/kit/$app-navigation"},{title:"$app/paths",path:"/docs/kit/$app-paths"},{title:"$app/server",path:"/docs/kit/$app-server"},{title:"$app/state",path:"/docs/kit/$app-state"},{title:"$app/stores",path:"/docs/kit/$app-stores"},{title:"$app/types",path:"/docs/kit/$app-types"},{title:"$env/dynamic/private",path:"/docs/kit/$env-dynamic-private"},{title:"$env/dynamic/public",path:"/docs/kit/$env-dynamic-public"},{title:"$env/static/private",path:"/docs/kit/$env-static-private"},{title:"$env/static/public",path:"/docs/kit/$env-static-public"},{title:"$lib",path:"/docs/kit/$lib"},{title:"$service-worker",path:"/docs/kit/$service-worker"},{title:"Configuration",path:"/docs/kit/configuration"},{title:"CLI",path:"/docs/kit/cli"},{title:"Types",path:"/docs/kit/types"}]}]},{title:"CLI",path:"/docs/cli",sections:[{title:"Introduction",sections:[{title:"Aperçu",path:"/docs/cli/overview"},{title:"Foire à questions",path:"/docs/cli/faq"}]},{title:"Commandes",sections:[{title:"sv create",path:"/docs/cli/sv-create"},{title:"sv add",path:"/docs/cli/sv-add"},{title:"sv check",path:"/docs/cli/sv-check"},{title:"sv migrate",path:"/docs/cli/sv-migrate"}]},{title:"Add-ons",sections:[{title:"better-auth",path:"/docs/cli/better-auth"},{title:"drizzle",path:"/docs/cli/drizzle"},{title:"eslint",path:"/docs/cli/eslint"},{title:"experimental",path:"/docs/cli/experimental"},{title:"mcp",path:"/docs/cli/mcp"},{title:"mdsvex",path:"/docs/cli/mdsvex"},{title:"paraglide",path:"/docs/cli/paraglide"},{title:"playwright",path:"/docs/cli/playwright"},{title:"prettier",path:"/docs/cli/prettier"},{title:"storybook",path:"/docs/cli/storybook"},{title:"sveltekit-adapter",path:"/docs/cli/sveltekit-adapter"},{title:"tailwindcss",path:"/docs/cli/tailwind"},{title:"vitest",path:"/docs/cli/vitest"},{title:"devtools-json",path:"/docs/cli/devtools-json"},{title:"[créez le votre]",path:"/docs/cli/community"}]},{title:"API",sections:[{title:"sv",path:"/docs/cli/sv"},{title:"sv-utils",path:"/docs/cli/sv-utils"}]}]},{title:"AI",path:"/docs/ai",sections:[{title:"Introduction",sections:[{title:"Aperçu",path:"/docs/ai/overview"}]},{title:"Instructions",sections:[{title:"AGENTS.md",path:"/docs/ai/instructions"}]},{title:"Serveur MCP",sections:[{title:"Overview",path:"/docs/ai/mcp"},{title:"Installation locale",path:"/docs/ai/local-setup"},{title:"Installation distante",path:"/docs/ai/remote-setup"},{title:"Outils",path:"/docs/ai/tools"},{title:"Ressources",path:"/docs/ai/resources"},{title:"Prompts",path:"/docs/ai/prompts"},{title:"CLI",path:"/docs/ai/cli"}]},{title:"Skills",sections:[{title:"Aperçu",path:"/docs/ai/skills"}]},{title:"Subagents",sections:[{title:"Aperçu",path:"/docs/ai/subagent"}]},{title:"Plugins",sections:[{title:"Claude Code",path:"/docs/ai/claude-plugin"},{title:"OpenCode",path:"/docs/ai/opencode-plugin"},{title:"Cursor",path:"/docs/ai/cursor-plugin"}]}]}]},{title:"Tutoriel",slug:"tutorial",sections:[{title:"Bases de Svelte",sections:[{title:"Introduction",sections:[{title:"Bienvenue dans le monde de Svelte",path:"/tutorial/svelte/welcome-to-svelte"},{title:"Votre premier composant",path:"/tutorial/svelte/your-first-component"},{title:"Attributs dynamiques",path:"/tutorial/svelte/dynamic-attributes"},{title:"Styles",path:"/tutorial/svelte/styling"},{title:"Composants imbriqués",path:"/tutorial/svelte/nested-components"},{title:"Balises HTML",path:"/tutorial/svelte/html-tags"}]},{title:"Réactivité",sections:[{title:"L’état",path:"/tutorial/svelte/state"},{title:"L’état profond",path:"/tutorial/svelte/deep-state"},{title:"État dérivé",path:"/tutorial/svelte/derived-state"},{title:"Inspecter l’état",path:"/tutorial/svelte/inspecting-state"},{title:"Effets",path:"/tutorial/svelte/effects"},{title:"Réactivité universelle",path:"/tutorial/svelte/universal-reactivity"}]},{title:"Props",sections:[{title:"Déclarer des props",path:"/tutorial/svelte/declaring-props"},{title:"Valeurs par défaut",path:"/tutorial/svelte/default-values"},{title:"Étaler les props",path:"/tutorial/svelte/spread-props"}]},{title:"Logique",sections:[{title:"Blocs if",path:"/tutorial/svelte/if-blocks"},{title:"Blocs else",path:"/tutorial/svelte/else-blocks"},{title:"Blocs else-if",path:"/tutorial/svelte/else-if-blocks"},{title:"Bloc each",path:"/tutorial/svelte/each-blocks"},{title:"Blocs each à clé",path:"/tutorial/svelte/keyed-each-blocks"},{title:"Blocs await",path:"/tutorial/svelte/await-blocks"}]},{title:"Évènements",sections:[{title:"Évènements DOM",path:"/tutorial/svelte/dom-events"},{title:"Gestionnaires inline",path:"/tutorial/svelte/inline-handlers"},{title:"Capture",path:"/tutorial/svelte/capturing"},{title:"Évènements de composant",path:"/tutorial/svelte/component-events"},{title:"Étaler les évènements",path:"/tutorial/svelte/spreading-events"}]},{title:"Liaisons",sections:[{title:"Inputs texte",path:"/tutorial/svelte/text-inputs"},{title:"Inputs numériques",path:"/tutorial/svelte/numeric-inputs"},{title:"Checkbox",path:"/tutorial/svelte/checkbox-inputs"},{title:"Liaisons de select",path:"/tutorial/svelte/select-bindings"},{title:"Inputs de groupe",path:"/tutorial/svelte/group-inputs"},{title:"Selects multiples",path:"/tutorial/svelte/multiple-select-bindings"},{title:"Inputs textarea",path:"/tutorial/svelte/textarea-inputs"}]},{title:"Classes et styles",sections:[{title:"L’attribut de classe",path:"/tutorial/svelte/classes"},{title:"La directive de style",path:"/tutorial/svelte/styles"},{title:"Styles de composants",path:"/tutorial/svelte/component-styles"}]},{title:"Attachements",sections:[{title:"La balise attach",path:"/tutorial/svelte/attach"},{title:"Usines à attachements",path:"/tutorial/svelte/attachment-factories"}]},{title:"Transitions",sections:[{title:"La directive de transition",path:"/tutorial/svelte/transition"},{title:"Ajouter des paramètres",path:"/tutorial/svelte/adding-parameters-to-transitions"},{title:"In et out",path:"/tutorial/svelte/in-and-out"},{title:"Transitions CSS personnalisées",path:"/tutorial/svelte/custom-css-transitions"},{title:"Transition JS personnalisées",path:"/tutorial/svelte/custom-js-transitions"},{title:"Évènements de transition",path:"/tutorial/svelte/transition-events"},{title:"Transitions globales",path:"/tutorial/svelte/global-transitions"},{title:"Blocs key",path:"/tutorial/svelte/key-blocks"}]}]},{title:"Svelte avancé",sections:[{title:"Réactivité avancée",sections:[{title:"État brut",path:"/tutorial/svelte/raw-state"},{title:"Classes réactives",path:"/tutorial/svelte/reactive-classes"},{title:"Getters et setters",path:"/tutorial/svelte/getters-and-setters"},{title:"Classes réactives intégrées",path:"/tutorial/svelte/reactive-builtins"},{title:"Stores",path:"/tutorial/svelte/stores"}]},{title:"Réutiliser du contenu",sections:[{title:"Snippets et balises de rendu",path:"/tutorial/svelte/snippets-and-render-tags"},{title:"Passer des snippers aux composants",path:"/tutorial/svelte/passing-snippets"},{title:"Props de snippets implicites",path:"/tutorial/svelte/implicit-snippet-props"}]},{title:"Mouvements",sections:[{title:"Valeurs interpolées",path:"/tutorial/svelte/tweens"},{title:"Ressorts",path:"/tutorial/svelte/springs"}]},{title:"Liaisons avancées",sections:[{title:"Liaisons contenteditable",path:"/tutorial/svelte/contenteditable-bindings"},{title:"Liaisons de bloc each",path:"/tutorial/svelte/each-block-bindings"},{title:"Éléments media",path:"/tutorial/svelte/media-elements"},{title:"Dimensions",path:"/tutorial/svelte/dimensions"},{title:"This",path:"/tutorial/svelte/bind-this"},{title:"Liaisons de composant",path:"/tutorial/svelte/component-bindings"},{title:"Lier des instances de composant",path:"/tutorial/svelte/component-this"}]},{title:"Transitions avancées",sections:[{title:"Transitions retardées",path:"/tutorial/svelte/deferred-transitions"},{title:"Animations",path:"/tutorial/svelte/animations"}]},{title:"API de contexte",sections:[{title:"setContext et getContext",path:"/tutorial/svelte/context-api"}]},{title:"Éléments spéciaux",sections:[{title:"\u003Csvelte:window>",path:"/tutorial/svelte/svelte-window"},{title:"Liaisons \u003Csvelte:window>",path:"/tutorial/svelte/svelte-window-bindings"},{title:"\u003Csvelte:document>",path:"/tutorial/svelte/svelte-document"},{title:"\u003Csvelte:body>",path:"/tutorial/svelte/svelte-body"},{title:"\u003Csvelte:head>",path:"/tutorial/svelte/svelte-head"},{title:"\u003Csvelte:element>",path:"/tutorial/svelte/svelte-element"},{title:"\u003Csvelte:boundary>",path:"/tutorial/svelte/svelte-boundary"}]},{title:"\u003Cscript module>",sections:[{title:"Partager du code",path:"/tutorial/svelte/sharing-code"},{title:"Exports",path:"/tutorial/svelte/module-exports"}]},{title:"Next steps",sections:[{title:"Félicitations !",path:"/tutorial/svelte/congratulations"}]}]},{title:"Bases de SvelteKit",sections:[{title:"Introduction",sections:[{title:"C’est quoi SvelteKit?",path:"/tutorial/kit/introducing-sveltekit"}]},{title:"Routing",sections:[{title:"Pages",path:"/tutorial/kit/pages"},{title:"Layouts",path:"/tutorial/kit/layouts"},{title:"Paramètre de route",path:"/tutorial/kit/params"}]},{title:"Chargement de données",sections:[{title:"Données de page",path:"/tutorial/kit/page-data"},{title:"Données de layout",path:"/tutorial/kit/layout-data"}]},{title:"En-têtes et cookies",sections:[{title:"Définir les en-têtes",path:"/tutorial/kit/headers"},{title:"Lire et écrire des cookies",path:"/tutorial/kit/cookies"}]},{title:"Modules partagés",sections:[{title:"L’alias $lib",path:"/tutorial/kit/lib"}]},{title:"Formulaires",sections:[{title:"L’élément \u003Cform>",path:"/tutorial/kit/the-form-element"},{title:"Actions de formulaire nommées",path:"/tutorial/kit/named-form-actions"},{title:"Validation",path:"/tutorial/kit/form-validation"},{title:"Amélioration progressive",path:"/tutorial/kit/progressive-enhancement"},{title:"Personnaliser use:enhance",path:"/tutorial/kit/customizing-use-enhance"}]},{title:"Routes d’API",sections:[{title:"Gestionnaires GET",path:"/tutorial/kit/get-handlers"},{title:"Gestionnaires POST",path:"/tutorial/kit/post-handlers"},{title:"Autres gestionnaires",path:"/tutorial/kit/other-handlers"}]},{title:"$app/state",sections:[{title:"page",path:"/tutorial/kit/page-state"},{title:"navigating",path:"/tutorial/kit/navigating-state"},{title:"updated",path:"/tutorial/kit/updated-state"}]},{title:"Erreurs et redirections",sections:[{title:"Bases",path:"/tutorial/kit/error-basics"},{title:"Pages d’erreur",path:"/tutorial/kit/error-pages"},{title:"Erreurs de secours",path:"/tutorial/kit/fallback-errors"},{title:"Redirections",path:"/tutorial/kit/redirects"}]}]},{title:"SvelteKit avancé",sections:[{title:"Hooks",sections:[{title:"handle",path:"/tutorial/kit/handle"},{title:"L’objet RequestEvent",path:"/tutorial/kit/event"},{title:"handleFetch",path:"/tutorial/kit/handlefetch"},{title:"handleError",path:"/tutorial/kit/handleerror"}]},{title:"Options de page",sections:[{title:"Bases",path:"/tutorial/kit/page-options"},{title:"ssr",path:"/tutorial/kit/ssr"},{title:"csr",path:"/tutorial/kit/csr"},{title:"prerender",path:"/tutorial/kit/prerender"},{title:"trailingSlash",path:"/tutorial/kit/trailingslash"}]},{title:"Options de lien",sections:[{title:"Préchargement",path:"/tutorial/kit/preload"},{title:"Recharger la page",path:"/tutorial/kit/reload"}]},{title:"Routing avancé",sections:[{title:"Paramètres optionnels",path:"/tutorial/kit/optional-params"},{title:"Paramètres de reste",path:"/tutorial/kit/rest-params"},{title:"Matchers de paramètres",path:"/tutorial/kit/param-matchers"},{title:"Groupes de routes",path:"/tutorial/kit/route-groups"},{title:"S’extraire d’un layout",path:"/tutorial/kit/breaking-out-of-layouts"}]},{title:"Chargement avancé",sections:[{title:"Fonctions de chargement universelles",path:"/tutorial/kit/universal-load-functions"},{title:"Utilisez les deux fonction load",path:"/tutorial/kit/using-both-load-functions"},{title:"Utiliser les données du parent",path:"/tutorial/kit/await-parent"},{title:"Invalidation",path:"/tutorial/kit/invalidation"},{title:"Dépendances personnalisées",path:"/tutorial/kit/custom-dependencies"},{title:"invalidateAll",path:"/tutorial/kit/invalidate-all"}]},{title:"Variables d’environnement",sections:[{title:"$env/static/private",path:"/tutorial/kit/env-static-private"},{title:"$env/dynamic/private",path:"/tutorial/kit/env-dynamic-private"},{title:"$env/static/public",path:"/tutorial/kit/env-static-public"},{title:"$env/dynamic/public",path:"/tutorial/kit/env-dynamic-public"}]},{title:"Conclusion",sections:[{title:"Prochaines étapes",path:"/tutorial/kit/next-steps"}]}]}]},{title:"Packages",slug:"packages"},{title:"Bac à sable",slug:"playground"},{title:"Blog",slug:"blog"}],banner:{id:"french-non-official",start:new Date(1752624000000),end:new Date(1830211200000),arrow:false,content:{lg:"⚠️ Cette traduction n'est pas officielle, veuillez vous référrer au site officiel en cas de doute. ⚠️",sm:"⚠️ Traduction non officielle ⚠️"},href:"https://github.com/bleucitron/svelte.dev"}},uses:{}},{type:"data",data:{sections:[{slug:"docs/svelte/introduction",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Introduction"},children:[{slug:"docs/svelte/overview",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Aperçu"},children:[]},{slug:"docs/svelte/getting-started",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Débuter avec Svelte"},children:[]},{slug:"docs/svelte/svelte-files",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Fichiers .svelte"},children:[]},{slug:"docs/svelte/svelte-js-files",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Fichiers .svelte.js et .svelte.ts"},children:[]}]},{slug:"docs/svelte/runes",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Runes"},children:[{slug:"docs/svelte/what-are-runes",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"C’est quoi une rune ?"},children:[]},{slug:"docs/svelte/$state",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$state",tags:"rune-state"},children:[]},{slug:"docs/svelte/$derived",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$derived",tags:"rune-derived"},children:[]},{slug:"docs/svelte/$effect",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$effect",tags:"rune-effect"},children:[]},{slug:"docs/svelte/$props",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$props",tags:"rune-props"},children:[]},{slug:"docs/svelte/$bindable",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$bindable"},children:[]},{slug:"docs/svelte/$inspect",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$inspect",tags:"rune-inspect"},children:[]},{slug:"docs/svelte/$host",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$host"},children:[]}]},{slug:"docs/svelte/template-syntax",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Syntaxe de template"},children:[{slug:"docs/svelte/basic-markup",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Bases du markup"},children:[]},{slug:"docs/svelte/if",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{#if ...}",tags:"template-if"},children:[]},{slug:"docs/svelte/each",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{#each ...}",tags:"template-each"},children:[]},{slug:"docs/svelte/key",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{#key ...}",tags:"template-key"},children:[]},{slug:"docs/svelte/await",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{#await ...}",tags:"template-await"},children:[]},{slug:"docs/svelte/snippet",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{#snippet ...}"},children:[]},{slug:"docs/svelte/@render",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{@render ...}"},children:[]},{slug:"docs/svelte/@html",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{@html ...}",tags:"template-html"},children:[]},{slug:"docs/svelte/@attach",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{@attach ...}",tags:"attachments"},children:[]},{slug:"docs/svelte/@const",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{@const ...}"},children:[]},{slug:"docs/svelte/@debug",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{@debug ...}"},children:[]},{slug:"docs/svelte/declaration-tags",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"{let/const ...}"},children:[]},{slug:"docs/svelte/bind",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"bind:"},children:[]},{slug:"docs/svelte/use",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"use:"},children:[]},{slug:"docs/svelte/transition",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"transition:",tags:"transitions"},children:[]},{slug:"docs/svelte/in-and-out",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"in: et out:",tags:"transitions"},children:[]},{slug:"docs/svelte/animate",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"animate:"},children:[]},{slug:"docs/svelte/style",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"style:",tags:"template-style"},children:[]},{slug:"docs/svelte/class",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"class",tags:"template-style"},children:[]},{slug:"docs/svelte/await-expressions",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"await"},children:[]}]},{slug:"docs/svelte/styling",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Styles"},children:[{slug:"docs/svelte/scoped-styles",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Styles scopés",tags:"styles-scoped"},children:[]},{slug:"docs/svelte/global-styles",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Styles globaux",tags:"styles-global"},children:[]},{slug:"docs/svelte/custom-properties",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Propriétés personnalisées",tags:"styles-custom-properties"},children:[]},{slug:"docs/svelte/nested-style-elements",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Éléments \u003Cstyle> imbriqués"},children:[]}]},{slug:"docs/svelte/special-elements",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Éléments spéciaux"},children:[{slug:"docs/svelte/svelte-boundary",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:boundary>"},children:[]},{slug:"docs/svelte/svelte-window",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:window>"},children:[]},{slug:"docs/svelte/svelte-document",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:document>"},children:[]},{slug:"docs/svelte/svelte-body",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:body>"},children:[]},{slug:"docs/svelte/svelte-head",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:head>"},children:[]},{slug:"docs/svelte/svelte-element",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:element>"},children:[]},{slug:"docs/svelte/svelte-options",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:options>"},children:[]}]},{slug:"docs/svelte/runtime",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Runtime"},children:[{slug:"docs/svelte/stores",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Stores"},children:[]},{slug:"docs/svelte/context",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Contexte"},children:[]},{slug:"docs/svelte/lifecycle-hooks",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Méthodes de cycle de vie"},children:[]},{slug:"docs/svelte/imperative-component-api",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"API de composant impérative"},children:[]},{slug:"docs/svelte/hydratable",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Données hydratables"},children:[]}]},{slug:"docs/svelte/misc",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Divers"},children:[{slug:"docs/svelte/best-practices",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Bonnes pratiques",skill:true,name:"svelte-core-bestpractices",description:"Des conseils pour écrire du code Svelte rapide, robuste et\nmoderne. Chargez ce skill lorsque vous êtes dans un projet Svelte, et que l’on\nvous demande d’écrire, d’éditer ou d’analyser un module ou un composant Svelte.\nCe document couvre la réactivité, la gestion d’évènements, le style,\nl’intégration avec des librairies, entre autres."},children:[]},{slug:"docs/svelte/testing",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Tests"},children:[]},{slug:"docs/svelte/typescript",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"TypeScript"},children:[]},{slug:"docs/svelte/custom-elements",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Éléments personnalisés"},children:[]},{slug:"docs/svelte/browser-support",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Support des navigateurs"},children:[]},{slug:"docs/svelte/v4-migration-guide",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Migrer vers Svelte 4"},children:[]},{slug:"docs/svelte/v5-migration-guide",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Migrer vers Svelte 5"},children:[]},{slug:"docs/svelte/faq",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Foire aux questions"},children:[]}]},{slug:"docs/svelte/reference",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Référence"},children:[{slug:"docs/svelte/svelte",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte"},children:[]},{slug:"docs/svelte/svelte-action",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/action"},children:[]},{slug:"docs/svelte/svelte-animate",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/animate"},children:[]},{slug:"docs/svelte/svelte-attachments",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/attachments",tags:"attachments"},children:[]},{slug:"docs/svelte/svelte-compiler",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/compiler"},children:[]},{slug:"docs/svelte/svelte-easing",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/easing"},children:[]},{slug:"docs/svelte/svelte-events",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/events"},children:[]},{slug:"docs/svelte/svelte-legacy",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/legacy"},children:[]},{slug:"docs/svelte/svelte-motion",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/motion"},children:[]},{slug:"docs/svelte/svelte-reactivity-window",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/reactivity/window"},children:[]},{slug:"docs/svelte/svelte-reactivity",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/reactivity"},children:[]},{slug:"docs/svelte/svelte-server",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/server"},children:[]},{slug:"docs/svelte/svelte-store",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/store"},children:[]},{slug:"docs/svelte/svelte-transition",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"svelte/transition",tags:"transitions"},children:[]},{slug:"docs/svelte/compiler-errors",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Erreurs de compilation"},children:[]},{slug:"docs/svelte/compiler-warnings",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Avertissements de compilation"},children:[]},{slug:"docs/svelte/runtime-errors",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Erreurs d’exécution"},children:[]},{slug:"docs/svelte/runtime-warnings",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Warnings d’exécution"},children:[]}]},{slug:"docs/svelte/legacy",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Anciennes APIs"},children:[{slug:"docs/svelte/legacy-overview",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Aperçu"},children:[]},{slug:"docs/svelte/legacy-let",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Déclarations réactives let/var"},children:[]},{slug:"docs/svelte/legacy-reactive-assignments",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Déclarations réactives $:"},children:[]},{slug:"docs/svelte/legacy-export-let",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"export let"},children:[]},{slug:"docs/svelte/legacy-$$props-and-$$restProps",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$$props et $$restProps"},children:[]},{slug:"docs/svelte/legacy-on",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"on:"},children:[]},{slug:"docs/svelte/legacy-slots",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Cslot>"},children:[]},{slug:"docs/svelte/legacy-$$slots",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"$$slots"},children:[]},{slug:"docs/svelte/legacy-svelte-fragment",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:fragment>"},children:[]},{slug:"docs/svelte/legacy-svelte-component",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:component>"},children:[]},{slug:"docs/svelte/legacy-svelte-self",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"\u003Csvelte:self>"},children:[]},{slug:"docs/svelte/legacy-component-api",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"API de composant impérative"},children:[]}]}]},uses:{params:["topic"]}},{type:"data",data:{document:{slug:"docs/svelte/legacy-reactive-assignments",file:"docs/svelte/99-legacy/02-legacy-reactive-assignments.md",metadata:{NOTE:"do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts",title:"Déclarations réactives $:"},breadcrumbs:[{title:"Docs"},{title:"Svelte"},{title:"Anciennes APIs"}],body:"\u003Cp>En mode runes, les réactions aux mises à jour d'état sont gérées avec les runes\n\u003Ca href=\"$derived\">\u003Ccode>$derived\u003C/code>\u003C/a> et \u003Ca href=\"$effect\">\u003Ccode>$effect\u003C/code>\u003C/a>.\u003C/p>\n\u003Cp>En mode legacy, toute déclaration à la racine (par ex. pas dans un bloc ou une fonction) peut être\nrendue réactive en la préfixant avec un\n\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label\">label\u003C/a> \u003Ccode>$:\u003C/code>.\nCes déclarations sont exécutées après tout autre code du \u003Ccode><script>\u003C/code> et avant le rendu du markup du\ncomposant, puis lorsque les valeurs dont elles dépendent changent.\u003C/p>\n\u003Cdiv class=\"code-block\">\u003Cdiv class=\"controls\">\u003Cbutton class=\"copy-to-clipboard raised\" title=\"Copy to clipboard\" aria-label=\"Copy to clipboard\">\u003C/button>\u003C/div>\u003Cpre data-js data-ts data-language=\"svelte\" class=\"shiki css-variables\" style=\"background-color:var(--shiki-background);color:var(--shiki-foreground)\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-foreground)\"><\u003C/span>\u003Cspan style=\"color:var(--shiki-token-string-expression)\">script\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-token-keyword)\">let\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">a\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">1\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-token-keyword)\">let\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">b\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">2\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-token-comment)\">// ceci est une \"déclaration réactive\", et sera rejouée\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-token-comment)\">// lorsque `a`, `b` ou `sum` change\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-foreground)\">$\u003C/span>\u003Cspan style=\"color:var(--shiki-token-punctuation)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">console\u003C/span>\u003Cspan style=\"color:var(--shiki-token-function)\">.log\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">(\u003C/span>\u003Cspan style=\"color:var(--shiki-token-string-expression)\">`\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">${\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">a\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">}\u003C/span> \u003Cspan style=\"color:var(--shiki-token-string-expression)\">+\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">${\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">b\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">}\u003C/span> \u003Cspan style=\"color:var(--shiki-token-string-expression)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">${\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">sum\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">}\u003C/span>\u003Cspan style=\"color:var(--shiki-token-string-expression)\">`\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-token-comment)\">// ceci est une \"assignatin réactive\" — `sum` sera\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-token-comment)\">// recalculée lorsque `a` ou `b` change. Il n'est\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-token-comment)\">// pas nécessaire de déclarer `sum` séparément\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-foreground)\">$\u003C/span>\u003Cspan style=\"color:var(--shiki-token-punctuation)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">sum\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">a\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">+\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">b;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-foreground)\"></\u003C/span>\u003Cspan style=\"color:var(--shiki-token-string-expression)\">script\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/div>\u003Cp>Les déclarations sont ordonnées \u003Cem>topologiquement\u003C/em> par leurs dépendences et leurs assignations :\npuisque la déclaration \u003Ccode>console.log\u003C/code> dépend de \u003Ccode>sum\u003C/code>, \u003Ccode>sum\u003C/code> est calculée en premier même si elle\napparaît plus loin dans le code.\u003C/p>\n\u003Cp>Plusieurs déclarations peuvent être combinée en les mettant dans un bloc :\u003C/p>\n\u003Cdiv class=\"code-block\">\u003Cdiv class=\"controls\">\u003Cbutton class=\"copy-to-clipboard raised\" title=\"Copy to clipboard\" aria-label=\"Copy to clipboard\">\u003C/button>\u003C/div>\u003Cpre data-js data-ts data-language=\"js\" class=\"shiki css-variables twoslash lsp\" style=\"background-color:var(--shiki-background);color:var(--shiki-foreground)\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-foreground)\">$\u003C/span>\u003Cspan style=\"color:var(--shiki-token-punctuation)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">{\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-token-comment)\">// recalcule `total` lorsque `items` change\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">total\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">0\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-token-keyword)\">for\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">(\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">const\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-token-constant)\">\u003Cspan class=\"twoslash-hover\">\u003Cspan class=\"twoslash-popup-container\">\u003Ccode class=\"twoslash-popup-code\">\u003Cspan style=\"color:var(--shiki-token-keyword)\">const\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">item\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">any\u003C/span>\u003C/code>\u003C/span>item\u003C/span>\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">of\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">items\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">) {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\t\u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">total\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">+=\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-token-constant)\">\u003Cspan class=\"twoslash-hover\">\u003Cspan class=\"twoslash-popup-container\">\u003Ccode class=\"twoslash-popup-code\">\u003Cspan style=\"color:var(--shiki-token-keyword)\">const\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">item\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">any\u003C/span>\u003C/code>\u003C/span>item\u003C/span>\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">.\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">value\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-foreground)\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-foreground)\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/div>\u003Cp>La partie à gauche d'une assignation réactive peut être un identifiant, ou une assignation de\ndéstructuration :\u003C/p>\n\u003Cdiv class=\"code-block\">\u003Cdiv class=\"controls\">\u003Cbutton class=\"copy-to-clipboard raised\" title=\"Copy to clipboard\" aria-label=\"Copy to clipboard\">\u003C/button>\u003C/div>\u003Cpre data-js data-ts data-language=\"js\" class=\"shiki css-variables twoslash lsp\" style=\"background-color:var(--shiki-background);color:var(--shiki-foreground)\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-foreground)\">$\u003C/span>\u003Cspan style=\"color:var(--shiki-token-punctuation)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">({\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003Cspan class=\"twoslash-hover\">\u003Cspan class=\"twoslash-popup-container\">\u003Ccode class=\"twoslash-popup-code\">\u003Cspan style=\"color:var(--shiki-foreground)\">larry\u003C/span>\u003Cspan style=\"color:var(--shiki-token-punctuation)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">any\u003C/span>\u003C/code>\u003C/span>larry\u003C/span>\u003C/span>\u003Cspan style=\"color:var(--shiki-token-punctuation)\">,\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">\u003Cspan class=\"twoslash-hover\">\u003Cspan class=\"twoslash-popup-container\">\u003Ccode class=\"twoslash-popup-code\">\u003Cspan style=\"color:var(--shiki-foreground)\">moe\u003C/span>\u003Cspan style=\"color:var(--shiki-token-punctuation)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">any\u003C/span>\u003C/code>\u003C/span>moe\u003C/span>\u003C/span>\u003Cspan style=\"color:var(--shiki-token-punctuation)\">,\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">\u003Cspan class=\"twoslash-hover\">\u003Cspan class=\"twoslash-popup-container\">\u003Ccode class=\"twoslash-popup-code\">\u003Cspan style=\"color:var(--shiki-foreground)\">curly\u003C/span>\u003Cspan style=\"color:var(--shiki-token-punctuation)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">any\u003C/span>\u003C/code>\u003C/span>curly\u003C/span>\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">}\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">stooges\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">);\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/div>\u003Ch2 id=\"Understanding-dependencies\">\u003Cspan>Comprendre les dépendances\u003C/span>\u003Ca href=\"#Understanding-dependencies\" class=\"permalink\" aria-label=\"permalink\">\u003C/a>\u003C/h2>\u003Cp>Les dépendances d'une déclaration \u003Ccode>$:\u003C/code> sont déterminées au moment de la compilation — il s'agit de\ntoutes les variables référencées (mais pas assignées) dans la déclaration.\u003C/p>\n\u003Cp>En d'autres termes, une déclaration comme celle-ci ne sera \u003Cem>pas\u003C/em> rejouée lorsque \u003Ccode>count\u003C/code> change, car\nle compilateur ne peut pas "voir" la dépendance :\u003C/p>\n\u003Cdiv class=\"code-block\">\u003Cdiv class=\"controls\">\u003Cbutton class=\"copy-to-clipboard raised\" title=\"Copy to clipboard\" aria-label=\"Copy to clipboard\">\u003C/button>\u003C/div>\u003Cpre data-js data-ts data-language=\"js\" class=\"shiki css-variables twoslash lsp\" style=\"background-color:var(--shiki-background);color:var(--shiki-foreground)\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-token-keyword)\">let\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">\u003Cspan class=\"twoslash-hover\">\u003Cspan class=\"twoslash-popup-container\">\u003Ccode class=\"twoslash-popup-code\">\u003Cspan style=\"color:var(--shiki-token-keyword)\">let\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">count\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">number\u003C/span>\u003C/code>\u003C/span>count\u003C/span>\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">0\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-token-keyword)\">let\u003C/span> \u003Cspan style=\"color:var(--shiki-token-function)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-token-function)\">\u003Cspan class=\"twoslash-hover\">\u003Cspan class=\"twoslash-popup-container\">\u003Ccode class=\"twoslash-popup-code\">\u003Cspan style=\"color:var(--shiki-token-keyword)\">let\u003C/span> \u003Cspan style=\"color:var(--shiki-token-function)\">double\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">()\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">=>\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">number\u003C/span>\u003C/code>\u003C/span>double\u003C/span>\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">()\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">=>\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">\u003Cspan class=\"twoslash-hover\">\u003Cspan class=\"twoslash-popup-container\">\u003Ccode class=\"twoslash-popup-code\">\u003Cspan style=\"color:var(--shiki-token-keyword)\">let\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">count\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">number\u003C/span>\u003C/code>\u003C/span>count\u003C/span>\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">*\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">2\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-foreground)\">$\u003C/span>\u003Cspan style=\"color:var(--shiki-token-punctuation)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">doubled\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-token-function)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-token-function)\">\u003Cspan class=\"twoslash-hover\">\u003Cspan class=\"twoslash-popup-container\">\u003Ccode class=\"twoslash-popup-code\">\u003Cspan style=\"color:var(--shiki-token-keyword)\">let\u003C/span> \u003Cspan style=\"color:var(--shiki-token-function)\">double\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">()\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">=>\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">number\u003C/span>\u003C/code>\u003C/span>double\u003C/span>\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">();\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/div>\u003Cp>De même, l'ordre topologique sera cassé si les dépendances sont référencées indirectement : \u003Ccode>z\u003C/code> ne\nsera jamais mis à jour, car \u003Ccode>y\u003C/code> n'est pas considérée comme ayant changé lorsque la mise à jour se\nproduit. Déplacer \u003Ccode>$: z = y\u003C/code> en-dessous de \u003Ccode>$: setY(x)\u003C/code> permet de corriger le problème :\u003C/p>\n\u003Cdiv class=\"code-block\">\u003Cdiv class=\"controls\">\u003Cbutton class=\"copy-to-clipboard raised\" title=\"Copy to clipboard\" aria-label=\"Copy to clipboard\">\u003C/button>\u003C/div>\u003Cpre data-js data-ts data-language=\"svelte\" class=\"shiki css-variables\" style=\"background-color:var(--shiki-background);color:var(--shiki-foreground)\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-foreground)\"><\u003C/span>\u003Cspan style=\"color:var(--shiki-token-string-expression)\">script\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-token-keyword)\">let\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">x\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">0\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-token-keyword)\">let\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">y\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-token-constant)\">0\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-foreground)\">$\u003C/span>\u003Cspan style=\"color:var(--shiki-token-punctuation)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">z\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">y;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-foreground)\">$\u003C/span>\u003Cspan style=\"color:var(--shiki-token-punctuation)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-token-function)\">setY\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">(x);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-token-keyword)\">function\u003C/span> \u003Cspan style=\"color:var(--shiki-token-function)\">setY\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">(value) {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\t\u003Cspan style=\"color:var(--shiki-foreground)\">y\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">value;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-foreground)\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-foreground)\"></\u003C/span>\u003Cspan style=\"color:var(--shiki-token-string-expression)\">script\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/div>\u003Ch2 id=\"Browser-only-code\">\u003Cspan>Code uniquement pour le navigateur\u003C/span>\u003Ca href=\"#Browser-only-code\" class=\"permalink\" aria-label=\"permalink\">\u003C/a>\u003C/h2>\u003Cp>Les déclarations réactives sont jouées lors du rendu côté serveur ainsi que dans le navigateur. Ceci\nsignifie que tout code qui devrait être uniquement exécuté dans le navigateur devrait être placé\ndans un bloc \u003Ccode>if\u003C/code> :\u003C/p>\n\u003Cdiv class=\"code-block\">\u003Cdiv class=\"controls\">\u003Cbutton class=\"copy-to-clipboard raised\" title=\"Copy to clipboard\" aria-label=\"Copy to clipboard\">\u003C/button>\u003C/div>\u003Cpre data-js data-ts data-language=\"js\" class=\"shiki css-variables twoslash lsp\" style=\"background-color:var(--shiki-background);color:var(--shiki-foreground)\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-foreground)\">$\u003C/span>\u003Cspan style=\"color:var(--shiki-token-punctuation)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-token-keyword)\">if\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">(\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">browser\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">) {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\t\u003Cspan style=\"color:var(--shiki-token-constant)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-token-constant)\">\u003Cspan class=\"twoslash-hover\">\u003Cspan class=\"twoslash-popup-container\">\u003Ccode class=\"twoslash-popup-code\">\u003Cspan style=\"color:var(--shiki-token-keyword)\">var\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">document\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">:\u003C/span> \u003Cspan style=\"color:var(--shiki-token-function)\">Document\u003C/span>\u003C/code>\u003Cdiv class=\"twoslash-popup-docs\">\u003Cp>\u003Cstrong>\u003Ccode>window.document\u003C/code>\u003C/strong> returns a reference to the document contained in the window.\u003C/p>\n\u003Cp>\u003Ca href=\"https://developer.mozilla.org/docs/Web/API/Window/document\">MDN Reference\u003C/a>\u003C/p>\n\u003C/div>\u003C/span>document\u003C/span>\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">.\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">\u003Cspan class=\"twoslash-hover\">\u003Cspan class=\"twoslash-popup-container\">\u003Ccode class=\"twoslash-popup-code\">\u003Cspan style=\"color:var(--shiki-token-constant)\">Document\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">.title: string\u003C/span>\u003C/code>\u003Cdiv class=\"twoslash-popup-docs\">\u003Cp>The \u003Cstrong>\u003Ccode>document.title\u003C/code>\u003C/strong> property gets or sets the current title of the document. When present, it defaults to the value of the \u003Ctitle>.\u003C/p>\n\u003Cp>\u003Ca href=\"https://developer.mozilla.org/docs/Web/API/Document/title\">MDN Reference\u003C/a>\u003C/p>\n\u003C/div>\u003C/span>title\u003C/span>\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-token-keyword)\">=\u003C/span> \u003Cspan style=\"color:var(--shiki-foreground)\">\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">title\u003C/span>\u003Cspan style=\"color:var(--shiki-foreground)\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-foreground)\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/div>",sections:[{slug:"Understanding-dependencies",title:"Comprendre les dépendances ",subsections:[]},{slug:"Browser-only-code",title:"Code uniquement pour le navigateur ",subsections:[]}],children:[],prev:{slug:"docs/svelte/legacy-let",title:"Déclarations réactives let/var"},next:{slug:"docs/svelte/legacy-export-let",title:"export let"}},related:void 0},uses:{params:["topic","path"],url:1}}], form: null, error: null }); }); } </script> </div> <script> if (localStorage.getItem('sv:show-legacy') === 'open') { for (const node of document.querySelectorAll('details.legacy')) { node.open = true; } } if (localStorage.getItem('svelte:prefers-ts') === 'false') { for (const node of document.querySelectorAll('.ts-toggle')) { node.checked = false; } } </script> </body> </html>