`, indicates a *component*.
+A lowercase tag, like ``, denotes a regular HTML element. A capitalised tag, such as `` or ``, indicates a _component_.
```sv
```
-> This behaviour will only work when the function passed to `onMount` *synchronously* returns a value. `async` functions always return a `Promise`, and as such cannot *synchronously* return a function.
+> This behaviour will only work when the function passed to `onMount` _synchronously_ returns a value. `async` functions always return a `Promise`, and as such cannot _synchronously_ return a function.
#### `beforeUpdate`
@@ -121,7 +121,7 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl
#### `tick`
```js
-promise: Promise = tick()
+promise: Promise = tick();
```
---
@@ -160,7 +160,7 @@ Like lifecycle functions, this must be called during component initialisation.
```
-> Context is not inherently reactive. If you need reactive values in context then you can pass a store into context, which *will* be reactive.
+> Context is not inherently reactive. If you need reactive values in context then you can pass a store into context, which _will_ be reactive.
#### `getContext`
@@ -226,7 +226,7 @@ dispatch: ((name: string, detail?: any, options?: DispatchOptions) => boolean) =
---
-Creates an event dispatcher that can be used to dispatch [component events](/docs#template-syntax-component-directives-on-eventname). Event dispatchers are functions that can take two arguments: `name` and `detail`.
+Creates an event dispatcher that can be used to dispatch [component events](/docs/template-syntax#component-directives-on-eventname). Event dispatchers are functions that can take two arguments: `name` and `detail`.
Component events created with `createEventDispatcher` create a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture). The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) property and can contain any type of data.
@@ -277,17 +277,18 @@ Events can be cancelable by passing a third parameter to the dispatch function.
### `svelte/store`
-The `svelte/store` module exports functions for creating [readable](/docs#run-time-svelte-store-readable), [writable](/docs#run-time-svelte-store-writable) and [derived](/docs#run-time-svelte-store-derived) stores.
+The `svelte/store` module exports functions for creating [readable](/docs/run-time#svelte-store-readable), [writable](/docs/run-time#svelte-store-writable) and [derived](/docs/run-time#svelte-store-derived) stores.
-Keep in mind that you don't *have* to use these functions to enjoy the [reactive `$store` syntax](/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs#run-time-svelte-store-derived).
+Keep in mind that you don't _have_ to use these functions to enjoy the [reactive `$store` syntax](/docs/component-format#script-4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs/run-time#svelte-store-derived).
-This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values-store-contract) to see what a correct implementation looks like.
+This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs/component-format#script-4-prefix-stores-with-$-to-access-their-values-store-contract) to see what a correct implementation looks like.
#### `writable`
```js
store = writable(value?: any)
```
+
```js
store = writable(value?: any, start?: (set: (value: any) => void) => () => void)
```
@@ -301,17 +302,17 @@ Function that creates a store which has values that can be set from 'outside' co
`update` is a method that takes one argument which is a callback. The callback takes the existing store value as its argument and returns the new value to be set to the store.
```js
-import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
const count = writable(0);
-count.subscribe(value => {
+count.subscribe((value) => {
console.log(value);
}); // logs '0'
count.set(1); // logs '1'
-count.update(n => n + 1); // logs '2'
+count.update((n) => n + 1); // logs '2'
```
---
@@ -319,16 +320,16 @@ count.update(n => n + 1); // logs '2'
If a function is passed as the second argument, it will be called when the number of subscribers goes from zero to one (but not from one to two, etc). That function will be passed a `set` function which changes the value of the store. It must return a `stop` function that is called when the subscriber count goes from one to zero.
```js
-import { writable } from 'svelte/store';
+import { writable } from "svelte/store";
const count = writable(0, () => {
- console.log('got a subscriber');
- return () => console.log('no more subscribers');
+ console.log("got a subscriber");
+ return () => console.log("no more subscribers");
});
count.set(1); // does nothing
-const unsubscribe = count.subscribe(value => {
+const unsubscribe = count.subscribe((value) => {
console.log(value);
}); // logs 'got a subscriber', then '1'
@@ -348,9 +349,9 @@ store = readable(value?: any, start?: (set: (value: any) => void) => () => void)
Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.
```js
-import { readable } from 'svelte/store';
+import { readable } from "svelte/store";
-const time = readable(null, set => {
+const time = readable(null, (set) => {
set(new Date());
const interval = setInterval(() => {
@@ -366,12 +367,15 @@ const time = readable(null, set => {
```js
store = derived(a, callback: (a: any) => any)
```
+
```js
store = derived(a, callback: (a: any, set: (value: any) => void) => void | () => void, initial_value: any)
```
+
```js
store = derived([a, ...b], callback: ([a: any, ...b: any[]]) => any)
```
+
```js
store = derived([a, ...b], callback: ([a: any, ...b: any[]], set: (value: any) => void) => void | () => void, initial_value: any)
```
@@ -383,9 +387,9 @@ Derives a store from one or more other stores. The callback runs initially when
In the simplest version, `derived` takes a single store, and the callback returns a derived value.
```js
-import { derived } from 'svelte/store';
+import { derived } from "svelte/store";
-const doubled = derived(a, $a => $a * 2);
+const doubled = derived(a, ($a) => $a * 2);
```
---
@@ -395,11 +399,15 @@ The callback can set a value asynchronously by accepting a second argument, `set
In this case, you can also pass a third argument to `derived` — the initial value of the derived store before `set` is first called.
```js
-import { derived } from 'svelte/store';
+import { derived } from "svelte/store";
-const delayed = derived(a, ($a, set) => {
- setTimeout(() => set($a), 1000);
-}, 'one moment...');
+const delayed = derived(
+ a,
+ ($a, set) => {
+ setTimeout(() => set($a), 1000);
+ },
+ "one moment..."
+);
```
---
@@ -407,17 +415,21 @@ const delayed = derived(a, ($a, set) => {
If you return a function from the callback, it will be called when a) the callback runs again, or b) the last subscriber unsubscribes.
```js
-import { derived } from 'svelte/store';
+import { derived } from "svelte/store";
-const tick = derived(frequency, ($frequency, set) => {
- const interval = setInterval(() => {
- set(Date.now());
- }, 1000 / $frequency);
+const tick = derived(
+ frequency,
+ ($frequency, set) => {
+ const interval = setInterval(() => {
+ set(Date.now());
+ }, 1000 / $frequency);
- return () => {
- clearInterval(interval);
- };
-}, 'one moment...');
+ return () => {
+ clearInterval(interval);
+ };
+ },
+ "one moment..."
+);
```
---
@@ -425,7 +437,7 @@ const tick = derived(frequency, ($frequency, set) => {
In both cases, an array of arguments can be passed as the first argument instead of a single store.
```js
-import { derived } from 'svelte/store';
+import { derived } from "svelte/store";
const summed = derived([a, b], ([$a, $b]) => $a + $b);
@@ -437,7 +449,7 @@ const delayed = derived([a, b], ([$a, $b], set) => {
#### `get`
```js
-value: any = get(store)
+value: any = get(store);
```
---
@@ -447,12 +459,11 @@ Generally, you should read the value of a store by subscribing to it and using t
> This works by creating a subscription, reading the value, then unsubscribing. It's therefore not recommended in hot code paths.
```js
-import { get } from 'svelte/store';
+import { get } from "svelte/store";
const value = get(store);
```
-
### `svelte/motion`
The `svelte/motion` module exports two functions, `tweened` and `spring`, for creating writable stores whose values change over time after `set` and `update`, rather than immediately.
@@ -465,10 +476,10 @@ store = tweened(value: any, options)
Tweened stores update their values over a fixed duration. The following options are available:
-* `delay` (`number`, default 0) — milliseconds before starting
-* `duration` (`number` | `function`, default 400) — milliseconds the tween lasts
-* `easing` (`function`, default `t => t`) — an [easing function](/docs#run-time-svelte-easing)
-* `interpolate` (`function`) — see below
+- `delay` (`number`, default 0) — milliseconds before starting
+- `duration` (`number` | `function`, default 400) — milliseconds the tween lasts
+- `easing` (`function`, default `t => t`) — an [easing function](/docs/run-time#svelte-easing)
+- `interpolate` (`function`) — see below
`store.set` and `store.update` can accept a second `options` argument that will override the options passed in upon instantiation.
@@ -507,7 +518,7 @@ If the initial value is `undefined` or `null`, the first value change will take
```js
const size = tweened(undefined, {
duration: 300,
- easing: cubicOut
+ easing: cubicOut,
});
$: $size = big ? 100 : 10;
@@ -515,7 +526,7 @@ $: $size = big ? 100 : 10;
---
-The `interpolate` option allows you to tween between *any* arbitrary values. It must be an `(a, b) => t => value` function, where `a` is the starting value, `b` is the target value, `t` is a number between 0 and 1, and `value` is the result. For example, we can use the [d3-interpolate](https://github.com/d3/d3-interpolate) package to smoothly interpolate between two colours.
+The `interpolate` option allows you to tween between _any_ arbitrary values. It must be an `(a, b) => t => value` function, where `a` is the starting value, `b` is the target value, `t` is a number between 0 and 1, and `value` is the result. For example, we can use the [d3-interpolate](https://github.com/d3/d3-interpolate) package to smoothly interpolate between two colours.
```sv