chore: release 3.0.20

update tests
use window.settimeout and clear out some consts
2026-03-13 08:22:30 +08:00 · 2022-07-22 12:56:26 +00:00 · 2022-07-22 13:52:42 +01:00 · 2022-07-22 13:52:42 +01:00 · 2022-07-22 13:52:42 +01:00 · 2022-07-22 13:52:42 +01:00
11 changed files with 56 additions and 176 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,9 +4,17 @@ 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.20](https://github.com/rive-app/rive-react/compare/v3.0.19...v3.0.20)
+
+- update tests [`24d8e0a`](https://github.com/rive-app/rive-react/commit/24d8e0a90795f650806064d53ae1b362e3fd332f)
+
 #### [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)

--- a/examples/resize-test/README.md
+++ b/examples/resize-test/README.md
@@ -1,32 +0,0 @@
-# To run
-
-This is a basic showcase of a resize issue we have, to test this locally with rive-react changes
-
-1. run `npm start`
-2. run `npm run build` for the rive-react project
-
-If you want to also test local wasm changes: 
-
-1. update `rive-react`/package.json to a locally checked out version of rive-wasm's canvas_single
-`"@rive-app/canvas": "../rive-wasm/js/npm/canvas_single",`
-2. cd to `rive-wasm/js` & run `npm run dev` (keep this going as it will watch for changes)
-3. run `npm start`
-4. run `npm run build` for the rive-react project
-
-
-# Resize issue: 
-
-update parameters in `utils.ts` to see this for yourself.
-
-Resizing from window.resize
-    - bottom animation moves slower than rest
-    - cannot deal with the animations container resizing, unless its linked to the window resizing
-Resizing from ResizeObserver
-    - all animations move together super smooth when resizing
-    - top two animations flicker to white (blank canvas) when resizing
-Resizing form ResizeObserver - throttled (current default)
-    - all animations move "together"
-    - resizing looks pretty smooth, but everything lags behind a bit.
-
-# Other issues
-its also very slow resizing when dev tools is open, its fine when closed though.
--- a/examples/resize-test/package.json
+++ b/examples/resize-test/package.json
@@ -1,36 +0,0 @@
-{
-  "name": "basic-with-hook",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.13.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "file:../../node_modules/react",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "rive-react": "file:../..",
-    "web-vitals": "^1.1.2"
-  },
-  "scripts": {
-    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
--- a/examples/resize-test/public/index.html
+++ b/examples/resize-test/public/index.html
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <title>Rive React - Basic with Hook</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>
--- a/examples/resize-test/public/magic-ball.riv
+++ b/examples/resize-test/public/magic-ball.riv
--- a/examples/resize-test/public/poison-loader.riv
+++ b/examples/resize-test/public/poison-loader.riv
--- a/examples/resize-test/src/App.js
+++ b/examples/resize-test/src/App.js
@@ -1,30 +0,0 @@
-import { useRive } from 'rive-react';
-
-function App() {
-  const params = {
-    src: 'poison-loader.riv',
-    autoplay: true,
-  };
-
-  const { RiveComponent: RiveComponentBasic } = useRive(params);
-  const { RiveComponent: RiveComponentBasic2 } = useRive(params);
-  const { RiveComponent: RiveComponentBasic3 } = useRive(params);
-
-  return (
-    <>
-      <div style={{ width: '100%' }}>
-        <div style={{ height: '300px', width: '100%' }}>
-          <RiveComponentBasic />
-        </div>
-        <div style={{ height: '300px', width: '100%' }}>
-          <RiveComponentBasic2 />
-        </div>
-        <div style={{ height: '300px', width: '100%' }}>
-          <RiveComponentBasic3 />
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default App;
--- a/examples/resize-test/src/index.js
+++ b/examples/resize-test/src/index.js
@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "rive-react",
-  "version": "3.0.19",
+  "version": "3.0.20",
  "description": "React wrapper around the rive-js library",
  "main": "dist/index.js",
  "typings": "dist/types/index.d.ts",
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -12,15 +12,14 @@ function throttle(f: Function, delay: number) {
  let timer = 0;
  return function (this: Function, ...args: any) {
    clearTimeout(timer);
-    timer = setTimeout(() => f.apply(this, args), delay) as unknown as number;
+    timer = window.setTimeout(() => f.apply(this, args), delay);
  };
 }

 const MyResizeObserver = globalThis.ResizeObserver || FakeResizeObserver;
 const hasResizeObserver = globalThis.ResizeObserver !== undefined;
-const preferResizeObserver = true;
-const throttleResizeObserver = true;
-const useResizeObserver = hasResizeObserver && preferResizeObserver;
+
+const useResizeObserver = hasResizeObserver;
 const useWindowListener = !useResizeObserver;

 export function useSize(
@@ -52,23 +51,14 @@ export function useSize(
  }, []);
  const observer = useRef(
    new MyResizeObserver(
-      throttleResizeObserver
-        ? throttle((entries: any) => {
-            if (useResizeObserver) {
-              setSize({
-                width: entries[entries.length - 1].contentRect.width,
-                height: entries[entries.length - 1].contentRect.height,
-              });
-            }
-          }, 16)
-        : (entries: any) => {
-            if (useResizeObserver) {
-              setSize({
-                width: entries[entries.length - 1].contentRect.width,
-                height: entries[entries.length - 1].contentRect.height,
-              });
-            }
-          }
+      throttle((entries: any) => {
+        if (useResizeObserver) {
+          setSize({
+            width: entries[entries.length - 1].contentRect.width,
+            height: entries[entries.length - 1].contentRect.height,
+          });
+        }
+      }, 16)
    )
  );

--- a/test/useStateMachine.test.tsx
+++ b/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,
Author	SHA1	Message	Date
mjtalbot	156b3bdfb5	chore: release 3.0.20	2022-07-22 12:56:26 +00:00
Maxwell Talbot	24d8e0a907	update tests	2022-07-22 13:52:42 +01:00
Maxwell Talbot	a1a155849a	use window.settimeout and clear out some consts	2022-07-22 13:52:42 +01:00
Maxwell Talbot	59e67cec3d	update name	2022-07-22 13:52:42 +01:00
Maxwell Talbot	84b18cc3dd	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.	2022-07-22 13:52:42 +01:00
Maxwell Talbot	1092b44947	update resize behaviour to throttle, add parameters to enable switching modes	2022-07-22 13:52:42 +01:00