chore: release 3.0.1

.github/workflows/publish.yml

@@ -25,7 +25,7 @@ jobs:
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
       - id: determine_version
         name: Get Version
-        run: npm run release -- major --ci --release-version | tail -n 1 > RELEASE_VERSION
+        run: npm run release -- --ci --release-version | tail -n 1 > RELEASE_VERSION
         working-directory: ./
         env:
           GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
@@ -72,7 +72,7 @@ jobs:
       - name: Release rive-react
         env:
           GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
-        run: npm run release -- major --ci
+        run: npm run release -- --ci
       - name: Release @rive-app/react-* variants
         env:
           GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}

CHANGELOG.md

@@ -4,9 +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).
 
-#### [v2.0.0](https://github.com/rive-app/rive-react/compare/v1.0.5...v2.0.0)
+#### [v3.0.1](https://github.com/rive-app/rive-react/compare/v1.0.5...v3.0.1)
 
-- Fix: Authenticate registry before doing npm release dryrun [`74b791f`](https://github.com/rive-app/rive-react/commit/74b791ffa4042c98aa5d5e02ef03e9df2eb6dd16)
+- Maint: Bump rive wasm to include fps counter API and take off major tag [`83c81b4`](https://github.com/rive-app/rive-react/commit/83c81b49c5a53c5ec9092b83607a78b6e4a69768)
 
 #### [v1.0.5](https://github.com/rive-app/rive-react/compare/v1.0.4...v1.0.5)
 

README.md

@@ -200,3 +200,8 @@ In most cases, you may be able to migrate safely. We are mainly enabling the Rea
 
 #### Classes, styles, and component props
 Starting in v2.0, we introduce one breaking change where any non-style props set on the `RiveComponent` (i.e `aria-*`, `role`, etc.) will be set on the inner `<canvas>` element. Previously, all extra props would be set onto the containing `<div>` element. Both the `className` and `style` props will continue to be set on the `<div>` element that wraps the canvas, as this dictates the sizing of the Rive component.
+
+
+### Migrating to 3.0
+
+There are no breaking changes here. If you have migrated to v2.x.x, you can safely migrate to 3.0.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "2.0.0",
+  "version": "3.0.1",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -27,8 +27,8 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "1.0.46",
-    "@rive-app/webgl": "1.0.43"
+    "@rive-app/canvas": "1.0.47",
+    "@rive-app/webgl": "1.0.44"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

src/hooks/useRive.tsx

@@ -233,8 +233,13 @@ export default function useRive(
   const animations = riveParams?.animations;
   useEffect(() => {
     if (rive && animations) {
-      rive.stop(rive.animationNames);
-      rive.play(animations);
+      if (rive.isPlaying) {
+        rive.stop(rive.animationNames);
+        rive.play(animations);
+      } else if (rive.isPaused) {
+        rive.stop(rive.animationNames);
+        rive.pause(animations);
+      }
     }
   }, [animations, rive]);
 

test/useRive.test.tsx

@@ -287,6 +287,7 @@ describe('useRive', () => {
       stop: stopMock,
       play: playMock,
       animationNames: ['light'],
+      isPlaying: true,
     };
 
     // @ts-ignore
@@ -311,6 +312,49 @@ describe('useRive', () => {
     expect(playMock).toBeCalledWith('dark');
   });
 
+  it('updates the paused animation when the animations param changes if the animation is paused', async () => {
+    const params = {
+      src: 'file-src',
+      animations: 'light',
+    };
+
+    const playMock = jest.fn();
+    const pauseMock = jest.fn();
+    const stopMock = jest.fn();
+
+    const riveMock = {
+      on: (_: string, cb: () => void) => cb(),
+      stop: stopMock,
+      play: playMock,
+      pause: pauseMock,
+      animationNames: ['light'],
+      isPlaying: false,
+      isPaused: true,
+    };
+
+    // @ts-ignore
+    mocked(rive.Rive).mockImplementation(() => riveMock);
+
+    const canvasSpy = document.createElement('canvas');
+
+    const { result, rerender } = renderHook((params) => useRive(params), {
+      initialProps: params,
+    });
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+    });
+
+    rerender({
+      src: 'file-src',
+      animations: 'dark',
+    });
+
+    expect(stopMock).toBeCalledWith(['light']);
+    expect(pauseMock).toBeCalledWith('dark');
+    expect(playMock).not.toBeCalled();
+  });
+
   it('does not set styles if className is passed in for the canvas container', async () => {
     const params = {
       src: 'file-src',
@@ -332,8 +376,10 @@ describe('useRive', () => {
       result.current.setCanvasRef(canvasSpy);
     });
 
-    const {RiveComponent: RiveTestComponent} = result.current;
-    const {container} = render(<RiveTestComponent className="rive-test-clas" style={{width: '50%'}} />);
+    const { RiveComponent: RiveTestComponent } = result.current;
+    const { container } = render(
+      <RiveTestComponent className="rive-test-clas" style={{ width: '50%' }} />
+    );
     expect(container.firstChild).not.toHaveStyle('width: 50%');
   });
 });