chore: release 3.0.21

CHANGELOG.md

@@ -4,9 +4,128 @@ 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.18](https://github.com/rive-app/rive-react/compare/v3.0.1...v3.0.18)
+#### [v3.0.21](https://github.com/rive-app/rive-react/compare/v3.0.19...v3.0.21)
+
+- rev rive-wasm dependencies & update render delay to be 0ms [`eb07281`](https://github.com/rive-app/rive-react/commit/eb072814155bb803f6faa831caa0e0292b8f6f28)
+
+#### [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)
+
+> 14 July 2022
 
 - update canvas dimensions to use clientWidth and Height as opposed to BoundingClient, to avoid getting scaled information [`fd1c00a`](https://github.com/rive-app/rive-react/commit/fd1c00a995374634ec8552d20a0f7094fcb04e25)
+- chore: release 3.0.18 [`d010a55`](https://github.com/rive-app/rive-react/commit/d010a55cc0c065c353dd5424a6fef8a58f416c61)
+
+#### [v3.0.17](https://github.com/rive-app/rive-react/compare/v3.0.16...v3.0.17)
+
+> 14 July 2022
+
+- add resizeObserver to replace window listeners for all but IE [`e966316`](https://github.com/rive-app/rive-react/commit/e966316971d88a7242651a0b1fa3a1eaff48d276)
+- refactored the IE check into `useSize` [`5be9d2f`](https://github.com/rive-app/rive-react/commit/5be9d2f8741224ed7cd291898b1abe88668b3fed)
+- Fix useEffects so they're not in conditional statements [`ec61a68`](https://github.com/rive-app/rive-react/commit/ec61a6835d9ca6158538f5d1ac5b6b861c58ac57)
+
+#### [v3.0.16](https://github.com/rive-app/rive-react/compare/v3.0.15...v3.0.16)
+
+> 12 July 2022
+
+- Docs: Condense down README and add CONTRIBUTING guide [`0863835`](https://github.com/rive-app/rive-react/commit/08638359bb817213fb861950a20cae7e7b27111f)
+- staged work [`7dbade4`](https://github.com/rive-app/rive-react/commit/7dbade4589ca0524b58f9abbdcc38afa3e3b1866)
+- chore: release 3.0.16 [`ae6efc1`](https://github.com/rive-app/rive-react/commit/ae6efc14d46c33b90fe89ee067347296daf865e7)
+
+#### [v3.0.15](https://github.com/rive-app/rive-react/compare/v3.0.14...v3.0.15)
+
+> 28 June 2022
+
+- chore: release 3.0.15 [`8175c4a`](https://github.com/rive-app/rive-react/commit/8175c4a4d406ac80703a6df346f3b5562d2e9311)
+- Patch: Bump js runtime dependencies for nested artboard display patch [`795ee53`](https://github.com/rive-app/rive-react/commit/795ee533405ec98457db074d11730849e1be5c88)
+
+#### [v3.0.14](https://github.com/rive-app/rive-react/compare/v3.0.12...v3.0.14)
+
+> 28 June 2022
+
+- Deploying to main from  @ 3477afdef166251f35f1778a3143ff6c6efecc58 🚀 [`7aee5cf`](https://github.com/rive-app/rive-react/commit/7aee5cfab4eaca1fc9369742639507a770c4f756)
+- Fix: Intake JS runtime patches for starting animation frames [`3477afd`](https://github.com/rive-app/rive-react/commit/3477afdef166251f35f1778a3143ff6c6efecc58)
+- chore: release 3.0.14 [`04353db`](https://github.com/rive-app/rive-react/commit/04353db43266f6dcf40f4ef7f3be23afa13c2e0d)
+
+#### [v3.0.12](https://github.com/rive-app/rive-react/compare/v3.0.11...v3.0.12)
+
+> 22 June 2022
+
+- chore: release 3.0.12 [`8b43a82`](https://github.com/rive-app/rive-react/commit/8b43a82c5f56cbb5b1fe7dacfa7ca8457fc6d413)
+- Fix: Bump cpp to get nested artboard opacity fix and fill rule patch [`bd49e6a`](https://github.com/rive-app/rive-react/commit/bd49e6a4ee66c68005b60a670700ef69b5322656)
+- Bump @rive-app/canvas to take the fillRule bug fix [`1dbb9cd`](https://github.com/rive-app/rive-react/commit/1dbb9cd38d41393b9f354cdf81e88c702aa3ae64)
+
+#### [v3.0.11](https://github.com/rive-app/rive-react/compare/v3.0.10...v3.0.11)
+
+> 22 June 2022
+
+- chore: release 3.0.11 [`aee7407`](https://github.com/rive-app/rive-react/commit/aee7407f7921c515f3c1d9aabf87387baddb4064)
+- Docs: Code snippets update to use new React package structure [`b48de9d`](https://github.com/rive-app/rive-react/commit/b48de9db8496be35f29bea87273a7a9fceefdafc)
+
+#### [v3.0.10](https://github.com/rive-app/rive-react/compare/v3.0.8...v3.0.10)
+
+> 20 June 2022
+
+- Deploying to main from  @ 5ad5a957a6e8f10abedc23f46033d4792e29dfe5 🚀 [`802648e`](https://github.com/rive-app/rive-react/commit/802648eda8fa0e5a0a35c66af06e476eac59fe9e)
+- chore: release 3.0.10 [`6772f16`](https://github.com/rive-app/rive-react/commit/6772f166b7f3e4747ae508a54e2533bb3ea49878)
+- Maint: Update docs for storybook link [`5ad5a95`](https://github.com/rive-app/rive-react/commit/5ad5a957a6e8f10abedc23f46033d4792e29dfe5)
+
+#### [v3.0.8](https://github.com/rive-app/rive-react/compare/v3.0.7...v3.0.8)
+
+> 9 June 2022
+
+- Maint: Add GH workflow for deploying storybook to Github Pages [`38625a0`](https://github.com/rive-app/rive-react/commit/38625a00c313192d0edbe1c3a855bea1ec56bd2b)
+- chore: release 3.0.8 [`414d6f8`](https://github.com/rive-app/rive-react/commit/414d6f895ac2184876dec90959c17c2b22f6843f)
+
+#### [v3.0.7](https://github.com/rive-app/rive-react/compare/v3.0.6...v3.0.7)
+
+> 8 June 2022
+
+- Feat: Move existing examples into Storybook and add documentation [`ec230fa`](https://github.com/rive-app/rive-react/commit/ec230faa738202cedad14cc866e30c4c03efffd7)
+- chore: release 3.0.7 [`bad688d`](https://github.com/rive-app/rive-react/commit/bad688dfa3841ec07e30fa07609a6cb7bb7c1688)
+
+#### [v3.0.6](https://github.com/rive-app/rive-react/compare/v3.0.5...v3.0.6)
+
+> 6 June 2022
+
+- chore: release 3.0.6 [`90c6d1e`](https://github.com/rive-app/rive-react/commit/90c6d1edb1d4bef6250dd4a5101a7cfe04ff9ce9)
+- Maint: Roll canvas and webgl dependencies forward to support nested state machines [`0480dc9`](https://github.com/rive-app/rive-react/commit/0480dc92c842265d601d08b60fb49392969cfd9e)
+
+#### [v3.0.5](https://github.com/rive-app/rive-react/compare/v3.0.4...v3.0.5)
+
+> 26 May 2022
+
+- chore: release 3.0.5 [`de24fa5`](https://github.com/rive-app/rive-react/commit/de24fa564117d4acbe60b4cf734abd9e951b30f1)
+- Feat: Add stateMachines param to the default Rive component [`84d9730`](https://github.com/rive-app/rive-react/commit/84d9730767a62c63e743d5a04bba5b3d480ea38d)
+- Maint: Bump wasm for another listener patch [`805afd5`](https://github.com/rive-app/rive-react/commit/805afd5dff2888294926c32ec07f5e24db804d09)
+
+#### [v3.0.4](https://github.com/rive-app/rive-react/compare/v3.0.3...v3.0.4)
+
+> 23 May 2022
+
+- chore: release 3.0.4 [`9abee34`](https://github.com/rive-app/rive-react/commit/9abee34d12641f845b93febf438df0f77f72153f)
+- Maint: Bump rive-wasm dependency for listener patches [`12801b1`](https://github.com/rive-app/rive-react/commit/12801b10cc8980339e5856d71d96da3c612cb291)
+
+#### [v3.0.3](https://github.com/rive-app/rive-react/compare/v3.0.2...v3.0.3)
+
+> 17 May 2022
+
+- Feat: Bump wasm and add examples to support touch feature [`3902948`](https://github.com/rive-app/rive-react/commit/3902948a2ef8af6955ef12124207edee29eb0be8)
+- chore: release 3.0.3 [`da11387`](https://github.com/rive-app/rive-react/commit/da1138755861aadb9e7c6cb0028f2120d610a6c5)
+
+#### [v3.0.2](https://github.com/rive-app/rive-react/compare/v3.0.1...v3.0.2)
+
+> 17 May 2022
+
+- chore: release 3.0.2 [`21a17ed`](https://github.com/rive-app/rive-react/commit/21a17ed40ee51263c666dde48b6c55e958eceeb8)
+- Maint: Bump wasm dependencies [`f0e7092`](https://github.com/rive-app/rive-react/commit/f0e70924ec9849f45ecddda801ad63e1d87b1bdb)
 
 #### [v3.0.1](https://github.com/rive-app/rive-react/compare/v3.0.0...v3.0.1)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "3.0.18",
+  "version": "3.0.21",
   "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.75",
+    "@rive-app/webgl": "1.0.72"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

src/hooks/useRive.tsx

@@ -181,7 +181,13 @@ export default function useRive(
           ...riveParams,
           canvas,
         });
-        r.on(EventType.Load, () => setRive(r));
+        r.on(EventType.Load, () => {
+          // Check if the component/canvas is mounted before setting state to avoid setState
+          // on an unmounted component in some rare cases
+          if (canvasRef.current) {
+            setRive(r);
+          }
+        });
       } else if (canvas === null && canvasRef.current) {
         canvasRef.current.height = 0;
         canvasRef.current.width = 0;

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

@@ -29,6 +29,23 @@ jest.mock('@rive-app/canvas', () => ({
 }));
 
 describe('useRive', () => {
+  let controlledRiveloadCb: () => void;
+  let baseRiveMock: Partial<rive.Rive>;
+
+  beforeEach(() => {
+    baseRiveMock = {
+      on: (_: rive.EventType, cb: rive.EventCallback) =>
+        ((controlledRiveloadCb as rive.EventCallback) = cb),
+      stop: jest.fn(),
+      stopRendering: jest.fn(),
+      startRendering: jest.fn(),
+    };
+  });
+
+  afterEach(() => {
+    controlledRiveloadCb = () => {};
+  });
+
   it('returns rive as null if no params are passed', () => {
     const { result } = renderHook(() => useRive());
     expect(result.current.rive).toBe(null);
@@ -40,23 +57,17 @@ describe('useRive', () => {
       src: 'file-src',
     };
 
-    const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
-      stopRendering: jest.fn(),
-    };
-
     // @ts-ignore
-    mocked(rive.Rive).mockImplementation(() => riveMock);
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
 
     const canvasSpy = document.createElement('canvas');
     const { result } = renderHook(() => useRive(params));
 
     await act(async () => {
       result.current.setCanvasRef(canvasSpy);
+      controlledRiveloadCb();
     });
-
-    expect(result.current.rive).toBe(riveMock);
+    expect(result.current.rive).toBe(baseRiveMock);
     expect(result.current.canvas).toBe(canvasSpy);
   });
 
@@ -68,9 +79,7 @@ describe('useRive', () => {
     const resizeToCanvasMock = jest.fn();
 
     const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
-      stopRendering: jest.fn(),
+      ...baseRiveMock,
       resizeToCanvas: resizeToCanvasMock,
     };
 
@@ -84,6 +93,7 @@ describe('useRive', () => {
     await act(async () => {
       result.current.setCanvasRef(canvasSpy);
       result.current.setContainerRef(containerSpy);
+      controlledRiveloadCb();
     });
 
     expect(result.current.rive).toBe(riveMock);
@@ -100,7 +110,7 @@ describe('useRive', () => {
     const stopMock = jest.fn();
 
     const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
+      ...baseRiveMock,
       stop: stopMock,
     };
 
@@ -112,6 +122,7 @@ describe('useRive', () => {
 
     await act(async () => {
       result.current.setCanvasRef(canvasSpy);
+      controlledRiveloadCb();
     });
 
     unmount();
@@ -126,13 +137,8 @@ describe('useRive', () => {
 
     global.devicePixelRatio = 2;
 
-    const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
-    };
-
     // @ts-ignore
-    mocked(rive.Rive).mockImplementation(() => riveMock);
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
 
     const canvasSpy = document.createElement('canvas');
     const containerSpy = document.createElement('div');
@@ -144,6 +150,7 @@ describe('useRive', () => {
     await act(async () => {
       result.current.setCanvasRef(canvasSpy);
       result.current.setContainerRef(containerSpy);
+      controlledRiveloadCb();
     });
 
     // Height and width should be 2* the width and height returned from containers
@@ -164,13 +171,8 @@ describe('useRive', () => {
       useDevicePixelRatio: false,
     };
 
-    const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
-    };
-
     // @ts-ignore
-    mocked(rive.Rive).mockImplementation(() => riveMock);
+    mocked(rive.Rive).mockImplementation(() => baseRiveMock);
 
     const canvasSpy = document.createElement('canvas');
     const containerSpy = document.createElement('div');
@@ -182,6 +184,7 @@ describe('useRive', () => {
     await act(async () => {
       result.current.setCanvasRef(canvasSpy);
       result.current.setContainerRef(containerSpy);
+      controlledRiveloadCb();
     });
 
     // Height and width should be same as containers bounding rect
@@ -199,8 +202,7 @@ describe('useRive', () => {
     };
 
     const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
+      ...baseRiveMock,
       bounds: {
         maxX: 100,
         maxY: 50,
@@ -220,6 +222,7 @@ describe('useRive', () => {
     await act(async () => {
       result.current.setContainerRef(containerSpy);
       result.current.setCanvasRef(canvasSpy);
+      controlledRiveloadCb();
     });
 
     // Height and width should be same as containers bounding rect
@@ -243,8 +246,7 @@ describe('useRive', () => {
     }));
 
     const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
+      ...baseRiveMock,
       bounds: {
         maxX: 100,
         maxY: 50,
@@ -260,6 +262,7 @@ describe('useRive', () => {
 
     await act(async () => {
       result.current.setCanvasRef(canvasSpy);
+      controlledRiveloadCb();
     });
 
     expect(observeMock).toBeCalledWith(canvasSpy);
@@ -277,7 +280,7 @@ describe('useRive', () => {
     const stopMock = jest.fn();
 
     const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
+      ...baseRiveMock,
       stop: stopMock,
       play: playMock,
       animationNames: ['light'],
@@ -295,6 +298,7 @@ describe('useRive', () => {
 
     await act(async () => {
       result.current.setCanvasRef(canvasSpy);
+      controlledRiveloadCb();
     });
 
     rerender({
@@ -317,7 +321,7 @@ describe('useRive', () => {
     const stopMock = jest.fn();
 
     const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
+      ...baseRiveMock,
       stop: stopMock,
       play: playMock,
       pause: pauseMock,
@@ -337,6 +341,7 @@ describe('useRive', () => {
 
     await act(async () => {
       result.current.setCanvasRef(canvasSpy);
+      controlledRiveloadCb();
     });
 
     rerender({
@@ -354,20 +359,15 @@ describe('useRive', () => {
       src: 'file-src',
     };
 
-    const riveMock = {
-      on: (_: string, cb: () => void) => cb(),
-      stop: jest.fn(),
-      stopRendering: jest.fn(),
-    };
-
     // @ts-ignore
-    mocked(rive.Rive).mockImplementation(() => riveMock);
+    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;

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,