From e4bb7ed488f9a238a762cf7bc564d954b73cd08e Mon Sep 17 00:00:00 2001 From: Vicente Cartas Date: Tue, 12 Aug 2025 10:16:51 -0700 Subject: [PATCH 1/5] Updating index for top level export --- packages/dev/addons/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/dev/addons/src/index.ts b/packages/dev/addons/src/index.ts index c20cbbd2ace..84e8c52a969 100644 --- a/packages/dev/addons/src/index.ts +++ b/packages/dev/addons/src/index.ts @@ -1,3 +1,4 @@ /* eslint-disable @typescript-eslint/no-restricted-imports */ export * from "./htmlMesh/index"; export * from "./msdfText/index"; +export * from "./lottie/index"; From f32f9dadcbf7ec73d83453bb2f73b83db0df4ac8 Mon Sep 17 00:00:00 2001 From: Vicente Cartas Date: Tue, 12 Aug 2025 13:40:34 -0700 Subject: [PATCH 2/5] Using js for worker --- .../dev/addons/src/lottie/lottiePlayer.ts | 2 +- packages/dev/addons/src/lottie/worker.ts | 46 ------------------- 2 files changed, 1 insertion(+), 47 deletions(-) delete mode 100644 packages/dev/addons/src/lottie/worker.ts diff --git a/packages/dev/addons/src/lottie/lottiePlayer.ts b/packages/dev/addons/src/lottie/lottiePlayer.ts index 67ec0aa23b6..1923f0ff918 100644 --- a/packages/dev/addons/src/lottie/lottiePlayer.ts +++ b/packages/dev/addons/src/lottie/lottiePlayer.ts @@ -108,7 +108,7 @@ export class LottiePlayer { const offscreen = this._canvas.transferControlToOffscreen(); - this._worker = new Worker(new URL("./worker.ts", import.meta.url), { type: "module" }); + this._worker = new Worker(new URL("./worker.js", import.meta.url), { type: "module" }); this._worker.onmessage = (evt: MessageEvent) => { if (evt.data.animationWidth && evt.data.animationHeight && this._canvas) { this._canvas.style.width = `${evt.data.animationWidth}px`; diff --git a/packages/dev/addons/src/lottie/worker.ts b/packages/dev/addons/src/lottie/worker.ts deleted file mode 100644 index c29d9d22246..00000000000 --- a/packages/dev/addons/src/lottie/worker.ts +++ /dev/null @@ -1,46 +0,0 @@ -import type { Nullable } from "core/types"; - -import type { AnimationConfiguration } from "./lottiePlayer"; -import { AnimationController } from "./rendering/animationController"; - -let AnimationPlayer: Nullable = null; - -/** - * Default configuration for lottie animations playback. - */ -const DefaultConfiguration = { - loopAnimation: false, // By default do not loop animations - spriteAtlasSize: 2048, // Size of the texture atlas - gapSize: 5, // Gap around the sprites in the atlas - spritesCapacity: 64, // Maximum number of sprites the renderer can handle at once - backgroundColor: { r: 1, g: 1, b: 1, a: 1 }, // Background color for the animation canvas - scaleMultiplier: 5, // Minimum scale factor to prevent too small sprites, - devicePixelRatio: 1, // Scale factor, - easingSteps: 4, // Number of steps to sample easing functions for animations - Less than 4 causes issues with some interpolations - ignoreOpacityAnimations: true, // Whether to ignore opacity animations for performance - supportDeviceLost: false, // Whether to support device lost events for WebGL contexts, -} as const satisfies AnimationConfiguration; - -onmessage = async function (evt) { - if (evt.data.canvas && evt.data.file) { - const canvas = evt.data.canvas as HTMLCanvasElement; - const file = evt.data.file as string; - const originalConfig = evt.data.config as AnimationConfiguration; - const finalConfig: AnimationConfiguration = { - ...DefaultConfiguration, - ...originalConfig, - }; - - const animationData = await (await fetch(file)).text(); - AnimationPlayer = new AnimationController(canvas, animationData, finalConfig); - - postMessage({ - animationWidth: AnimationPlayer.animationWidth, - animationHeight: AnimationPlayer.animationHeight, - }); - - AnimationPlayer.playAnimation(finalConfig.loopAnimation); - } else if (evt.data.width && evt.data.height) { - AnimationPlayer && AnimationPlayer.setSize(evt.data.width, evt.data.height); - } -}; From 68a592092d4d9b75279a24009dff3f275e9914ce Mon Sep 17 00:00:00 2001 From: Vicente Cartas Date: Tue, 12 Aug 2025 13:41:09 -0700 Subject: [PATCH 3/5] Leaving file as .ts --- packages/dev/addons/src/lottie/worker.ts | 46 ++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 packages/dev/addons/src/lottie/worker.ts diff --git a/packages/dev/addons/src/lottie/worker.ts b/packages/dev/addons/src/lottie/worker.ts new file mode 100644 index 00000000000..c29d9d22246 --- /dev/null +++ b/packages/dev/addons/src/lottie/worker.ts @@ -0,0 +1,46 @@ +import type { Nullable } from "core/types"; + +import type { AnimationConfiguration } from "./lottiePlayer"; +import { AnimationController } from "./rendering/animationController"; + +let AnimationPlayer: Nullable = null; + +/** + * Default configuration for lottie animations playback. + */ +const DefaultConfiguration = { + loopAnimation: false, // By default do not loop animations + spriteAtlasSize: 2048, // Size of the texture atlas + gapSize: 5, // Gap around the sprites in the atlas + spritesCapacity: 64, // Maximum number of sprites the renderer can handle at once + backgroundColor: { r: 1, g: 1, b: 1, a: 1 }, // Background color for the animation canvas + scaleMultiplier: 5, // Minimum scale factor to prevent too small sprites, + devicePixelRatio: 1, // Scale factor, + easingSteps: 4, // Number of steps to sample easing functions for animations - Less than 4 causes issues with some interpolations + ignoreOpacityAnimations: true, // Whether to ignore opacity animations for performance + supportDeviceLost: false, // Whether to support device lost events for WebGL contexts, +} as const satisfies AnimationConfiguration; + +onmessage = async function (evt) { + if (evt.data.canvas && evt.data.file) { + const canvas = evt.data.canvas as HTMLCanvasElement; + const file = evt.data.file as string; + const originalConfig = evt.data.config as AnimationConfiguration; + const finalConfig: AnimationConfiguration = { + ...DefaultConfiguration, + ...originalConfig, + }; + + const animationData = await (await fetch(file)).text(); + AnimationPlayer = new AnimationController(canvas, animationData, finalConfig); + + postMessage({ + animationWidth: AnimationPlayer.animationWidth, + animationHeight: AnimationPlayer.animationHeight, + }); + + AnimationPlayer.playAnimation(finalConfig.loopAnimation); + } else if (evt.data.width && evt.data.height) { + AnimationPlayer && AnimationPlayer.setSize(evt.data.width, evt.data.height); + } +}; From a60a474bdb07b64d1eeb0f7f9a6a16f44f6234a9 Mon Sep 17 00:00:00 2001 From: Vicente Cartas Date: Tue, 12 Aug 2025 14:52:09 -0700 Subject: [PATCH 4/5] Back to .ts --- packages/dev/addons/src/lottie/lottiePlayer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dev/addons/src/lottie/lottiePlayer.ts b/packages/dev/addons/src/lottie/lottiePlayer.ts index 1923f0ff918..67ec0aa23b6 100644 --- a/packages/dev/addons/src/lottie/lottiePlayer.ts +++ b/packages/dev/addons/src/lottie/lottiePlayer.ts @@ -108,7 +108,7 @@ export class LottiePlayer { const offscreen = this._canvas.transferControlToOffscreen(); - this._worker = new Worker(new URL("./worker.js", import.meta.url), { type: "module" }); + this._worker = new Worker(new URL("./worker.ts", import.meta.url), { type: "module" }); this._worker.onmessage = (evt: MessageEvent) => { if (evt.data.animationWidth && evt.data.animationHeight && this._canvas) { this._canvas.style.width = `${evt.data.animationWidth}px`; From ac9c50f95232246b46b10acaa5767f3a2eb6cb51 Mon Sep 17 00:00:00 2001 From: Vicente Cartas Date: Tue, 12 Aug 2025 15:59:59 -0700 Subject: [PATCH 5/5] Removing extension --- packages/dev/addons/src/lottie/lottiePlayer.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/dev/addons/src/lottie/lottiePlayer.ts b/packages/dev/addons/src/lottie/lottiePlayer.ts index 67ec0aa23b6..4dae2ddc182 100644 --- a/packages/dev/addons/src/lottie/lottiePlayer.ts +++ b/packages/dev/addons/src/lottie/lottiePlayer.ts @@ -108,7 +108,8 @@ export class LottiePlayer { const offscreen = this._canvas.transferControlToOffscreen(); - this._worker = new Worker(new URL("./worker.ts", import.meta.url), { type: "module" }); + // Use an extensionless path so Webpack resolves to .ts in dev and .js in published output + this._worker = new Worker(new URL("./worker", import.meta.url), { type: "module" }); this._worker.onmessage = (evt: MessageEvent) => { if (evt.data.animationWidth && evt.data.animationHeight && this._canvas) { this._canvas.style.width = `${evt.data.animationWidth}px`;