Skip to content

Commit fb5eb6d

Browse files
github-actions[bot]Rich-Harris
github-actions[bot]
and
Rich-Harris
authored
Sync svelte docs (#946)
sync svelte docs Co-authored-by: Rich-Harris <[email protected]>
1 parent 0b27a96 commit fb5eb6d

File tree

3 files changed

+292
-5
lines changed

3 files changed

+292
-5
lines changed

‎apps/svelte.dev/content/docs/svelte/06-runtime/01-stores.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const userState = $state({
4949
```svelte
5050
<!--- file: App.svelte --->
5151
<script>
52-
import { userState } from './state.svelte';
52+
import { userState } from './state.svelte.js';
5353
</script>
5454
5555
<p>User name: {userState.name}</p>

‎apps/svelte.dev/content/docs/svelte/06-runtime/02-context.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const myGlobalState = $state({
2222
```svelte
2323
<!--- file: App.svelte --->
2424
<script>
25-
import { myGlobalState } from './state.svelte';
25+
import { myGlobalState } from './state.svelte.js';
2626
// ...
2727
</script>
2828
```

‎apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-motion.md‎

Lines changed: 290 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,259 @@ title: svelte/motion
66

77
```js
88
// @noErrors
9-
import { prefersReducedMotion, spring, tweened } from 'svelte/motion';
9+
import {
10+
Spring,
11+
Tween,
12+
prefersReducedMotion,
13+
spring,
14+
tweened
15+
} from 'svelte/motion';
1016
```
1117

18+
## Spring
19+
20+
A wrapper for a value that behaves in a spring-like fashion. Changes to `spring.target` will cause `spring.current` to
21+
move towards it over time, taking account of the `spring.stiffness` and `spring.damping` parameters.
22+
23+
```svelte
24+
<script>
25+
import { Spring } from 'svelte/motion';
26+
27+
const spring = new Spring(0);
28+
</script>
29+
30+
<input type="range" bind:value={spring.target} />
31+
<input type="range" bind:value={spring.current} disabled />
32+
```
33+
34+
<div class="ts-block">
35+
36+
```dts
37+
class Spring<T> {/*…*/}
38+
```
39+
40+
<div class="ts-block-property">
41+
42+
```dts
43+
constructor(value: T, options?: SpringOpts);
44+
```
45+
46+
<div class="ts-block-property-details"></div>
47+
</div>
48+
49+
<div class="ts-block-property">
50+
51+
```dts
52+
static of<U>(fn: () => U, options?: SpringOpts): Spring<U>;
53+
```
54+
55+
<div class="ts-block-property-details">
56+
57+
Create a spring whose value is bound to the return value of `fn`. This must be called
58+
inside an effect root (for example, during component initialisation).
59+
60+
```svelte
61+
<script>
62+
import { Spring } from 'svelte/motion';
63+
64+
let { number } = $props();
65+
66+
const spring = Spring.of(() => number);
67+
</script>
68+
```
69+
70+
</div>
71+
</div>
72+
73+
<div class="ts-block-property">
74+
75+
```dts
76+
set(value: T, options?: SpringUpdateOpts): Promise<void>;
77+
```
78+
79+
<div class="ts-block-property-details">
80+
81+
Sets `spring.target` to `value` and returns a `Promise` that resolves if and when `spring.current` catches up to it.
82+
83+
If `options.instant` is `true`, `spring.current` immediately matches `spring.target`.
84+
85+
If `options.preserveMomentum` is provided, the spring will continue on its current trajectory for
86+
the specified number of milliseconds. This is useful for things like 'fling' gestures.
87+
88+
</div>
89+
</div>
90+
91+
<div class="ts-block-property">
92+
93+
```dts
94+
damping: number;
95+
```
96+
97+
<div class="ts-block-property-details"></div>
98+
</div>
99+
100+
<div class="ts-block-property">
101+
102+
```dts
103+
precision: number;
104+
```
105+
106+
<div class="ts-block-property-details"></div>
107+
</div>
108+
109+
<div class="ts-block-property">
110+
111+
```dts
112+
stiffness: number;
113+
```
114+
115+
<div class="ts-block-property-details"></div>
116+
</div>
117+
118+
<div class="ts-block-property">
119+
120+
```dts
121+
target: T;
122+
```
123+
124+
<div class="ts-block-property-details">
125+
126+
The end value of the spring.
127+
This property only exists on the `Spring` class, not the legacy `spring` store.
128+
129+
</div>
130+
</div>
131+
132+
<div class="ts-block-property">
133+
134+
```dts
135+
get current(): T;
136+
```
137+
138+
<div class="ts-block-property-details">
139+
140+
The current value of the spring.
141+
This property only exists on the `Spring` class, not the legacy `spring` store.
142+
143+
</div>
144+
</div></div>
145+
146+
147+
148+
## Tween
149+
150+
<blockquote class="since note">
151+
152+
Available since 5.8.0
153+
154+
</blockquote>
155+
156+
A wrapper for a value that tweens smoothly to its target value. Changes to `tween.target` will cause `tween.current` to
157+
move towards it over time, taking account of the `delay`, `duration` and `easing` options.
158+
159+
```svelte
160+
<script>
161+
import { Tween } from 'svelte/motion';
162+
163+
const tween = new Tween(0);
164+
</script>
165+
166+
<input type="range" bind:value={tween.target} />
167+
<input type="range" bind:value={tween.current} disabled />
168+
```
169+
170+
<div class="ts-block">
171+
172+
```dts
173+
class Tween<T> {/*…*/}
174+
```
175+
176+
<div class="ts-block-property">
177+
178+
```dts
179+
static of<U>(fn: () => U, options?: TweenedOptions<U> | undefined): Tween<U>;
180+
```
181+
182+
<div class="ts-block-property-details">
183+
184+
Create a tween whose value is bound to the return value of `fn`. This must be called
185+
inside an effect root (for example, during component initialisation).
186+
187+
```svelte
188+
<script>
189+
import { Tween } from 'svelte/motion';
190+
191+
let { number } = $props();
192+
193+
const tween = Tween.of(() => number);
194+
</script>
195+
```
196+
197+
</div>
198+
</div>
199+
200+
<div class="ts-block-property">
201+
202+
```dts
203+
constructor(value: T, options?: TweenedOptions<T>);
204+
```
205+
206+
<div class="ts-block-property-details"></div>
207+
</div>
208+
209+
<div class="ts-block-property">
210+
211+
```dts
212+
set(value: T, options?: TweenedOptions<T> | undefined): Promise<void>;
213+
```
214+
215+
<div class="ts-block-property-details">
216+
217+
Sets `tween.target` to `value` and returns a `Promise` that resolves if and when `tween.current` catches up to it.
218+
219+
If `options` are provided, they will override the tween's defaults.
220+
221+
</div>
222+
</div>
223+
224+
<div class="ts-block-property">
225+
226+
```dts
227+
get current(): T;
228+
```
229+
230+
<div class="ts-block-property-details"></div>
231+
</div>
232+
233+
<div class="ts-block-property">
234+
235+
```dts
236+
set target(v: T);
237+
```
238+
239+
<div class="ts-block-property-details"></div>
240+
</div>
241+
242+
<div class="ts-block-property">
243+
244+
```dts
245+
get target(): T;
246+
```
247+
248+
<div class="ts-block-property-details"></div>
249+
</div>
250+
251+
<div class="ts-block-property">
252+
253+
```dts
254+
#private;
255+
```
256+
257+
<div class="ts-block-property-details"></div>
258+
</div></div>
259+
260+
261+
12262
## prefersReducedMotion
13263

14264
<blockquote class="since note">
@@ -50,6 +300,12 @@ const prefersReducedMotion: MediaQuery;
50300

51301
## spring
52302

303+
<blockquote class="tag deprecated note">
304+
305+
Use [`Spring`](/docs/svelte/svelte-motion#Spring) instead
306+
307+
</blockquote>
308+
53309
The spring function in Svelte creates a store whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it "bounces" like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience.
54310

55311
<div class="ts-block">
@@ -67,6 +323,12 @@ function spring<T = any>(
67323

68324
## tweened
69325

326+
<blockquote class="tag deprecated note">
327+
328+
Use [`Tween`](/docs/svelte/svelte-motion#Tween) instead
329+
330+
</blockquote>
331+
70332
A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.
71333

72334
<div class="ts-block">
@@ -93,7 +355,7 @@ interface Spring<T> extends Readable<T> {/*…*/}
93355
<div class="ts-block-property">
94356

95357
```dts
96-
set: (new_value: T, opts?: SpringUpdateOpts) => Promise<void>;
358+
set(new_value: T, opts?: SpringUpdateOpts): Promise<void>;
97359
```
98360

99361
<div class="ts-block-property-details"></div>
@@ -105,7 +367,32 @@ set: (new_value: T, opts?: SpringUpdateOpts) => Promise<void>;
105367
update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;
106368
```
107369

108-
<div class="ts-block-property-details"></div>
370+
<div class="ts-block-property-details">
371+
372+
<div class="ts-block-property-bullets">
373+
374+
- <span class="tag deprecated">deprecated</span> Only exists on the legacy `spring` store, not the `Spring` class
375+
376+
</div>
377+
378+
</div>
379+
</div>
380+
381+
<div class="ts-block-property">
382+
383+
```dts
384+
subscribe(fn: (value: T) => void): Unsubscriber;
385+
```
386+
387+
<div class="ts-block-property-details">
388+
389+
<div class="ts-block-property-bullets">
390+
391+
- <span class="tag deprecated">deprecated</span> Only exists on the legacy `spring` store, not the `Spring` class
392+
393+
</div>
394+
395+
</div>
109396
</div>
110397

111398
<div class="ts-block-property">

0 commit comments

Comments
 (0)