## Warnings client [!VO]Client warnings

<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->

### assignment_value_stale

```
Assignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour.
```

Étant donné le cas suivant...

```svelte
<script>
	let object = $state({ array: null });

	function add() {
		(object.array ??= []).push(object.array.length);
	}
</script>

<button onclick={add}>ajouter</button>
<p>éléments : {JSON.stringify(object.items)}</p>
```

... le tableau dans lequel on ajoute des éléments lorsque le bouton est cliqué pour la première fois
est le `[]` à droite de l'assignation, mais la valeur résultante de `object.array` est un proxy
d'état vide. En conséquence, la valeur ajoutée est ignorée.

Vous pouvez corriger cela en séparant le code en deux morceaux :

```js
let object = { array: [0] };
// ---cut---
function add() {
	object.array ??= [];
	object.array.push(object.array.length);
}
```

### binding_property_non_reactive

```
`%binding%` is binding to a non-reactive property
```

```
`%binding%` (%location%) is binding to a non-reactive property
```

### console_log_state

```
Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
```

Lorsque vous loggez un
[proxy](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Proxy), les
outils développeur du navigateur vont logger le proxy lui-même plutôt que la valeur qu'il
représente. Dans le cas de Svelte, la "cible" d'un proxy de `$state` peut ne pas ressembler à sa
valeur courante, ce qui peut prêter à confusion.

La manière la plus simple de logger une valeur lorsqu'elle évolue est d'utiliser la rune
[`$inspect`](/docs/svelte/$inspect). Autrement, si vous souhaitez logger des
choses une seule fois (par exemple au sein d'un gestionnaire d'évènement), vous pouvez utiliser
[`$state.snapshot`](/docs/svelte/$state#$state.snapshot) pour prendre un
instantané de la valeur courante.

### event_handler_invalid

```
%handler% should be a function. Did you mean to %suggestion%?
```

### hydration_attribute_changed

```
The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
```

Certains attributs comme `src` sur un élément `<img>` ne seront pas réparés lors de l'hydration,
c-à-d que la valeur du serveur sera conservée. Ceci s'explique par le fait que mettre à jour ces
attributs peut déclencher le re-téléchargement de l'image (ou, dans le cas d'une `<iframe>`, le
rechargement de l'iframe), même s'ils pointent vers la même ressource.

Pour corriger ça, vous pouvez soit ignorer le warning avec un commentaire
[`svelte-ignore`](basic-markup#Comments), soit vous assurez que la valeur soit la même entre le
serveur et le client. Si vous avez vraiment besoin que la valeur soit changée pendant l'hydration,
vous pouvez forcer sa mise à jour comme ceci :

```svelte
<script>
	let { src } = $props();

	if (typeof window !== 'undefined') {
		// enregistrer la valeur...
		const initial = src;

		// mettre la variable à undefined...
		src = undefined;

		$effect(() => {
			// .. et la re définir après le montage
			src = initial;
		});
	}
</script>

<img {src} />
```

### hydration_html_changed

```
The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value
```

```
The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value
```

Si la valeur de `{@html ...}` change entre le serveur et le client, elle ne sera pas réparée lors de
l'hydratation, c-à-d que la valeur du serveur sera conservée. Ceci s'explique par le fait que
détecter des changements lors de l'hydratation coûte cher et est souvent inutile.

Pour corriger ça, vous pouvez soit ignorer le warning avec un commentaire
[`svelte-ignore`](basic-markup#Comments), soit vous assurez que la valeur soit la même entre le
serveur et le client. Si vous avez vraiment besoin que la valeur soit changée pendant l'hydration,
vous pouvez forcer sa mise à jour comme ceci :

```svelte
<script>
	let { markup } = $props();

	if (typeof window !== 'undefined') {
		// enregistrer la valeur...
		const initial = markup;

		// mettre la variable à undefined...
		markup = undefined;

		$effect(() => {
			// .. et la re définir après le montage
			markup = initial;
		});
	}
</script>

{@html markup}
```

### hydration_mismatch

```
Hydration failed because the initial UI does not match what was rendered on the server
```

```
Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
```

Ce warning est levé lorsque Svelte rencontre une erreur lors de l'hydratation du HTML provenant du
serveur. Pendant l'hydratation, Svelte parcourt le DOM avec une certaine structure comme objectif.
Si cette structure est différente de l'objectif (par exemple parce que le HTML a été réparé par le
DOM à cause de HTML invalide), alors Svelte risque de rencontrer des problèmes, ce qui justifie ce
warning.

Pendant le développement, cette erreur est souvent précédée d'un `console.error` détaillant le HTML
problématique, et qui nécessite d'être réparé.

### invalid_raw_snippet_render

```
The `render` function passed to `createRawSnippet` should return HTML for a single element
```

### legacy_recursive_reactive_block

```
Detected a migrated `$:` reactive block in `%filename%` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`.
```

### lifecycle_double_unmount

```
Tried to unmount a component that was not mounted
```

### ownership_invalid_binding

```
%parent% passed property `%prop%` to %child% with `bind:`, but its parent component %owner% did not declare `%prop%` as a binding. Consider creating a binding between %owner% and %parent% (e.g. `bind:%prop%={...}` instead of `%prop%={...}`)
```

Imaginez trois composants `GrandParent`, `Parent` et `Child`. Si vous écrivez `<GrandParent
bind:value>`, passez la variable dans `GrandParent` via `<Parent {value} />` (notez l'absence de
`bind:`), puis écrivez `<Child bind:value>` dans `Parent`, ce warning est levé.

Pour corriger ça, utiliser `bind:` sur la valeur plutôt que simplement passer la propriété (c-à-d
dans cet exemple, écrivez `<Parent bind:value />`).

### ownership_invalid_mutation

```
Mutating unbound props (`%name%`, at %location%) is strongly discouraged. Consider using `bind:%prop%={...}` in %parent% (or using a callback) instead
```

Considérez le code suivant :

```svelte
<!--- file: App.svelte --->
<script>
	import Child from './Child.svelte';
	let person = $state({ name: 'Florida', surname: 'Man' });
</script>

<Child {person} />
```

```svelte
<!--- file: Child.svelte --->
<script>
	let { person } = $props();
</script>

<input bind:value={person.name}>
<input bind:value={person.surname}>
```

`Child` mute la valeur de `person`, qui appartient à `App`, sans être explicitement "autorisé" à le
faire. Ceci est fortement déconseillé car cela peut engendrer du code difficile à comprendre à
grande échelle ("qui a muté cette valeur ?"), d'où le warning.

Pour corriger ça, vous pouvez soit créer une prop de callback pour communiquer les changements, ou
alors définir `person` comme [`$bindable`]($bindable).

### state_proxy_equality_mismatch

```
Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
```

`$state(...)` crée un
[proxy](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Proxy) de la
valeur fournie. Le proxy est la valeur ont des identités différentes, ce qui implique que les
vérifications d'égalité donneront toujours `false` :

```svelte
<script>
	let value = { foo: 'bar' };
	let proxy = $state(value);

	value === proxy; // toujours false
</script>
```

Pour contourner ce problème, assurez-vous de toujours comparer des valeurs qui ont soit toutes les
deux été créées avec `$state(...)`, soit toutes les deux pas. Notez que `$state.raw(...)` ne va
_pas_ créer de proxy d'état.

### transition_slide_display

```
The `slide` transition does not work correctly for elements with `display: %value%`
```

La transition [slide](/docs/svelte/svelte-transition#slide) fonctionne en animant la hauteur
`height` de l'élément, ce qui requiert un style `display` de type `block`, `flex` ou `grid`. Cela ne
fonctionne pas pour les élément avec :

- `display: inline` (le défaut pour les éléments comme `<span>`), et toutes ses variantes comme
`inline-block`, `inline-flex` et `inline-grid`
- `display: table` et `table-[name]`, qui sont les défauts des éléments comme `<table>` et `<tr>`
- `display: contents`

## Warnings client et serveur [!VO]Shared warnings

<!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->

### dynamic_void_element_content

```
`<svelte:element this="%tag%">` is a void element — it cannot have content
```

Les éléments tels que `<input>` ne peuvent pas avoir de contenu, tout enfant passé à ces éléments
sera ignoré.

### state_snapshot_uncloneable

```
Value cannot be cloned with `$state.snapshot` — the original value was returned
```

```
The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals:

%properties%
```

`$state.snapshot` essaye de clone la valeur fournie afin de renvoyer une référence qui ne changera
plus. Certains objets peuvent ne pas être clonables, auquel cas la valeur originale est renvoyée.
Dans l'exemple suivant, `property` est cloné, mais `window` ne l'est pas, car les éléments du DOM ne
peuvent pas être clonés :

```js
const object = $state({ property: 'ceci est clonable', window })
const snapshot = $state.snapshot(object);
```