Fix bug in tweened() and re-add tests

Author: mnrx

packages/svelte/src/motion/spring.js

@@ -48,7 +48,10 @@ function tick_spring(ctx, last_value, current_value, target_value) {
 }
 
 /**
- * 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.
+ * 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.
  *
  * https://svelte.dev/docs/svelte-motion#spring
  * @template [T=any]

packages/svelte/src/motion/tweened.js

@@ -71,7 +71,8 @@ function get_interpolator(a, b) {
 }
 
 /**
- * A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.
+ * A tweened store in Svelte is a special type of store that provides smooth transitions between
+ * state values over time.
  *
  * https://svelte.dev/docs/svelte-motion#tweened
  * @template T
@@ -89,11 +90,12 @@ export function tweened(value, defaults = {}) {
 	 * @param {import('./private').TweenedOptions<T>} [opts]
 	 */
 	function set(new_value, opts) {
+		target_value = new_value;
+
 		if (value == null) {
 			store.set((value = new_value));
 			return Promise.resolve();
 		}
-		target_value = new_value;
 
 		/** @type {import('../internal/client/private').Task | null} */
 		let previous_task = task;
@@ -123,8 +125,9 @@ export function tweened(value, defaults = {}) {
 			if (now < start) return true;
 			if (!started) {
 				fn = interpolate(/** @type {any} */ (value), new_value);
-				if (typeof duration === 'function')
+				if (typeof duration === 'function') {
 					duration = duration(/** @type {any} */ (value), new_value);
+				}
 				started = true;
 			}
 			if (previous_task) {

packages/svelte/tests/motion/test.ts

@@ -0,0 +1,38 @@
+import { describe, it, assert } from 'vitest';
+import { get } from 'svelte/store';
+import { spring, tweened } from 'svelte/motion';
+
+describe('spring', () => {
+	it('handles initially `undefined` values', () => {
+		const size = spring();
+
+		size.set(100);
+		assert.equal(get(size), 100);
+	});
+});
+
+describe('tweened', () => {
+	it('handles initially `undefined` values', () => {
+		const size = tweened();
+
+		size.set(100);
+		assert.equal(get(size), 100);
+	});
+
+	it('sets immediately when duration is 0', () => {
+		const size = tweened(0);
+
+		size.set(100, { duration: 0 });
+		assert.equal(get(size), 100);
+	});
+
+	it('updates correctly when initialized with a `null`-ish value', () => {
+		const size = tweened(undefined as unknown as number, { duration: 0 });
+
+		size.set(10);
+		assert.equal(get(size), 10);
+
+		size.update((v) => v + 10);
+		assert.equal(get(size), 20);
+	});
+});