fix(react): type error caused by passing empty or incomplete layout prop

.changeset/curvy-jokes-matter.md

@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': minor
+---
+
+feat: make `Layout` properties optional with default values. `align` defaults to `[0.5, 0.5]` and `fit` defaults to `contain`

.changeset/tough-roses-pay.md

@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-react': patch
+---
+
+fix: TypeError caused by passing empty or incomplete `layout` props to `DotLottieReact` component

packages/react/src/base-dotlottie-react.tsx

@@ -226,11 +226,8 @@ export const BaseDotLottieReact = <T extends DotLottie | DotLottieWorker>({
   }, [themeData]);
 
   useEffect(() => {
-    dotLottieRef.current?.setLayout({
-      align: layout?.align ?? [0.5, 0.5],
-      fit: layout?.fit ?? 'contain',
-    });
-  }, [layout?.align[0], layout?.align[1], layout?.fit]);
+    dotLottieRef.current?.setLayout(layout ?? {});
+  }, [layout?.fit, layout?.align && layout.align[0], layout?.align && layout.align[1]]);
 
   return (
     <div

packages/react/tests/dotlottie-react.spec.tsx

@@ -728,4 +728,43 @@ describe.each([
 
     expect(setLayout).toHaveBeenCalledWith({ align: [0.5, 0.5], fit: 'contain' });
   });
+
+  test('calls dotLottie.setLayout properly when layout prop changes with fit only', async () => {
+    const onLoad = vi.fn();
+    const dotLottieRefCallback = vi.fn();
+
+    const { rerender } = render(<Component src={dotLottieSrc} autoplay dotLottieRefCallback={dotLottieRefCallback} />);
+
+    await vi.waitFor(() => {
+      expect(dotLottieRefCallback).toHaveBeenCalledTimes(1);
+    });
+
+    const dotLottie = dotLottieRefCallback.mock.calls[0]?.[0];
+
+    dotLottie?.addEventListener('load', onLoad);
+
+    await vi.waitFor(() => {
+      expect(onLoad).toHaveBeenCalledTimes(1);
+    });
+
+    const setLayout = vi.spyOn(dotLottie, 'setLayout');
+
+    rerender(
+      <Component src={dotLottieSrc} autoplay layout={{ fit: 'cover' }} dotLottieRefCallback={dotLottieRefCallback} />,
+    );
+
+    await vi.waitFor(() => {
+      expect(setLayout).toHaveBeenCalledTimes(1);
+    });
+
+    expect(setLayout).toHaveBeenCalledWith({ fit: 'cover' });
+
+    rerender(<Component src={dotLottieSrc} autoplay dotLottieRefCallback={dotLottieRefCallback} />);
+
+    await vi.waitFor(() => {
+      expect(setLayout).toHaveBeenCalledTimes(2);
+    });
+
+    expect(setLayout).toHaveBeenCalledWith({ fit: 'cover' });
+  });
 });

packages/web/src/dotlottie.ts

@@ -57,6 +57,17 @@ const createCoreSegment = (segment: number[], module: MainModule): VectorFloat =
   return coresegment;
 };
 
+const createCoreLayout = (layout: Layout | undefined, module: MainModule): { align: VectorFloat; fit: CoreFit } => {
+  if (!layout) {
+    return module.createDefaultLayout();
+  }
+
+  return {
+    align: createCoreAlign(layout.align ?? [0.5, 0.5], module),
+    fit: createCoreFit(layout.fit ?? 'contain', module),
+  };
+};
+
 export class DotLottie {
   private readonly _canvas: HTMLCanvasElement | OffscreenCanvas;
 
@@ -115,12 +126,7 @@ export class DotLottie {
           speed: config.speed ?? 1,
           useFrameInterpolation: config.useFrameInterpolation ?? true,
           marker: config.marker ?? '',
-          layout: config.layout
-            ? {
-                align: createCoreAlign(config.layout.align, module),
-                fit: createCoreFit(config.layout.fit, module),
-              }
-            : module.createDefaultLayout(),
+          layout: createCoreLayout(config.layout, module),
         });
 
         this._eventManager.dispatch({ type: 'ready' });
@@ -448,12 +454,7 @@ export class DotLottie {
       speed: config.speed ?? 1,
       useFrameInterpolation: config.useFrameInterpolation ?? true,
       marker: config.marker ?? '',
-      layout: config.layout
-        ? {
-            align: createCoreAlign(config.layout.align, DotLottie._wasmModule),
-            fit: createCoreFit(config.layout.fit, DotLottie._wasmModule),
-          }
-        : DotLottie._wasmModule.createDefaultLayout(),
+      layout: createCoreLayout(config.layout, DotLottie._wasmModule),
     });
 
     if (config.data) {
@@ -471,7 +472,7 @@ export class DotLottie {
     const rendered = this._dotLottieCore.render();
 
     if (rendered) {
-      const buffer = this._dotLottieCore.buffer() as Uint8Array;
+      const buffer = this._dotLottieCore.buffer() as ArrayBuffer;
       const clampedBuffer = new Uint8ClampedArray(buffer, 0, this._canvas.width * this._canvas.height * 4);
 
       let imageData = null;
@@ -840,10 +841,7 @@ export class DotLottie {
 
     this._dotLottieCore.setConfig({
       ...this._dotLottieCore.config(),
-      layout: {
-        align: createCoreAlign(layout.align, DotLottie._wasmModule),
-        fit: createCoreFit(layout.fit, DotLottie._wasmModule),
-      },
+      layout: createCoreLayout(layout, DotLottie._wasmModule),
     });
   }
 

packages/web/src/types.ts

@@ -11,8 +11,8 @@ export type Data = string | ArrayBuffer | Record<string, unknown>;
 export type Fit = 'contain' | 'cover' | 'fill' | 'none' | 'fit-width' | 'fit-height';
 
 export interface Layout {
-  align: [number, number];
-  fit: Fit;
+  align?: [number, number];
+  fit?: Fit;
 }
 
 export interface Config {