@lottiefiles/dotlottie-svelte 0.0.0

package/LICENSE

@@ -0,0 +1,16 @@
+MIT License
+
+Copyright (c) 2023 LottieFiles.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,210 @@
+# @lottiefiles/dotlottie-svelte
+
+![npm](https://img.shields.io/npm/v/@lottiefiles/dotlottie-svelte)
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40lottiefiles%2Fdotlottie-svelte)
+![npm](https://img.shields.io/npm/dt/%40lottiefiles/dotlottie-svelte)
+![NPM](https://img.shields.io/npm/l/@lottiefiles/dotlottie-svelte)
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/23125742/201124166-c2a0bc2a-018b-463b-b291-944fb767b5c2.png" />
+</p>
+
+> 🚧 **Beta Alert:** We're still refining! The APIs in this package may undergo changes.
+
+## Contents
+
+* [Introduction](#introduction)
+  * [What is dotLottie?](#what-is-dotlottie)
+* [Installation](#installation)
+* [Usage](#usage)
+* [Live Examples](#live-examples)
+* [APIs](#apis)
+  * [Props](#props)
+* [Custom Playback Controls](#custom-playback-controls)
+* [Listening to Events](#listening-to-events)
+* [Development](#development)
+  * [Setup](#setup)
+  * [Dev](#dev)
+  * [Build](#build)
+
+## Introduction
+
+A Svelte component for rendering [Lottie](https://lottiefiles.github.io/lottie-docs/) and [dotLottie](https://dotlottie.io) animations. It acts as a wrapper around the [`dotLottie`](../web/README.md) web player.
+
+### What is dotLottie?
+
+dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of ".lottie".
+
+[Learn more about dotLottie](https://dotlottie.io/).
+
+## Installation
+
+```bash
+npm install @lottiefiles/dotlottie-svelte
+```
+
+## Usage
+
+```svelte
+<script lang="ts">
+import { DotLottieSvelte } from '@lottiefiles/dotlottie-svelte';
+</script>
+
+<DotLottieSvelte
+  src="path/to/animation.lottie"
+  loop
+  autoplay
+/>
+```
+
+## Live Examples
+
+## APIs
+
+### Props
+
+| Property name           | Type                                                    | Required | Default   | Description                                                                                                                                                                                                                                        |   |
+| ----------------------- | ------------------------------------------------------- | :------: | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - |
+| `autoplay`              | boolean                                                 |          | false     | Auto-starts the animation on load.                                                                                                                                                                                                                 |   |
+| `loop`                  | boolean                                                 |          | false     | Determines if the animation should loop.                                                                                                                                                                                                           |   |
+| `src`                   | string                                                  |          | undefined | URL to the animation data (`.json` or `.lottie`).                                                                                                                                                                                                  |   |
+| `speed`                 | number                                                  |          | 1         | Animation playback speed. 1 is regular speed.                                                                                                                                                                                                      |   |
+| `data`                  | string \| ArrayBuffer                                   |          | undefined | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations.                                                                                                                                                |   |
+| `mode`                  | string                                                  |          | "forward" | Animation play mode. Accepts "forward", "reverse", "bounce", "reverse-bounce".                                                                                                                                                                     |   |
+| `backgroundColor`       | string                                                  |          | undefined | Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF"),                                                                                                                                        |   |
+| `segments`              | \[number, number]                                       |          | undefined | Animation segments. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame.                                                                                                             |   |
+| `renderConfig`          | RenderConfig                                            |          | undefined | Configuration for rendering the animation.                                                                                                                                                                                                         |   |
+| `dotLottieRefCallback`  | (dotLottie: [DotLottie](../web/README.md#apis)) => void |          | undefined | Callback function that receives a reference to the [`dotLottie`](../web/README.md) web player instance once instantiated.                                                                                                                          |   |
+| `useFrameInterpolation` | boolean                                                 |          | true      | Determines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained. If set to true, it will refresh at each requestAnimationFrame, including intermediate values. The default setting is true. |   |
+| `autoResizeCanvas`      | boolean                                                 |          | true      | Determines if the canvas should resize automatically to its container                                                                                                                                                                              |   |
+
+#### RenderConfig
+
+The `renderConfig` object accepts the following properties:
+
+| Property name      | Type   | Required | Default                       | Description             |
+| ------------------ | ------ | :------: | ----------------------------- | ----------------------- |
+| `devicePixelRatio` | number |          | window\.devicePixelRatio \| 1 | The device pixel ratio. |
+
+## Custom Playback Controls
+
+`DotLottieSvelte` component makes it easy to build custom playback controls for the animation. It exposes a `dotLottieRefCallback` prop that can be used to get a reference to the [`dotLottie`](../web/README.md#apis) web player instance. This instance can be used to control the playback of the animation using the methods exposed by the [`dotLottie`](../web/README.md#methods) web player instance.
+
+Here is an example:
+
+```svelte
+<script lang="ts">
+  import { DotLottieSvelte } from '@lottiefiles/dotlottie-svelte';
+  import type { DotLottie } from '@lottiefiles/dotlottie-svelte';
+  
+  let dotLottie: DotLottie | null = null;
+
+  function play() {
+    dotLottie?.play();
+  }
+
+  function pause() {
+    dotLottie?.pause();
+  }
+
+  function stop() {
+    dotLottie?.stop();
+  }
+</script>
+
+<DotLottieSvelte
+  src="path/to/your/animation.lottie"
+  loop={true}
+  autoplay={true}
+  dotLottieRefCallback={(ref) => dotLottie = ref}
+/>
+
+<button on:click={play}>Play</button>
+<button on:click={pause}>Pause</button>
+<button on:click={stop}>Stop</button>
+```
+
+You can find the list of methods that can be used to control the playback of the animation [here](../web/README.md#methods).
+
+## Listening to Events
+
+`DotLottieSvelte` component can receive a `dotLottieRefCallback` prop that can be used to get a reference to the [`dotLottie`](../web/README.md#apis) web player instance. This reference can be used to listen to player events emitted by the [`dotLottie`](../web/README.md#events) web instance.
+
+Here is an example:
+
+```svelte
+<script lang="ts">
+    import { DotLottieSvelte } from '@lottiefiles/dotlottie-svelte';
+    import type { DotLottie } from '@lottiefiles/dotlottie-svelte';
+
+    let dotLottie: DotLottie | null = null;
+
+    function onLoaded() {
+        console.log("Animation loaded");
+    }
+
+    function onPlay() {
+        console.log("Animation started");
+    }
+
+    function onPause() {
+        console.log("Animation paused");
+    }
+
+    function onComplete() {
+        console.log("Animation completed");
+    }
+    
+    function setupListeners(dotLottieInstance) {
+        dotLottieInstance.addEventListener('load', onLoaded);
+        dotLottieInstance.addEventListener('play', onPlay);
+        dotLottieInstance.addEventListener('pause', onPause);
+        dotLottieInstance.addEventListener('complete', onComplete);
+    }
+
+    function removeListeners(dotLottieInstance) {
+        dotLottieInstance.removeEventListener('load', onLoaded);
+        dotLottieInstance.removeEventListener('play', onPlay);
+        dotLottieInstance.removeEventListener('pause', onPause);
+        dotLottieInstance.removeEventListener('complete', onComplete);
+    }
+
+     onDestroy(() => {
+        if (dotLottie) {
+            removeListeners(dotLottie);
+        }
+    });
+</script>
+
+<DotLottieSvelte
+    src="path/to/your/animation.lottie"
+    loop={true}
+    autoplay={true}
+    dotLottieRefCallback={(ref) => {
+        dotLottie = ref;
+        setupListeners(dotLottie);
+    }}
+/>
+```
+
+[dotLottie](../web/README.md#apis) instance exposes multiple events that can be listened to. You can find the list of events [here](../web/README.md#events).
+
+## Development
+
+### Setup
+
+```bash
+pnpm install
+```
+
+### Dev
+
+```bash
+pnpm dev
+```
+
+### Build
+
+```bash
+pnpm build
+```

package/dist/Dotlottie.svelte

@@ -0,0 +1,141 @@
+<script>import { onMount } from "svelte";
+import debounce from "debounce";
+import { DotLottie } from "@lottiefiles/dotlottie-web";
+export let autoplay = false;
+export let backgroundColor = void 0;
+export let data = void 0;
+export let loop = false;
+export let mode = "forward";
+export let renderConfig = void 0;
+export let segments = void 0;
+export let speed = 1;
+export let src = void 0;
+export let useFrameInterpolation = true;
+export let autoResizeCanvas = false;
+export let dotLottieRefCallback = () => {
+};
+let dotLottie;
+let canvas;
+let prevSrc = void 0;
+let prevData = void 0;
+onMount(() => {
+  dotLottie = new DotLottie({
+    canvas,
+    src,
+    autoplay,
+    loop,
+    speed,
+    data,
+    renderConfig,
+    segments,
+    useFrameInterpolation,
+    backgroundColor,
+    mode
+  });
+  if (dotLottieRefCallback) {
+    dotLottieRefCallback(dotLottie);
+  }
+  const resizeObserver = new ResizeObserver(debounce(() => {
+    if (autoResizeCanvas) {
+      dotLottie.resize();
+    }
+  }, 150));
+  const intersectionObserver = new IntersectionObserver(debounce((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        dotLottie.unfreeze();
+      } else {
+        dotLottie.freeze();
+      }
+    });
+  }, 150), { threshold: 0 });
+  if (autoResizeCanvas) {
+    resizeObserver.observe(canvas);
+  }
+  intersectionObserver.observe(canvas);
+  return () => {
+    resizeObserver.disconnect();
+    intersectionObserver.disconnect();
+    dotLottie.destroy();
+  };
+});
+$: {
+  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(segments) && segments.length === 2 && typeof segments[0] === "number" && typeof segments[1] === "number") {
+    let [start, end] = segments;
+    dotLottie.setSegments(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,
+      segments,
+      useFrameInterpolation,
+      backgroundColor,
+      mode
+    });
+    prevSrc = src;
+  }
+$:
+  if (dotLottie && data !== prevData) {
+    dotLottie.load({
+      src,
+      autoplay,
+      loop,
+      speed,
+      data,
+      renderConfig,
+      segments,
+      useFrameInterpolation,
+      backgroundColor,
+      mode
+    });
+    prevData = data;
+  }
+</script>
+
+<div>
+	<canvas bind:this={canvas}></canvas>
+</div>
+
+<style>
+	div {
+		width: 100%;
+		height: 100%;
+	}
+	canvas {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+</style>

package/dist/Dotlottie.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import { DotLottie, type Config } from '@lottiefiles/dotlottie-web';
+declare const __propDef: {
+    props: {
+        autoplay?: Config['autoplay'];
+        backgroundColor?: Config['backgroundColor'];
+        data?: Config['data'];
+        loop?: Config['loop'];
+        mode?: Config['mode'];
+        renderConfig?: Config['renderConfig'];
+        segments?: Config['segments'];
+        speed?: Config['speed'];
+        src?: Config['src'];
+        useFrameInterpolation?: Config['useFrameInterpolation'];
+        autoResizeCanvas?: boolean | undefined;
+        dotLottieRefCallback?: ((dotLottie: DotLottie) => void) | undefined;
+    };
+    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> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export type * from '@lottiefiles/dotlottie-web';
+export { default as DotLottieSvelte } from './Dotlottie.svelte';

package/dist/index.js

@@ -0,0 +1 @@
+export { default as DotLottieSvelte } from './Dotlottie.svelte';

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@lottiefiles/dotlottie-svelte",
+  "version": "0.0.0",
+  "type": "module",
+  "description": "Svelte component wrapper around the dotlottie-web library to render Lottie and dotLottie animations",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LottieFiles/dotlottie-web.git",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://github.com/LottieFiles/dotlottie-web#readme",
+  "bugs": "https://github.com/LottieFiles/dotlottie-web/issues",
+  "author": "LottieFiles",
+  "contributors": [
+    "Abdelrahman Ashraf <a.theashraf@gmail.com>"
+  ],
+  "maintainers": [
+    "Abdelrahman Ashraf <a.theashraf@gmail.com>"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "dependencies": {
+    "debounce": "^2.0.0",
+    "@lottiefiles/dotlottie-web": "0.15.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/eslint": "8.56.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.36.0-next.4",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^3.1.2",
+    "publint": "^0.1.9",
+    "svelte": "^5.0.0-next.1",
+    "svelte-check": "^3.6.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.3",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
+    "stats:eslint": "cross-env TIMING=1 eslint .",
+    "stats:ts": "tsc -p tsconfig.build.json --extendedDiagnostics",
+    "type-check": "tsc --noEmit"
+  }
+}