@lottiefiles/dotlottie-solid/dist/index.js

Solid wrapper around the dotlottie-web library

import { className, createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
import { createEffect, createSignal, on, onCleanup, splitProps } from "solid-js";
import { DotLottie } from "@lottiefiles/dotlottie-web";

//#region src/use-dotlottie.tsx
var _tmpl$ = /* @__PURE__ */ template(`<div><canvas style=width:100%;height:100%>`);
function DotLottieComponent({ children, class: className$1, setCanvasRef, setContainerRef, style, ...rest }) {
	const containerStyle = {
		width: "100%",
		height: "100%",
		...style
	};
	return (() => {
		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
		var _ref$ = setContainerRef;
		typeof _ref$ === "function" ? use(_ref$, _el$) : setContainerRef = _el$;
		className(_el$, className$1);
		spread(_el$, { style: containerStyle }, false, true);
		var _ref$2 = setCanvasRef;
		typeof _ref$2 === "function" ? use(_ref$2, _el$2) : setCanvasRef = _el$2;
		spread(_el$2, rest, false, true);
		insert(_el$2, children);
		return _el$;
	})();
}
const useDotLottie = (config) => {
	const [dotLottie, setDotLottie] = createSignal(null);
	let canvasRef = null;
	let containerRef = null;
	const hoverHandler = (event) => {
		const dotLottieInstance = dotLottie();
		if (!config.playOnHover || !dotLottieInstance) return;
		if (event.type === "mouseenter") dotLottieInstance.play();
		else if (event.type === "mouseleave") dotLottieInstance.pause();
	};
	const setCanvasRef = (canvas) => {
		if (canvas) {
			setDotLottie(new DotLottie({
				...config,
				canvas
			}));
			canvas.addEventListener("mouseenter", hoverHandler);
			canvas.addEventListener("mouseleave", hoverHandler);
		} else dotLottie()?.destroy();
		canvasRef = canvas;
	};
	const setContainerRef = (el) => {
		containerRef = el;
	};
	const Component = (props) => {
		return createComponent(DotLottieComponent, mergeProps({
			setContainerRef,
			setCanvasRef
		}, props));
	};
	onCleanup(() => {
		dotLottie()?.destroy();
		setDotLottie(null);
		if (canvasRef) {
			canvasRef.removeEventListener("mouseenter", hoverHandler);
			canvasRef.removeEventListener("mouseleave", hoverHandler);
		}
	});
	createEffect(() => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (typeof config.speed === "number" && config.speed !== dotLottieInstance.speed && dotLottieInstance.isLoaded) dotLottieInstance.setSpeed(config.speed);
	});
	createEffect(() => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (typeof config.mode === "string" && config.mode !== dotLottieInstance.mode && dotLottieInstance.isLoaded) dotLottieInstance.setMode(config.mode);
	});
	createEffect(() => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (typeof config.loop === "boolean" && config.loop !== dotLottieInstance.loop && dotLottieInstance.isLoaded) dotLottieInstance.setLoop(config.loop);
	});
	createEffect(() => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (typeof config.useFrameInterpolation === "boolean" && config.useFrameInterpolation !== dotLottieInstance.useFrameInterpolation && dotLottieInstance.isLoaded) dotLottieInstance.setUseFrameInterpolation(config.useFrameInterpolation);
	});
	createEffect(() => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (typeof config.segment === "object" && Array.isArray(config.segment) && dotLottieInstance.isLoaded) {
			const startFrame = config.segment[0];
			const endFrame = config.segment[1];
			dotLottieInstance.setSegment(startFrame, endFrame);
		}
	});
	createEffect(() => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (typeof config.backgroundColor === "string" && config.backgroundColor !== dotLottieInstance.backgroundColor && dotLottieInstance.isLoaded) dotLottieInstance.setBackgroundColor(config.backgroundColor);
	});
	createEffect(() => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (typeof config.renderConfig === "object") dotLottieInstance.setRenderConfig(config.renderConfig);
	});
	createEffect(on(() => config.data, () => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (typeof config.data === "string") dotLottieInstance.load({
			data: config.data,
			...config
		});
	}));
	createEffect(on(() => config.src, () => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (typeof config.src === "string") dotLottieInstance.load({
			src: config.src,
			...config
		});
	}));
	createEffect(() => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (typeof config.marker === "string") dotLottieInstance.setMarker(config.marker);
	});
	createEffect(on(() => config.animationId, () => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (dotLottieInstance.isLoaded && config.animationId && dotLottieInstance.activeAnimationId !== config.animationId) dotLottieInstance.loadAnimation(config.animationId);
	}));
	createEffect(on(() => config.themeId, () => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (dotLottieInstance.isLoaded && dotLottieInstance.activeThemeId !== config.themeId) dotLottieInstance.setTheme(config.themeId || "");
	}));
	createEffect(on(() => config.themeData, () => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (dotLottieInstance.isLoaded) dotLottieInstance.setThemeData(config.themeData || "");
	}));
	createEffect(on(() => config.stateMachineId, () => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		if (dotLottieInstance.isLoaded) if (typeof config.stateMachineId === "string" && config.stateMachineId.length > 0) {
			if (dotLottieInstance.stateMachineLoad(config.stateMachineId)) dotLottieInstance.stateMachineStart();
		} else dotLottieInstance.stateMachineStop();
	}));
	createEffect(on(() => config.stateMachineConfig, () => {
		const dotLottieInstance = dotLottie();
		if (!dotLottieInstance) return;
		dotLottieInstance.stateMachineSetConfig(config.stateMachineConfig ?? null);
	}));
	return {
		dotLottie,
		setCanvasRef,
		setContainerRef,
		canvas: canvasRef,
		container: containerRef,
		DotLottieComponent: Component
	};
};
const setWasmUrl = (url) => {
	DotLottie.setWasmUrl(url);
};

//#endregion
//#region src/dotlottie.tsx
const DotLottieSolid = (props) => {
	const [dotLottieProps, restProps] = splitProps(props, [
		"src",
		"data",
		"mode",
		"loop",
		"speed",
		"marker",
		"segment",
		"themeId",
		"autoplay",
		"themeData",
		"playOnHover",
		"animationId",
		"renderConfig",
		"dotLottieRefCallback",
		"useFrameInterpolation",
		"stateMachineId",
		"stateMachineConfig"
	]);
	const { DotLottieComponent, dotLottie } = useDotLottie(dotLottieProps);
	createEffect(() => {
		if (typeof dotLottieProps.dotLottieRefCallback === "function" && dotLottie()) dotLottieProps.dotLottieRefCallback(dotLottie());
	});
	return createComponent(DotLottieComponent, restProps);
};

//#endregion
export { DotLottieSolid, setWasmUrl, useDotLottie };
//# sourceMappingURL=index.js.map