feat: 🎸 webp support

.changeset/fuzzy-dodos-care.md

@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': minor
+---
+
+feat: 🎸 webp support

apps/dotlottie-web-example/src/main.ts

@@ -14,6 +14,7 @@
 
 app.innerHTML = `
 <div class="grid">
+  <canvas data-src="https://lottie.host/b2d44b82-fd7e-401f-a4fa-77999147c0be/vqNwJryGBp.lottie"></canvas>
   <canvas data-bg-color="green" data-src="https://lottie.host/1cf72a35-6d88-4d9a-9961-f1bb88087f2c/miJIHiyH4Q.lottie"></canvas>
   <canvas data-src="https://lottie.host/647eb023-6040-4b60-a275-e2546994dd7f/zDCfp5lhLe.json"></canvas>
   <canvas data-src="https://lottie.host/a7421582-4733-49e5-9f77-e8d4cd792239/WZQjpo4uZR.lottie"></canvas>
@@ -107,7 +108,7 @@
     // useFrameInterpolation: false,
   });
 
   dotLottie.addEventListener('loadError', console.error);
 
   window.addEventListener('resize', () => {
     dotLottie.resize();
@@ -133,7 +134,7 @@
       // useFrameInterpolation: false,
     });
 
     dotLottie.addEventListener('loadError', console.error);
 
     const playPauseButton = document.getElementById('playPause') as HTMLButtonElement;
     const stopButton = document.getElementById('stop') as HTMLButtonElement;
@@ -267,15 +268,15 @@
     dotLottie.addEventListener('load', (event) => {
       bgColorInput.value = dotLottie.backgroundColor || '#ffffff';
 
       console.log(event);
     });
 
     dotLottie.addEventListener('loadError', (event) => {
       console.log(event);
     });
 
     dotLottie.addEventListener('play', (event) => {
       console.log(event);
       frameSlider.max = dotLottie.totalFrames.toString();
       playPauseButton.innerText = 'Pause';
 
@@ -283,7 +284,7 @@
     });
 
     dotLottie.addEventListener('pause', (event) => {
       console.log(event);
       playPauseButton.innerText = 'Play';
 
       playbackStateSpan.textContent = `⏸ Paused`;
@@ -297,12 +298,12 @@
     });
 
     dotLottie.addEventListener('loop', (event) => {
       console.log(event);
     });
 
     // Handle complete events
     dotLottie.addEventListener('complete', (event) => {
       console.log(event);
 
       playPauseButton.innerText = 'Play';
 
@@ -310,7 +311,7 @@
     });
 
     dotLottie.addEventListener('stop', (event) => {
       console.log(event);
 
       playPauseButton.innerText = 'Play';
 
@@ -318,7 +319,7 @@
     });
 
     dotLottie.addEventListener('destroy', (event) => {
       console.log(event);
     });
 
     dotLottie.addEventListener('freeze', (event) => {

packages/web/package.json

@@ -47,13 +47,13 @@
   },
   "devDependencies": {
     "@types/node": "^20.10.5",
-    "@vitest/browser": "^1.1.0",
-    "@vitest/coverage-istanbul": "^1.1.0",
+    "@vitest/browser": "^1.2.2 ",
+    "@vitest/coverage-istanbul": "^1.2.2",
     "cross-env": "7.0.3",
     "tsup": "8.0.1",
     "typescript": "5.0.4",
-    "vitest": "^1.1.0",
-    "webdriverio": "^8.27.0"
+    "vitest": "^1.2.2",
+    "webdriverio": "^8.32.0"
   },
   "publishConfig": {
     "access": "public"

packages/web/src/core/dotlottie-player.js

@@ -2848,7 +2848,7 @@ var createDotLottiePlayerModule = (() => {
 
     var wasmImports = {
       /** @export */ a: ___assert_fail,
-      /** @export */ i: ___cxa_throw,
+      /** @export */ h: ___cxa_throw,
       /** @export */ r: ___syscall_fcntl64,
       /** @export */ I: ___syscall_getcwd,
       /** @export */ L: ___syscall_ioctl,
@@ -2891,7 +2891,7 @@ var createDotLottiePlayerModule = (() => {
       /** @export */ T: _getentropy,
       /** @export */ m: invoke_ii,
       /** @export */ d: invoke_iii,
-      /** @export */ h: invoke_iiii,
+      /** @export */ i: invoke_iiii,
       /** @export */ q: invoke_iiiiii,
       /** @export */ j: invoke_vi,
       /** @export */ b: invoke_vii,

packages/web/vitest.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
   test: {
     browser: {
       enabled: true,
-      name: 'chrome',
+      name: 'firefox',
     },
     // retry: 1,
     coverage: {