@lottiefiles/dotlottie-svelte 0.5.3 → 0.6.0

package/dist/Dotlottie.svelte

@@ -1,4 +1,4 @@
-<script>import { onMount } from "svelte";
+<script lang="ts">import { onMount } from "svelte";
 import { DotLottie } from "@lottiefiles/dotlottie-web";
 export function setWasmUrl(url) {
   DotLottie.setWasmUrl(url);
@@ -15,15 +15,14 @@ export let src = void 0;
 export let useFrameInterpolation = true;
 export let marker = void 0;
 export let layout = void 0;
-export let playOnHover = false;
 export let animationId = "";
 export let themeId = "";
+export let playOnHover = false;
 export let themeData = "";
 export let dotLottieRefCallback = () => {
 };
 const hoverHandler = (event) => {
-  if (!playOnHover || !dotLottie.isLoaded)
-    return;
+  if (!playOnHover || !dotLottie.isLoaded) return;
   if (event.type === "mouseenter") {
     dotLottie.play();
   } else if (event.type === "mouseleave") {
@@ -47,7 +46,9 @@ onMount(() => {
     segment,
     useFrameInterpolation,
     backgroundColor,
-    mode
+    mode,
+    animationId,
+    themeId
   });
   if (dotLottieRefCallback) {
     dotLottieRefCallback(dotLottie);
@@ -101,54 +102,53 @@ $: {
     dotLottie.setMode(mode);
   }
 }
-$:
-  if (dotLottie && src !== prevSrc) {
-    dotLottie.load({
-      src,
-      autoplay,
-      loop,
-      speed,
-      data,
-      renderConfig,
-      segment,
-      useFrameInterpolation,
-      backgroundColor,
-      mode,
-      marker,
-      layout
-    });
-    prevSrc = src;
-  }
-$:
-  if (dotLottie && data !== prevData) {
-    dotLottie.load({
-      src,
-      autoplay,
-      loop,
-      speed,
-      data,
-      renderConfig,
-      segment,
-      useFrameInterpolation,
-      backgroundColor,
-      mode,
-      marker,
-      layout
-    });
-    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 && src !== prevSrc) {
+  dotLottie.load({
+    src,
+    autoplay,
+    loop,
+    speed,
+    data,
+    renderConfig,
+    segment,
+    useFrameInterpolation,
+    backgroundColor,
+    mode,
+    marker,
+    layout,
+    animationId,
+    themeId
+  });
+  prevSrc = src;
+}
+$: if (dotLottie && data !== prevData) {
+  dotLottie.load({
+    src,
+    autoplay,
+    loop,
+    speed,
+    data,
+    renderConfig,
+    segment,
+    useFrameInterpolation,
+    backgroundColor,
+    mode,
+    marker,
+    layout,
+    animationId,
+    themeId
+  });
+  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);
+}
 </script>
 
 <div>

package/dist/Dotlottie.svelte.d.ts

@@ -1,35 +1,40 @@
-import { SvelteComponent } from "svelte";
 import { DotLottie, type Config } from '@lottiefiles/dotlottie-web';
-declare const __propDef: {
-    props: {
-        setWasmUrl?: ((url: string) => void) | undefined;
-        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'];
-        playOnHover?: boolean | undefined;
-        animationId?: string | undefined;
-        themeId?: string | undefined;
-        themeData?: string | undefined;
-        dotLottieRefCallback?: ((dotLottie: DotLottie) => void) | undefined;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DotlottieProps = typeof __propDef.props;
-export type DotlottieEvents = typeof __propDef.events;
-export type DotlottieSlots = typeof __propDef.slots;
-export default class Dotlottie extends SvelteComponent<DotlottieProps, DotlottieEvents, DotlottieSlots> {
-    get setWasmUrl(): (url: string) => void;
+    z_$$bindings?: Bindings;
 }
-export {};
+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"];
+    playOnHover?: boolean;
+    themeData?: string;
+    dotLottieRefCallback?: (dotLottie: DotLottie) => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    setWasmUrl: (url: string) => void;
+}, string>;
+type Dotlottie = InstanceType<typeof Dotlottie>;
+export default Dotlottie;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lottiefiles/dotlottie-svelte",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "type": "module",
   "description": "Svelte component wrapper around the dotlottie-web library to render Lottie and dotLottie animations",
   "repository": {
@@ -33,7 +33,7 @@
     "svelte": "^4.0.0"
   },
   "dependencies": {
-    "@lottiefiles/dotlottie-web": "0.44.0"
+    "@lottiefiles/dotlottie-web": "0.45.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.0.0",