adding resize example

.github/workflows/add_to_project.yml

@@ -1,26 +0,0 @@
-name: Adds all new issues to project board
-
-on:
-  issues:
-    types:
-      - opened
-
-jobs:
-  add-to-project:
-    name: Add issue to project
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/add-to-project@v0.5.0
-        with:
-          project-url: https://github.com/orgs/rive-app/projects/12/views/1
-          github-token: ${{ secrets.ADD_TO_PROJECT_ACTION }}
-          
-      - uses: actions/github-script@v6
-        with:
-          script: |
-            github.rest.issues.addLabels({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              labels: ["triage"]
-            })

CHANGELOG.md

@@ -4,153 +4,9 @@ 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.47](https://github.com/rive-app/rive-react/compare/v3.0.38...v3.0.47)
-
-- patch: bump wasm to 1.1.6 for flicker fix [`89a6802`](https://github.com/rive-app/rive-react/commit/89a6802fa05bb809dc30d740aaff11f4e83eb21a)
-
-#### [v3.0.38](https://github.com/rive-app/rive-react/compare/v3.0.37...v3.0.38)
-
-> 3 March 2023
-
-- chore: release 3.0.38 [`04910f7`](https://github.com/rive-app/rive-react/commit/04910f78f1779242626db0dfb74ab27ae95c75fa)
-- maint: bump wasm dependency for more speed on state updates [`c2977c7`](https://github.com/rive-app/rive-react/commit/c2977c705c5572480be3f253b7237bdc2d3eea35)
-
-#### [v3.0.37](https://github.com/rive-app/rive-react/compare/v3.0.36...v3.0.37)
-
-> 1 March 2023
-
-- chore: release 3.0.37 [`4e21374`](https://github.com/rive-app/rive-react/commit/4e2137422b8c1d135a6501add3f2cc68140f1817)
-- maint: bump wasm dependency for more speed on state updates [`0696417`](https://github.com/rive-app/rive-react/commit/06964179262d4b79114f3609d79cc6560c30ef94)
-
-#### [v3.0.36](https://github.com/rive-app/rive-react/compare/v3.0.35...v3.0.36)
-
-> 22 February 2023
-
-- chore: release 3.0.36 [`f11a433`](https://github.com/rive-app/rive-react/commit/f11a433365c34818976798106fc03a264e6ceaea)
-- Fix: matchMedia add event listener for safari 13 and older versions [`3cbbf99`](https://github.com/rive-app/rive-react/commit/3cbbf99fec90f58cdf410df861f272115a7704e6)
-- maint: bump wasm to support speed on states feature [`48a4726`](https://github.com/rive-app/rive-react/commit/48a4726d1f7a01088959d47580082e5ddfed1492)
-
-#### [v3.0.35](https://github.com/rive-app/rive-react/compare/v3.0.34...v3.0.35)
-
-> 17 January 2023
-
-- chore: release 3.0.35 [`03f05f5`](https://github.com/rive-app/rive-react/commit/03f05f57b7f277d7d90701954b5ca09842bcaab6)
-- fix: update rive-wasm to try patching slow burn memory leak [`8b483b8`](https://github.com/rive-app/rive-react/commit/8b483b807b8207fe12c864e19f64592c0bedac46)
-
-#### [v3.0.34](https://github.com/rive-app/rive-react/compare/v3.0.33...v3.0.34)
-
-> 16 December 2022
-
-- chore: release 3.0.34 [`816fcfc`](https://github.com/rive-app/rive-react/commit/816fcfcdbcb9f2d8f83cc7887f43aae011dee3be)
-- Bumping rive-app/canvas & webgl versions. [`6c28a87`](https://github.com/rive-app/rive-react/commit/6c28a8795eeabc10aa8bdcee99ee9754d924d0ae)
-
-#### [v3.0.33](https://github.com/rive-app/rive-react/compare/v3.0.32...v3.0.33)
-
-> 8 November 2022
-
-- maint: bump wasm runtime and replace old skills rive file example [`acba24c`](https://github.com/rive-app/rive-react/commit/acba24c4ed4f703303615819678c7273c385286f)
-- chore: release 3.0.33 [`6a57630`](https://github.com/rive-app/rive-react/commit/6a57630ae67df057472a6d40f354fcfe53cb5521)
-
-#### [v3.0.32](https://github.com/rive-app/rive-react/compare/v3.0.31...v3.0.32)
-
-> 21 October 2022
-
-- chore: release 3.0.32 [`1e6eb5e`](https://github.com/rive-app/rive-react/commit/1e6eb5ec927aa0bb10ee1e7659c4824c64702f58)
-- Bumping to latest Rive WASM to fix https://2dimensions.slack.com/archives/CLLCU09T6/p1666370141425879 [`6871a81`](https://github.com/rive-app/rive-react/commit/6871a81ebd17038426e7089ed836379d02a9c5fd)
-
-#### [v3.0.31](https://github.com/rive-app/rive-react/compare/v3.0.30...v3.0.31)
-
-> 21 October 2022
-
-- chore: release 3.0.31 [`33053b3`](https://github.com/rive-app/rive-react/commit/33053b3b7f0ff6d99ce4383ecea1f031ccb587e0)
-- bump runtimes to incorporate speed fix for state machines [`4040083`](https://github.com/rive-app/rive-react/commit/4040083d5a89510356e45433e5026664baf92a49)
-
-#### [v3.0.30](https://github.com/rive-app/rive-react/compare/v3.0.29...v3.0.30)
-
-> 20 October 2022
-
-- chore: release 3.0.30 [`2153b81`](https://github.com/rive-app/rive-react/commit/2153b81e6b74d33d1e2f709291fad338dcbb85da)
-- Bump dependencies to fix call to runtime cleanup [`6b1500e`](https://github.com/rive-app/rive-react/commit/6b1500e681ba8984d786eec4d414c4c8ad4b0268)
-
-#### [v3.0.29](https://github.com/rive-app/rive-react/compare/v3.0.28...v3.0.29)
-
-> 20 October 2022
-
-- chore: release 3.0.29 [`503702c`](https://github.com/rive-app/rive-react/commit/503702cf1f963204e3519b9b3dbfea1bfa271d0a)
-- Call cleanup on unmount [`7be20b0`](https://github.com/rive-app/rive-react/commit/7be20b0a874afab7f6a29122521f42c71a22aa51)
-
-#### [v3.0.28](https://github.com/rive-app/rive-react/compare/v3.0.27...v3.0.28)
-
-> 20 October 2022
-
-- chore: release 3.0.28 [`78491f5`](https://github.com/rive-app/rive-react/commit/78491f5819b78b2e7435a2509e89fd3c672f3126)
-- Bump canvas and webgl dependencies to fix alignment memory leaks [`39edb88`](https://github.com/rive-app/rive-react/commit/39edb88a19aaff478e4e9cbeeef58414f28fdb60)
-
-#### [v3.0.27](https://github.com/rive-app/rive-react/compare/v3.0.26...v3.0.27)
-
-> 4 October 2022
-
-- chore: release 3.0.27 [`fd1a165`](https://github.com/rive-app/rive-react/commit/fd1a1653b13c2fd15f2862e6c372a27fd49acd00)
-- Fix: Bump wasm to accomodate clipping bug on nested artboards [`8d7f0ab`](https://github.com/rive-app/rive-react/commit/8d7f0ab28c8aa6af3abe5269e7b8980cc1a8dbe7)
-
-#### [v3.0.26](https://github.com/rive-app/rive-react/compare/v3.0.25...v3.0.26)
-
-> 22 September 2022
-
-- fix: Adjust canvas size if devicePixelRatio changes for any reaason [`2b1aa01`](https://github.com/rive-app/rive-react/commit/2b1aa01a87c14f71b980d160f6607edc12d3eed6)
-- chore: release 3.0.26 [`2a2e532`](https://github.com/rive-app/rive-react/commit/2a2e53256401b6d7137db4b73c5901d587a888af)
-
-#### [v3.0.25](https://github.com/rive-app/rive-react/compare/v3.0.24...v3.0.25)
-
-> 21 September 2022
-
-- chore: release 3.0.25 [`06c4e2a`](https://github.com/rive-app/rive-react/commit/06c4e2aea39d8e08ee12760663bd612ca77f3e9c)
-- 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)
 

README.md

@@ -50,7 +50,7 @@ Check out our Storybook instance that shows how to use the library in small exam
 - [Example page](https://rive-app.github.io/rive-react)
 - [Login screen w/ input tracking](https://rive-app.github.io/rive-use-cases/?path=/story/example-loginformcomponent--primary)
 - [Mouse tracking](https://codesandbox.io/s/rive-mouse-track-test-t0y965?file=/src/App.js)
-- [Accessibility concerns](https://rive.app/blog/accesible-web-animations-aria-live-regions)
+- [Accessibility concerns](https://blog.rive.app/accessible-web-animations-aria-live-regions/)
 
 ## Migration Guides
 

examples/resize-test/README.md

@@ -0,0 +1,32 @@
+# 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.

examples/resize-test/package.json

@@ -0,0 +1,36 @@
+{
+  "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"
+    ]
+  }
+}

examples/resize-test/public/index.html

@@ -0,0 +1,17 @@
+<!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>

examples/resize-test/src/App.js

@@ -0,0 +1,30 @@
+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;

examples/resize-test/src/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

examples/stories/StateMachineDocs.stories.mdx

@@ -4,8 +4,8 @@ import { useState } from 'react';
 
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 
-import RiveComponent, { useRive, useStateMachineInput } from '../../src';
-import { Button } from './components/Button';
+import RiveComponent, {useRive, useStateMachineInput} from '../../src';
+import {Button} from './components/Button';
 import './rive-overview.css';
 
 <Meta title="React Runtime/State Machines" />
@@ -15,7 +15,6 @@ import './rive-overview.css';
 Not familiar with Rive State Machines? Check out our [help docs](https://help.rive.app/editor/state-machine) on what these are first!
 
 The `useStateMachineInput` hook is a helper that makes grabbing references to state machine inputs easier to setup. This hook should be used along with the `useRive` hook, as you need to pass in the `rive` instance returned from `useRive`. See each of the examples below to see usage of the hook creating instance of three types of inputs:
-
 - Booleans
 - Numbers
 - Triggers
@@ -91,8 +90,8 @@ Once you grab a reference to the state machine input, you can get/set the value
 <Canvas withSource="open">
   <Story name="Number input">
     {() => {
-      const STATE_MACHINE_NAME = 'skill-controller';
-      const INPUT_NAME = 'level';
+      const STATE_MACHINE_NAME = 'State Machine ';
+      const INPUT_NAME = 'Level';
       const { rive, RiveComponent: RiveComponentTouch } = useRive({
         src: 'skills.riv',
         stateMachines: STATE_MACHINE_NAME,
@@ -102,11 +101,7 @@ Once you grab a reference to the state machine input, you can get/set the value
       // levelInput is a number state machine input. To transition the state machine,
       // we need to set the value to a number. For this state machine input, we need
       // to set to 0, 1 or 2 for a state transition to occur.
-      const levelInput = useStateMachineInput(
-        rive,
-        STATE_MACHINE_NAME,
-        INPUT_NAME
-      );
+      const levelInput = useStateMachineInput(rive, STATE_MACHINE_NAME, INPUT_NAME);
       return (
         // The animation will fit to the parent element, so we set a large height
         // and width for this example.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "3.0.47",
+  "version": "3.0.19",
   "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.1.6",
-    "@rive-app/webgl": "1.1.6"
+    "@rive-app/canvas": "1.0.71",
+    "@rive-app/webgl": "1.0.68"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

src/components/Rive.tsx

@@ -28,11 +28,7 @@ export interface RiveProps {
    * For `@rive-app/react-webgl`, sets this property to maintain a single WebGL context for multiple canvases. **We recommend to keep the default value** when rendering multiple Rive instances on a page.
    */
   useOffscreenRenderer?: boolean;
-  /**
-   * Specify whether to disable Rive listeners on the canvas, thus preventing any event listeners to be attached to the canvas element
-   */
-  shouldDisableRiveListeners?: boolean;
-}
+};
 
 const Rive = ({
   src,
@@ -41,7 +37,6 @@ const Rive = ({
   stateMachines,
   layout,
   useOffscreenRenderer = true,
-  shouldDisableRiveListeners = false,
   ...rest
 }: RiveProps & ComponentProps<'canvas'>) => {
   const params = {
@@ -51,7 +46,6 @@ const Rive = ({
     layout,
     stateMachines,
     autoplay: true,
-    shouldDisableRiveListeners,
   };
 
   const options = {

src/hooks/useRive.tsx

@@ -13,7 +13,7 @@ import {
   RiveState,
   Dimensions,
 } from '../types';
-import { useSize, useDevicePixelRatio } from '../utils';
+import { useSize } from '../utils';
 
 type RiveComponentProps = {
   setContainerRef: RefCallback<HTMLElement>;
@@ -39,11 +39,7 @@ function RiveComponent({
       className={className}
       {...(!className && { style: containerStyle })}
     >
-      <canvas
-        ref={setCanvasRef}
-        style={{ verticalAlign: 'top', width: 0, height: 0 }}
-        {...rest}
-      />
+      <canvas ref={setCanvasRef} style={{ verticalAlign: 'top' }} {...rest} />
     </div>
   );
 }
@@ -86,12 +82,7 @@ export default function useRive(
   const containerRef = useRef<HTMLElement | null>(null);
 
   const [rive, setRive] = useState<Rive | null>(null);
-  const [lastContainerDimensions, setLastContainerDimensions] =
-    useState<Dimensions>({
-      height: 0,
-      width: 0,
-    });
-  const [lastCanvasSize, setLastCanvasSize] = useState<Dimensions>({
+  const [dimensions, setDimensions] = useState<Dimensions>({
     height: 0,
     width: 0,
   });
@@ -99,7 +90,6 @@ export default function useRive(
   // Listen to changes in the window sizes and update the bounds when changes
   // occur.
   const size = useSize(containerRef);
-  const currentDevicePixelRatio = useDevicePixelRatio();
 
   const isParamsLoaded = Boolean(riveParams);
   const options = getOptions(opts);
@@ -137,42 +127,23 @@ export default function useRive(
     }
 
     const { width, height } = getCanvasDimensions();
-    if (canvasRef.current && rive) {
-      // Check if the canvas parent container bounds have changed and set
-      // new values accordingly
-      const boundsChanged =
-        width !== lastContainerDimensions.width ||
-        height !== lastContainerDimensions.height;
-      if (options.fitCanvasToArtboardHeight && boundsChanged) {
+    const boundsChanged =
+      width !== dimensions.width || height !== dimensions.height;
+    if (canvasRef.current && rive && boundsChanged) {
+      if (options.fitCanvasToArtboardHeight) {
         containerRef.current.style.height = height + 'px';
       }
       if (options.useDevicePixelRatio) {
-        // Check if devicePixelRatio may have changed and get new canvas
-        // width/height values to set the size
-        const canvasSizeChanged =
-          width * currentDevicePixelRatio !== lastCanvasSize.width ||
-          height * currentDevicePixelRatio !== lastCanvasSize.height;
-        if (boundsChanged || canvasSizeChanged) {
-          const newCanvasWidthProp = currentDevicePixelRatio * width;
-          const newCanvasHeightProp = currentDevicePixelRatio * height;
-          canvasRef.current.width = newCanvasWidthProp;
-          canvasRef.current.height = newCanvasHeightProp;
-          canvasRef.current.style.width = width + 'px';
-          canvasRef.current.style.height = height + 'px';
-          setLastCanvasSize({
-            width: newCanvasWidthProp,
-            height: newCanvasHeightProp,
-          });
-        }
-      } else if (boundsChanged) {
+        const dpr = window.devicePixelRatio || 1;
+        canvasRef.current.width = dpr * width;
+        canvasRef.current.height = dpr * height;
+        canvasRef.current.style.width = width + 'px';
+        canvasRef.current.style.height = height + 'px';
+      } else {
         canvasRef.current.width = width;
         canvasRef.current.height = height;
-        setLastCanvasSize({
-          width: width,
-          height: height,
-        });
       }
-      setLastContainerDimensions({ width, height });
+      setDimensions({ width, height });
 
       // Updating the canvas width or height will clear the canvas, so call
       // startRendering() to redraw the current frame as the animation might
@@ -196,7 +167,7 @@ export default function useRive(
     if (rive) {
       updateBounds();
     }
-  }, [rive, size, currentDevicePixelRatio]);
+  }, [rive, size]);
 
   /**
    * Ref callback called when the canvas element mounts and unmounts.
@@ -215,9 +186,6 @@ export default function useRive(
           // on an unmounted component in some rare cases
           if (canvasRef.current) {
             setRive(r);
-          } else {
-            // If unmounted, cleanup the rive object immediately
-            r.cleanup();
           }
         });
       } else if (canvas === null && canvasRef.current) {
@@ -260,13 +228,12 @@ export default function useRive(
   }, [rive]);
 
   /**
-   * On unmount, call cleanup to cleanup any WASM generated objects that need
-   * to be manually destroyed.
+   * On unmount, stop rive from rendering.
    */
   useEffect(() => {
     return () => {
       if (rive) {
-        rive.cleanup();
+        rive.stop();
         setRive(null);
       }
     };

src/utils.ts

@@ -3,23 +3,24 @@ import { Dimensions } from './types';
 
 // There are polyfills for this, but they add hundreds of lines of code
 class FakeResizeObserver {
-  observe() { }
-  unobserve() { }
-  disconnect() { }
+  observe() {}
+  unobserve() {}
+  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);
+    timer = setTimeout(() => f.apply(this, args), delay) as unknown as number;
   };
 }
 
 const MyResizeObserver = globalThis.ResizeObserver || FakeResizeObserver;
 const hasResizeObserver = globalThis.ResizeObserver !== undefined;
-
-const useResizeObserver = hasResizeObserver;
+const preferResizeObserver = true;
+const throttleResizeObserver = true;
+const useResizeObserver = hasResizeObserver && preferResizeObserver;
 const useWindowListener = !useResizeObserver;
 
 export function useSize(
@@ -51,14 +52,23 @@ export function useSize(
   }, []);
   const observer = useRef(
     new MyResizeObserver(
-      throttle((entries: any) => {
-        if (useResizeObserver) {
-          setSize({
-            width: entries[entries.length - 1].contentRect.width,
-            height: entries[entries.length - 1].contentRect.height,
-          });
-        }
-      }, 0)
+      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,
+              });
+            }
+          }
     )
   );
 
@@ -78,52 +88,3 @@ export function useSize(
 
   return size;
 }
-
-/**
- * Listen for devicePixelRatio changes and set the new value accordingly. This could
- * happen for reasons such as:
- * - User moves window from retina screen display to a separate monitor
- * - User controls zoom settings on the browser
- *
- * Source: https://github.com/rexxars/use-device-pixel-ratio/blob/main/index.ts
- *
- * @returns dpr: Number - Device pixel ratio; ratio of physical px to resolution in CSS pixels for current device
- */
-export function useDevicePixelRatio() {
-  const dpr = getDevicePixelRatio();
-  const [currentDpr, setCurrentDpr] = useState(dpr);
-
-  useEffect(() => {
-    const canListen = typeof window !== 'undefined' && 'matchMedia' in window;
-    if (!canListen) {
-      return;
-    }
-
-    const updateDpr = () => {
-      const newDpr = getDevicePixelRatio();
-      setCurrentDpr(newDpr);
-    };
-    const mediaMatcher = window.matchMedia(
-      `screen and (resolution: ${currentDpr}dppx)`
-    );
-    mediaMatcher.hasOwnProperty('addEventListener')
-      ? mediaMatcher.addEventListener('change', updateDpr)
-      : mediaMatcher.addListener(updateDpr);
-
-    return () => {
-      mediaMatcher.hasOwnProperty('removeEventListener')
-        ? mediaMatcher.removeEventListener('change', updateDpr)
-        : mediaMatcher.removeListener(updateDpr);
-    };
-  }, [currentDpr]);
-
-  return currentDpr;
-}
-
-export function getDevicePixelRatio(): number {
-  const hasDprProp =
-    typeof window !== 'undefined' &&
-    typeof window.devicePixelRatio === 'number';
-  const dpr = hasDprProp ? window.devicePixelRatio : 1;
-  return Math.min(Math.max(1, dpr), 3);
-}

test/useRive.test.tsx

@@ -102,16 +102,16 @@ describe('useRive', () => {
     expect(resizeToCanvasMock).toBeCalled();
   });
 
-  it('calls cleanup on the rive object on unmount', async () => {
+  it('stops the rive object on unmount', async () => {
     const params = {
       src: 'file-src',
     };
 
-    const cleanupMock = jest.fn();
+    const stopMock = jest.fn();
 
     const riveMock = {
       ...baseRiveMock,
-      cleanup: cleanupMock,
+      stop: stopMock,
     };
 
     // @ts-ignore
@@ -127,7 +127,7 @@ describe('useRive', () => {
 
     unmount();
 
-    expect(cleanupMock).toBeCalled();
+    expect(stopMock).toBeCalled();
   });
 
   it('sets the a bounds with the devicePixelRatio by default', async () => {
@@ -376,79 +376,4 @@ 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');
-  });
-
-  it('updates the canvas dimensions and size if there is a new canvas size calculation', async () => {
-    const params = {
-      src: 'file-src',
-    };
-
-    window.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).toHaveAttribute('width', '200');
-    expect(canvasSpy).toHaveAttribute('height', '200');
-  });
 });

test/useStateMachine.test.tsx

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