docs: tweaks

dummdidumm · dummdidumm · commit 36137e0e932e · 2024-09-11T22:07:19.000+02:00
diff --git a/documentation/docs/02-template-syntax/06-transitions-and-animations.md b/documentation/docs/02-template-syntax/06-transitions-and-animations.md
@@ -102,6 +102,7 @@ The `t` argument passed to `css` is a value between `0` and `1` after the `easin
 The function is called repeatedly _before_ the transition begins, with different `t` and `u` arguments.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import { elasticOut } from 'svelte/easing';
 
@@ -345,6 +346,7 @@ The function is called repeatedly _before_ the animation begins, with different
 <!-- TODO: Types -->
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import { cubicOut } from 'svelte/easing';
 
@@ -378,6 +380,7 @@ A custom animation function can also return a `tick` function, which is called _
 > If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	import { cubicOut } from 'svelte/easing';
 
diff --git a/documentation/docs/02-template-syntax/09-special-elements.md b/documentation/docs/02-template-syntax/09-special-elements.md
@@ -14,8 +14,7 @@ It cannot appear at the top level of your markup; it must be inside an if or eac
 
 ```svelte
 <script>
-	/** @type {number} */
-	export let count;
+	let { count } = $props();
 </script>
 
 {#if count > 0}
@@ -56,12 +55,12 @@ If `this` is the name of a [void element](https://developer.mozilla.org/en-US/do
 
 ```svelte
 <script>
-	let tag = 'div';
+	let { handler } = $props();
 
-	export let handler;
+	let tag = $state('div');
 </script>
 
-<svelte:element this={tag} on:click={handler}>Foo</svelte:element>
+<svelte:element this={tag} onclick={handler}>Foo</svelte:element>
 ```
 
 Svelte tries its best to infer the correct namespace from the element's surroundings, but it's not always possible. You can make it explicit with an `xmlns` attribute:
@@ -73,7 +72,7 @@ Svelte tries its best to infer the correct namespace from the element's surround
 ## `<svelte:window>`
 
 ```svelte
-<svelte:window on:event={handler} />
+<svelte:window onevent={handler} />
 ```
 
 ```svelte
@@ -86,13 +85,12 @@ Unlike `<svelte:self>`, this element may only appear at the top level of your co
 
 ```svelte
 <script>
-	/** @param {KeyboardEvent} event */
 	function handleKeydown(event) {
 		alert(`pressed the ${event.key} key`);
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 ```
 
 You can also bind to the following properties:
@@ -117,7 +115,7 @@ All except `scrollX` and `scrollY` are readonly.
 ## `<svelte:document>`
 
 ```svelte
-<svelte:document on:event={handler} />
+<svelte:document onevent={handler} />
 ```
 
 ```svelte
@@ -129,7 +127,7 @@ Similarly to `<svelte:window>`, this element allows you to add listeners to even
 As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
 
 ```svelte
-<svelte:document on:visibilitychange={handleVisibilityChange} use:someAction />
+<svelte:document onvisibilitychange={handleVisibilityChange} use:someAction />
 ```
 
 You can also bind to the following properties:
@@ -144,15 +142,15 @@ All are readonly.
 ## `<svelte:body>`
 
 ```svelte
-<svelte:body on:event={handler} />
+<svelte:body onevent={handler} />
 ```
 
 Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs/element-directives#use-action) on the `<body>` element.
 
 As with `<svelte:window>` and `<svelte:document>`, this element may only appear the top level of your component and must never be inside a block or element.
 
 ```svelte
-<svelte:body on:mouseenter={handleMouseenter} on:mouseleave={handleMouseleave} use:someAction />
+<svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} use:someAction />
 ```
 
 ## `<svelte:head>`
diff --git a/documentation/docs/05-misc/03-typescript.md b/documentation/docs/05-misc/03-typescript.md
@@ -118,7 +118,7 @@ Components can declare a generic relationship between their properties. One exam
 		select: Item;
 	}
 
-	let { items, select } = $props();
+	let { items, select }: Props = $props();
 </script>
 
 {#each items as item}
@@ -210,8 +210,8 @@ declare namespace svelteHTML {
 	}
 	// enhance attributes
 	interface HTMLAttributes<T> {
-		// If you want to use on:beforeinstallprompt
-		'on:beforeinstallprompt'?: (event: any) => any;
+		// If you want to use the beforeinstallprompt event
+		'onbeforeinstallprompt'?: (event: any) => any;
 		// If you want to use myCustomAttribute={..} (note: all lowercase)
 		mycustomattribute?: any; // You can replace any with something more specific if you like
 	}

Original file line number	Diff line number	Diff line change
`@@ -118,7 +118,7 @@ Components can declare a generic relationship between their properties. One exam`
`118`	`118`	`select: Item;`
`119`	`119`	`}`
`120`	`120`
`121`		`- let { items, select } = $props();`
	`121`	`+ let { items, select }: Props = $props();`
`122`	`122`	`</script>`
`123`	`123`
`124`	`124`	`{#each items as item}`
`@@ -210,8 +210,8 @@ declare namespace svelteHTML {`
`210`	`210`	`}`
`211`	`211`	`// enhance attributes`
`212`	`212`	`interface HTMLAttributes<T> {`
`213`		`- // If you want to use on:beforeinstallprompt`
`214`		`- 'on:beforeinstallprompt'?: (event: any) => any;`
	`213`	`+ // If you want to use the beforeinstallprompt event`
	`214`	`+ 'onbeforeinstallprompt'?: (event: any) => any;`
`215`	`215`	`// If you want to use myCustomAttribute={..} (note: all lowercase)`
`216`	`216`	`mycustomattribute?: any; // You can replace any with something more specific if you like`
`217`	`217`	`}`