chore: release 3.0.21

rev rive-wasm dependencies & update render delay to be 0ms
chore: release 3.0.20
2026-03-13 08:22:30 +08:00 · 2022-07-22 13:34:00 +00:00 · 2022-07-22 14:30:04 +01: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
11 changed files with 58 additions and 178 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.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)
--- 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.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/canvas": "1.0.75",
-    "@rive-app/webgl": "1.0.68"
+    "@rive-app/webgl": "1.0.72"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
--- 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;
 const useResizeObserver = hasResizeObserver && preferResizeObserver;
 const useWindowListener = !useResizeObserver;
 export function useSize(
@@ -52,23 +51,14 @@ export function useSize(
  }, []);
  const observer = useRef(
    new MyResizeObserver(
-      throttleResizeObserver
+      throttle((entries: any) => {
        ? throttle((entries: any) => {
        if (useResizeObserver) {
          setSize({
            width: entries[entries.length - 1].contentRect.width,
            height: entries[entries.length - 1].contentRect.height,
          });
        }
-          }, 16)
+      }, 0)
        : (entries: any) => {
            if (useResizeObserver) {
              setSize({
                width: entries[entries.length - 1].contentRect.width,
                height: entries[entries.length - 1].contentRect.height,
              });
            }
          }
    )
  );
--- 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 = {};
+    const riveMock = getRiveMock();
-    mocked(Rive).mockImplementation(() => riveMock as Rive);
+
    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 = {};
+    const riveMock = getRiveMock();
    mocked(Rive).mockImplementation(() => riveMock as Rive);
    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 = {
+    const riveMock = getRiveMock({ smiInputs: [] });
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
-      stateMachineInputs: (_: string) => [] as StateMachineInput[],
+    mocked(Rive).mockImplementation(() => riveMock);
    };
    mocked(Rive).mockImplementation(() => riveMock as Rive);
    const { result } = renderHook(() =>
      useStateMachineInput(riveMock as Rive, 'smName', '')
@@ -69,14 +83,12 @@ describe('useStateMachineInput', () => {
    const smInput = {
      name: 'boolInput',
    } as StateMachineInput;
-    const riveMock = {
+    const riveMock = getRiveMock({ smiInputs: [smInput] });
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
-      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
+    mocked(Rive).mockImplementation(() => riveMock);
    };
    mocked(Rive).mockImplementation(() => riveMock as Rive);
    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 = {
+    const riveMock = getRiveMock({ smiInputs: [smInput] });
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
-      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
+    mocked(Rive).mockImplementation(() => riveMock);
    };
    mocked(Rive).mockImplementation(() => riveMock as Rive);
    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 = {
+    const riveMock = getRiveMock({ smiInputs: [smInput] });
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    mocked(Rive).mockImplementation(() => riveMock);
      stateMachineInputs: (_: string) => [smInput] as StateMachineInput[],
    };
    mocked(Rive).mockImplementation(() => riveMock as Rive);
    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	f7aced03cd	chore: release 3.0.21	2022-07-22 13:34:00 +00:00
Maxwell Talbot	eb07281415	rev rive-wasm dependencies & update render delay to be 0ms	2022-07-22 14:30:04 +01:00
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