chore: release 3.0.25

CHANGELOG.md

@@ -4,9 +4,54 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v3.0.25](https://github.com/rive-app/rive-react/compare/v3.0.24...v3.0.25)
+
+- patch: bump js runtime dependency to address content security policy issue in WASM build [`819bd51`](https://github.com/rive-app/rive-react/commit/819bd51ea976bbea0c218379cd88304bd1738323)
+
+#### [v3.0.24](https://github.com/rive-app/rive-react/compare/v3.0.23...v3.0.24)
+
+> 15 September 2022
+
+- add tests [`a62e9b3`](https://github.com/rive-app/rive-react/commit/a62e9b3a9aeb51b71c441ea1560eea6431704ee7)
+- chore: release 3.0.24 [`6b7f113`](https://github.com/rive-app/rive-react/commit/6b7f1132964dafe9783f0a79782a2ba20638c7ce)
+- fix: make a canvas of size 0 until we calculate the bounds appropriately [`04685c0`](https://github.com/rive-app/rive-react/commit/04685c0bcda26ee0451ab8cc9fc09436e94d04f6)
+
+#### [v3.0.23](https://github.com/rive-app/rive-react/compare/v3.0.22...v3.0.23)
+
+> 31 August 2022
+
+- chore: release 3.0.23 [`48fd9f9`](https://github.com/rive-app/rive-react/commit/48fd9f9d8048ef098ed7550e6da0d3a4eb69148e)
+- Bump runtime version to fix broken version [`3c578b7`](https://github.com/rive-app/rive-react/commit/3c578b730f82059469393522722316f2ad3a61d3)
+
+#### [v3.0.22](https://github.com/rive-app/rive-react/compare/v3.0.21...v3.0.22)
+
+> 30 August 2022
+
+- chore: release 3.0.22 [`7a46886`](https://github.com/rive-app/rive-react/commit/7a468861336861361f4fceae45616f001bf4b448)
+- Update @rive-app/canvas and @rive-app/webgl dependencies to support non node builds [`092049d`](https://github.com/rive-app/rive-react/commit/092049d20f6f955a0528831d2b5e15087328bc75)
+
+#### [v3.0.21](https://github.com/rive-app/rive-react/compare/v3.0.20...v3.0.21)
+
+> 22 July 2022
+
+- chore: release 3.0.21 [`f7aced0`](https://github.com/rive-app/rive-react/commit/f7aced03cd3c39d039cc53af54947e328fe18e83)
+- rev rive-wasm dependencies & update render delay to be 0ms [`eb07281`](https://github.com/rive-app/rive-react/commit/eb072814155bb803f6faa831caa0e0292b8f6f28)
+
+#### [v3.0.20](https://github.com/rive-app/rive-react/compare/v3.0.19...v3.0.20)
+
+> 22 July 2022
+
+- update tests [`24d8e0a`](https://github.com/rive-app/rive-react/commit/24d8e0a90795f650806064d53ae1b362e3fd332f)
+- update resize behaviour to throttle, add parameters to enable switching modes [`1092b44`](https://github.com/rive-app/rive-react/commit/1092b44947e2ac07dd38d21e8b45445256c0a59d)
+- ensure we re evaluate state machine inputs when we play is triggered, looks like there maybe additional situations where we are going to need this. [`84b18cc`](https://github.com/rive-app/rive-react/commit/84b18cc3ddf86e55b6741956ea8f86d6d21f4078)
+
 #### [v3.0.19](https://github.com/rive-app/rive-react/compare/v3.0.18...v3.0.19)
 
+> 19 July 2022
+
+- chore: release 3.0.19 [`efe28aa`](https://github.com/rive-app/rive-react/commit/efe28aa5f35f5ddde3e89085c34016ce87bb5cbb)
 - fix tests that were automatically calling the rive load callback to be more controlled [`16d836c`](https://github.com/rive-app/rive-react/commit/16d836c95928e4294b565ecb444d517653c4988b)
+- Fix: Add check before setting Rive as state variable on Rive instance load [`838ed1a`](https://github.com/rive-app/rive-react/commit/838ed1abf8aeec86ca63bfef07953424ba9cce90)
 
 #### [v3.0.18](https://github.com/rive-app/rive-react/compare/v3.0.17...v3.0.18)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "3.0.19",
+  "version": "3.0.25",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -29,8 +29,8 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "1.0.71",
-    "@rive-app/webgl": "1.0.68"
+    "@rive-app/canvas": "1.0.85",
+    "@rive-app/webgl": "1.0.81"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

src/hooks/useRive.tsx

@@ -39,7 +39,11 @@ function RiveComponent({
       className={className}
       {...(!className && { style: containerStyle })}
     >
-      <canvas ref={setCanvasRef} style={{ verticalAlign: 'top' }} {...rest} />
+      <canvas
+        ref={setCanvasRef}
+        style={{ verticalAlign: 'top', width: 0, height: 0 }}
+        {...rest}
+      />
     </div>
   );
 }

src/hooks/useStateMachineInput.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Rive, StateMachineInput } from '@rive-app/canvas';
+import { EventType, Rive, StateMachineInput } from '@rive-app/canvas';
 
 /**
  * Custom hook for fetching a stateMachine input from a rive file.
@@ -18,21 +18,33 @@ export default function useStateMachineInput(
   const [input, setInput] = useState<StateMachineInput | null>(null);
 
   useEffect(() => {
-    if (!rive || !stateMachineName || !inputName) {
-      setInput(null);
-    }
-
-    if (rive && stateMachineName && inputName) {
-      const inputs = rive.stateMachineInputs(stateMachineName);
-      if (inputs) {
-        const selectedInput = inputs.find((input) => input.name === inputName);
-        if (initialValue !== undefined && selectedInput) {
-          selectedInput.value = initialValue;
-        }
-        setInput(selectedInput || null);
+    function setStateMachineInput() {
+      if (!rive || !stateMachineName || !inputName) {
+        setInput(null);
       }
-    } else {
-      setInput(null);
+
+      if (rive && stateMachineName && inputName) {
+        const inputs = rive.stateMachineInputs(stateMachineName);
+        if (inputs) {
+          const selectedInput = inputs.find(
+            (input) => input.name === inputName
+          );
+          if (initialValue !== undefined && selectedInput) {
+            selectedInput.value = initialValue;
+          }
+          setInput(selectedInput || null);
+        }
+      } else {
+        setInput(null);
+      }
+    }
+    setStateMachineInput();
+    if (rive) {
+      rive.on(EventType.Play, () => {
+        // Check if the component/canvas is mounted before setting state to avoid setState
+        // on an unmounted component in some rare cases
+        setStateMachineInput();
+      });
     }
   }, [rive]);
 

src/utils.ts

@@ -8,9 +8,20 @@ class FakeResizeObserver {
   disconnect() {}
 }
 
+function throttle(f: Function, delay: number) {
+  let timer = 0;
+  return function (this: Function, ...args: any) {
+    clearTimeout(timer);
+    timer = window.setTimeout(() => f.apply(this, args), delay);
+  };
+}
+
 const MyResizeObserver = globalThis.ResizeObserver || FakeResizeObserver;
 const hasResizeObserver = globalThis.ResizeObserver !== undefined;
 
+const useResizeObserver = hasResizeObserver;
+const useWindowListener = !useResizeObserver;
+
 export function useSize(
   containerRef: React.MutableRefObject<HTMLElement | null>
 ) {
@@ -29,32 +40,39 @@ export function useSize(
         });
       };
 
-      if (!hasResizeObserver) {
+      if (useWindowListener) {
         // only pay attention to window size changes when we do not have the resizeObserver (IE only)
-        window.addEventListener('resize', handleResize);
         handleResize();
+        window.addEventListener('resize', handleResize);
       }
+
       return () => window.removeEventListener('resize', handleResize);
     }
   }, []);
-
   const observer = useRef(
-    new MyResizeObserver((entries) => {
-      setSize({
-        width: entries[entries.length - 1].contentRect.width,
-        height: entries[entries.length - 1].contentRect.height,
-      });
-    })
+    new MyResizeObserver(
+      throttle((entries: any) => {
+        if (useResizeObserver) {
+          setSize({
+            width: entries[entries.length - 1].contentRect.width,
+            height: entries[entries.length - 1].contentRect.height,
+          });
+        }
+      }, 0)
+    )
   );
 
   useEffect(() => {
     const current = observer.current;
-    if (containerRef.current) {
+    if (containerRef.current && useResizeObserver) {
       current.observe(containerRef.current);
     }
 
     return () => {
       current.disconnect();
+      if (containerRef.current && useResizeObserver) {
+        current.unobserve(containerRef.current);
+      }
     };
   }, [containerRef, observer]);
 

test/useRive.test.tsx

@@ -376,4 +376,52 @@ describe('useRive', () => {
     );
     expect(container.firstChild).not.toHaveStyle('width: 50%');
   });
+
+  it('has a canvas size of 0 by default', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
+
+    const canvasSpy = document.createElement('canvas');
+    const { result } = renderHook(() => useRive(params));
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      controlledRiveloadCb();
+    });
+
+    const { RiveComponent: RiveTestComponent } = result.current;
+    const { container } = render(<RiveTestComponent />);
+    expect(container.querySelector('canvas')).toHaveStyle('width: 0');
+  });
+
+  it('sets the canvas width and height after calculating the container size', async () => {
+    const params = {
+      src: 'file-src',
+    };
+
+    global.devicePixelRatio = 2;
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
+
+    const canvasSpy = document.createElement('canvas');
+    const containerSpy = document.createElement('div');
+    jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
+    jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
+
+    const { result } = renderHook(() => useRive(params));
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      result.current.setContainerRef(containerSpy);
+      controlledRiveloadCb();
+    });
+
+    expect(canvasSpy).toHaveStyle('height: 100px');
+    expect(canvasSpy).toHaveStyle('width: 100px');
+  });
 });

test/useStateMachine.test.tsx

@@ -8,6 +8,7 @@ jest.mock('@rive-app/canvas', () => ({
   Rive: jest.fn().mockImplementation(() => ({
     on: jest.fn(),
     stop: jest.fn(),
+    stateMachineInputs: jest.fn(),
   })),
   Layout: jest.fn(),
   Fit: {
@@ -26,6 +27,21 @@ jest.mock('@rive-app/canvas', () => ({
   },
 }));
 
+function getRiveMock({
+  smiInputs,
+}: {
+  smiInputs?: null | StateMachineInput[];
+} = {}) {
+  const riveMock = new Rive({
+    canvas: undefined as unknown as HTMLCanvasElement,
+  });
+  if (smiInputs) {
+    riveMock.stateMachineInputs = jest.fn().mockReturnValue(smiInputs);
+  }
+
+  return riveMock;
+}
+
 describe('useStateMachineInput', () => {
   it('returns null if there is null rive object passed', () => {
     const { result } = renderHook(() => useStateMachineInput(null));
@@ -33,31 +49,29 @@ describe('useStateMachineInput', () => {
   });
 
   it('returns null if there is no state machine name', () => {
-    const riveMock = {};
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock();
+
+    mocked(Rive).mockImplementation(() => riveMock);
 
     const { result } = renderHook(() =>
-      useStateMachineInput(riveMock as Rive, '', 'testInput')
+      useStateMachineInput(riveMock, '', 'testInput')
     );
     expect(result.current).toBeNull();
   });
 
   it('returns null if there is no state machine input name', () => {
-    const riveMock = {};
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock();
 
     const { result } = renderHook(() =>
-      useStateMachineInput(riveMock as Rive, 'smName', '')
+      useStateMachineInput(riveMock, 'smName', '')
     );
     expect(result.current).toBeNull();
   });
 
   it('returns null if there are no inputs for the state machine', () => {
-    const riveMock = {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      stateMachineInputs: (_: string) => [] as StateMachineInput[],
-    };
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock({ smiInputs: [] });
+
+    mocked(Rive).mockImplementation(() => riveMock);
 
     const { result } = renderHook(() =>
       useStateMachineInput(riveMock as Rive, 'smName', '')
@@ -69,14 +83,12 @@ describe('useStateMachineInput', () => {
     const smInput = {
       name: 'boolInput',
     } as StateMachineInput;
-    const riveMock = {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
-    };
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock({ smiInputs: [smInput] });
+
+    mocked(Rive).mockImplementation(() => riveMock);
 
     const { result } = renderHook(() =>
-      useStateMachineInput(riveMock as Rive, 'smName', 'numInput')
+      useStateMachineInput(riveMock, 'smName', 'numInput')
     );
     expect(result.current).toBeNull();
   });
@@ -85,14 +97,12 @@ describe('useStateMachineInput', () => {
     const smInput = {
       name: 'boolInput',
     } as StateMachineInput;
-    const riveMock = {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
-    };
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock({ smiInputs: [smInput] });
+
+    mocked(Rive).mockImplementation(() => riveMock);
 
     const { result } = renderHook(() =>
-      useStateMachineInput(riveMock as Rive, 'smName', 'boolInput')
+      useStateMachineInput(riveMock, 'smName', 'boolInput')
     );
     expect(result.current).toBe(smInput);
   });
@@ -102,14 +112,11 @@ describe('useStateMachineInput', () => {
       name: 'boolInput',
       value: false,
     } as StateMachineInput;
-    const riveMock = {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
-    };
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+    const riveMock = getRiveMock({ smiInputs: [smInput] });
+    mocked(Rive).mockImplementation(() => riveMock);
 
     const { result } = renderHook(() =>
-      useStateMachineInput(riveMock as Rive, 'smName', 'boolInput', true)
+      useStateMachineInput(riveMock, 'smName', 'boolInput', true)
     );
     expect(result.current).toStrictEqual({
       ...smInput,