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 - - -

{map.get('message')}

-``` - ## `$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 - -``` - -## `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 + +``` + +## `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 + + + + + + + +
+ + + +``` + +## `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'); +}