From 1a341a25f0d2dfd7961a677dce873090b057eeec Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 16 Apr 2024 07:02:39 -0400
Subject: [PATCH] docs: rename /docs/functions to /docs/imports, include
 svelte/reactivity, tweak various things (#11187)

---
 .../routes/docs/content/01-api/02-runes.md    |  19 ---
 .../docs/content/01-api/05-functions.md       |  68 -----------
 .../routes/docs/content/01-api/05-imports.md  | 109 ++++++++++++++++++
 .../src/routes/docs/functions/+page.server.js |   5 +
 4 files changed, 114 insertions(+), 87 deletions(-)
 delete mode 100644 sites/svelte-5-preview/src/routes/docs/content/01-api/05-functions.md
 create mode 100644 sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
 create mode 100644 sites/svelte-5-preview/src/routes/docs/functions/+page.server.js

diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 64dc5d02e9..e129662060 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/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`:
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-functions.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-functions.md
deleted file mode 100644
index 6e39ce4848..0000000000
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-functions.md
+++ /dev/null
@@ -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' }
-});
-```
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
new file mode 100644
index 0000000000..c021915ea9
--- /dev/null
+++ b/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' }
+});
+```
diff --git a/sites/svelte-5-preview/src/routes/docs/functions/+page.server.js b/sites/svelte-5-preview/src/routes/docs/functions/+page.server.js
new file mode 100644
index 0000000000..9af8d5a648
--- /dev/null
+++ b/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');
+}