@lottiefiles/dotlottie-web 0.11.0 → 0.11.1

package/README.md

@@ -1,9 +1,10 @@
 # @lottiefiles/dotlottie-web
 
 ![npm](https://img.shields.io/npm/v/@lottiefiles/dotlottie-web)
-![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40lottiefiles%2Fdotlottie-web)
-![npm](https://img.shields.io/npm/dt/%40lottiefiles/dotlottie-web)
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/@lottiefiles/dotlottie-web)
+![npm](https://img.shields.io/npm/dm/@lottiefiles/dotlottie-web)
 ![NPM](https://img.shields.io/npm/l/@lottiefiles/dotlottie-web)
+[![](https://data.jsdelivr.com/v1/package/npm/@lottiefiles/dotlottie-web/badge)](https://www.jsdelivr.com/package/npm/@lottiefiles/dotlottie-web)
 
 <p align="center">
   <img src="https://user-images.githubusercontent.com/23125742/201124166-c2a0bc2a-018b-463b-b291-944fb767b5c2.png" />
@@ -56,7 +57,7 @@ After installation, you can import `DotLottie` in your JavaScript or TypeScript
 
 ```html
 <!-- Canvas element where the animation will be rendered -->
-<canvas id="my-canvas" width="300px" height="300px"></canvas>
+<canvas id="dotlottie-canvas" style="width: 300px; height:300px;"></canvas>
 ```
 
 ```js
@@ -65,7 +66,7 @@ import { DotLottie } from '@lottiefiles/dotlottie-web';
 const dotLottie = new DotLottie({
     autoplay: true,
     loop: true,
-    canvas: document.getElementById('my-canvas'),
+    canvas: document.querySelector('#dotlottie-canvas'),
     src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file
 });
 ```
@@ -87,14 +88,13 @@ const dotLottie = new DotLottie({
     <!-- Canvas element where the Lottie animation will be rendered -->
     <canvas id="canvas" width="300" height="300"></canvas>
     <script type="module">
-      import { DotLottie } from "https://unpkg.com/@lottiefiles/dotlottie-web@latest/dist/index.js";
+      import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";
 
       new DotLottie({
         autoplay: true,
         loop: true,
         canvas: document.getElementById("canvas"),
-        src:
-          "https://lottie.host/5f7f4690-6311-4279-82e4-38c2eab146ab/niPwIBUnGa.json"
+        src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file
       });
     </script>
   </body>

package/dist/constants.d.ts

@@ -1,11 +1,9 @@
 /**
  * Copyright 2023 Design Barn Inc.
  */
-/// <reference lib="webworker" />
 declare const IS_BROWSER: boolean;
 declare const IS_NODE: boolean;
-declare const IS_WEB_WORKER: boolean;
 declare const MS_TO_SEC_FACTOR = 1000;
 declare const DEFAULT_BG_COLOR = "#00000000";
 
-export { DEFAULT_BG_COLOR, IS_BROWSER, IS_NODE, IS_WEB_WORKER, MS_TO_SEC_FACTOR };
+export { DEFAULT_BG_COLOR, IS_BROWSER, IS_NODE, MS_TO_SEC_FACTOR };

package/dist/constants.js

@@ -1,7 +1,6 @@
 const IS_BROWSER = typeof window !== "undefined";
-const IS_NODE = typeof process !== "undefined" && process.release.name === "node";
-const IS_WEB_WORKER = typeof self !== "undefined" && typeof self.postMessage === "function";
+const IS_NODE = typeof process !== "undefined";
 const MS_TO_SEC_FACTOR = 1e3;
 const DEFAULT_BG_COLOR = "#00000000";
 
-export { DEFAULT_BG_COLOR, IS_BROWSER, IS_NODE, IS_WEB_WORKER, MS_TO_SEC_FACTOR };
+export { DEFAULT_BG_COLOR, IS_BROWSER, IS_NODE, MS_TO_SEC_FACTOR };

package/dist/dotlottie.d.ts

@@ -108,6 +108,7 @@ declare class DotLottie {
     private _isLoaded;
     private readonly _animationFrameManager;
     private _useFrameInterpolation;
+    private _imageData;
     constructor(config: Config);
     get canvas(): HTMLCanvasElement | OffscreenCanvas;
     get mode(): Mode;

package/dist/dotlottie.js

@@ -37,12 +37,10 @@ class DotLottie {
     __publicField(this, "_isLoaded", false);
     __publicField(this, "_animationFrameManager", new AnimationFrameManager());
     __publicField(this, "_useFrameInterpolation", true);
+    __publicField(this, "_imageData", null);
     this._animationLoop = this._animationLoop.bind(this);
     this._canvas = config.canvas;
     this._context = this._canvas.getContext("2d");
-    if (!this._context) {
-      throw new Error("2D context not supported or canvas already initialized with another context type.");
-    }
     this._loop = config.loop ?? false;
     this._speed = config.speed ?? 1;
     this._autoplay = config.autoplay ?? false;
@@ -51,6 +49,7 @@ class DotLottie {
     this._backgroundColor = config.backgroundColor ?? DEFAULT_BG_COLOR;
     this._renderConfig = config.renderConfig ?? {};
     this._useFrameInterpolation = config.useFrameInterpolation ?? true;
+    this._direction = this._mode.includes("reverse") ? -1 : 1;
     RendererLoader.load().then((module) => {
       this._renderer = new module.Renderer();
       this.setBackgroundColor(this._backgroundColor);
@@ -266,14 +265,11 @@ class DotLottie {
     this._renderer.resize(width, height);
     if (this._renderer.update()) {
       const buffer = this._renderer.render();
-      if (buffer.length === 0) {
-        console.warn("Empty buffer received from renderer.");
-        return;
+      if (this._imageData?.data.length !== buffer.length) {
+        this._imageData = this._context.createImageData(width, height);
       }
-      const clampedBuffer = new Uint8ClampedArray(buffer);
-      const imageData = this._context.createImageData(width, height);
-      imageData.data.set(clampedBuffer);
-      this._context.putImageData(imageData, 0, 0);
+      this._imageData.data.set(buffer);
+      this._context.putImageData(this._imageData, 0, 0);
     }
   }
   /**

package/dist/wasm/index.d.ts

@@ -9,7 +9,7 @@ interface Renderer {
     error(): string;
     frame(no: number): boolean;
     load(data: string, width: number, height: number): boolean;
-    render(): Uint8Array;
+    render(): Uint8ClampedArray;
     resize(width: number, height: number): void;
     setBgColor(color: number): void;
     size(): Float32Array;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lottiefiles/dotlottie-web",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "type": "module",
   "description": "Lottie and DotLottie player for the web",
   "repository": {
@@ -70,8 +70,8 @@
     "lint": "eslint --fix .",
     "stats:eslint": "cross-env TIMING=1 eslint .",
     "stats:ts": "tsc -p tsconfig.build.json --extendedDiagnostics",
-    "test": "vitest run --browser.headless --retry 2",
-    "test:coverage": "pnpm test -- --coverage",
+    "test": "vitest run --browser.headless",
+    "test:coverage": "vitest run --browser.headless --coverage",
     "test:watch": "vitest",
     "type-check": "tsc --noEmit"
   }