chore: release 4.8.4

CHANGELOG.md

@@ -4,8 +4,59 @@ 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).
 
+#### [v4.8.4](https://github.com/rive-app/rive-react/compare/v4.8.3...v4.8.4)
+
+- feat: add new webgl2 package for new Rive Renderer [`a7875b2`](https://github.com/rive-app/rive-react/commit/a7875b26a43342f6380a5009b25b831acfcfb610)
+- Update README.md [`4653b8b`](https://github.com/rive-app/rive-react/commit/4653b8bea1169408c94962e80fe3f2c34c8b221f)
+- bump version to 2.12.0 [`89d3597`](https://github.com/rive-app/rive-react/commit/89d35976d4c8c91eddeb35b9dda5e3073ef45851)
+
+#### [v4.8.3](https://github.com/rive-app/rive-react/compare/v4.8.2...v4.8.3)
+
+> 26 February 2024
+
+- chore: release 4.8.3 [`0d0688f`](https://github.com/rive-app/rive-react/commit/0d0688feb6a7f5dedacbfd15a16bc4cb30e97a04)
+- chore: bump rive-wasm to 2.10.3 for text bug fixes [`7a97c14`](https://github.com/rive-app/rive-react/commit/7a97c14c93422cb0d133fd2533c08af7eb81ba95)
+
+#### [v4.8.2](https://github.com/rive-app/rive-react/compare/v4.8.1...v4.8.2)
+
+> 21 February 2024
+
+- chore: release 4.8.2 [`cff7875`](https://github.com/rive-app/rive-react/commit/cff787524ddd8b9286e5322b97be2c236834d854)
+- chore: bump rive-wasm to 2.10.2 for various dependency fixes [`a34a588`](https://github.com/rive-app/rive-react/commit/a34a588ee5c47e9c16f4d66d44446a311863d5e6)
+
+#### [v4.8.1](https://github.com/rive-app/rive-react/compare/v4.8.0...v4.8.1)
+
+> 9 February 2024
+
+- chore: release 4.8.1 [`aa89f2a`](https://github.com/rive-app/rive-react/commit/aa89f2a1baf9da73f71ed74616cd87059b32df74)
+- chore: bump rive-wasm to 2.10.1 for text fix at c++ level [`39d275b`](https://github.com/rive-app/rive-react/commit/39d275b3e0ca0cd0b2f296370094fd39efe1662a)
+
+#### [v4.8.0](https://github.com/rive-app/rive-react/compare/v4.7.1...v4.8.0)
+
+> 6 February 2024
+
+- chore: release 4.8.0 [`e22acf9`](https://github.com/rive-app/rive-react/commit/e22acf98ba2b2464b3a6b6f73f518a42852a2d0e)
+- chore: bump rive-wasm dependency to 2.10.0 [`2e52e35`](https://github.com/rive-app/rive-react/commit/2e52e35ddcdb6c169fcedaf792baa3eeab52b1c7)
+
+#### [v4.7.1](https://github.com/rive-app/rive-react/compare/v4.7.0...v4.7.1)
+
+> 9 January 2024
+
+- feat: add customDevicePixelRatio param from WASM for adjusting canvas size based on dpr [`c2319b8`](https://github.com/rive-app/rive-react/commit/c2319b8dea562320966d09f54e0057a643ed7e92)
+- chore: release 4.7.1 [`f67cb24`](https://github.com/rive-app/rive-react/commit/f67cb244d2d1ebd9cf4645ca94c45875a623209c)
+
+#### [v4.7.0](https://github.com/rive-app/rive-react/compare/v4.6.2...v4.7.0)
+
+> 21 December 2023
+
+- chore: release 4.7.0 [`877e43e`](https://github.com/rive-app/rive-react/commit/877e43e354b11cfa1f774515f9d00f1c013ef2ac)
+- chore: bump rive-wasm to 2.9.0 for iOS check when creating offscreen webgl in c2d renderer [`6a033a9`](https://github.com/rive-app/rive-react/commit/6a033a99d30b85fdd6b82aada28036d3a6112054)
+
 #### [v4.6.2](https://github.com/rive-app/rive-react/compare/v4.6.1...v4.6.2)
 
+> 15 December 2023
+
+- chore: release 4.6.2 [`88f7558`](https://github.com/rive-app/rive-react/commit/88f7558ddf9172bd90bfdeb8ecc138ec81b1ca25)
 - chore: bump rive-wasm to 2.8.3 to reintroduce cleaning up of image textures [`cfe3a29`](https://github.com/rive-app/rive-react/commit/cfe3a298fba9157ecf27ccac775ae13cb3e3953b)
 
 #### [v4.6.1](https://github.com/rive-app/rive-react/compare/v4.6.0...v4.6.1)

README.md

@@ -5,7 +5,7 @@
 
 # Rive React
 
-![Rive hero image](https://rive-app.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fff44ed5f-1eea-4154-81ef-84547e61c3fd%2Frive_notion.png?table=block&id=f198cab2-c0bc-4ce8-970c-42220379bcf3&spaceId=9c949665-9ad9-445f-b9c4-5ee204f8b60c&width=2000&userId=&cache=v2)
+![Rive hero image](https://cdn.rive.app/rive_logo_dark_bg.png)
 
 A React runtime library for [Rive](https://rive.app).
 
@@ -21,7 +21,7 @@ This library is a wrapper around the [JS/Wasm runtime](https://github.com/rive-a
 - 👨‍💻 [Contributing](#contributing)
 - :question: [Issues](#issues)
 
-## Rive Overview
+## Rive overview
 
 [Rive](https://rive.app) is a real-time interactive design and animation tool that helps teams create and run interactive animations anywhere. Designers and developers use our collaborative editor to create motion graphics that respond to different states and user inputs. Our lightweight open-source runtime libraries allow them to load their animations into apps, games, and websites.
 
@@ -31,7 +31,7 @@ This library is a wrapper around the [JS/Wasm runtime](https://github.com/rive-a
 
 🛠 [Resources for building in Rive](https://rive.app/resources/)
 
-## Getting Started
+## Getting started
 
 Follow along with the link below for a quick start in getting Rive React integrated into your React apps.
 
@@ -39,7 +39,7 @@ Follow along with the link below for a quick start in getting Rive React integra
 
 [API documentation](https://help.rive.app/runtimes/overview/react/parameters-and-return-values)
 
-## Supported Versions
+## Supported versions
 
 This library supports React versions `^16.8.0` through `^18.0.0`.
 
@@ -56,7 +56,7 @@ Check out our Storybook instance that shows how to use the library in small exam
 
 For even more examples and resources on using Rive at runtime or in other tools, checkout the [awesome-rive](https://github.com/rive-app/awesome-rive) repo.
 
-## Migration Guides
+## Migration guides
 
 Using an older version of the runtime and need to learn how to upgrade to the latest version? Check out the migration guides below in our help center that help guide you through version bumps; breaking changes and all!
 

npm/react-canvas-lite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas-lite",
-  "version": "4.6.2",
+  "version": "4.8.4",
   "description": "React wrapper around the @rive-app/canvas-lite library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -18,7 +18,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas-lite": "2.8.3"
+    "@rive-app/canvas-lite": "2.12.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

npm/react-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas",
-  "version": "4.6.2",
+  "version": "4.8.4",
   "description": "React wrapper around the @rive-app/canvas library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -18,7 +18,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "2.8.3"
+    "@rive-app/canvas": "2.12.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

npm/react-webgl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-webgl",
-  "version": "4.6.2",
+  "version": "4.8.4",
   "description": "React wrapper around the @rive-app/webgl library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -18,7 +18,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/webgl": "2.8.3"
+    "@rive-app/webgl": "2.12.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

npm/react-webgl2/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@rive-app/react-webgl2",
+  "version": "4.8.4",
+  "description": "React wrapper around the @rive-app/webgl2 library",
+  "main": "dist/index.js",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rive-app/rive-react.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rive-app/rive-react/issues"
+  },
+  "homepage": "https://github.com/rive-app/rive-react#readme",
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "4.6.2",
+  "version": "4.8.4",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -36,9 +36,9 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "2.8.3",
-    "@rive-app/canvas-lite": "2.8.3",
-    "@rive-app/webgl": "2.8.3"
+    "@rive-app/canvas": "2.12.0",
+    "@rive-app/canvas-lite": "2.12.0",
+    "@rive-app/webgl": "2.12.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

scripts/build.sh

@@ -6,6 +6,7 @@ set -e
 cp -r ./dist ./npm/react-webgl
 cp -r ./dist ./npm/react-canvas
 cp -r ./dist ./npm/react-canvas-lite
+cp -r ./dist ./npm/react-webgl2
 
 echo "Replacing the canvas with webgl references in react-webgl"
 pushd ./npm/react-webgl/dist
@@ -18,6 +19,17 @@ else
 fi
 popd
 
+echo "Replacing the canvas with webgl2 references in react-webgl2"
+pushd ./npm/react-webgl2/dist
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
+else
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl2/g'
+fi
+popd
+
 echo "Replacing the canvas with canvas-lite references in react-canvas-lite"
 pushd ./npm/react-canvas-lite/dist
 if [[ "$OSTYPE" == "darwin"* ]]; then

src/hooks/useDevicePixelRatio.ts

@@ -7,10 +7,12 @@ import { useEffect, useState } from 'react';
  *
  * Source: https://github.com/rexxars/use-device-pixel-ratio/blob/main/index.ts
  *
+ * @param customDevicePixelRatio - Number to force a dpr to abide by, rather than using the window's
+ *
  * @returns dpr: Number - Device pixel ratio; ratio of physical px to resolution in CSS pixels for current device
  */
-export default function useDevicePixelRatio() {
-  const dpr = getDevicePixelRatio();
+export default function useDevicePixelRatio(customDevicePixelRatio?: number) {
+  const dpr = customDevicePixelRatio || getDevicePixelRatio();
   const [currentDpr, setCurrentDpr] = useState(dpr);
 
   useEffect(() => {
@@ -20,7 +22,7 @@ export default function useDevicePixelRatio() {
     }
 
     const updateDpr = () => {
-      const newDpr = getDevicePixelRatio();
+      const newDpr = customDevicePixelRatio || getDevicePixelRatio();
       setCurrentDpr(newDpr);
     };
     const mediaMatcher = window.matchMedia(
@@ -35,7 +37,7 @@ export default function useDevicePixelRatio() {
         ? mediaMatcher.removeEventListener('change', updateDpr)
         : mediaMatcher.removeListener(updateDpr);
     };
-  }, [currentDpr]);
+  }, [currentDpr, customDevicePixelRatio]);
 
   return currentDpr;
 }

src/hooks/useResizeCanvas.ts

@@ -83,13 +83,14 @@ export default function useResizeCanvas({
     fitCanvasToArtboardHeight,
     shouldResizeCanvasToContainer,
     useDevicePixelRatio: shouldUseDevicePixelRatio,
+    customDevicePixelRatio,
   } = presetOptions;
 
   const containerSize = useContainerSize(
     containerRef,
     shouldResizeCanvasToContainer
   );
-  const currentDevicePixelRatio = useDevicePixelRatio();
+  const currentDevicePixelRatio = useDevicePixelRatio(customDevicePixelRatio);
 
   const { maxX, maxY } = artboardBounds ?? {};
 

src/types.ts

@@ -5,6 +5,7 @@ export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
 
 export type UseRiveOptions = {
   useDevicePixelRatio: boolean;
+  customDevicePixelRatio: number;
   fitCanvasToArtboardHeight: boolean;
   useOffscreenRenderer: boolean;
   shouldResizeCanvasToContainer: boolean;

test/useRive.test.tsx

@@ -133,7 +133,7 @@ describe('useRive', () => {
     expect(cleanupMock).toBeCalled();
   });
 
-  it('sets the a bounds with the devicePixelRatio by default', async () => {
+  it('sets the bounds with the devicePixelRatio by default', async () => {
     const params = {
       src: 'file-src',
     };
@@ -166,6 +166,41 @@ describe('useRive', () => {
     expect(canvasSpy).toHaveAttribute('style', 'width: 100px; height: 100px;');
   });
 
+  it('sets the bounds with a specified customDevicePixelRatio if one is set', 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, { customDevicePixelRatio: 1 })
+    );
+
+    await act(async () => {
+      result.current.setCanvasRef(canvasSpy);
+      result.current.setContainerRef(containerSpy);
+      controlledRiveloadCb();
+    });
+
+    // Height and width should be 2* the width and height returned from containers
+    // bounding rect
+    expect(canvasSpy).toHaveAttribute('height', '100');
+    expect(canvasSpy).toHaveAttribute('width', '100');
+
+    // Style height and width should be the same as returned from containers
+    // bounding rect
+    expect(canvasSpy).toHaveAttribute('style', 'width: 100px; height: 100px;');
+  });
+
   it('sets the a bounds without the devicePixelRatio if useDevicePixelRatio is false', async () => {
     const params = {
       src: 'file-src',