Move to using @rive-app/canvas as the backing renderer and update scripts accordingly.

README.md

@@ -22,7 +22,7 @@ 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
+### Migrating from version 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.
 
@@ -46,6 +46,10 @@ return (
 );
 ```
 
+### Migrating from version 1.x.x to 2.x.x
+
+In most cases, you may be able to migrate safely. We are mainly enabling `rive-react` to work with both backing renderers `@rive-app/webgl` and `@rive-app/canvas`, such that you can use either `@rive-app/react-canvas` or `@rive-app/react-webgl` as the dependency in your React applications. Another change that is mostly internal is that by default, `rive-react` will now use `@rive-app/canvas` (as opposed to `@rive-app/webgl`) to wrap around, as it currently yields the fastest performance across devices. Therefore, **we recommend installing `@rive-app/react-canvas` in your applicaions**. However, if you need a WebGL backing renderer, you may want to use `@rive-app/react-webgl`.
+
 ## Usage
 
 ### Component

npm/react-canvas/README.md

@@ -1,3 +1,3 @@
-# rive-react-canvas
+# @rive-app/react-canvas
 
 Output for `rive-react` using the backing `@rive-app/canvas` JS runtime

npm/react-webgl/README.md

@@ -1,3 +1,3 @@
-# rive-react-webgl
+# @rive-app/react-webgl
 
 Output for `rive-react` using the backing `@rive-app/webgl` JS runtime

package.json

@@ -27,7 +27,8 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/webgl": "1.0.39"
+    "@rive-app/canvas": "1.0.44",
+    "@rive-app/webgl": "1.0.41"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

scripts/build.sh

@@ -2,18 +2,18 @@
 
 set -e
 
-# Run the build and copy to the rive-react-webgl build for npm release
+# Run the build and copy to each react-variant build for npm release
 npm run build
-cp -r ./dist ./npm/rive-react-webgl
-cp -r ./dist ./npm/rive-react-canvas
+cp -r ./dist ./npm/react-webgl
+cp -r ./dist ./npm/react-canvas
 
-echo Replacing the webgl with canvas references
-pushd ./npm/rive-react-canvas/dist
+echo "Replacing the canvas with webgl references in react-webgl"
+pushd ./npm/react-webgl/dist
 if [[ "$OSTYPE" == "darwin"* ]]; then
-  find . -type f -name "*.ts" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/webgl/@rive-app\/canvas/g'
-  find . -type f -name "*.js" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/webgl/@rive-app\/canvas/g'
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/webgl/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/webgl/g'
 else
-  find . -type f -name "*.ts" -print0 | xargs -0 sed -i -e 's/@rive-app\/webgl/@rive-app\/canvas/g'
-  find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/webgl/@rive-app\/canvas/g'
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl/g'
 fi
 popd

scripts/trimPackageJson.js

@@ -5,7 +5,7 @@ const renderer = npmPackageSplit[npmPackageSplit.length - 1];
 const package = require(path + '/package.json');
 
 function trimNpmPackage() {
-  package.name = `${package.name}-${renderer}`;
+  package.name = `@rive-app/react-${renderer}`;
   package.description = `React wrapper around the @rive-app/${renderer} library`;
   const webDependencyName = `@rive-app/${renderer}`;
   const canvasDep = package.dependencies[webDependencyName];

src/components/Rive.tsx

@@ -1,4 +1,4 @@
-import { Layout } from '@rive-app/webgl';
+import { Layout } from '@rive-app/canvas';
 import React, { ComponentProps } from 'react';
 import useRive from '../hooks/useRive';
 

src/hooks/useRive.tsx

@@ -6,7 +6,7 @@ import React, {
   ComponentProps,
   RefCallback,
 } from 'react';
-import { Rive, EventType } from '@rive-app/webgl';
+import { Rive, EventType } from '@rive-app/canvas';
 import {
   UseRiveParameters,
   UseRiveOptions,

src/hooks/useStateMachineInput.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Rive, StateMachineInput } from '@rive-app/webgl';
+import { Rive, StateMachineInput } from '@rive-app/canvas';
 
 /**
  * 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-app/webgl';
+export * from '@rive-app/canvas';

src/types.ts

@@ -1,5 +1,5 @@
 import { RefCallback, ComponentProps } from 'react';
-import { Rive, RiveParameters } from '@rive-app/webgl';
+import { Rive, RiveParameters } from '@rive-app/canvas';
 
 export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;