docs: rename /docs/functions to /docs/imports, include svelte/reactivity, tweak various things (#11187)

sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md

@@ -93,25 +93,6 @@ This can improve performance with large arrays and objects that you weren't plan
 
 > Objects and arrays passed to `$state.frozen` will be shallowly frozen using `Object.freeze()`. If you don't want this, pass in a clone of the object or array instead.
 
-### Reactive Map, Set and Date
-
-Svelte provides reactive `Map`, `Set` and `Date` classes. These can be imported from `svelte/reactivity` and used just like their native counterparts.
-
-```svelte
-<script>
-	import { Map } from 'svelte/reactivity';
-
-	const map = new Map();
-	map.set('message', 'hello');
-
-	function update_message() {
-		map.set('message', 'goodbye');
-	}
-</script>
-
-<p>{map.get('message')}</p>
-```
-
 ## `$state.snapshot`
 
 To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:

sites/svelte-5-preview/src/routes/docs/content/01-api/05-functions.md

@@ -1,68 +0,0 @@
----
-title: Functions
----
-
-As well as runes, Svelte 5 will introduce a couple of new functions, in addition to existing functions like `getContext`, `setContext` and `tick`. These are introduced as functions rather than runes because they are used directly and the compiler does not need to touch them to make them function as it does with runes. However, these functions may still use Svelte internals.
-
-## `untrack`
-
-To prevent something from being treated as an `$effect`/`$derived` dependency, use `untrack`:
-
-```svelte
-<script>
-	import { untrack } from 'svelte';
-
-	let { a, b } = $props();
-
-	$effect(() => {
-		// this will run when `a` changes,
-		// but not when `b` changes
-		console.log(a);
-		console.log(untrack(() => b));
-	});
-</script>
-```
-
-## `mount`
-
-Instantiates a component and mounts it to the given target:
-
-```js
-// @errors: 2322
-import { mount } from 'svelte';
-import App from './App.svelte';
-
-const app = mount(App, {
-	target: document.querySelector('#app'),
-	props: { some: 'property' }
-});
-```
-
-## `hydrate`
-
-Like `mount`, but will pick up any HTML rendered by Svelte's SSR output (from the `render` function) inside the target and make it interactive:
-
-```js
-// @errors: 2322
-import { hydrate } from 'svelte';
-import App from './App.svelte';
-
-const app = hydrate(App, {
-	target: document.querySelector('#app'),
-	props: { some: 'property' }
-});
-```
-
-## `render`
-
-Only available on the server and when compiling with the `server` option. Takes a component and returns an object with `html` and `head` properties on it, which you can use to populate the HTML when server-rendering your app:
-
-```js
-// @errors: 2724 2305 2307
-import { render } from 'svelte/server';
-import App from './App.svelte';
-
-const result = render(App, {
-	props: { some: 'property' }
-});
-```

sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md

@@ -0,0 +1,109 @@
+---
+title: Imports
+---
+
+As well as runes, Svelte 5 introduces a handful of new things you can import, alongside existing ones like `getContext`, `setContext` and `tick`.
+
+## `svelte`
+
+### `mount`
+
+Instantiates a component and mounts it to the given target:
+
+```js
+// @errors: 2322
+import { mount } from 'svelte';
+import App from './App.svelte';
+
+const app = mount(App, {
+	target: document.querySelector('#app'),
+	props: { some: 'property' }
+});
+```
+
+### `hydrate`
+
+Like `mount`, but will reuse up any HTML rendered by Svelte's SSR output (from the [`render`](#svelte-server-render) function) inside the target and make it interactive:
+
+```js
+// @errors: 2322
+import { hydrate } from 'svelte';
+import App from './App.svelte';
+
+const app = hydrate(App, {
+	target: document.querySelector('#app'),
+	props: { some: 'property' }
+});
+```
+
+### `unmount`
+
+Unmounts a component created with [`mount`](#svelte-mount) or [`hydrate`](#svelte-hydrate):
+
+```js
+// @errors: 1109
+import { mount, unmount } from 'svelte';
+import App from './App.svelte';
+
+const app = mount(App, {...});
+
+// later
+unmount(app);
+```
+
+### `untrack`
+
+To prevent something from being treated as an `$effect`/`$derived` dependency, use `untrack`:
+
+```svelte
+<script>
+	import { untrack } from 'svelte';
+
+	let { a, b } = $props();
+
+	$effect(() => {
+		// this will run when `a` changes,
+		// but not when `b` changes
+		console.log(a);
+		console.log(untrack(() => b));
+	});
+</script>
+```
+
+## `svelte/reactivity`
+
+Svelte provides reactive `Map`, `Set`, `Date` and `URL` classes. These can be imported from `svelte/reactivity` and used just like their native counterparts. [Demo:](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE32QzWrDMBCEX2Wri1uo7bvrBHrvqdBTUogqryuBfhZp5SQYv3slSsmpOc7uN8zsrmI2FpMYDqvw0qEYxCuReBZ8pSrSgpax6BRyVHUyJhUN8f7oj2wchciwwsf7G2wwx-Cg-bX0EaVisxi-Ni-FLbQKPjHkaGEHHs_V9NhoZkpD3-NFOrLYqeB6kqybp-Ia-1uYHx_aFpSW_hsTcADWmLDrOmjbsh-Np8zwZfw0LNJm3K0lqaMYOKhgt_8RHRLX0-8gtdAfUiAdb4XOxlrINElGOOmI8wmkn2AxCmHBmOTdetWw7ct7XZjMbHASA8eM2-f2A-JarmyZAQAA)
+
+```svelte
+<script>
+	import { URL } from 'svelte/reactivity';
+
+	const url = new URL('https://example.com/path');
+</script>
+
+<!-- changes to these... -->
+<input bind:value={url.protocol} />
+<input bind:value={url.hostname} />
+<input bind:value={url.pathname} />
+
+<hr />
+
+<!-- will update `href` and vice versa -->
+<input bind:value={url.href} />
+```
+
+## `svelte/server`
+
+### `render`
+
+Only available on the server and when compiling with the `server` option. Takes a component and returns an object with `html` and `head` properties on it, which you can use to populate the HTML when server-rendering your app:
+
+```js
+// @errors: 2724 2305 2307
+import { render } from 'svelte/server';
+import App from './App.svelte';
+
+const result = render(App, {
+	props: { some: 'property' }
+});
+```

sites/svelte-5-preview/src/routes/docs/functions/+page.server.js

@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export function load() {
+	redirect(308, '/docs/imports');
+}