From 85014a6639d94ad100bd83e65c6f9a0fe19ffb5f Mon Sep 17 00:00:00 2001 From: Jim Neuendorf Date: Sat, 2 Sep 2023 22:32:58 +0200 Subject: [PATCH 1/4] add typescript declarations file --- index.d.ts | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 index.d.ts diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..dbc177f --- /dev/null +++ b/index.d.ts @@ -0,0 +1,23 @@ +declare module '@lottiefiles/svelte-lottie-player' { + import type { SvelteComponentTyped } from 'svelte' + + export class LottiePlayer extends SvelteComponentTyped<{ + autoplay?: boolean + background: string + controls: boolean + controlsLayout?: string[] + count?: number + defaultFrame?: number + direction?: number + height: number + hover?: boolean + loop?: boolean + mode?: 'normal' | 'bounce' + onToggleZoom?: (isZoomed: boolean) => void + renderer?: 'svg' | 'canvas' + speed?: number + src?: string + style?: string + width: number + }> { } +} From bc9380042ff2e321a652efb9e659aefaac92ee59 Mon Sep 17 00:00:00 2001 From: Jim Neuendorf Date: Sun, 17 Sep 2023 22:39:51 +0200 Subject: [PATCH 2/4] add types for LottiePlayer methods --- index.d.ts | 128 +++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 109 insertions(+), 19 deletions(-) diff --git a/index.d.ts b/index.d.ts index dbc177f..e5fac34 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,23 +1,113 @@ declare module '@lottiefiles/svelte-lottie-player' { - import type { SvelteComponentTyped } from 'svelte' + import type { AnimationItem } from 'lottie-web'; + import type { SvelteComponentTyped } from 'svelte'; export class LottiePlayer extends SvelteComponentTyped<{ - autoplay?: boolean - background: string - controls: boolean - controlsLayout?: string[] - count?: number - defaultFrame?: number - direction?: number - height: number - hover?: boolean - loop?: boolean - mode?: 'normal' | 'bounce' - onToggleZoom?: (isZoomed: boolean) => void - renderer?: 'svg' | 'canvas' - speed?: number - src?: string - style?: string - width: number - }> { } + /** Autoplay animation on load */ + autoplay?: boolean; + /** Background color */ + background: string; + /** Show controls */ + controls: boolean; + /** Controls layout */ + controlsLayout?: string[]; + /** Number of times to loop animation */ + count?: number; + /** Default frame to show if autoplay is disabled */ + defaultFrame?: number; + /** Direction of animation */ + direction?: number; + /** Player height */ + height: number; + /** Whether to play on mouse hover */ + hover?: boolean; + /** Whether to loop animation */ + loop?: boolean; + /** Play mode */ + mode?: 'normal' | 'bounce'; + /** Callback for when zoom is triggered */ + onToggleZoom?: (isZoomed: boolean) => void; + /** Renderer to use in lottie-web */ + renderer?: 'svg' | 'canvas'; + /** Playback speed */ + speed?: number; + /** Lottie file as either a URL or JSON content */ + src?: string; + /** Styling for the Player's wrapper element */ + style?: string; + /** Player width */ + width: number; + }> { + /** + * Configure and initialize lottie-web player instance. + */ + load(srcValue: string | Record | URL): void; + /** + * Returns the lottie-web instance used in the component. + */ + getLottie(): AnimationItem; + /** + * Pause animation play. + */ + pause(): void; + /** + * Start playing animation. + */ + play(): void; + /** + * Stops animation play. + */ + stop(): void; + /** + * Freeze animation play. + * This internal state pauses animation and is used to differentiate between + * user requested pauses and component instigated pauses. + */ + freeze(): void; + /** + * Resize animation. + */ + resize(): void; + /** + * Seek to a given frame. + * @param frame Frame number or Percent string to seek to. + */ + seek(frame: number | string): void; + /** + * Snapshot the current frame as SVG. + * @param download If 'download' argument is boolean true, then a download is triggered in browser. + */ + snapshot(download?: boolean): void; + /** + * Sets background color. + */ + setBackground(color: string): void; + /** + * Sets the looping of the animation. + * @param value Whether to enable looping. Boolean true enables looping. + */ + setLooping(value: boolean): void; + /** + * Sets the speed of the animation. + * @param value The speed of the animation. 1 is normal speed. + */ + setSpeed(value: number): void; + /** + * Animation play direction. + * @param value Direction values. + */ + setDirection(value: number): void; + /** + * Toggle playing state. + */ + togglePlay(): void; + /** + * Toggle zoom state. + */ + toggleZoom(): void; + /** + * Toggles animation looping. + */ + toggleLooping(): void; + } } From cb09892698dba6a2eb13bae73e0c0756b40d1a30 Mon Sep 17 00:00:00 2001 From: Jim Neuendorf Date: Sun, 17 Sep 2023 22:41:53 +0200 Subject: [PATCH 3/4] add type for LottiePlayer.getVersions method --- index.d.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.d.ts b/index.d.ts index e5fac34..821148b 100644 --- a/index.d.ts +++ b/index.d.ts @@ -46,6 +46,10 @@ declare module '@lottiefiles/svelte-lottie-player' { * Returns the lottie-web instance used in the component. */ getLottie(): AnimationItem; + /** + * Returns the lottie-web version and this player's version + */ + getVersions(): { lottieWebVersion: string; svelteLottiePlayerVersion: string }; /** * Pause animation play. */ From 45a4aec2bc0c36291e45ce1388d5ec36dd4da0c4 Mon Sep 17 00:00:00 2001 From: Jim Neuendorf Date: Tue, 30 Jan 2024 20:36:50 +0100 Subject: [PATCH 4/4] add type declaration file to npm package. --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index e1ac2a8..2d5aaf9 100644 --- a/package.json +++ b/package.json @@ -68,8 +68,10 @@ }, "files": [ "src/components", - "dist" + "dist", + "index.d.ts" ], + "types": "index.d.ts", "husky": { "hooks": { "pre-commit": "lint-staged"