feat(web): 🎸 add autoResize to render config (#341)

* feat(web): 🎸 add autoResize to render config

.changeset/lemon-mangos-agree.md

@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': minor
+---
+
+feat(web): 🎸 add autoResize to render config

apps/dotlottie-next-example/src/pages/index.tsx

@@ -18,7 +18,17 @@ export default function Home(): JSX.Element {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main className={`${styles.main} ${inter.className}`}>
-        <DotLottieReact src={src} loop autoplay />
+        <DotLottieReact
+          style={{
+            minWidth: '100px',
+          }}
+          src={src}
+          loop
+          autoplay
+          renderConfig={{
+            autoResize: true,
+          }}
+        />
       </main>
     </>
   );

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

@@ -77,7 +77,9 @@ function App() {
         loop={loop}
         speed={speed}
         playOnHover={playOnHover}
-        autoResizeCanvas={autoResizeCanvas}
+        renderConfig={{
+          autoResize: autoResizeCanvas,
+        }}
         marker={marker}
         style={{
           margin: '2px',

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

@@ -136,7 +136,9 @@ const App: Component = () => {
         themeId={themeId()}
         speed={speed()}
         playOnHover={playOnHover()}
-        autoResizeCanvas={autoResizeCanvas()}
+        renderConfig={{
+          autoResize: autoResizeCanvas(),
+        }}
         style={{
           height: '500px',
         }}

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

@@ -2,8 +2,8 @@
 
 import './styles.css';
 import type { Fit, Mode } from '@lottiefiles/dotlottie-web';
-import { DotLottieWorker as DotLottie } from '@lottiefiles/dotlottie-web';
-// import { DotLottie } from '@lottiefiles/dotlottie-web';
+// import { DotLottieWorker as DotLottie } from '@lottiefiles/dotlottie-web';
+import { DotLottie } from '@lottiefiles/dotlottie-web';
 
 import wasmUrl from '../../../packages/web/dist/dotlottie-player.wasm?url';
 
@@ -162,16 +162,19 @@ allCanvas.forEach((canvas) => {
     loop: true,
     autoplay: true,
     backgroundColor,
-    // useFrameInterpolation: false,
+    renderConfig: {
+      autoResize: true,
+    },
+    useFrameInterpolation: false,
   });
 
   dotLottie.addEventListener('loadError', console.error);
   dotLottie.addEventListener('freeze', console.log);
   dotLottie.addEventListener('unfreeze', console.log);
 
-  window.addEventListener('resize', () => {
-    dotLottie.resize();
-  });
+  // window.addEventListener('resize', () => {
+  //   dotLottie.resize();
+  // });
 });
 
 fetch(
@@ -236,7 +239,7 @@ fetch(
     const alignSelect = document.getElementById('align') as HTMLSelectElement;
     const stateMachinesSelect = document.getElementById('states') as HTMLSelectElement;
 
-    const resizeButton = document.getElementById('resize') as HTMLButtonElement;
+    // const resizeButton = document.getElementById('resize') as HTMLButtonElement;
 
     let animationIdx = 0;
 
@@ -256,9 +259,9 @@ fetch(
       }
     });
 
-    resizeButton.addEventListener('click', () => {
-      dotLottie.resize();
-    });
+    // resizeButton.addEventListener('click', () => {
+    //   dotLottie.resize();
+    // });
 
     freezeButton.addEventListener('click', () => {
       dotLottie.freeze();

apps/dotlottie-web-example/src/styles.css

@@ -8,17 +8,15 @@ body {
 }
 
 canvas {
+  height: 200px;
   border: 2px solid #333;
-  margin-bottom: 20px;
-  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
-  width: 100%; /* Full width of the container */
   aspect-ratio: 1/1;
 }
 
 .grid {
   display: grid;
-  grid-template-rows: repeat(1, 1fr);
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-template-columns: repeat(9, 1fr);
   gap: 10px;
 }
 

packages/react/package.json

@@ -45,8 +45,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@lottiefiles/dotlottie-web": "workspace:*",
-    "debounce": "^2.0.0"
+    "@lottiefiles/dotlottie-web": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",

packages/react/src/dotlottie-worker.tsx

@@ -10,7 +10,6 @@ import useStableCallback from './use-stable-callback';
 export type DotLottieWorkerReactProps = Omit<Config, 'canvas'> &
   ComponentProps<'canvas'> & {
     animationId?: string;
-    autoResizeCanvas?: boolean;
     dotLottieRefCallback?: RefCallback<DotLottieWorker | null>;
     playOnHover?: boolean;
     themeData?: string;
@@ -20,7 +19,6 @@ export type DotLottieWorkerReactProps = Omit<Config, 'canvas'> &
 
 export const DotLottieWorkerReact = ({
   animationId,
-  autoResizeCanvas = true,
   autoplay,
   backgroundColor,
   data,
@@ -52,7 +50,6 @@ export const DotLottieWorkerReact = ({
     backgroundColor,
     useFrameInterpolation,
     playOnHover,
-    autoResizeCanvas,
     marker,
     themeId,
     animationId,

packages/react/src/dotlottie.tsx

@@ -10,7 +10,6 @@ import useStableCallback from './use-stable-callback';
 export type DotLottieReactProps = Omit<Config, 'canvas'> &
   ComponentProps<'canvas'> & {
     animationId?: string;
-    autoResizeCanvas?: boolean;
     dotLottieRefCallback?: RefCallback<DotLottie>;
     playOnHover?: boolean;
     themeData?: string;
@@ -19,7 +18,6 @@ export type DotLottieReactProps = Omit<Config, 'canvas'> &
 
 export const DotLottieReact = ({
   animationId,
-  autoResizeCanvas = true,
   autoplay,
   backgroundColor,
   data,
@@ -49,7 +47,6 @@ export const DotLottieReact = ({
     backgroundColor,
     useFrameInterpolation,
     playOnHover,
-    autoResizeCanvas,
     marker,
     themeId,
     animationId,

packages/react/src/use-dotlottie-worker.tsx

@@ -1,7 +1,6 @@
 import type { Config } from '@lottiefiles/dotlottie-web';
 import { DotLottieWorker } from '@lottiefiles/dotlottie-web';
-import debounce from 'debounce';
-import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
 import type { ComponentProps, RefCallback } from 'react';
 
 interface DotLottieWorkerComponentProps {
@@ -42,7 +41,6 @@ function DotLottieWorkerComponent({
 
 export type DotLottieWorkerConfig = Omit<Config, 'canvas'> & {
   animationId?: string;
-  autoResizeCanvas?: boolean;
   playOnHover?: boolean;
   themeData?: string;
   themeId?: string;
@@ -58,8 +56,6 @@ export interface UseDotLottieWorkerResult {
   setContainerRef: RefCallback<HTMLDivElement>;
 }
 
-const isServerSide = (): boolean => typeof window === 'undefined';
-
 export const useDotLottieWorker = (config?: DotLottieWorkerConfig): UseDotLottieWorkerResult => {
   const [dotLottie, setDotLottie] = useState<DotLottieWorker | null>(null);
 
@@ -82,18 +78,6 @@ export const useDotLottieWorker = (config?: DotLottieWorkerConfig): UseDotLottie
     }
   }, []);
 
-  const resizeObserver = useMemo(() => {
-    if (isServerSide()) return null;
-
-    const observerCallback = debounce(() => {
-      if (configRef.current?.autoResizeCanvas) {
-        dotLottieRef.current?.resize();
-      }
-    }, 150);
-
-    return new ResizeObserver(observerCallback);
-  }, []);
-
   const setCanvasRef = useCallback((canvas: HTMLCanvasElement | null) => {
     canvasRef.current = canvas;
   }, []);
@@ -120,9 +104,6 @@ export const useDotLottieWorker = (config?: DotLottieWorkerConfig): UseDotLottie
         canvas,
       });
 
-      if (config?.autoResizeCanvas) {
-        resizeObserver?.observe(canvas);
-      }
       canvas.addEventListener('mouseenter', hoverHandler);
       canvas.addEventListener('mouseleave', hoverHandler);
 
@@ -132,11 +113,10 @@ export const useDotLottieWorker = (config?: DotLottieWorkerConfig): UseDotLottie
     return () => {
       dotLottieInstance?.destroy();
       setDotLottie(null);
-      resizeObserver?.disconnect();
       canvas?.removeEventListener('mouseenter', hoverHandler);
       canvas?.removeEventListener('mouseleave', hoverHandler);
     };
-  }, [resizeObserver, hoverHandler]);
+  }, [hoverHandler]);
 
   // speed reactivity
   useEffect(() => {
@@ -242,16 +222,6 @@ export const useDotLottieWorker = (config?: DotLottieWorkerConfig): UseDotLottie
     }
   }, [config?.marker]);
 
-  useEffect(() => {
-    if (!resizeObserver) return;
-
-    if (config?.autoResizeCanvas && canvasRef.current) {
-      resizeObserver.observe(canvasRef.current);
-    } else {
-      resizeObserver.disconnect();
-    }
-  }, [config?.autoResizeCanvas, resizeObserver]);
-
   // animationId reactivity
   useEffect(() => {
     if (!dotLottieRef.current) return;

packages/react/src/use-dotlottie.tsx

@@ -1,7 +1,6 @@
 import type { Config } from '@lottiefiles/dotlottie-web';
 import { DotLottie } from '@lottiefiles/dotlottie-web';
-import debounce from 'debounce';
-import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
 import type { ComponentProps, RefCallback } from 'react';
 
 interface DotLottieComponentProps {
@@ -42,7 +41,6 @@ function DotLottieComponent({
 
 export type DotLottieConfig = Omit<Config, 'canvas'> & {
   animationId?: string;
-  autoResizeCanvas?: boolean;
   playOnHover?: boolean;
   themeData?: string;
   themeId?: string;
@@ -57,8 +55,6 @@ export interface UseDotLottieResult {
   setContainerRef: RefCallback<HTMLDivElement>;
 }
 
-const isServerSide = (): boolean => typeof window === 'undefined';
-
 export const useDotLottie = (config?: DotLottieConfig): UseDotLottieResult => {
   const [dotLottie, setDotLottie] = useState<DotLottie | null>(null);
 
@@ -81,18 +77,6 @@ export const useDotLottie = (config?: DotLottieConfig): UseDotLottieResult => {
     }
   }, []);
 
-  const resizeObserver = useMemo(() => {
-    if (isServerSide()) return null;
-
-    const observerCallback = debounce(() => {
-      if (configRef.current?.autoResizeCanvas) {
-        dotLottieRef.current?.resize();
-      }
-    }, 150);
-
-    return new ResizeObserver(observerCallback);
-  }, []);
-
   const setCanvasRef = useCallback((canvas: HTMLCanvasElement | null) => {
     canvasRef.current = canvas;
   }, []);
@@ -119,9 +103,6 @@ export const useDotLottie = (config?: DotLottieConfig): UseDotLottieResult => {
         canvas,
       });
 
-      if (config?.autoResizeCanvas) {
-        resizeObserver?.observe(canvas);
-      }
       canvas.addEventListener('mouseenter', hoverHandler);
       canvas.addEventListener('mouseleave', hoverHandler);
 
@@ -131,11 +112,10 @@ export const useDotLottie = (config?: DotLottieConfig): UseDotLottieResult => {
     return () => {
       dotLottieInstance?.destroy();
       setDotLottie(null);
-      resizeObserver?.disconnect();
       canvas?.removeEventListener('mouseenter', hoverHandler);
       canvas?.removeEventListener('mouseleave', hoverHandler);
     };
-  }, [resizeObserver, hoverHandler]);
+  }, [hoverHandler]);
 
   // speed reactivity
   useEffect(() => {
@@ -241,16 +221,6 @@ export const useDotLottie = (config?: DotLottieConfig): UseDotLottieResult => {
     }
   }, [config?.marker]);
 
-  useEffect(() => {
-    if (!resizeObserver) return;
-
-    if (config?.autoResizeCanvas && canvasRef.current) {
-      resizeObserver.observe(canvasRef.current);
-    } else {
-      resizeObserver.disconnect();
-    }
-  }, [config?.autoResizeCanvas, resizeObserver]);
-
   // animationId reactivity
   useEffect(() => {
     if (!dotLottieRef.current) return;

packages/solid/package.json

@@ -50,8 +50,7 @@
     "solid-js": "^1.6.12"
   },
   "dependencies": {
-    "@lottiefiles/dotlottie-web": "workspace:*",
-    "debounce": "^2.0.0"
+    "@lottiefiles/dotlottie-web": "workspace:*"
   },
   "devDependencies": {
     "cross-env": "7.0.3",

packages/solid/src/dotlottie.tsx

@@ -8,7 +8,6 @@ export type DotLottieSolidProps = Omit<Config, 'canvas'> &
   ComponentProps<'canvas'> &
   Partial<{
     animationId?: string;
-    autoResizeCanvas: boolean;
     dotLottieRefCallback: (dotLottie: DotLottie) => void;
     playOnHover: boolean;
     themeData?: string;
@@ -30,7 +29,6 @@ export const DotLottieSolid = (props: DotLottieSolidProps): JSX.Element => {
     'playOnHover',
     'animationId',
     'renderConfig',
-    'autoResizeCanvas',
     'dotLottieRefCallback',
     'useFrameInterpolation',
   ]);