adding resize example

CHANGELOG.md

@@ -4,32 +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.23](https://github.com/rive-app/rive-react/compare/v3.0.21...v3.0.23)
-
-- Bump runtime version to fix broken version [`3c578b7`](https://github.com/rive-app/rive-react/commit/3c578b730f82059469393522722316f2ad3a61d3)
-
-#### [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)
 

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')
+);

package.json

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

src/utils.ts

@@ -12,14 +12,15 @@ 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 preferResizeObserver = true;
-const useResizeObserver = hasResizeObserver;
+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) => {
+      throttleResizeObserver
+        ? throttle((entries: any) => {
             if (useResizeObserver) {
               setSize({
                 width: entries[entries.length - 1].contentRect.width,
                 height: entries[entries.length - 1].contentRect.height,
               });
             }
-      }, 0)
+          }, 16)
+        : (entries: any) => {
+            if (useResizeObserver) {
+              setSize({
+                width: entries[entries.length - 1].contentRect.width,
+                height: entries[entries.length - 1].contentRect.height,
+              });
+            }
+          }
     )
   );
 

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();
+    const riveMock = {};
-
+    mocked(Rive).mockImplementation(() => riveMock as Rive);
-    mocked(Rive).mockImplementation(() => riveMock);
 
     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: [] });
+    const riveMock = {
-
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    mocked(Rive).mockImplementation(() => riveMock);
+      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] });
+    const riveMock = {
-
+      // 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, '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] });
+    const riveMock = {
-
+      // 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, '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] });
+    const riveMock = {
-    mocked(Rive).mockImplementation(() => 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,