mirror of https://github.com/sveltejs/svelte
Dominic Gannaway
2 years ago
commit
47e35cf745
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: return ast from `compile` (like Svelte 4 does)
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: ensure bind:this unmount behavior for members is conditional
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let { item = $bindable() } = $props();
|
||||
</script>
|
||||
|
||||
<div bind:this={item.dom}>
|
||||
{item.text}
|
||||
</div>
|
||||
@ -0,0 +1,25 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, component }) {
|
||||
const [b1, b2] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => {
|
||||
b1.click();
|
||||
b1.click();
|
||||
b1.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>add item</button><button>clear</button><div>Item 1</div><div>Item 2</div><div>Item 3</div>`
|
||||
);
|
||||
|
||||
flushSync(() => {
|
||||
b2.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<button>add item</button><button>clear</button>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,23 @@
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
let items = $state([]);
|
||||
|
||||
function add_item() {
|
||||
items.push({
|
||||
id: items.length,
|
||||
text: 'Item ' + (items.length + 1),
|
||||
dom: null,
|
||||
})
|
||||
}
|
||||
|
||||
function clear() {
|
||||
items = [];
|
||||
}
|
||||
</script>
|
||||
|
||||
<button on:click={add_item}>add item</button>
|
||||
<button on:click={clear}>clear</button>
|
||||
|
||||
{#each items as item, index (item.id)}
|
||||
<Child bind:item={items[index]} />
|
||||
{/each}
|
||||
@ -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' }
|
||||
});
|
||||
```
|
||||
@ -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' }
|
||||
});
|
||||
```
|
||||
@ -0,0 +1,5 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export function load() {
|
||||
redirect(308, '/docs/imports');
|
||||
}
|
||||
Loading…
Reference in new issue