chore: release 3.0.3

.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,45 @@ 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.3](https://github.com/rive-app/rive-react/compare/v3.0.1...v3.0.3)
 
-- Fix: Authenticate registry before doing npm release dryrun [`74b791f`](https://github.com/rive-app/rive-react/commit/74b791ffa4042c98aa5d5e02ef03e9df2eb6dd16)
+- Feat: Bump wasm and add examples to support touch feature [`3902948`](https://github.com/rive-app/rive-react/commit/3902948a2ef8af6955ef12124207edee29eb0be8)
+
+#### [v3.0.1](https://github.com/rive-app/rive-react/compare/v3.0.0...v3.0.1)
+
+> 26 April 2022
+
+- Maint: Bump rive wasm to include fps counter API and take off major tag [`83c81b4`](https://github.com/rive-app/rive-react/commit/83c81b49c5a53c5ec9092b83607a78b6e4a69768)
+- chore: release 3.0.1 [`f4eccbe`](https://github.com/rive-app/rive-react/commit/f4eccbe2ce8795f55a6bed7d8b17c2ac59c94c30)
+
+### [v3.0.0](https://github.com/rive-app/rive-react/compare/v2.0.0...v3.0.0)
+
+> 26 April 2022
+
+- Fix animation playing with autoplay false when animation name passed [`aab811b`](https://github.com/rive-app/rive-react/commit/aab811b975d8832c2be14779675392a17b1db5ff)
+- chore: release 3.0.0 [`5de40fa`](https://github.com/rive-app/rive-react/commit/5de40fad5b716be7dcec59c15422e9d41a4962b1)
+
+### [v2.0.0](https://github.com/rive-app/rive-react/compare/v1.0.7...v2.0.0)
+
+> 22 April 2022
+
+- Breaking: Spread non-style props onto canvas element instead of containing div [`5c0b9cd`](https://github.com/rive-app/rive-react/commit/5c0b9cd613873ee565b4ec40d71042c3850a502c)
+- Update: Adding build scripts to prepare for split of rive-react into 2 package derivatives for canvas and webgl [`5c4336b`](https://github.com/rive-app/rive-react/commit/5c4336b84fe55afea1ec9d5e42f530cf29d6d176)
+- Change rive-react-* references to be the shortened namespace-named convention [`4429be4`](https://github.com/rive-app/rive-react/commit/4429be44f2af2b91d9d5e26a65b70e59d9647979)
+
+#### [v1.0.7](https://github.com/rive-app/rive-react/compare/v1.0.6...v1.0.7)
+
+> 20 April 2022
+
+- chore: release 1.0.7 [`6e72ed5`](https://github.com/rive-app/rive-react/commit/6e72ed5271976e886a576f5a6c0d7162eedc81d8)
+- Maint: Allow peer dep React to use v18.0+ [`464fa97`](https://github.com/rive-app/rive-react/commit/464fa97c207e780d31866ecad0437dc16aefd1f2)
+
+#### [v1.0.6](https://github.com/rive-app/rive-react/compare/v1.0.5...v1.0.6)
+
+> 14 April 2022
+
+- chore: release 1.0.6 [`ac01b7e`](https://github.com/rive-app/rive-react/commit/ac01b7ec691c435371f9553df88144c75af18ed4)
+- Maint: Bump webgl dependency up to 1.0.39 [`cd9baef`](https://github.com/rive-app/rive-react/commit/cd9baef25003b491d40d5649ba1d3b5f88bce870)
 
 #### [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.

examples/basic-with-hook/package.json

@@ -6,10 +6,10 @@
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
+    "react": "file:../../node_modules/react",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "rive-react": "latest",
+    "rive-react": "file:../..",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

examples/basic-with-hook/src/App.js

@@ -6,13 +6,23 @@ function App() {
     autoplay: true,
   };
 
-  const { RiveComponent } = useRive(params);
+  const { RiveComponent: RiveComponentBasic } = useRive(params);
+
+  const { RiveComponent: RiveComponentTouch } = useRive({
+    src: 'magic-ball.riv',
+    autoplay: true,
+    stateMachines: "Main State Machine",
+  });
 
   return (
-    // The animation will fit to the parent element.
-    <div style={{ height: '500px', width: '500px' }}>
-      <RiveComponent />
-    </div>
+    <>
+      <div style={{ height: '500px', width: '500px' }}>
+        <RiveComponentBasic />
+      </div>
+      <div style={{ height: '300px', width: '300px' }}>
+        <RiveComponentTouch />
+      </div>
+    </>
   );
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "2.0.0",
+  "version": "3.0.3",
   "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.60",
+    "@rive-app/webgl": "1.0.57"
   },
   "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%');
   });
 });