@aarsteinmedia/dotlottie-player 6.6.3 → 6.6.5

package/CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Changelog was only added since [3.2.3], so it's not exhaustive. [Please report any missing notable changes to us](https://github.com/aarsteinmedia/dotlottie-player/issues), and we'll add them promptly.
 
+## [6.6.5] - 09-10-2026
+
+- Fixed bug with observedProperties, causing some attributes to be less dynamic than intended.
+- Registered side-effects, for better tree-shaking.
+- More efficient caching.
+- More economic handling of ViewTimeline.
+- `snapshot` is now async, and can capture png images in Canvas Renderer.
+- Added vitest.
+
 ## [6.5.7] - 07-10-2026
 
 - Minor performance improvements to animation engine.
@@ -414,6 +423,7 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
 - Removed dependencies
   - `@lit`
 
+[6.5.5]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/6.6.5
 [6.5.7]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/6.5.7
 [6.5.6]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/6.5.6
 [6.5.5]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/6.5.5

package/custom-elements.json

@@ -58,7 +58,7 @@
           ],
           "superclass": {
             "name": "DotLottiePlayerBase",
-            "module": "/dist/chunks/DotLottiePlayerBase-Cjk0_f2y.js"
+            "module": "/dist/chunks/DotLottiePlayerBase-CREYTonO.js"
           },
           "tagName": "tagName",
           "customElement": true

package/dist/canvas.d.ts

@@ -1,5 +1,5 @@
-import { D as DotLottiePlayerCanvas } from './chunks/DotLottiePlayerCanvas.d-Bgw-biRK.js';
-export { a as DotLottiePlayerBase } from './chunks/DotLottiePlayerCanvas.d-Bgw-biRK.js';
+import { D as DotLottiePlayerCanvas } from './chunks/DotLottiePlayerCanvas.d-DRzu-rar.js';
+export { a as DotLottiePlayerBase } from './chunks/DotLottiePlayerCanvas.d-DRzu-rar.js';
 import '@aarsteinmedia/lottie-web';
 import '@aarsteinmedia/lottie-web/utils';
 import './utilities.js';

package/dist/canvas.js

@@ -1,6 +1,6 @@
 import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
 import { loadAnimation } from '@aarsteinmedia/lottie-web/canvas';
-import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase-Cjk0_f2y.js';
+import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase-CREYTonO.js';
 import { t as tagName } from './chunks/utilities-CC4oA5Yh.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
@@ -8,6 +8,9 @@ import '@aarsteinmedia/lottie-web/dotlottie';
  * DotLottie Player Web Component.
  */ class DotLottiePlayerCanvas extends DotLottiePlayerBase {
     get renderer() {
+        if (super.renderer !== RendererType.Canvas) {
+            this.devLog(`[dotlottie-player] renderer "${super.renderer}" is not available in ` + '@aarsteinmedia/dotlottie-player/canvas, falling back to "canvas". Import from ' + '@aarsteinmedia/dotlottie-player to use other renderers.', 'warn');
+        }
         return RendererType.Canvas;
     }
     loadAnimation(config) {

package/dist/chunks/{DotLottiePlayerBase-Cjk0_f2y.js → DotLottiePlayerBase-CREYTonO.js}

@@ -10,7 +10,7 @@ function loadControlsModule() {
 
 let modulePromise = null;
 function loadErrorModule() {
-    modulePromise = modulePromise ?? import('./errorScreen-Do0IgwBv.js');
+    modulePromise = modulePromise ?? import('./errorScreen-Bq5V84Fj.js');
     return modulePromise;
 }
 
@@ -1210,7 +1210,6 @@ var controls = /*#__PURE__*/Object.freeze({
         if (name === '_isSettingsOpen' && typeof value === 'boolean' && elements.popover && elements.convert && elements.snapshot) {
             elements.popover.hidden = !value;
             elements.convert.hidden = !this.canConvert;
-            elements.snapshot.hidden = this.renderer !== RendererType.SVG;
         }
     }
     /**
@@ -1310,24 +1309,36 @@ var controls = /*#__PURE__*/Object.freeze({
     }
     /**
    * Snapshot and download the current frame as SVG.
-   */ snapshot(shouldDownload = true, name = 'AM Lottie') {
+   */ async snapshot(shouldDownload = true, name = 'AM Lottie') {
         try {
             if (!this.shadowRoot || !this._lottieInstance) {
                 throw new Error('Unknown error');
             }
-            // Get SVG element and serialize markup
-            const svgElement = this.shadowRoot.querySelector('.animation svg');
-            if (!svgElement) {
+            let data = null;
+            // Get animation element and handle markup
+            const animationElement = this.shadowRoot.querySelector(`.animation ${this.renderer}`);
+            if (!animationElement) {
                 throw new Error('Could not retrieve animation from DOM');
             }
-            const data = svgElement instanceof Node ? new XMLSerializer().serializeToString(svgElement) : null;
+            const isSVG = this.renderer === RendererType.SVG;
+            if (isSVG) {
+                data = animationElement instanceof Node ? new XMLSerializer().serializeToString(animationElement) : null;
+            } else {
+                const blob = await new Promise((resolve)=>{
+                    if (animationElement instanceof HTMLCanvasElement) {
+                        animationElement.toBlob(resolve, 'image/png');
+                    }
+                });
+                data = await blob?.arrayBuffer() ?? null;
+            }
             if (!data) {
                 throw new Error('Could not serialize SVG element');
             }
+            const mimeType = isSVG ? 'image/svg+xml' : 'image/png', extension = isSVG ? 'svg' : 'png';
             if (shouldDownload) {
                 download(data, {
-                    mimeType: 'image/svg+xml',
-                    name: `${getFilename(this.src || name)}-${frameOutput(this._seeker * this._lottieInstance.totalFrames / 100)}.svg`
+                    mimeType,
+                    name: `${getFilename(this.src || name)}-${frameOutput(this._seeker * this._lottieInstance.totalFrames / 100)}.${extension}`
                 });
             }
             return data;

package/dist/chunks/{DotLottiePlayerCanvas.d-Bgw-biRK.d.ts → DotLottiePlayerCanvas.d-DRzu-rar.d.ts}

@@ -159,7 +159,7 @@ declare abstract class DotLottiePlayerBase extends ScrollElement {
     setSegment(segment: Vector2): void;
     setSpeed(value?: number): void;
     setSubframe(value: boolean): void;
-    snapshot(shouldDownload?: boolean, name?: string): string | null;
+    snapshot(shouldDownload?: boolean, name?: string): Promise<string | ArrayBuffer | null>;
     stop(): void;
     toggleBoomerang(): void;
     toggleLoop(): void;

package/dist/chunks/{errorScreen-Do0IgwBv.js → errorScreen-Bq5V84Fj.js}

@@ -1,5 +1,5 @@
 import { PreserveAspectRatio, namespaceSVG } from '@aarsteinmedia/lottie-web/utils';
-import { e as escapeHTML } from './DotLottiePlayerBase-Cjk0_f2y.js';
+import { e as escapeHTML } from './DotLottiePlayerBase-CREYTonO.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 import './utilities-CC4oA5Yh.js';
 

package/dist/full.d.ts

@@ -1,5 +1,5 @@
-import { b as DotLottiePlayer } from './chunks/DotLottiePlayerCanvas.d-Bgw-biRK.js';
-export { a as DotLottiePlayerBase } from './chunks/DotLottiePlayerCanvas.d-Bgw-biRK.js';
+import { b as DotLottiePlayer } from './chunks/DotLottiePlayerCanvas.d-DRzu-rar.js';
+export { a as DotLottiePlayerBase } from './chunks/DotLottiePlayerCanvas.d-DRzu-rar.js';
 import '@aarsteinmedia/lottie-web';
 import '@aarsteinmedia/lottie-web/utils';
 import './utilities.js';

package/dist/full.js

@@ -1,6 +1,6 @@
 import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
 import { loadAnimation } from '@aarsteinmedia/lottie-web';
-import { D as DotLottiePlayerBase, l as loadDotLottieTools } from './chunks/DotLottiePlayerBase-Cjk0_f2y.js';
+import { D as DotLottiePlayerBase, l as loadDotLottieTools } from './chunks/DotLottiePlayerBase-CREYTonO.js';
 import { t as tagName } from './chunks/utilities-CC4oA5Yh.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 

package/dist/light.d.ts

@@ -1,5 +1,5 @@
-import { c as DotLottiePlayerLight } from './chunks/DotLottiePlayerCanvas.d-Bgw-biRK.js';
-export { a as DotLottiePlayerBase } from './chunks/DotLottiePlayerCanvas.d-Bgw-biRK.js';
+import { c as DotLottiePlayerLight } from './chunks/DotLottiePlayerCanvas.d-DRzu-rar.js';
+export { a as DotLottiePlayerBase } from './chunks/DotLottiePlayerCanvas.d-DRzu-rar.js';
 import '@aarsteinmedia/lottie-web';
 import '@aarsteinmedia/lottie-web/utils';
 import './utilities.js';

package/dist/light.js

@@ -1,6 +1,6 @@
 import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
 import { loadAnimation } from '@aarsteinmedia/lottie-web/light';
-import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase-Cjk0_f2y.js';
+import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase-CREYTonO.js';
 import { t as tagName } from './chunks/utilities-CC4oA5Yh.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
@@ -8,6 +8,9 @@ import '@aarsteinmedia/lottie-web/dotlottie';
  * DotLottie Player Web Component.
  */ class DotLottiePlayerLight extends DotLottiePlayerBase {
     get renderer() {
+        if (super.renderer !== RendererType.SVG) {
+            this.devLog(`[dotlottie-player] renderer "${super.renderer}" is not available in ` + '@aarsteinmedia/dotlottie-player/light, falling back to "svg". Import from ' + '@aarsteinmedia/dotlottie-player to use other renderers.', 'warn');
+        }
         return RendererType.SVG;
     }
     loadAnimation(config) {

package/dist/svg.d.ts

@@ -1,5 +1,5 @@
-import { d as DotLottiePlayerSVG } from './chunks/DotLottiePlayerCanvas.d-Bgw-biRK.js';
-export { a as DotLottiePlayerBase } from './chunks/DotLottiePlayerCanvas.d-Bgw-biRK.js';
+import { d as DotLottiePlayerSVG } from './chunks/DotLottiePlayerCanvas.d-DRzu-rar.js';
+export { a as DotLottiePlayerBase } from './chunks/DotLottiePlayerCanvas.d-DRzu-rar.js';
 import '@aarsteinmedia/lottie-web';
 import '@aarsteinmedia/lottie-web/utils';
 import './utilities.js';

package/dist/svg.js

@@ -1,6 +1,6 @@
 import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
 import { loadAnimation } from '@aarsteinmedia/lottie-web/svg';
-import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase-Cjk0_f2y.js';
+import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase-CREYTonO.js';
 import { t as tagName } from './chunks/utilities-CC4oA5Yh.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
@@ -8,6 +8,9 @@ import '@aarsteinmedia/lottie-web/dotlottie';
  * DotLottie Player Web Component.
  */ class DotLottiePlayerSVG extends DotLottiePlayerBase {
     get renderer() {
+        if (super.renderer !== RendererType.SVG) {
+            this.devLog(`[dotlottie-player] renderer "${super.renderer}" is not available in ` + '@aarsteinmedia/dotlottie-player/svg, falling back to "svg". Import from ' + '@aarsteinmedia/dotlottie-player to use other renderers.', 'warn');
+        }
         return RendererType.SVG;
     }
     loadAnimation(config) {