Sync kit docs (#828)

sync kit docs

Co-authored-by: Rich-Harris <[email protected]>

Author: github-actions[bot]

apps/svelte.dev/content/docs/kit/20-core-concepts/10-routing.md

@@ -330,7 +330,7 @@ By exporting `POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`/`HEAD` handlers, `+server.j
 <input type="number" bind:value={b}> =
 {total}
 
-<button on:click={add}>Calculate</button>
+<button onclick={add}>Calculate</button>
 ```
 
 ```js

apps/svelte.dev/content/docs/kit/20-core-concepts/20-load.md

@@ -661,7 +661,7 @@ export async function load({ fetch, depends }) {
 </script>
 
 <p>random number: {data.number}</p>
-<button on:click={rerunLoadFunction}>Update random number</button>
+<button onclick={rerunLoadFunction}>Update random number</button>
 ```
 
 ### When do load functions rerun?

apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md

@@ -451,7 +451,7 @@ We can also implement progressive enhancement ourselves, without `use:enhance`,
 	}
 </script>
 
-<form method="POST" on:submit|preventDefault={handleSubmit}>
+<form method="POST" onsubmit|preventDefault={handleSubmit}>
 	<!-- content -->
 </form>
 ```
@@ -484,7 +484,7 @@ Form actions are the preferred way to send data to the server, since they can be
 	}
 </script>
 
-<button on:click={rerun}>Rerun CI</button>
+<button onclick={rerun}>Rerun CI</button>
 ```
 
 ```js

apps/svelte.dev/content/docs/kit/25-build-and-deploy/60-adapter-cloudflare.md

@@ -84,7 +84,7 @@ export async function POST({ request, platform }) {
 
 To include type declarations for your bindings, reference them in your `src/app.d.ts`:
 
-```dts
+```ts
 /// file: src/app.d.ts
 declare global {
 	namespace App {

apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md

@@ -105,7 +105,7 @@ export async function POST({ request, platform }) {
 
 To include type declarations for your bindings, reference them in your `src/app.d.ts`:
 
-```dts
+```ts
 /// file: src/app.d.ts
 declare global {
 	namespace App {

apps/svelte.dev/content/docs/kit/25-build-and-deploy/90-adapter-vercel.md

@@ -44,13 +44,13 @@ export const config = {
 /// file: admin/+layout.js
 /** @type {import('@sveltejs/adapter-vercel').Config} */
 export const config = {
-	runtime: 'nodejs18.x'
+	runtime: 'nodejs22.x'
 };
 ```
 
 The following options apply to all functions:
 
-- `runtime`: `'edge'`, `'nodejs18.x'` or `'nodejs20.x'`. By default, the adapter will select the `'nodejs<version>.x'` corresponding to the Node version your project is configured to use on the Vercel dashboard
+- `runtime`: `'edge'`, `'nodejs18.x'`, `'nodejs20.x'` or `'nodejs22.x'`. By default, the adapter will select the `'nodejs<version>.x'` corresponding to the Node version your project is configured to use on the Vercel dashboard
 - `regions`: an array of [edge network regions](https://vercel.com/docs/concepts/edge-network/regions) (defaulting to `["iad1"]` for serverless functions) or `'all'` if `runtime` is `edge` (its default). Note that multiple regions for serverless functions are only supported on Enterprise plans
 - `split`: if `true`, causes a route to be deployed as an individual function. If `split` is set to `true` at the adapter level, all routes will be deployed as individual functions
 

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

@@ -126,7 +126,7 @@ The exception is when the error occurs inside the root `+layout.js` or `+layout.
 
 If you're using TypeScript and need to customize the shape of errors, you can do so by declaring an `App.Error` interface in your app (by convention, in `src/app.d.ts`, though it can live anywhere that TypeScript can 'see'):
 
-```dts
+```ts
 /// file: src/app.d.ts
 declare global {
 	namespace App {

apps/svelte.dev/content/docs/kit/30-advanced/67-shallow-routing.md

@@ -57,7 +57,7 @@ For this to work, you need to load the data that the `+page.svelte` expects. A c
 {#each data.thumbnails as thumbnail}
 	<a
 		href="/photos/{thumbnail.id}"
-		on:click={async (e) => {
+		onclick={async (e) => {
 			if (innerWidth < 640        // bail if the screen is too small
 				|| e.shiftKey             // or the link is opened in a new window
 				|| e.metaKey || e.ctrlKey // or a new tab (mac: metaKey, win/linux: ctrlKey)
@@ -86,7 +86,7 @@ For this to work, you need to load the data that the `+page.svelte` expects. A c
 {/each}
 
 {#if $page.state.selected}
-	<Modal on:close={() => history.back()}>
+	<Modal onclose={() => history.back()}>
 		<!-- pass page data to the +page.svelte component,
 		     just like SvelteKit would on navigation -->
 		<PhotoPage data={$page.state.selected} />

apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md

@@ -27,10 +27,6 @@ In order to support SSR, a JS backend — such as Node.js or Deno-based server,
 
 It is also possible to write custom adapters or leverage community adapters to deploy SvelteKit to more platforms such as specialized server environments, browser extensions, or native applications. See [integrations](./integrations) for more examples and integrations.
 
-## How do I use HMR with SvelteKit?
-
-SvelteKit has HMR enabled by default powered by [svelte-hmr](https://github.com/sveltejs/svelte-hmr). If you saw [Rich's presentation at the 2020 Svelte Summit](/blog/whats-the-deal-with-sveltekit), you may have seen a more powerful-looking version of HMR presented. This demo had `svelte-hmr`'s `preserveLocalState` flag on. This flag is now off by default because it may lead to unexpected behaviour and edge cases. But don't worry, you are still getting HMR with SvelteKit! If you'd like to preserve local state you can use the `@hmr:keep` or `@hmr:keep-all` directives as documented on the [svelte-hmr](https://github.com/sveltejs/svelte-hmr) page.
-
 ## How do I include details from package.json in my application?
 
 You cannot directly require JSON files, since SvelteKit expects [`svelte.config.js`](./configuration) to be an ES module. If you'd like to include your application's version number or other information from `package.json` in your application, you can load JSON like so:

apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md

@@ -4,7 +4,7 @@ title: Integrations
 
 ## `vitePreprocess`
 
-Including [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) in your project will allow you to use the various flavors of JS and CSS that Vite supports: TypeScript, PostCSS, SCSS, Less, Stylus, and SugarSS. If you set your project up with TypeScript it will be included by default:
+Including [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) in your project will allow you to use the various flavors of CSS that Vite supports: PostCSS, SCSS, Less, Stylus, and SugarSS. If you set your project up with TypeScript it will be included by default:
 
 ```js
 // svelte.config.js
@@ -15,6 +15,8 @@ export default {
 };
 ```
 
+You will also need to use a preprocessor if you're using TypeScript with Svelte 4. TypeScript is supported natively in Svelte 5 if you're using only the type syntax. To use more complex TypeScript syntax in Svelte 5, you will need still need a preprocessor and can use `vitePreprocess({ script: true })`.
+
 ## Adders
 
 Run `npx sv add` to setup many different complex integrations with a single command including: