pull/12799/head
Rich Harris 2 years ago
parent 7d741b306b
commit 87008f03e8

@ -192,6 +192,47 @@ const result = render(App, {
If the `css` compiler option was set to `'injected'`, `<style>` elements will be included in the `head`.
## `svelte/store`
In addition to the existing store-related imports such as `writable`, `svelte/store` gains two new functions: `fromStore` and `toStore`. These allow you to easily use stores and rune-based state interchangeably, even outside `.svelte` files.
### `fromStore`
Takes a store and turns it into an object with a reactive (and readonly, if the store is not [writable](https://svelte.dev/docs/svelte-store#writable)) `current` property.
```js
import { fromStore, get, writable } from 'svelte/store';
const store = writable(0);
const count = fromStore(store);
count.current; // 0;
store.set(1);
count.current; // 1
count.current += 1;
get(store); // 2
```
### `toStore`
Creates a store from a function that returns reactive state (and, optionally, a second function that sets the state):
```js
import { toStore } from 'svelte/store';
let count = $state(0);
const store = toStore(
() => count,
(v) => (count = v)
);
store.set(1);
count; // 1
```
## `svelte/elements`
Svelte provides built-in [DOM types](https://github.com/sveltejs/svelte/blob/master/packages/svelte/elements.d.ts). A common use case for DOM types is forwarding props to an HTML element. To properly type your props and get full intellisense, your props interface should extend the attributes type for your HTML element:

Loading…
Cancel
Save