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/01-advanced-reactivity/05-stores/+assets/app-a/src/lib/App.svelte similarity index 100% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-a/src/lib/App.svelte 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/01-advanced-reactivity/05-stores/+assets/app-a/src/lib/Counter.svelte similarity index 100% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/Counter.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-a/src/lib/Counter.svelte 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/01-advanced-reactivity/05-stores/+assets/app-a/src/lib/shared.js similarity index 100% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-a/src/lib/shared.js rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-a/src/lib/shared.js 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/01-advanced-reactivity/05-stores/+assets/app-b/src/lib/Counter.svelte similarity index 100% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/Counter.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-b/src/lib/Counter.svelte 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/01-advanced-reactivity/05-stores/+assets/app-b/src/lib/shared.js similarity index 100% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/+assets/app-b/src/lib/shared.js rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/+assets/app-b/src/lib/shared.js 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/01-advanced-reactivity/05-stores/index.md similarity index 98% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/01-introducing-stores/index.md rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/01-advanced-reactivity/05-stores/index.md index 5806b49b70..12e360cce3 100644 --- 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/01-advanced-reactivity/05-stores/index.md @@ -1,5 +1,5 @@ --- -title: Introducing stores +title: 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. diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-a/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-a/src/lib/App.svelte new file mode 100644 index 0000000000..fd6bffe84e --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-a/src/lib/App.svelte @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-b/src/lib/App.svelte new file mode 100644 index 0000000000..9f91b29859 --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/+assets/app-b/src/lib/App.svelte @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/index.md similarity index 54% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/index.md index 04cfc2751a..ea945ff563 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/01-tweens/index.md @@ -2,28 +2,53 @@ title: Tweened values --- -Alongside the `writable` and `readable` stores, Svelte ships stores for adding motion to your user interfaces. +Often, a good way to communicate that a value is changing is to use _motion_. Svelte ships classes for adding motion to your user interfaces. -Let's start by changing the `progress` store to a `tweened` store: +Import the `Tween` class from `svelte/motion`: ```svelte /// file: App.svelte ``` +Turn `progress` into an instance of `Tween`: + +```svelte +/// file: App.svelte + +``` + +The `Tween` class has a writable `target` property and a readonly `current` property — update the `` element... + +```svelte + +``` + +...and each of the event handlers: + +```svelte + +``` + Clicking the buttons causes the progress bar to animate to its new value. It's a bit robotic and unsatisfying though. We need to add an easing function: ```svelte /// file: App.svelte { - coords.set({ x: e.clientX, y: e.clientY }); + coords = { x: e.clientX, y: e.clientY }; }} - onmousedown={() => size.set(30)} - onmouseup={() => size.set(10)} + onmousedown={() => (size = 30)} + onmouseup={() => (size = 10)} role="presentation" > + cx={coords.x} + cy={coords.y} + r={size} + >
diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-b/src/lib/App.svelte b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-b/src/lib/App.svelte similarity index 71% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-b/src/lib/App.svelte rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-b/src/lib/App.svelte index 4f9169b321..380a9bdcd2 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/+assets/app-b/src/lib/App.svelte +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-b/src/lib/App.svelte @@ -1,26 +1,26 @@ { - coords.set({ x: e.clientX, y: e.clientY }); + coords.target = { x: e.clientX, y: e.clientY }; }} - onmousedown={() => size.set(30)} - onmouseup={() => size.set(10)} + onmousedown={() => (size.target = 30)} + onmouseup={() => (size.target = 10)} role="presentation" > diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/index.md new file mode 100644 index 0000000000..ae3d828e5a --- /dev/null +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/index.md @@ -0,0 +1,52 @@ +--- +title: Springs +--- + +The `Spring` class is an alternative to `Tween` that often works better for values that are frequently changing. + +In this example we have a circle that follows the mouse, and two values — the circle's coordinates, and its size. Let's convert them to springs: + +```svelte +/// file: App.svelte + +``` + +As with `Tween`, springs have a writable `target` property and a readonly `current` property. Update the event handlers... + +```svelte + { + coords.+++target+++ = { x: e.clientX, y: e.clientY }; + }} + onmousedown={() => (size.+++target+++ = 30)} + onmouseup={() => (size.+++target+++ = 10)} + role="presentation" +> +``` + +...and the `` attributes: + +```svelte + +``` + +Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values: + +```js +/// file: App.svelte +let coords = new Spring({ x: 50, y: 50 }, +++{ + stiffness: 0.1, + damping: 0.25 +}+++); +``` + +Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion. diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/index.md similarity index 85% rename from apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/index.md rename to apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/index.md index 4650becb32..9876cf5c14 100644 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/index.md +++ b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/index.md @@ -1,5 +1,5 @@ --- -title: Stores +title: Motion scope: { 'prefix': '/src/lib/', 'name': 'src' } focus: /src/lib/App.svelte --- diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-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 deleted file mode 100644 index d32c05b8da..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-a/src/lib/App.svelte +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-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 deleted file mode 100644 index 661576c6ac..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/02-tweens/+assets/app-b/src/lib/App.svelte +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/index.md b/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/index.md deleted file mode 100644 index 7af895fb6b..0000000000 --- a/apps/svelte.dev/content/tutorial/02-advanced-svelte/03-stores/03-springs/index.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Springs ---- - -The `spring` function is an alternative to `tweened` that often works better for values that are frequently changing. - -In this example we have two stores — one representing the circle's coordinates, and one representing its size. Let's convert them to springs: - -```svelte -/// file: App.svelte - -``` - -Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values: - -```js -/// file: App.svelte -let coords = spring({ x: 50, y: 50 }, +++{ - stiffness: 0.1, - damping: 0.25 -}+++); -``` - -Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion. diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts index f69d91c964..62c15ca1bd 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/+page.server.ts @@ -9,7 +9,8 @@ const redirects = new Map([ ['reactive-statements', 'svelte/effects'], ['updating-arrays-and-objects', 'svelte/deep-state'], ['event-modifiers', 'svelte/capturing'], - ['dom-event-forwarding', 'svelte/spreading-events'] + ['dom-event-forwarding', 'svelte/spreading-events'], + ['svelte/introducing-stores', 'stores'] ]); export async function load({ params }) {