Merge pull request #42 from diegopeixoto/31-canvas-does-not-resize-when-container-size-changes

Author: diegopeixoto

.gitignore

@@ -31,6 +31,9 @@ yarn-error.log*
 .vscode/
 .idea/
 
+# Playground
+playground/
+
 # TypeScript
 *.tsbuildinfo
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicornstudio-react",
-  "version": "2.1.4",
+  "version": "2.1.4-1",
   "description": "React component for embedding Unicorn.Studio interactive scenes with TypeScript support. Compatible with React (Vite) and Next.js.",
   "keywords": [
     "react",

src/__tests__/next-component.test.tsx

@@ -57,9 +57,17 @@ describe("UnicornScene (Next.js)", () => {
   });
 
   it("passes sdkUrl to the Script component", () => {
-    render(<UnicornScene projectId="test-id" sdkUrl="https://custom-cdn.example.com/sdk.js" />);
+    render(
+      <UnicornScene
+        projectId="test-id"
+        sdkUrl="https://custom-cdn.example.com/sdk.js"
+      />,
+    );
     const script = screen.getByTestId("next-script");
-    expect(script).toHaveAttribute("src", "https://custom-cdn.example.com/sdk.js");
+    expect(script).toHaveAttribute(
+      "src",
+      "https://custom-cdn.example.com/sdk.js",
+    );
   });
 
   it("uses lazyOnload strategy when lazyLoad is true", () => {

src/__tests__/setup.ts

@@ -1 +1,38 @@
 import "@testing-library/jest-dom/vitest";
+import { vi } from "vitest";
+
+// jsdom does not provide ResizeObserver — provide a minimal mock that tracks
+// observed elements and exposes a helper to simulate resize entries.
+type ResizeCallback = (entries: ResizeObserverEntry[]) => void;
+
+class MockResizeObserver {
+  static instances: MockResizeObserver[] = [];
+
+  callback: ResizeCallback;
+  elements: Set<Element> = new Set();
+
+  constructor(callback: ResizeCallback) {
+    this.callback = callback;
+    MockResizeObserver.instances.push(this);
+  }
+
+  observe(target: Element) {
+    this.elements.add(target);
+  }
+  unobserve(target: Element) {
+    this.elements.delete(target);
+  }
+  disconnect = vi.fn(() => {
+    this.elements.clear();
+  });
+
+  /** Test helper: fire the callback with a minimal entry for `target`. */
+  simulateResize(target: Element) {
+    const entry = { target } as ResizeObserverEntry;
+    this.callback([entry]);
+  }
+}
+
+vi.stubGlobal("ResizeObserver", MockResizeObserver);
+
+export { MockResizeObserver };

src/__tests__/useUnicornScene.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { renderHook, act } from "@testing-library/react";
 import { useUnicornScene } from "../shared/hooks";
 import type { UnicornStudioScene } from "../shared/types";
+import { MockResizeObserver } from "./setup";
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -62,6 +63,7 @@ describe("useUnicornScene", () => {
     vi.restoreAllMocks();
     delete (window as Record<string, unknown>).UnicornStudio;
     containerEl.remove();
+    MockResizeObserver.instances.length = 0;
   });
 
   // -----------------------------------------------------------------------
@@ -103,9 +105,7 @@ describe("useUnicornScene", () => {
     addSceneMock.mockResolvedValueOnce(scene);
     const onLoad = vi.fn();
 
-    renderHook(() =>
-      useUnicornScene({ ...defaultProps(elementRef), onLoad }),
-    );
+    renderHook(() => useUnicornScene({ ...defaultProps(elementRef), onLoad }));
 
     await act(async () => {});
 
@@ -135,10 +135,9 @@ describe("useUnicornScene", () => {
     const scene = createMockScene();
     addSceneMock.mockResolvedValue(scene);
 
-    const { rerender } = renderHook(
-      (props) => useUnicornScene(props),
-      { initialProps: { ...defaultProps(elementRef), onLoad: () => {} } },
-    );
+    const { rerender } = renderHook((props) => useUnicornScene(props), {
+      initialProps: { ...defaultProps(elementRef), onLoad: () => {} },
+    });
 
     await act(async () => {});
     expect(addSceneMock).toHaveBeenCalledTimes(1);
@@ -160,10 +159,9 @@ describe("useUnicornScene", () => {
     const scene2 = createMockScene();
     addSceneMock.mockResolvedValueOnce(scene1).mockResolvedValueOnce(scene2);
 
-    const { rerender } = renderHook(
-      (props) => useUnicornScene(props),
-      { initialProps: defaultProps(elementRef) },
-    );
+    const { rerender } = renderHook((props) => useUnicornScene(props), {
+      initialProps: defaultProps(elementRef),
+    });
 
     await act(async () => {});
     expect(addSceneMock).toHaveBeenCalledTimes(1);
@@ -206,14 +204,16 @@ describe("useUnicornScene", () => {
     let resolveFirst!: (s: UnicornStudioScene) => void;
     addSceneMock
       .mockImplementationOnce(
-        () => new Promise<UnicornStudioScene>((r) => { resolveFirst = r; }),
+        () =>
+          new Promise<UnicornStudioScene>((r) => {
+            resolveFirst = r;
+          }),
       )
       .mockResolvedValueOnce(createMockScene());
 
-    const { rerender } = renderHook(
-      (props) => useUnicornScene(props),
-      { initialProps: defaultProps(elementRef) },
-    );
+    const { rerender } = renderHook((props) => useUnicornScene(props), {
+      initialProps: defaultProps(elementRef),
+    });
 
     await act(async () => {});
     expect(addSceneMock).toHaveBeenCalledTimes(1);
@@ -226,7 +226,9 @@ describe("useUnicornScene", () => {
 
     // Resolve the first (its ignore flag is set, so the scene gets destroyed)
     const lateScene = createMockScene();
-    await act(async () => { resolveFirst(lateScene); });
+    await act(async () => {
+      resolveFirst(lateScene);
+    });
     expect(lateScene.destroy).toHaveBeenCalled();
   });
 
@@ -279,15 +281,12 @@ describe("useUnicornScene", () => {
     const oldRef: { current: UnicornStudioScene | null } = { current: null };
     const newRef: { current: UnicornStudioScene | null } = { current: null };
 
-    const { rerender } = renderHook(
-      (props) => useUnicornScene(props),
-      {
-        initialProps: {
-          ...defaultProps(elementRef),
-          sceneRef: oldRef,
-        },
+    const { rerender } = renderHook((props) => useUnicornScene(props), {
+      initialProps: {
+        ...defaultProps(elementRef),
+        sceneRef: oldRef,
       },
-    );
+    });
 
     await act(async () => {});
     expect(oldRef.current).toBe(scene);
@@ -307,15 +306,12 @@ describe("useUnicornScene", () => {
     const oldRefFn = vi.fn();
     const newRefFn = vi.fn();
 
-    const { rerender } = renderHook(
-      (props) => useUnicornScene(props),
-      {
-        initialProps: {
-          ...defaultProps(elementRef),
-          sceneRef: oldRefFn,
-        },
+    const { rerender } = renderHook((props) => useUnicornScene(props), {
+      initialProps: {
+        ...defaultProps(elementRef),
+        sceneRef: oldRefFn,
       },
-    );
+    });
 
     await act(async () => {});
     expect(oldRefFn).toHaveBeenCalledWith(scene);
@@ -337,10 +333,9 @@ describe("useUnicornScene", () => {
     const scene = createMockScene({ paused: false });
     addSceneMock.mockResolvedValueOnce(scene);
 
-    const { rerender } = renderHook(
-      (props) => useUnicornScene(props),
-      { initialProps: { ...defaultProps(elementRef), paused: false } },
-    );
+    const { rerender } = renderHook((props) => useUnicornScene(props), {
+      initialProps: { ...defaultProps(elementRef), paused: false },
+    });
 
     await act(async () => {});
 
@@ -407,7 +402,10 @@ describe("useUnicornScene", () => {
     const scene = createMockScene();
     let resolveAddScene!: (s: UnicornStudioScene) => void;
     addSceneMock.mockImplementationOnce(
-      () => new Promise<UnicornStudioScene>((r) => { resolveAddScene = r; }),
+      () =>
+        new Promise<UnicornStudioScene>((r) => {
+          resolveAddScene = r;
+        }),
     );
 
     const { unmount } = renderHook(() =>
@@ -435,10 +433,9 @@ describe("useUnicornScene", () => {
     addSceneMock.mockResolvedValue(scene);
 
     const props = defaultProps(elementRef);
-    const { rerender } = renderHook(
-      (p) => useUnicornScene(p),
-      { initialProps: props },
-    );
+    const { rerender } = renderHook((p) => useUnicornScene(p), {
+      initialProps: props,
+    });
 
     await act(async () => {});
     expect(addSceneMock).toHaveBeenCalledTimes(1);
@@ -581,4 +578,114 @@ describe("useUnicornScene", () => {
     expect(onError).toHaveBeenCalled();
     expect(result.current.error).toBeInstanceOf(Error);
   });
+
+  // -----------------------------------------------------------------------
+  // ResizeObserver – container resize triggers scene.resize()
+  // -----------------------------------------------------------------------
+
+  it("calls scene.resize() when the container is resized", async () => {
+    const resizeFn = vi.fn();
+    const scene = createMockScene({ resize: resizeFn });
+    addSceneMock.mockResolvedValueOnce(scene);
+
+    renderHook(() => useUnicornScene(defaultProps(elementRef)));
+
+    await act(async () => {});
+
+    // Find the observer watching our container
+    const observer = MockResizeObserver.instances.find((o) =>
+      o.elements.has(containerEl),
+    );
+    expect(observer).toBeDefined();
+
+    // Simulate a container resize
+    act(() => {
+      observer!.simulateResize(containerEl);
+    });
+
+    expect(resizeFn).toHaveBeenCalledTimes(1);
+  });
+
+  it("handles scene.resize being undefined gracefully", async () => {
+    const scene = createMockScene({ resize: undefined });
+    addSceneMock.mockResolvedValueOnce(scene);
+
+    renderHook(() => useUnicornScene(defaultProps(elementRef)));
+
+    await act(async () => {});
+
+    const observer = MockResizeObserver.instances.find((o) =>
+      o.elements.has(containerEl),
+    );
+
+    // Should not throw when resize is undefined
+    expect(() => {
+      act(() => {
+        observer!.simulateResize(containerEl);
+      });
+    }).not.toThrow();
+  });
+
+  it("disconnects the ResizeObserver on unmount", async () => {
+    const scene = createMockScene({ resize: vi.fn() });
+    addSceneMock.mockResolvedValueOnce(scene);
+
+    const { unmount } = renderHook(() =>
+      useUnicornScene(defaultProps(elementRef)),
+    );
+
+    await act(async () => {});
+
+    const observer = MockResizeObserver.instances.find((o) =>
+      o.elements.has(containerEl),
+    );
+    expect(observer).toBeDefined();
+
+    unmount();
+
+    expect(observer!.disconnect).toHaveBeenCalled();
+  });
+
+  it("degrades gracefully when ResizeObserver is unavailable", async () => {
+    const originalResizeObserver = globalThis.ResizeObserver;
+    // @ts-expect-error -- simulating an environment without ResizeObserver
+    delete globalThis.ResizeObserver;
+
+    try {
+      addSceneMock.mockResolvedValueOnce(createMockScene({ resize: vi.fn() }));
+
+      const { unmount } = renderHook(() =>
+        useUnicornScene(defaultProps(elementRef)),
+      );
+
+      await act(async () => {});
+
+      // No ResizeObserver should have been created
+      expect(MockResizeObserver.instances).toHaveLength(0);
+
+      // Should not throw on unmount either
+      expect(() => unmount()).not.toThrow();
+    } finally {
+      globalThis.ResizeObserver = originalResizeObserver;
+    }
+  });
+
+  it("does not create a ResizeObserver when elementRef is null", async () => {
+    const instancesBefore = MockResizeObserver.instances.length;
+
+    renderHook(() =>
+      useUnicornScene({
+        ...defaultProps({ current: null }),
+        isScriptLoaded: true,
+      }),
+    );
+
+    await act(async () => {});
+
+    const newObservers = MockResizeObserver.instances.slice(instancesBefore);
+    const observersWithElements = newObservers.filter(
+      (o) => o.elements.size > 0,
+    );
+    expect(observersWithElements).toHaveLength(0);
+  });
 });

src/shared/hooks.ts

@@ -414,5 +414,21 @@ export function useUnicornScene({
     }
   }, [paused]);
 
+  // Observe container resize and call scene.resize() so the canvas adapts
+  useEffect(() => {
+    const el = elementRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+
+    const observer = new ResizeObserver(() => {
+      internalSceneRef.current?.resize?.();
+    });
+
+    observer.observe(el);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [elementRef]);
+
   return { error: initError };
 }