Merge branch 'main' into french

apps/svelte.dev/content/docs/kit/30-advanced/25-errors.md

@@ -58,8 +58,7 @@ This throws an exception that SvelteKit catches, causing it to set the response
 You can add extra properties to the error object if needed...
 
 ```js
-import { error } from '@sveltejs/kit';
-
+// @filename: ambient.d.ts
 declare global {
 	namespace App {
 		interface Error {
@@ -68,7 +67,10 @@ declare global {
 		}
 	}
 }
+export {}
 
+// @filename: index.js
+import { error } from '@sveltejs/kit';
 // ---cut---
 error(404, {
 	message: 'Not found',

apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md

@@ -57,12 +57,7 @@ Si vous ajoutez un nouvel objet à ce tableau via `.push`, celui-ci sera égalem
 Proxy :
 
 ```js
-// @filename: ambient.d.ts
-declare global {
-	const todos: Array<{ done: boolean, text: string }>
-}
-
-// @filename: index.js
+let todos = [{ done: false, text: 'add more todos' }];
 // ---cut---
 todos.push({
 	done: false,

apps/svelte.dev/content/docs/svelte/02-runes/03-$derived.md

@@ -59,3 +59,25 @@ sa valeur est lue.
 
 Pour exempter un morceau d'état d'être considéré comme une dépendance, utilisez
 [`untrack`](svelte#untrack).
+
+## Propagation de la mise à jour [!VO]Update propagation
+
+Svelte utilise un concept appelée _réactivité push-pull_ — lorsque l'état est mis à jour, tout ce
+qui dépend de l'état (directement ou non) est immédiatement notifié du changement (le 'push'), mais
+les valeurs dérivées ne sont pas ré-évaluées tant qu'elles ne sont lues (le 'pull').
+
+Si la nouvelle valeur d'un état dérivé est identique en termes de référence que la valeur
+précédente, les mises à jour en aval seront ignorées. Autrement dit, Svelte ne mettra à jour le
+texte au sein du bouton que lorsque `large` change, pas lorsque `count` change, même si `large`
+dépend de `count` :
+
+```svelte
+<script>
+	let count = $state(0);
+	let large = $derived(count > 10);
+</script>
+
+<button onclick={() => count++}>
+	{large}
+</button>
+```

apps/svelte.dev/content/docs/svelte/03-template-syntax/12-use.md

@@ -58,17 +58,16 @@ gestionnaire d'évènement personnalisé créé par l'action :
 ```svelte
 <!--- file: App.svelte --->
 <script>
-	import { on } from 'svelte/events';
-
 	/**
 	 * @type {import('svelte/action').Action<
 	 * 	HTMLDivElement,
-	 * 	null,
+	 * 	undefined,
 	 * 	{
 	 * 		onswiperight: (e: CustomEvent) => void;
 	 * 		onswipeleft: (e: CustomEvent) => void;
 	 * 		// ...
-	 * }>}
+	 * 	}
+	 * >}
 	 */
 	function gestures(node) {
 		$effect(() => {

apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md

@@ -52,7 +52,7 @@ Vous pouvez maintenant écrire vos tests unitaires dans des fichiers `.js/.ts` :
 /// file: multiplier.svelte.test.js
 import { flushSync } from 'svelte';
 import { expect, test } from 'vitest';
-import { multiplier } from './multiplier.js';
+import { multiplier } from './multiplier.svelte.js';
 
 test('Multiplier', () => {
 	let double = multiplier(0, 2);
@@ -65,12 +65,31 @@ test('Multiplier', () => {
 });
 ```
 
+```js
+/// file: multiplier.svelte.js
+/**
+ * @param {number} initial
+ * @param {number} k
+ */
+export function multiplier(initial, k) {
+	let count = $state(initial);
+
+	return {
+		get value() {
+			return count * k;
+		},
+		/** @param {number} c */
+		set: (c) => {
+			count = c;
+		}
+	};
+}
+```
+
 ### Utiliser les runes dans vos fichiers de test [!VO]Using runes inside your test files
 
-Il est possible d'utiliser les runes dans vos fichiers de test. Assurez-vous d'abord que votre
-bundler sache diriger le fichier à travers le compilateur Svelte avant que le test soit lancé, et ce
-en ajoutant `.svelte` au nom du fichier (par ex. `multiplier.svelte.test.js`). Vous pourrez ensuite
-utiliser les runes dans vos tests.
+Puisque Vitest traite vos fichiers de test de la même façon que vos fichiers source, vous pouvez
+utiliser des runes au sein de vos tests tant que leur nom de fichier inclut `.svelte` :
 
 ```js
 /// file: multiplier.svelte.test.js
@@ -90,6 +109,21 @@ test('Multiplier', () => {
 });
 ```
 
+```js
+/// file: multiplier.svelte.js
+/**
+ * @param {() => number} getCount
+ * @param {number} k
+ */
+export function multiplier(getCount, k) {
+	return {
+		get value() {
+			return getCount() * k;
+		}
+	};
+}
+```
+
 Si le code testé utilise des effets, vous aurez besoin de placer le test dans un `$effect.root` :
 
 ```js
@@ -120,6 +154,27 @@ test('Effet', () => {
 });
 ```
 
+```js
+/// file: logger.svelte.js
+/**
+ * @param {() => any} getValue
+ */
+export function logger(getValue) {
+	/** @type {any[]} */
+	let log = $state([]);
+
+	$effect(() => {
+		log.push(getValue());
+	});
+
+	return {
+		get value() {
+			return log;
+		}
+	};
+}
+```
+
 ### Tests de composants [!VO]Component testing
 
 Il est possible de tester vos composants en isolation en utilisant Vitest.

apps/svelte.dev/content/docs/svelte/07-misc/04-custom-elements.md

@@ -185,7 +185,11 @@ dans un bloc `{#each ...}` ne va pas conduire à ce que le contenu slotté soit
 moyen de passer des données au composant parent remplissant le slot
 - Des polyfills sont nécessaires pour assurer le support de navigateurs plus anciens
 - Vous pouvez utiliser la fonctionnalité Svelte de contexte entre des composants Svelte standards au
-	sein d'un élément personnalisé, mais vous ne pouvez pas vous servir d'un même contexte pour
+sein d'un élément personnalisé, mais vous ne pouvez pas vous servir d'un même contexte pour
 différents éléments personnalisés. Autrement dit, vous ne pouvez pas utiliser `setContext` sur un
 élément personnalisé parent et lire ce contexte avec `getContext` dans un élément personnalisé
 enfant
+- Ne déclarez pas de propriétés ou d'attributs commençant pas `on`, puisque leur usage sera
+interprété comme un gestionnaire d'évènement. Autrement dit, Svelte traite `<custom-element
+oneworld={true}></custom-element>` comme `customElement.addEventListener('eworld', true)` (et non
+comme `customElement.oneworld = true`)

apps/svelte.dev/content/docs/svelte/98-reference/.generated/compile-errors.md

@@ -1012,6 +1012,12 @@ Unexpected end of input
 '%word%' is a reserved word in JavaScript and cannot be used here
 ```
 
+### unterminated_string_constant
+
+```
+Unterminated string constant
+```
+
 ### void_element_invalid_content
 
 ```

apps/svelte.dev/content/docs/svelte/98-reference/30-compiler-errors.md

@@ -1030,6 +1030,12 @@ Unexpected end of input
 '%word%' is a reserved word in JavaScript and cannot be used here
 ```
 
+### unterminated_string_constant
+
+```
+Unterminated string constant
+```
+
 ### void_element_invalid_content
 
 ```

packages/site-kit/src/lib/markdown/renderer.ts

@@ -506,6 +506,31 @@ async function convert_to_ts(js_code: string, indent = '', offset = '') {
 					if (code.original[end - 1] === ';') end -= 1;
 					code.appendLeft(end, ` satisfies ${satisfies}`);
 				}
+			} else if (
+				(ts.isPropertyAssignment(node) && ts.isArrowFunction(node.initializer)) ||
+				ts.isMethodDeclaration(node)
+			) {
+				if (type) {
+					throw new Error('@type on property methods does nothing');
+				}
+
+				const parameters = ts.isMethodDeclaration(node)
+					? node.parameters
+					: (node.initializer as ts.ArrowFunction).parameters;
+				for (let i = 0; i < parameters.length; i += 1) {
+					if (params[i] !== undefined) {
+						code.appendLeft(parameters[i].getEnd(), `: ${params[i]}`);
+					}
+				}
+
+				if (returns) {
+					const body = ts.isMethodDeclaration(node)
+						? node.body
+						: (node.initializer as ts.ArrowFunction).body;
+					let start = body!.getStart();
+					while (code.original[start - 1] !== ')') start -= 1;
+					code.appendLeft(start, `: ${returns}`);
+				}
 			} else {
 				throw new Error('Unhandled @type JsDoc->TS conversion: ' + js_code);
 			}
@@ -707,16 +732,20 @@ async function syntax_highlight({
 
 		try {
 			html = await codeToHtml(prelude + redacted, {
-				lang: 'ts',
+				lang: language,
 				theme,
 				transformers: check
 					? [
 							transformerTwoslash({
 								twoslashOptions: {
 									compilerOptions: {
+										allowJs: true,
+										checkJs: true,
 										types: ['svelte', '@sveltejs/kit']
 									}
-								}
+								},
+								// by default, twoslash does not run on .js files, change that through this option
+								filter: () => true
 							})
 						]
 					: []