diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/App.svelte new file mode 100644 index 0000000000..19091f01dc --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/App.svelte @@ -0,0 +1,7 @@ + + + + + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/Counter.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/Counter.svelte new file mode 100644 index 0000000000..7fe1abb301 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/Counter.svelte @@ -0,0 +1,7 @@ + + + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/shared.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/shared.js new file mode 100644 index 0000000000..a0e4ecaff7 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/shared.js @@ -0,0 +1 @@ +export let count = 0; diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/Counter.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/Counter.svelte new file mode 100644 index 0000000000..97de4a80a0 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/Counter.svelte @@ -0,0 +1,7 @@ + + + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/shared.js b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/shared.js new file mode 100644 index 0000000000..75ca870c54 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/shared.js @@ -0,0 +1,3 @@ +import { writable } from 'svelte/store'; + +export let count = writable(0); diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/index.md new file mode 100644 index 0000000000..5806b49b70 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/index.md @@ -0,0 +1,42 @@ +--- +title: Introducing stores +--- + +Prior to the introduction of runes in Svelte 5, stores were the idiomatic way to handle reactive state outside components. That's no longer the case, but you'll still encounter stores when using Svelte (including in SvelteKit, for now), so it's worth knowing how to use them. + +> [!NOTE] We won't cover how to create your own custom stores — for that, [consult the documentation](/docs/svelte/stores). + +Let's revisit the example from the [universal reactivity](universal-reactivity) exercise, but this time implement the shared state using a store. + +In `shared.js` we're currently exporting `count`, which is a number. Turn it into a writable store: + +```js +/// file: shared.js ++++import { writable } from 'svelte/store';+++ + +export const count = +++writable(0)+++; +``` + +To reference the value of the store, we prefix it with a `$` symbol. In `Counter.svelte`, update the text inside the ` +``` + +Finally, add the event handler. Because this is a writable store, we can update the value programmatically using its `set` or `update` method... + +```js +count.update((n) => n + 1); +``` + +...but since we're in a component we can continue using the `$` prefix: + +```svelte +/// file: Counter.svelte + +``` diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte similarity index 50% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-a/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte index f0d3d3d1cf..d32c05b8da 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-a/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte @@ -1,28 +1,28 @@ - - - - - diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte similarity index 57% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-b/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte index ffe7716e1b..661576c6ac 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/+assets/app-b/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte @@ -2,7 +2,7 @@ import { tweened } from 'svelte/motion'; import { cubicOut } from 'svelte/easing'; - const progress = tweened(0, { + const progress = tweened(0.5, { duration: 400, easing: cubicOut }); @@ -10,23 +10,23 @@ - - - - - diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md similarity index 84% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/index.md rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md index 38f5f708da..04cfc2751a 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/01-tweens/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md @@ -1,10 +1,8 @@ --- -title: Tweens +title: Tweened values --- -Now that we've covered the basics, it's time to learn some advanced Svelte techniques, starting with _motion_. - -Setting values and watching the DOM update automatically is cool. Know what's even cooler? Tweening those values. Svelte includes tools to help you build slick user interfaces that use animation to communicate changes. +Alongside the `writable` and `readable` stores, Svelte ships stores for adding motion to your user interfaces. Let's start by changing the `progress` store to a `tweened` store: diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-a/src/lib/App.svelte similarity index 90% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/+assets/app-a/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-a/src/lib/App.svelte index 92805f88ca..977097b152 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-motion/02-springs/+assets/app-a/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-a/src/lib/App.svelte @@ -6,11 +6,11 @@ { + onmousemove={(e) => { coords.set({ x: e.clientX, y: e.clientY }); }} - on:mousedown={() => size.set(30)} - on:mouseup={() => size.set(10)} + onmousedown={() => size.set(30)} + onmouseup={() => size.set(10)} role="presentation" > { + onmousemove={(e) => { coords.set({ x: e.clientX, y: e.clientY }); }} - on:mousedown={() => size.set(30)} - on:mouseup={() => size.set(10)} + onmousedown={() => size.set(30)} + onmouseup={() => size.set(10)} role="presentation" > - let html = '

Write some text!

'; + let html = $state('

Write some text!

');
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte similarity index 80% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte index d805856406..2f3b7dc886 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/01-contenteditable-bindings/+assets/app-b/src/lib/App.svelte @@ -1,5 +1,5 @@
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/01-contenteditable-bindings/index.md similarity index 100% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/01-contenteditable-bindings/index.md rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/01-contenteditable-bindings/index.md diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte similarity index 85% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte index 88835e5870..bb9e235320 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-a/src/lib/App.svelte @@ -1,12 +1,12 @@
@@ -41,11 +41,11 @@

{remaining} remaining

- -
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte similarity index 85% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte index e30133a939..2845e2fd22 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/+assets/app-b/src/lib/App.svelte @@ -1,12 +1,12 @@
@@ -41,11 +41,11 @@

{remaining} remaining

- -
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md similarity index 55% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/index.md rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md index 884fa6e70f..b5efd3ea20 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/02-each-block-bindings/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/02-each-block-bindings/index.md @@ -2,7 +2,7 @@ title: Each block bindings --- -You can even bind to properties inside an `each` block. +You can bind to properties inside an `each` block. ```svelte /// file: App.svelte @@ -21,5 +21,3 @@ You can even bind to properties inside an `each` block. {/each} ``` - -> [!NOTE] Note that interacting with these `` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead. diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/App.svelte similarity index 100% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/App.svelte diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte similarity index 93% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte index a310cb004a..e556a56646 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/03-media-elements/+assets/app-a/src/lib/AudioPlayer.svelte @@ -1,11 +1,9 @@
- {text} + + edit this text + + {w} x {h}px
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte similarity index 80% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte index 3ccf4e8ec2..52f4442418 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/+assets/app-b/src/lib/App.svelte @@ -1,8 +1,7 @@
- {text} + + edit this text + + {w} x {h}px
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md new file mode 100644 index 0000000000..99b443fc02 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/04-dimensions/index.md @@ -0,0 +1,15 @@ +--- +title: Dimensions +--- + +You can add `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings to any element: + +```svelte +/// file: App.svelte +
+ {text} + {w} x {h}px +
+``` + +These bindings are readonly — changing the values of `w` and `h` won't have any effect on the element. diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte similarity index 80% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte index 582abc630a..09accf3dcd 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/05-bind-this/+assets/app-a/src/lib/App.svelte @@ -1,9 +1,7 @@ - + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte similarity index 57% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte index fb30a1e3ff..67b63571ab 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/App.svelte @@ -1,12 +1,13 @@ @@ -15,7 +16,4 @@ {view} - + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/Keypad.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/Keypad.svelte new file mode 100644 index 0000000000..cdbd3b0ee0 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/+assets/app-b/src/lib/Keypad.svelte @@ -0,0 +1,41 @@ + + +
+ + + + + + + + + + + + + + + +
+ + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/index.md similarity index 56% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/index.md rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/index.md index 761092049c..946175ae10 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/06-component-bindings/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/06-component-bindings/index.md @@ -2,14 +2,20 @@ title: Component bindings --- -Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `` component as though it were a form element: +Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `` component as though it were a form element. + +First, we need to mark the prop as _bindable_. Inside `Keypad.svelte`, update the `$props()` declaration to use the `$bindable` rune: + +```js +/// file: Keypad.svelte +let { value +++= $bindable('')+++, onsubmit } = $props(); +``` + +Then, in `App.svelte`, add a `bind:` directive: ```svelte /// file: App.svelte - + ``` Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated. diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/+assets/app-a/src/lib/App.svelte similarity index 81% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/+assets/app-a/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/+assets/app-a/src/lib/App.svelte index c685770d1f..81c8f1a686 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/05-bindings/07-component-this/+assets/app-a/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/04-advanced-bindings/07-component-this/+assets/app-a/src/lib/App.svelte @@ -1,12 +1,12 @@
@@ -14,10 +14,17 @@ {#if showMenu}