chore: update WASM player references and types for consistency

.size-limit.cjs

@@ -5,7 +5,35 @@ module.exports = [
     import: '{ DotLottie }',
   },
   {
-    name: '@lottiefiles/dotlottie-web WASM',
+    name: '@lottiefiles/dotlottie-web/webgpu',
+    path: 'packages/web/dist/webgpu/index.js',
+    import: '{ DotLottie }',
+  },
+  {
+    name: '@lottiefiles/dotlottie-web/webgl',
+    path: 'packages/web/dist/webgl/index.js',
+    import: '{ DotLottie }',
+  },
+  {
+    name: '@lottiefiles/dotlottie-web WASM (WebGL)',
+    path: 'packages/web/dist/webgl/*.wasm',
+    modifyWebpackConfig: (config) => {
+      config.experiments = {
+        asyncWebAssembly: true,
+      };
+    },
+  },
+  {
+    name: '@lottiefiles/dotlottie-web WASM (WebGPU)',
+    path: 'packages/web/dist/webgpu/*.wasm',
+    modifyWebpackConfig: (config) => {
+      config.experiments = {
+        asyncWebAssembly: true,
+      };
+    },
+  },
+  {
+    name: '@lottiefiles/dotlottie-web WASM (Software)',
     path: 'packages/web/dist/*.wasm',
     modifyWebpackConfig: (config) => {
       config.experiments = {

apps/dotlottie-react-example/src/App.tsx

@@ -10,7 +10,7 @@ const animations = [
   './dragon.json',
 ];
 
-setWasmUrl(new URL('../../../packages/web/src/core/dotlottie-player.wasm', import.meta.url).href);
+setWasmUrl(new URL('../../../packages/web/src/software/wasm/dotlottie-player.wasm', import.meta.url).href);
 
 function App() {
   const [dotLottie, setDotLottie] = useState<DotLottieWorker | null>(null);

apps/dotlottie-solid-example/src/App.tsx

@@ -2,7 +2,7 @@ import { type DotLottie, DotLottieSolid, setWasmUrl } from '@lottiefiles/dotlott
 import type { Component } from 'solid-js';
 import { createEffect, createSignal, onCleanup } from 'solid-js';
 
-import wasmUrl from '../../../packages/web/src/core/dotlottie-player.wasm?url';
+import wasmUrl from '../../../packages/web/src/software/wasm/dotlottie-player.wasm?url';
 
 const animations = [
   'https://lottie.host/b06d1336-2c08-4156-aa6f-96f08ff511e0/4itF1pXb1i.lottie',

apps/dotlottie-viewer/src/components/players.tsx

@@ -9,7 +9,7 @@ import {
 } from '@lottiefiles/dotlottie-react';
 import dotLottieWebPkg from '@lottiefiles/dotlottie-react/node_modules/@lottiefiles/dotlottie-web/package.json';
 import { Range, getTrackBackground } from 'react-range';
-import dotLottieWasmUrl from '../../../../packages/web/src/core/dotlottie-player.wasm?url';
+import dotLottieWasmUrl from '../../../../packages/web/src/software/wasm/dotlottie-player.wasm?url';
 import {
   setActiveAnimationId,
   setAnimations,

apps/dotlottie-viewer/src/pages/perf.tsx

@@ -6,7 +6,7 @@ import { isMobile } from 'react-device-detect';
 import { setCanvasKit, Skottie as SkottiePlayer } from '../components/skottie';
 import skottieWasmUrl from '../../node_modules/canvaskit-wasm/bin/full/canvaskit.wasm?url';
 import InitCanvasKit from 'canvaskit-wasm/bin/full/canvaskit';
-import dotLottieWasmUrl from '../../../../packages/web/src/core/dotlottie-player.wasm?url';
+import dotLottieWasmUrl from '../../../../packages/web/src/software/wasm/dotlottie-player.wasm?url';
 
 setDotLottieWasmUrl(window.location.origin + dotLottieWasmUrl);
 
@@ -325,9 +325,6 @@ export const Perf = (): JSX.Element => {
                   loop
                   autoplay
                   useFrameInterpolation={useFrameInterpolation}
-                  renderConfig={{
-                    renderer: 'wg',
-                  }}
                 />
               )}
               {player.id === 2 && (
@@ -337,9 +334,6 @@ export const Perf = (): JSX.Element => {
                   loop
                   autoplay
                   useFrameInterpolation={useFrameInterpolation}
-                  renderConfig={{
-                    renderer: 'gl',
-                  }}
                 />
               )}
               {player.id === 3 && (

apps/dotlottie-vue-example/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Ref, onMounted, ref } from 'vue';
 import { type DotLottieVueInstance, DotLottieVue, setWasmUrl } from '@lottiefiles/dotlottie-vue';
-import wasmUrl from '../../../packages/web/src/core/dotlottie-player.wasm?url';
+import wasmUrl from '../../../packages/web/src/software/wasm/dotlottie-player.wasm?url';
 
 setWasmUrl(wasmUrl);
 

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

@@ -2,7 +2,7 @@ import { setWasmUrl } from '@lottiefiles/dotlottie-wc';
 import type { DotLottieWC } from '@lottiefiles/dotlottie-wc';
 
 // eslint-disable-next-line node/no-unsupported-features/node-builtins
-setWasmUrl(new URL('../../../packages/web/src/core/dotlottie-player.wasm', import.meta.url).href);
+setWasmUrl(new URL('../../../packages/web/src/software/wasm/dotlottie-player.wasm', import.meta.url).href);
 
 const elementName = 'dotlottie-worker-wc';
 

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

@@ -164,7 +164,6 @@ allCanvas.forEach((canvas) => {
     backgroundColor,
     renderConfig: {
       autoResize: true,
-      renderer: 'gl',
     },
     useFrameInterpolation: false,
   });
@@ -206,9 +205,6 @@ fetch(
       speed: 1,
       backgroundColor: '#800080ff',
       themeId: 'animated_light',
-      renderConfig: {
-        renderer: 'wg',
-      },
       // useFrameInterpolation: false,
     });
 

apps/dotlottie-web-example/tsconfig.json

@@ -3,7 +3,9 @@
   "extends": "../../tsconfig.dev.json",
 
   // Compiler options
-  "compilerOptions": {},
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  },
 
   "include": ["src"]
 }

packages/react/setup-file.ts

@@ -3,6 +3,6 @@ import 'vitest-browser-react';
 import { setWasmUrl } from './src';
 
 // eslint-disable-next-line node/no-unsupported-features/node-builtins
-const wasmUrl = new URL('../web/src/core/dotlottie-player.wasm?url', import.meta.url).href;
+const wasmUrl = new URL('../web/src/software/wasm/dotlottie-player.wasm?url', import.meta.url).href;
 
 setWasmUrl(wasmUrl);

packages/svelte/src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DotLottieSvelte, setWasmUrl } from '../lib/index.js';
 	import type { DotLottie } from '../lib/index.js';
-	import wasmUrl from "../../../web/src/core/dotlottie-player.wasm?url";
+	import wasmUrl from "../../../web/src/software/wasm/dotlottie-player.wasm?url";
 
 	setWasmUrl(wasmUrl);
 

packages/wc/__tests__/dotlottie-wc.spec.ts

@@ -8,7 +8,7 @@ import type { DotLottieWC } from '../src/dotlottie-wc';
 const src = new URL('./__fixtures__/test.lottie', import.meta.url).href;
 const lottieSrc = new URL('./__fixtures__/test.json', import.meta.url).href;
 
-setWasmUrl(new URL('../../web/src/core/dotlottie-player.wasm', import.meta.url).href);
+setWasmUrl(new URL('../../web/src/software/wasm/dotlottie-player.wasm', import.meta.url).href);
 
 const render = <T extends 'dotlottie-wc' | 'dotlottie-worker-wc'>(
   elementName: T,

packages/web/src/common/dotlottie.ts

@@ -71,6 +71,13 @@ const createCoreSegment = (segment: number[], module: MainModule): VectorFloat =
   return coresegment;
 };
 
+// Helper function to safely check if an object is an HTMLCanvasElement
+const isHTMLCanvasElement = (obj: unknown): obj is HTMLCanvasElement => {
+  return typeof HTMLCanvasElement !== 'undefined' && obj instanceof HTMLCanvasElement;
+};
+
+let canvasId = 0;
+
 export class DotLottieCommon {
   private readonly _canvas: HTMLCanvasElement | OffscreenCanvas;
 
@@ -135,9 +142,19 @@ export class DotLottieCommon {
           engine = module.TvgEngine.TvgEngineSw;
         }
 
-        // Get canvas selector for the specific rendering engine
-        // This converts the canvas to a format that the WASM module can accept
-        const canvasSelector = this._canvas instanceof HTMLCanvasElement ? this._canvas.id || '#canvas' : '#canvas';
+        let selector = '';
+
+        if (isHTMLCanvasElement(this._canvas)) {
+          if (this._canvas.id) {
+            selector = `#${this._canvas.id}`;
+          } else if (this._renderer !== 'sw') {
+            if (!this._canvas.getAttribute('data-dl-id')) {
+              this._canvas.setAttribute('data-dl-id', `${canvasId}`);
+              canvasId += 1;
+            }
+            selector = `[data-dl-id="${this._canvas.getAttribute('data-dl-id')}"]`;
+          }
+        }
 
         this._dotLottieCore = new module.DotLottiePlayer(
           {
@@ -159,7 +176,7 @@ export class DotLottieCommon {
           },
           engine,
           0,
-          canvasSelector,
+          selector,
         );
 
         this._eventManager.dispatch({ type: 'ready' });
@@ -175,6 +192,7 @@ export class DotLottieCommon {
         }
       })
       .catch((error: Error) => {
+        console.error('error', error);
         this._eventManager.dispatch({
           type: 'loadError',
           error: new Error(`Failed to load wasm module: ${error}`),
@@ -666,7 +684,7 @@ export class DotLottieCommon {
   public setBackgroundColor(color: string): void {
     if (this._dotLottieCore === null) return;
 
-    if (IS_BROWSER && this._canvas instanceof HTMLCanvasElement) {
+    if (IS_BROWSER && isHTMLCanvasElement(this._canvas)) {
       this._canvas.style.backgroundColor = color;
     } else {
       this._dotLottieCore.setConfig({
@@ -746,7 +764,7 @@ export class DotLottieCommon {
   public resize(): void {
     if (!this._dotLottieCore || !this.isLoaded) return;
 
-    if (IS_BROWSER && this._canvas instanceof HTMLCanvasElement) {
+    if (IS_BROWSER && isHTMLCanvasElement(this._canvas)) {
       const dpr = this._renderConfig.devicePixelRatio || window.devicePixelRatio || 1;
 
       const { height: clientHeight, width: clientWidth } = this._canvas.getBoundingClientRect();
@@ -944,7 +962,11 @@ export class DotLottieCommon {
   }
 
   private _getPointerPosition(event: PointerEvent): { x: number; y: number } {
-    const rect = (this._canvas as HTMLCanvasElement).getBoundingClientRect();
+    if (!isHTMLCanvasElement(this._canvas)) {
+      return { x: 0, y: 0 };
+    }
+
+    const rect = this._canvas.getBoundingClientRect();
     const scaleX = this._canvas.width / rect.width;
     const scaleY = this._canvas.height / rect.height;
 
@@ -1023,7 +1045,7 @@ export class DotLottieCommon {
   }
 
   private _setupStateMachineListeners(): void {
-    if (IS_BROWSER && this._canvas instanceof HTMLCanvasElement && this._dotLottieCore !== null && this.isLoaded) {
+    if (IS_BROWSER && isHTMLCanvasElement(this._canvas) && this._dotLottieCore !== null && this.isLoaded) {
       const listeners = this.getStateMachineListeners();
 
       if (listeners.includes('PointerUp')) {
@@ -1049,7 +1071,7 @@ export class DotLottieCommon {
   }
 
   private _cleanupStateMachineListeners(): void {
-    if (IS_BROWSER && this._canvas instanceof HTMLCanvasElement) {
+    if (IS_BROWSER && isHTMLCanvasElement(this._canvas)) {
       this._canvas.removeEventListener('pointerup', this._pointerUpMethod);
       this._canvas.removeEventListener('pointerdown', this._pointerDownMethod);
       this._canvas.removeEventListener('pointermove', this._pointerMoveMethod);

packages/web/src/software/wasm/dotlottie-player.types.ts

@@ -127,7 +127,7 @@ export interface DotLottiePlayer extends ClassHandle {
 
 export interface Marker {
   duration: number;
-  name: EmbindString;
+  name: string;
   time: number;
 }
 

packages/web/src/webgl/wasm/dotlottie-player.types.ts

@@ -127,7 +127,7 @@ export interface DotLottiePlayer extends ClassHandle {
 
 export interface Marker {
   duration: number;
-  name: EmbindString;
+  name: string;
   time: number;
 }
 

packages/web/src/webgpu/wasm-loader.ts

@@ -16,7 +16,22 @@ export class WasmLoader {
   }
 
   private static async _tryLoad(url: string): Promise<MainModule> {
-    const module = await createDotLottiePlayerModule({ locateFile: () => url });
+    if (typeof navigator === 'undefined' || typeof navigator.gpu === 'undefined') {
+      throw new Error('WebGPU not supported');
+    }
+
+    const adapter = await navigator.gpu.requestAdapter();
+
+    if (!adapter) {
+      throw new Error('WebGPU adapter not found');
+    }
+
+    const device = await adapter.requestDevice();
+
+    const module = await createDotLottiePlayerModule({
+      locateFile: () => url,
+      preinitializedWebGPUDevice: device,
+    });
 
     return module;
   }

packages/web/src/webgpu/wasm/dotlottie-player.types.ts

@@ -127,7 +127,7 @@ export interface DotLottiePlayer extends ClassHandle {
 
 export interface Marker {
   duration: number;
-  name: EmbindString;
+  name: string;
   time: number;
 }