diff --git a/.changeset/angry-knives-bow.md b/.changeset/angry-knives-bow.md new file mode 100644 index 0000000000..1f6761a3da --- /dev/null +++ b/.changeset/angry-knives-bow.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: export TweenedOptions, SpringOpts, SpringUpdateOpts, and Updater from svelte/motion (#16151) diff --git a/packages/svelte/src/motion/private.d.ts b/packages/svelte/src/motion/private.d.ts index 22b8cc4af3..a6e0f95284 100644 --- a/packages/svelte/src/motion/private.d.ts +++ b/packages/svelte/src/motion/private.d.ts @@ -8,37 +8,3 @@ export interface TickContext { }; settled: boolean; } - -export interface SpringOpts { - stiffness?: number; - damping?: number; - precision?: number; -} - -export interface SpringUpdateOpts { - /** - * @deprecated Only use this for the spring store; does nothing when set on the Spring class - */ - hard?: any; - /** - * @deprecated Only use this for the spring store; does nothing when set on the Spring class - */ - soft?: string | number | boolean; - /** - * Only use this for the Spring class; does nothing when set on the spring store - */ - instant?: boolean; - /** - * Only use this for the Spring class; does nothing when set on the spring store - */ - preserveMomentum?: number; -} - -export type Updater = (target_value: T, value: T) => T; - -export interface TweenedOptions { - delay?: number; - duration?: number | ((from: T, to: T) => number); - easing?: (t: number) => number; - interpolate?: (a: T, b: T) => (t: number) => T; -} diff --git a/packages/svelte/src/motion/public.d.ts b/packages/svelte/src/motion/public.d.ts index 4e74d4b76f..57a25a84c4 100644 --- a/packages/svelte/src/motion/public.d.ts +++ b/packages/svelte/src/motion/public.d.ts @@ -1,5 +1,38 @@ import { Readable, type Unsubscriber } from '../store/public.js'; -import { SpringUpdateOpts, TweenedOptions, Updater, SpringOpts } from './private.js'; + +export interface SpringOpts { + stiffness?: number; + damping?: number; + precision?: number; +} + +export interface SpringUpdateOpts { + /** + * @deprecated Only use this for the spring store; does nothing when set on the Spring class + */ + hard?: any; + /** + * @deprecated Only use this for the spring store; does nothing when set on the Spring class + */ + soft?: string | number | boolean; + /** + * Only use this for the Spring class; does nothing when set on the spring store + */ + instant?: boolean; + /** + * Only use this for the Spring class; does nothing when set on the spring store + */ + preserveMomentum?: number; +} + +export type Updater = (target_value: T, value: T) => T; + +export interface TweenedOptions { + delay?: number; + duration?: number | ((from: T, to: T) => number); + easing?: (t: number) => number; + interpolate?: (a: T, b: T) => (t: number) => T; +} // TODO we do declaration merging here in order to not have a breaking change (renaming the Spring interface) // this means both the Spring class and the Spring interface are merged into one with some things only diff --git a/packages/svelte/src/motion/spring.js b/packages/svelte/src/motion/spring.js index 44be1a501b..c3ae19adb3 100644 --- a/packages/svelte/src/motion/spring.js +++ b/packages/svelte/src/motion/spring.js @@ -1,6 +1,6 @@ /** @import { Task } from '#client' */ -/** @import { SpringOpts, SpringUpdateOpts, TickContext } from './private.js' */ -/** @import { Spring as SpringStore } from './public.js' */ +/** @import { TickContext } from './private.js' */ +/** @import { Spring as SpringStore, SpringOpts, SpringUpdateOpts } from './public.js' */ import { writable } from '../store/shared/index.js'; import { loop } from '../internal/client/loop.js'; import { raf } from '../internal/client/timing.js'; diff --git a/packages/svelte/src/motion/tweened.js b/packages/svelte/src/motion/tweened.js index 437c22ec3b..ab843346cf 100644 --- a/packages/svelte/src/motion/tweened.js +++ b/packages/svelte/src/motion/tweened.js @@ -1,6 +1,5 @@ /** @import { Task } from '../internal/client/types' */ -/** @import { Tweened } from './public' */ -/** @import { TweenedOptions } from './private' */ +/** @import { Tweened, TweenedOptions } from './public' */ import { writable } from '../store/shared/index.js'; import { raf } from '../internal/client/timing.js'; import { loop } from '../internal/client/loop.js'; diff --git a/packages/svelte/tests/types/motion.ts b/packages/svelte/tests/types/motion.ts new file mode 100644 index 0000000000..5306627c27 --- /dev/null +++ b/packages/svelte/tests/types/motion.ts @@ -0,0 +1,22 @@ +import { + type TweenedOptions, + type SpringOpts, + type SpringUpdateOpts, + type Updater +} from 'svelte/motion'; + +let tweenOptions: TweenedOptions = { + delay: 100, + duration: 400 +}; + +let springOptions: SpringOpts = { + stiffness: 0.1, + damping: 0.5 +}; + +let springUpdateOptions: SpringUpdateOpts = { + instant: true +}; + +let updater: Updater = (target, value) => target + value; diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 371a823225..07d9eb0378 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -2005,6 +2005,40 @@ declare module 'svelte/legacy' { declare module 'svelte/motion' { import type { MediaQuery } from 'svelte/reactivity'; + export interface SpringOpts { + stiffness?: number; + damping?: number; + precision?: number; + } + + export interface SpringUpdateOpts { + /** + * @deprecated Only use this for the spring store; does nothing when set on the Spring class + */ + hard?: any; + /** + * @deprecated Only use this for the spring store; does nothing when set on the Spring class + */ + soft?: string | number | boolean; + /** + * Only use this for the Spring class; does nothing when set on the spring store + */ + instant?: boolean; + /** + * Only use this for the Spring class; does nothing when set on the spring store + */ + preserveMomentum?: number; + } + + export type Updater = (target_value: T, value: T) => T; + + export interface TweenedOptions { + delay?: number; + duration?: number | ((from: T, to: T) => number); + easing?: (t: number) => number; + interpolate?: (a: T, b: T) => (t: number) => T; + } + // TODO we do declaration merging here in order to not have a breaking change (renaming the Spring interface) // this means both the Spring class and the Spring interface are merged into one with some things only // existing on one side. In Svelte 6, remove the type definition and move the jsdoc onto the class in spring.js @@ -2103,39 +2137,6 @@ declare module 'svelte/motion' { */ subscribe(this: void, run: Subscriber, invalidate?: () => void): Unsubscriber; } - interface SpringOpts { - stiffness?: number; - damping?: number; - precision?: number; - } - - interface SpringUpdateOpts { - /** - * @deprecated Only use this for the spring store; does nothing when set on the Spring class - */ - hard?: any; - /** - * @deprecated Only use this for the spring store; does nothing when set on the Spring class - */ - soft?: string | number | boolean; - /** - * Only use this for the Spring class; does nothing when set on the spring store - */ - instant?: boolean; - /** - * Only use this for the Spring class; does nothing when set on the spring store - */ - preserveMomentum?: number; - } - - type Updater = (target_value: T, value: T) => T; - - interface TweenedOptions { - delay?: number; - duration?: number | ((from: T, to: T) => number); - easing?: (t: number) => number; - interpolate?: (a: T, b: T) => (t: number) => T; - } /** * A [media query](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery) that matches if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). *