chore: release 4.8.3

CHANGELOG.md

@@ -4,8 +4,50 @@ 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.3](https://github.com/rive-app/rive-react/compare/v4.8.2...v4.8.3)
+
+- 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)

npm/react-canvas-lite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas-lite",
-  "version": "4.6.2",
+  "version": "4.8.3",
   "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.10.3"
   },
   "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.3",
   "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.10.3"
   },
   "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.3",
   "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.10.3"
   },
   "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.3",
   "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.10.3",
+    "@rive-app/canvas-lite": "2.10.3",
+    "@rive-app/webgl": "2.10.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

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',