chore: update dotlottie-rs wasm bindings and prevent unnecessary mult…

…iple WASM module fetches (#412)
LottieFiles · Nov 26, 2024 · 4be7253 · 4be7253
1 parent 66f7ef4
commit 4be7253
Show file tree

Hide file tree

Showing 9 changed files with 1,593 additions and 3,709 deletions.
diff --git a/.changeset/kind-ways-reply.md b/.changeset/kind-ways-reply.md
@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': patch
+---
+
+fix: incorrect default device pixel ratio for `DotLottieWorker`
diff --git a/.changeset/nine-dancers-deny.md b/.changeset/nine-dancers-deny.md
@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': patch
+---
+
+fix: prevent unnecessary multiple WASM module fetches in `DotLottieWorker`
diff --git a/.changeset/pink-horses-compete.md b/.changeset/pink-horses-compete.md
@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': minor
+---
+
+chore: update dotlottie-rs WASM bindings to use ThorVG v0.15.5 and fix minor memory leaks.
diff --git a/packages/web/src/core/dotlottie-player.wasm b/packages/web/src/core/dotlottie-player.wasm
diff --git a/packages/web/src/core/dotlottie-wasm-loader.ts b/packages/web/src/core/dotlottie-wasm-loader.ts
@@ -62,6 +62,8 @@ export class DotLottieWasmLoader {
    * @param string -  The new URL for the WASM file.
    */
   public static setWasmUrl(url: string): void {
+    if (url === this._wasmURL) return;
+
     this._wasmURL = url;
     // Invalidate current module promise
     this._ModulePromise = null;

diff --git a/packages/web/src/worker/dotlottie.ts b/packages/web/src/worker/dotlottie.ts
@@ -10,14 +10,17 @@ import { getDefaultDPR, isElementInViewport } from '../utils';
 import type { MethodParamsMap, MethodResultMap, RpcRequest, RpcResponse } from './types';
 import { WorkerManager } from './worker-manager';
 
-function getCanvasSize(canvas: HTMLCanvasElement | OffscreenCanvas): { height: number; width: number } {
+function getCanvasSize(
+  canvas: HTMLCanvasElement | OffscreenCanvas,
+  devicePixelRatio: number,
+): { height: number; width: number } {
   if (canvas instanceof OffscreenCanvas) {
     return { width: canvas.width, height: canvas.height };
   }
 
   const { height, width } = canvas.getBoundingClientRect();
 
-  return { width: width * window.devicePixelRatio, height: height * window.devicePixelRatio };
+  return { width: width * devicePixelRatio, height: height * devicePixelRatio };
 }
 
 function generateUniqueId(): string {
@@ -250,7 +253,7 @@ export class DotLottieWorker {
           // @ts-ignore
           canvas: offscreen,
         },
-        ...getCanvasSize(this._canvas),
+        ...getCanvasSize(this._canvas, config.renderConfig?.devicePixelRatio || getDefaultDPR()),
       },
       [offscreen],
     );
@@ -495,7 +498,10 @@ export class DotLottieWorker {
   public async resize(): Promise<void> {
     if (!this._created) return;
 
-    const { height, width } = getCanvasSize(this._canvas);
+    const { height, width } = getCanvasSize(
+      this._canvas,
+      this._dotLottieInstanceState.renderConfig.devicePixelRatio || getDefaultDPR(),
+    );
 
     await this._sendMessage('resize', { height, instanceId: this._id, width });
     await this._updateDotLottieInstanceState();