@lottiefiles/dotlottie-svelte 0.9.12 → 0.10.0

package/dist/Dotlottie.svelte

@@ -1,213 +1,283 @@
 <script lang="ts">
-import { type Config, DotLottie } from '@lottiefiles/dotlottie-web';
-import { onMount } from 'svelte';
-
-export function setWasmUrl(url: string): void {
-  DotLottie.setWasmUrl(url);
-}
-
-export let autoplay: Config['autoplay'] = false;
-export let backgroundColor: Config['backgroundColor'] = undefined;
-export let data: Config['data'] = undefined;
-export let loop: Config['loop'] = false;
-export let mode: Config['mode'] = 'forward';
-export let renderConfig: Config['renderConfig'] = undefined;
-export let segment: Config['segment'] = undefined;
-export let speed: Config['speed'] = 1;
-export let src: Config['src'] = undefined;
-export let useFrameInterpolation: Config['useFrameInterpolation'] = true;
-export let marker: Config['marker'] = undefined;
-export let layout: Config['layout'] = undefined;
-export let animationId: Config['animationId'] = '';
-export let themeId: Config['themeId'] = '';
-export let stateMachineId: Config['stateMachineId'] = undefined;
-export let stateMachineConfig: Config['stateMachineConfig'] = undefined;
-
-export let playOnHover: boolean = false;
-export let themeData: string = '';
-
-export let dotLottieRefCallback: (dotLottie: DotLottie) => void = () => {};
-
-const hoverHandler = (event: MouseEvent) => {
-  if (!playOnHover || !dotLottie.isLoaded) return;
-
-  if (event.type === 'mouseenter') {
-    dotLottie.play();
-  } else if (event.type === 'mouseleave') {
-    dotLottie.pause();
-  }
-};
-
-let dotLottie: DotLottie;
-let canvas: HTMLCanvasElement;
-let prevSrc: string | undefined;
-let prevData: Config['data'];
-
-onMount(() => {
-  const shouldAutoplay = autoplay && !playOnHover;
-  dotLottie = new DotLottie({
-    canvas,
-    src,
-    autoplay: shouldAutoplay,
-    loop,
-    speed,
-    data,
-    renderConfig,
-    segment,
-    useFrameInterpolation,
-    backgroundColor,
-    mode,
-    animationId,
-    themeId,
-    stateMachineId,
-    stateMachineConfig,
-  });
-
-  if (dotLottieRefCallback) {
-    dotLottieRefCallback(dotLottie);
-  }
-
-  canvas.addEventListener('mouseenter', hoverHandler);
-  canvas.addEventListener('mouseleave', hoverHandler);
-
-  return () => {
-    canvas.removeEventListener('mouseenter', hoverHandler);
-    canvas.removeEventListener('mouseleave', hoverHandler);
-    dotLottie.destroy();
-  };
-});
-
-$: {
-  if (dotLottie && typeof layout === 'object') {
-    dotLottie.setLayout(layout);
-  }
-}
-
-$: {
-  if (dotLottie && typeof marker === 'string') {
-    dotLottie.setMarker(marker);
-  }
-}
-
-$: {
-  if (dotLottie && dotLottie.isLoaded && typeof speed == 'number') {
-    dotLottie.setSpeed(speed);
-  }
-}
-
-$: {
-  if (dotLottie && dotLottie.isLoaded && typeof useFrameInterpolation == 'boolean') {
-    dotLottie.setUseFrameInterpolation(useFrameInterpolation);
-  }
-}
-
-$: {
-  if (
-    dotLottie &&
-    dotLottie.isLoaded &&
-    Array.isArray(segment) &&
-    segment.length === 2 &&
-    typeof segment[0] === 'number' &&
-    typeof segment[1] === 'number'
-  ) {
-    const [start, end] = segment;
-    dotLottie.setSegment(start, end);
-  }
-}
-
-$: {
-  if (dotLottie && dotLottie.isLoaded && typeof loop == 'boolean') {
-    dotLottie.setLoop(loop);
-  }
-}
-
-$: {
-  if (dotLottie) {
-    dotLottie.setBackgroundColor(backgroundColor || '');
-  }
-}
-
-$: {
-  if (dotLottie && dotLottie.isLoaded && typeof mode == 'string') {
-    dotLottie.setMode(mode);
-  }
-}
-
-$: if (dotLottie && src !== prevSrc) {
-  dotLottie.load({
-    src,
-    autoplay,
-    loop,
-    speed,
-    data,
-    renderConfig,
-    segment,
-    useFrameInterpolation,
-    backgroundColor,
-    mode,
-    marker,
-    layout,
-    animationId,
-    themeId,
-    stateMachineId,
-    stateMachineConfig,
-  });
-  prevSrc = src;
-}
-
-$: if (dotLottie && data !== prevData) {
-  dotLottie.load({
-    src,
-    autoplay,
-    loop,
-    speed,
-    data,
-    renderConfig,
-    segment,
-    useFrameInterpolation,
-    backgroundColor,
-    mode,
-    marker,
-    layout,
-    animationId,
-    themeId,
-    stateMachineId,
-    stateMachineConfig,
-  });
-  prevData = data;
-}
-
-$: if (dotLottie && dotLottie.isLoaded && dotLottie.activeAnimationId !== animationId) {
-  dotLottie.loadAnimation(animationId);
-}
-
-$: if (dotLottie && dotLottie.isLoaded && dotLottie.activeThemeId !== themeId) {
-  dotLottie.setTheme(themeId);
-}
-
-$: if (dotLottie && dotLottie.isLoaded) {
-  dotLottie.setThemeData(themeData);
-}
-
-$: {
-  if (dotLottie && dotLottie.isLoaded) {
-    if (typeof stateMachineId === 'string' && stateMachineId) {
-      const smLoaded = dotLottie.stateMachineLoad(stateMachineId);
-
-      if (smLoaded) {
-        dotLottie.stateMachineStart();
-      }
-    } else {
-      dotLottie.stateMachineStop();
-    }
-  }
-}
-
-$: {
-  if (dotLottie) {
-    dotLottie.stateMachineSetConfig(stateMachineConfig ?? null);
-  }
-}
+	import { type Config, DotLottie } from '@lottiefiles/dotlottie-web';
+	import { untrack } from 'svelte';
+
+	interface DotLottieSvelteProps {
+		autoplay?: Config['autoplay'];
+		backgroundColor?: Config['backgroundColor'];
+		data?: Config['data'];
+		loop?: Config['loop'];
+		mode?: Config['mode'];
+		renderConfig?: Config['renderConfig'];
+		segment?: Config['segment'];
+		speed?: Config['speed'];
+		src?: Config['src'];
+		useFrameInterpolation?: Config['useFrameInterpolation'];
+		marker?: Config['marker'];
+		layout?: Config['layout'];
+		animationId?: Config['animationId'];
+		themeId?: Config['themeId'];
+		stateMachineId?: Config['stateMachineId'];
+		stateMachineConfig?: Config['stateMachineConfig'];
+		playOnHover?: boolean;
+		themeData?: string;
+		dotLottieRefCallback?: (dotLottie: DotLottie) => void;
+	}
+
+	let {
+		autoplay = false,
+		backgroundColor = undefined,
+		data = undefined,
+		loop = false,
+		mode = 'forward',
+		renderConfig = undefined,
+		segment = undefined,
+		speed = 1,
+		src = undefined,
+		useFrameInterpolation = true,
+		marker = undefined,
+		layout = undefined,
+		animationId = '',
+		themeId = '',
+		stateMachineId = undefined,
+		stateMachineConfig = undefined,
+		playOnHover = false,
+		themeData = '',
+		dotLottieRefCallback = () => {}
+	}: DotLottieSvelteProps = $props();
+
+	let canvas: HTMLCanvasElement;
+	let dotLottie: DotLottie | undefined = $state(undefined);
+	let prevSrc: Config['src'];
+	let prevData: Config['data'];
+
+	// Initialize DotLottie instance once when canvas is ready.
+	// Use untrack() to read initial prop values without establishing reactive dependencies —
+	// prop changes are handled by separate $effect blocks below.
+	$effect(() => {
+		const currentCanvas = canvas;
+		if (!currentCanvas) return;
+
+		const instance = new DotLottie(
+			untrack(() => ({
+				canvas: currentCanvas,
+				src,
+				autoplay: autoplay && !playOnHover,
+				loop,
+				speed,
+				data,
+				renderConfig,
+				segment,
+				useFrameInterpolation,
+				backgroundColor,
+				mode,
+				animationId,
+				themeId,
+				stateMachineId,
+				stateMachineConfig
+			}))
+		);
+
+		dotLottie = instance;
+		untrack(() => dotLottieRefCallback?.(instance));
+
+		return () => {
+			instance.destroy();
+			dotLottie = undefined;
+		};
+	});
+
+	// Hover handler — re-registers listeners whenever playOnHover or dotLottie changes.
+	// Capture the canvas element locally so cleanup detaches listeners from the same
+	// node we attached to, even if `canvas` rebinds later.
+	$effect(() => {
+		const currentPlayOnHover = playOnHover;
+		const currentDotLottie = dotLottie;
+		const currentCanvas = canvas;
+
+		if (!currentCanvas) return;
+
+		const handlePlayOnHover = (event: MouseEvent): void => {
+			if (!currentPlayOnHover || !currentDotLottie?.isLoaded) return;
+			if (event.type === 'mouseenter') {
+				currentDotLottie.play();
+			} else if (event.type === 'mouseleave') {
+				currentDotLottie.pause();
+			}
+		};
+
+		currentCanvas.addEventListener('mouseenter', handlePlayOnHover);
+		currentCanvas.addEventListener('mouseleave', handlePlayOnHover);
+
+		return () => {
+			currentCanvas.removeEventListener('mouseenter', handlePlayOnHover);
+			currentCanvas.removeEventListener('mouseleave', handlePlayOnHover);
+		};
+	});
+
+	$effect(() => {
+		if (dotLottie && typeof layout === 'object') {
+			dotLottie.setLayout(layout);
+		}
+	});
+
+	$effect(() => {
+		if (dotLottie && typeof marker === 'string') {
+			dotLottie.setMarker(marker);
+		}
+	});
+
+	$effect(() => {
+		const currentSpeed = speed;
+		if (dotLottie && typeof currentSpeed === 'number') {
+			dotLottie.setSpeed(currentSpeed);
+		}
+	});
+
+	$effect(() => {
+		const currentUseFrameInterpolation = useFrameInterpolation;
+		if (dotLottie && typeof currentUseFrameInterpolation === 'boolean') {
+			dotLottie.setUseFrameInterpolation(currentUseFrameInterpolation);
+		}
+	});
+
+	$effect(() => {
+		const currentSegment = segment;
+		if (
+			dotLottie &&
+			Array.isArray(currentSegment) &&
+			currentSegment.length === 2 &&
+			typeof currentSegment[0] === 'number' &&
+			typeof currentSegment[1] === 'number'
+		) {
+			const [start, end] = currentSegment;
+			dotLottie.setSegment(start, end);
+		}
+	});
+
+	$effect(() => {
+		const currentLoop = loop;
+		if (dotLottie && typeof currentLoop === 'boolean') {
+			dotLottie.setLoop(currentLoop);
+		}
+	});
+
+	$effect(() => {
+		if (dotLottie) {
+			dotLottie.setBackgroundColor(backgroundColor || '');
+		}
+	});
+
+	$effect(() => {
+		const currentMode = mode;
+		if (dotLottie && typeof currentMode === 'string') {
+			dotLottie.setMode(currentMode);
+		}
+	});
+
+	$effect(() => {
+		if (dotLottie) {
+			dotLottie.setRenderConfig(renderConfig ?? {});
+		}
+	});
+
+	$effect(() => {
+		if (dotLottie && typeof src === 'string' && src !== prevSrc) {
+			prevSrc = src;
+			dotLottie.load({
+				src,
+				...untrack(() => ({
+					autoplay,
+					loop,
+					speed,
+					data,
+					renderConfig,
+					segment,
+					useFrameInterpolation,
+					backgroundColor,
+					mode,
+					marker,
+					layout,
+					animationId,
+					themeId,
+					stateMachineId,
+					stateMachineConfig
+				}))
+			});
+		}
+	});
+
+	$effect(() => {
+		if (
+			dotLottie &&
+			(typeof data === 'string' || typeof data === 'object') &&
+			data !== undefined &&
+			data !== prevData
+		) {
+			prevData = data;
+			dotLottie.load({
+				data,
+				...untrack(() => ({
+					src,
+					autoplay,
+					loop,
+					speed,
+					renderConfig,
+					segment,
+					useFrameInterpolation,
+					backgroundColor,
+					mode,
+					marker,
+					layout,
+					animationId,
+					themeId,
+					stateMachineId,
+					stateMachineConfig
+				}))
+			});
+		}
+	});
+
+	$effect(() => {
+		const currentAnimationId = animationId;
+		if (dotLottie) {
+			dotLottie.loadAnimation(currentAnimationId);
+		}
+	});
+
+	$effect(() => {
+		const currentThemeId = themeId;
+		if (dotLottie) {
+			dotLottie.setTheme(currentThemeId);
+		}
+	});
+
+	$effect(() => {
+		const currentThemeData = themeData;
+		if (dotLottie) {
+			dotLottie.setThemeData(currentThemeData);
+		}
+	});
+
+	$effect(() => {
+		const currentStateMachineId = stateMachineId;
+		if (dotLottie && dotLottie.isLoaded) {
+			if (typeof currentStateMachineId === 'string' && currentStateMachineId) {
+				const smLoaded = dotLottie.stateMachineLoad(currentStateMachineId);
+				if (smLoaded) {
+					dotLottie.stateMachineStart();
+				}
+			} else {
+				dotLottie.stateMachineStop();
+			}
+		}
+	});
+
+	$effect(() => {
+		if (dotLottie) {
+			dotLottie.stateMachineSetConfig(stateMachineConfig ?? null);
+		}
+	});
 </script>
 
 <div>

package/dist/Dotlottie.svelte.d.ts

@@ -1,42 +1,25 @@
 import { type Config, DotLottie } from '@lottiefiles/dotlottie-web';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Dotlottie: $$__sveltets_2_IsomorphicComponent<{
-    setWasmUrl?: (url: string) => void;
-    autoplay?: Config["autoplay"];
-    backgroundColor?: Config["backgroundColor"];
-    data?: Config["data"];
-    loop?: Config["loop"];
-    mode?: Config["mode"];
-    renderConfig?: Config["renderConfig"];
-    segment?: Config["segment"];
-    speed?: Config["speed"];
-    src?: Config["src"];
-    useFrameInterpolation?: Config["useFrameInterpolation"];
-    marker?: Config["marker"];
-    layout?: Config["layout"];
-    animationId?: Config["animationId"];
-    themeId?: Config["themeId"];
-    stateMachineId?: Config["stateMachineId"];
-    stateMachineConfig?: Config["stateMachineConfig"];
+interface DotLottieSvelteProps {
+    autoplay?: Config['autoplay'];
+    backgroundColor?: Config['backgroundColor'];
+    data?: Config['data'];
+    loop?: Config['loop'];
+    mode?: Config['mode'];
+    renderConfig?: Config['renderConfig'];
+    segment?: Config['segment'];
+    speed?: Config['speed'];
+    src?: Config['src'];
+    useFrameInterpolation?: Config['useFrameInterpolation'];
+    marker?: Config['marker'];
+    layout?: Config['layout'];
+    animationId?: Config['animationId'];
+    themeId?: Config['themeId'];
+    stateMachineId?: Config['stateMachineId'];
+    stateMachineConfig?: Config['stateMachineConfig'];
     playOnHover?: boolean;
     themeData?: string;
     dotLottieRefCallback?: (dotLottie: DotLottie) => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    setWasmUrl: (url: string) => void;
-}, string>;
-type Dotlottie = InstanceType<typeof Dotlottie>;
+}
+declare const Dotlottie: import("svelte").Component<DotLottieSvelteProps, {}, "">;
+type Dotlottie = ReturnType<typeof Dotlottie>;
 export default Dotlottie;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lottiefiles/dotlottie-svelte",
-  "version": "0.9.12",
+  "version": "0.10.0",
   "type": "module",
   "description": "Svelte component wrapper around the dotlottie-web library to render Lottie and dotLottie animations",
   "repository": {
@@ -32,23 +32,29 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0"
+    "svelte": "^5.0.0"
   },
   "dependencies": {
-    "@lottiefiles/dotlottie-web": "0.71.0"
+    "@lottiefiles/dotlottie-web": "0.72.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "publint": "^0.1.9",
-    "svelte": "^5.0.0",
-    "svelte-check": "^3.6.0",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.58.0",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^25.6.0",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-istanbul": "^4.0.18",
+    "publint": "^0.3.17",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.6",
     "tslib": "^2.4.1",
-    "typescript": "5.9.3",
-    "vite": "^5.0.13",
-    "vitest": "^4.0.18"
+    "typescript": "6.0.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18",
+    "vitest-browser-svelte": "^2.0.2"
   },
   "sideEffects": false,
   "publishConfig": {
@@ -65,6 +71,9 @@
     "lint": "biome check .",
     "format": "biome check --write .",
     "stats:ts": "tsc -p tsconfig.build.json --extendedDiagnostics",
+    "test": "vitest run --browser.headless",
+    "test:coverage": "vitest run --browser.headless --coverage",
+    "test:watch": "vitest",
     "type-check": "tsc --noEmit"
   }
 }