chore: release 1.0.1

.eslintrc.js

@@ -19,4 +19,9 @@ module.exports = {
     'no-var': 'error',
     eqeqeq: ['error', 'smart'],
   },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
 };

.github/workflows/publish.yml

@@ -11,10 +11,10 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '12.x'
+          node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
       - name: Install Modules
-        run: npm ci
+        run: npm install
       - name: Run type check
         run: npm run types:check
       - name: Run Linter

.github/workflows/tests.yml

@@ -7,7 +7,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
       - name: Install Modules
-        run: npm ci
+        run: npm install
       - name: Run type check
         run: npm run types:check
       - name: Run Linter

.gitignore

@@ -5,3 +5,4 @@ dist
 .idea
 .vscode
 examples/**/package-lock.json
+package-lock.json

CHANGELOG.md

@@ -4,9 +4,96 @@ 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).
 
-#### [v0.0.26](https://github.com/rive-app/rive-react/compare/v0.0.20...v0.0.26)
+#### [v1.0.1](https://github.com/rive-app/rive-react/compare/v1.0.0...v1.0.1)
+
+- Chore: Bump webgl and remove major flag from release-it command [`4c9de18`](https://github.com/rive-app/rive-react/commit/4c9de18b1cbf19ede7d5400a1b3f67d59f882cee)
+
+### [v1.0.0](https://github.com/rive-app/rive-react/compare/v0.0.31...v1.0.0)
+
+> 23 March 2022
+
+- Breaking: Switch from using the canvas renderer as default to the webgl renderer [`1e1cabd`](https://github.com/rive-app/rive-react/commit/1e1cabd05707fa135e1706c0821c0272b3d94bbc)
+- chore: release 1.0.0 [`c688b9f`](https://github.com/rive-app/rive-react/commit/c688b9f17a4e287b4120a0739125123ce0e880e4)
+- Put back the release steps in the publish workflow and add major flag temporarily [`8ce8562`](https://github.com/rive-app/rive-react/commit/8ce856270f9403c165b2a4c2f0b8c6558ed929a2)
+
+#### [v0.0.31](https://github.com/rive-app/rive-react/compare/v0.0.30...v0.0.31)
+
+> 18 January 2022
+
+- chore: release 0.0.31 [`0be3bc7`](https://github.com/rive-app/rive-react/commit/0be3bc7e930ce6b39dae82e808dd81a0720a5ebb)
+- Update @rive-app/canvas to 1.0.18 to fix playback lag when animations are left idle [`48af4b0`](https://github.com/rive-app/rive-react/commit/48af4b00ad7654acde0fc5e97c9cd0f768371843)
+
+#### [v0.0.30](https://github.com/rive-app/rive-react/compare/v0.0.29...v0.0.30)
+
+> 10 January 2022
+
+- chore: release 0.0.30 [`fe44977`](https://github.com/rive-app/rive-react/commit/fe44977e47e13276051a665559e1f68f42f47d3a)
+- Update rive/canvas to with fixes for image clipping [`24d9e87`](https://github.com/rive-app/rive-react/commit/24d9e871d6580df1b985e61793babd1067640b5b)
+
+#### [v0.0.29](https://github.com/rive-app/rive-react/compare/v0.0.28...v0.0.29)
+
+> 16 December 2021
+
+- chore: release 0.0.29 [`8b8d6bc`](https://github.com/rive-app/rive-react/commit/8b8d6bc44bfcecd6f126dcaa9c6c4cb7fda9b6ac)
+- Bump rive-app/canvas to 1.0.8 [`2517efa`](https://github.com/rive-app/rive-react/commit/2517efaebd4ccc6270be52c2947acc9190f858cc)
+- Add offscreencanvas types [`956b76d`](https://github.com/rive-app/rive-react/commit/956b76d01c59a04eb83f3b0b2ca722798af80fb2)
+
+#### [v0.0.28](https://github.com/rive-app/rive-react/compare/v0.0.27...v0.0.28)
+
+> 16 December 2021
+
+- Use @rive-app/canvas directly to fix path issues in downstream libs [`e599b1a`](https://github.com/rive-app/rive-react/commit/e599b1a38cc0f6606d7505551a046b28a3533422)
+- chore: release 0.0.28 [`019cadf`](https://github.com/rive-app/rive-react/commit/019cadf5f22d87a0449ff1aecfdc242a26e64a46)
+
+#### [v0.0.27](https://github.com/rive-app/rive-react/compare/v0.0.26...v0.0.27)
+
+> 16 December 2021
+
+- Use @rive-app/canvas as underlying repo [`e6b036e`](https://github.com/rive-app/rive-react/commit/e6b036ee17db316f189773a801f6ade514f44d4d)
+- Update basic example to listen to changes in parent directory [`bfbb8a5`](https://github.com/rive-app/rive-react/commit/bfbb8a59ee3284d9512f0006ad518afdc1a801ea)
+- chore: release 0.0.27 [`78d3118`](https://github.com/rive-app/rive-react/commit/78d3118dcc648dc8755ec23cb79ef2724a9b4d05)
+
+#### [v0.0.26](https://github.com/rive-app/rive-react/compare/v0.0.25...v0.0.26)
+
+> 16 November 2021
 
 - bump rive-js to0.7.33 [`c4dc027`](https://github.com/rive-app/rive-react/commit/c4dc027522502f6aaa0f85392a5e90396c8b719d)
+- chore: release 0.0.26 [`5a19354`](https://github.com/rive-app/rive-react/commit/5a19354ab3fcf128b52973bb1882690f98b0ebe2)
+
+#### [v0.0.25](https://github.com/rive-app/rive-react/compare/v0.0.24...v0.0.25)
+
+> 12 November 2021
+
+- Update rive-js to 0.7.32 to fixed nested artboard speed [`1a59794`](https://github.com/rive-app/rive-react/commit/1a597943cb629be520052f2a86733998f44d6885)
+- chore: release 0.0.25 [`e54a0d4`](https://github.com/rive-app/rive-react/commit/e54a0d42d3910c39a944a144a856a33cae87f3ed)
+
+#### [v0.0.24](https://github.com/rive-app/rive-react/compare/v0.0.23...v0.0.24)
+
+> 12 November 2021
+
+- Update package.json to version 2 [`a4777ec`](https://github.com/rive-app/rive-react/commit/a4777ec7e33ded6a3581c88f2e708f45f7ea1828)
+- chore: release 0.0.24 [`026d097`](https://github.com/rive-app/rive-react/commit/026d0976582eaeb68daf09977fef5d16917c09d8)
+
+#### [v0.0.23](https://github.com/rive-app/rive-react/compare/v0.0.22...v0.0.23)
+
+> 8 November 2021
+
+- chore: release 0.0.23 [`416334e`](https://github.com/rive-app/rive-react/commit/416334ef44b7a9bdaa8c6ff8dac937cfda59d77d)
+- Add verticalAlign = top to canvas to prevent canvas growth on resize [`f309481`](https://github.com/rive-app/rive-react/commit/f309481a43307b1e2b7f77cd418498cacd8022d2)
+
+#### [v0.0.22](https://github.com/rive-app/rive-react/compare/v0.0.21...v0.0.22)
+
+> 15 October 2021
+
+- chore: release 0.0.22 [`06500e6`](https://github.com/rive-app/rive-react/commit/06500e6dcf38165ac8b5f7bf60e0503666947819)
+- Bump rive-js version to 0.7.31 [`33e34a4`](https://github.com/rive-app/rive-react/commit/33e34a46e1e394d67d6981307534fb5512df9dcf)
+
+#### [v0.0.21](https://github.com/rive-app/rive-react/compare/v0.0.20...v0.0.21)
+
+> 10 September 2021
+
+- Update examples to use latest rive-react [`5d08228`](https://github.com/rive-app/rive-react/commit/5d0822836cbc7c5645d7580173c3cdda772b616d)
+- chore: release 0.0.21 [`c8f57f5`](https://github.com/rive-app/rive-react/commit/c8f57f58960987d238ca48646b354c460bfeee59)
 
 #### [v0.0.20](https://github.com/rive-app/rive-react/compare/v0.0.19...v0.0.20)
 

README.md

@@ -22,6 +22,30 @@ npm i --save rive-react
 
 _Note: This library is using React hooks so the minimum version required for both react and react-dom is 16.8.0._
 
+### Migrating from v 0.0.x to 1.x.x
+
+Starting in v 1.0.0, we've migrated from wrapping around the `@rive-app/canvas` runtime (which uses the `CanvasRendereringContext2D` renderer) to the `@rive-app/webgl` runtime (which uses the WebGL renderer). The high-level API doesn't require any change to upgrade, but there are some notes to consider about the backing renderer.
+
+The backing `WebGL` runtime allows for best performance across all devices, as well as support for some features that are not supported in the `canvas` renderer runtime. To allow the `react` runtime to support some of the newer features in Rive, we needed to switch the `rive-react` backing runtime to `@rive-app/webgl`. 
+
+One note about this switch is that some browsers may limit the number of concurrent WebGL contexts. For example, Chrome may only support up to 16 contexts concurrently. We pass a property called `useOffscreenRenderer` set to true to the backing runtime when instantiating Rive by default, which helps to manage the lifecycle of the `canvas` with a single offscreen `WebGL` context, even if there are many Rive animations on the screen (i.e 16+). If you need a single `WebGL` context per Rive animation/instance, pass in the `useOffscreenRenderer` property set to `false` in the `useRive` options, or as a prop in the default export component from this runtime. See below for an example:
+
+```js
+const {rive, RiveComponent} = useRive({
+  src: 'foo.riv',
+}, {
+  // Default (you don't need to set this)
+  useOffscreenRenderer: true,
+  // To override and use one context per Rive instance, uncomment and use the line below
+  // useOffscreenRenderer: false,
+});
+
+// or you can override the flag in JSX via props
+return (
+  <Rive src="foo.riv" useOffscreenRenderer={false} />
+);
+```
+
 ## Usage
 
 ### Component
@@ -106,6 +130,7 @@ export default Example;
 
 - `useDevicePixelRatio`: _(optional)_ If `true`, the hook will scale the resolution of the animation based the [devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio). Defaults to `true`. NOTE: Requires the `setContainerRef` ref callback to be passed to a element wrapping a canvas element. If you use the `RiveComponent`, then this will happen automatically.
 - `fitCanvasToArtboardHeight`: _(optional)_ If `true`, then the canvas will resize based on the height of the artboard. Defaults to `false`.
+- `useOffscreenRenderer`: _(optional)_ If `true`, the Rive instance will share (or create if one does not exist) an offscreen `WebGL` context. This allows you to display multiple Rive animations on one screen to work around some browser limitations regarding multiple concurrent WebGL contexts. If `false`, each Rive instance will have its own dedicated `WebGL` context, and you may need to be cautious of the browser limitations just mentioned. Defaults to `true`.
 
 ### useStateMachineInput Hook
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "0.0.26",
+  "version": "1.0.1",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "rive-js": "0.7.33"
+    "@rive-app/webgl": "1.0.28"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
@@ -36,11 +36,12 @@
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^7.0.0",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^27.0.3",
+    "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.9",
     "@types/testing-library__jest-dom": "^5.9.5",
-    "@typescript-eslint/eslint-plugin": "^4.26.0",
-    "@typescript-eslint/parser": "^4.26.0",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
     "auto-changelog": "^2.3.0",
     "bunchee": "^1.7.3",
     "eslint": "^7.28.0",
@@ -50,13 +51,14 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.27.1",
     "jest": "^27.0.4",
     "prettier": "^2.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "release-it": "^14.10.0",
-    "ts-jest": "^27.0.2",
+    "ts-jest": "^27.1.1",
+    "typescript": "^4.5.4",
     "watch": "^1.0.2"
   }
 }

setupTests.ts

@@ -24,7 +24,7 @@ window.IntersectionObserver = class IntersectionObserver {
   unobserve() {}
 };
 
-jest.mock('rive-js', () => ({
+jest.mock('@rive-app/webgl', () => ({
   Rive: jest.fn().mockImplementation(() => ({
     on: jest.fn(),
     stop: jest.fn(),

src/components/Rive.tsx

@@ -1,4 +1,4 @@
-import { Layout } from 'rive-js';
+import { Layout } from '@rive-app/webgl';
 import React, { ComponentProps } from 'react';
 import useRive from '../hooks/useRive';
 
@@ -7,6 +7,7 @@ export type RiveProps = {
   artboard?: string;
   animations?: string | string[];
   layout?: Layout;
+  useOffscreenRenderer?: boolean;
 };
 
 const Rive = ({
@@ -14,6 +15,7 @@ const Rive = ({
   artboard,
   animations,
   layout,
+  useOffscreenRenderer = true,
   ...rest
 }: RiveProps & ComponentProps<'div'>) => {
   const params = {
@@ -24,7 +26,11 @@ const Rive = ({
     autoplay: true,
   };
 
-  const { RiveComponent } = useRive(params);
+  const options = {
+    useOffscreenRenderer,
+  };
+
+  const { RiveComponent } = useRive(params, options);
   return <RiveComponent {...rest} />;
 };
 

src/hooks/useRive.tsx

@@ -6,7 +6,7 @@ import React, {
   ComponentProps,
   RefCallback,
 } from 'react';
-import { Rive, EventType } from 'rive-js';
+import { Rive, EventType } from '@rive-app/webgl';
 import {
   UseRiveParameters,
   UseRiveOptions,
@@ -44,6 +44,7 @@ function RiveComponent({
 const defaultOptions = {
   useDevicePixelRatio: true,
   fitCanvasToArtboardHeight: false,
+  useOffscreenRenderer: true,
 };
 
 /**
@@ -164,7 +165,12 @@ export default function useRive(
   const setCanvasRef: RefCallback<HTMLCanvasElement> = useCallback(
     (canvas: HTMLCanvasElement | null) => {
       if (canvas && riveParams) {
-        const r = new Rive({ ...riveParams, canvas });
+        const {useOffscreenRenderer} = options;
+        const r = new Rive({
+          useOffscreenRenderer,
+          ...riveParams,
+          canvas,
+        });
         r.on(EventType.Load, () => setRive(r));
       } else if (canvas === null && canvasRef.current) {
         canvasRef.current.height = 0;

src/hooks/useStateMachineInput.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Rive, StateMachineInput } from 'rive-js';
+import { Rive, StateMachineInput } from '@rive-app/webgl';
 
 /**
  * Custom hook for fetching a stateMachine input from a rive file.

src/index.ts

@@ -5,4 +5,4 @@ import useStateMachineInput from './hooks/useStateMachineInput';
 export default Rive;
 export { useRive, useStateMachineInput };
 export { RiveState, UseRiveParameters, UseRiveOptions } from './types';
-export * from 'rive-js';
+export * from '@rive-app/webgl';

src/types.ts

@@ -1,11 +1,12 @@
 import { RefCallback, ComponentProps } from 'react';
-import { Rive, RiveParameters } from 'rive-js';
+import { Rive, RiveParameters } from '@rive-app/webgl';
 
 export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
 
 export type UseRiveOptions = {
   useDevicePixelRatio: boolean;
   fitCanvasToArtboardHeight: boolean;
+  useOffscreenRenderer: boolean;
 };
 
 export type Dimensions = {

test/useRive.test.tsx

@@ -1,10 +1,10 @@
 import { renderHook, act } from '@testing-library/react-hooks';
-import { mocked } from 'ts-jest/utils';
+import { mocked } from 'jest-mock';
 
 import useRive from '../src/hooks/useRive';
-import * as rive from 'rive-js';
+import * as rive from '@rive-app/webgl';
 
-jest.mock('rive-js', () => ({
+jest.mock('@rive-app/webgl', () => ({
   Rive: jest.fn().mockImplementation(() => ({
     on: jest.fn(),
     stop: jest.fn(),

tsconfig.json

@@ -6,11 +6,12 @@
     "lib": ["esnext", "dom"],
     "module": "commonjs",
     "moduleResolution": "node",
+    "noImplicitAny": true,
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "outDir": "./dist",
-    "types": ["node", "jest"],
+    "types": ["node", "jest", "offscreencanvas"],
     "rootDir": "src",
     "strict": true,
     "target": "es5",