Add a react-canvas-lite package to build setup

examples/stories/StateMachineDocs.stories.mdx

@@ -165,6 +165,29 @@ Unlike the boolean and number inputs, you invoke the `.fire()` method on a trigg
   </Story>
 </Canvas>
 
+## Rive Text
+
+To listen for Rive Events reported during state machine play, use the `on` API to add an event listener.
+
+<Canvas withSource="open">
+  <Story name="Rive Text">
+    {() => {
+      const STATE_MACHINE_NAME = 'State Machine 1';
+      const { rive, RiveComponent } = useRive({
+        src: 'text_test.riv',
+        stateMachines: STATE_MACHINE_NAME,
+        autoplay: true,
+        automaticallyHandleEvents: true,
+      });
+      return (
+        <div className="center">
+          <RiveComponent className="base-canvas-size" />
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## Rive Events
 
 To listen for Rive Events reported during state machine play, use the `on` API to add an event listener.

npm/react-canvas-lite/README.md

@@ -0,0 +1,9 @@
+# @rive-app/react-canvas-lite
+
+Output for `rive-react` using the backing `@rive-app/canvas-lite` JS runtime.
+
+## Why Lite?
+
+The current `@rive-app/react-canvas` dependency supports all Rive features and contains the necessary backing dependencies to render those graphics. This `lite` version has the same API, but does not compile and build with certain dependencies in order to keep the package size as small as possible.
+
+At this time, this lite version of `@rive-app/react-canvas-lite` will not render [Rive Text](https://help.rive.app/editor/text) onto the canvas. Note however, that even if your Rive file may include Rive Text components, rendering the graphic should not cause any app errors, or cease to render.

npm/react-canvas-lite/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@rive-app/react-canvas-lite",
+  "version": "4.5.0",
+  "description": "React wrapper around the @rive-app/canvas-lite 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": {
+    "@rive-app/canvas-lite": "2.7.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  }
+}

package.json

@@ -37,6 +37,7 @@
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
     "@rive-app/canvas": "2.7.2",
+    "@rive-app/canvas-lite": "2.7.2",
     "@rive-app/webgl": "2.7.2"
   },
   "peerDependencies": {

scripts/build.sh

@@ -5,6 +5,7 @@ set -e
 # Copy the build to each react-variant build for npm release
 cp -r ./dist ./npm/react-webgl
 cp -r ./dist ./npm/react-canvas
+cp -r ./dist ./npm/react-canvas-lite
 
 echo "Replacing the canvas with webgl references in react-webgl"
 pushd ./npm/react-webgl/dist
@@ -16,3 +17,14 @@ else
   find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl/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
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+else
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/canvas-lite/g'
+fi
+popd

scripts/trimPackageJson.js

@@ -1,7 +1,8 @@
 const fs = require('fs');
 const path = process.argv[2];
 const npmPackageSplit = process.argv[3].split('-');
-const renderer = npmPackageSplit[npmPackageSplit.length - 1];
+// extracts "webgl" or "canvas-lite" from the npm package name
+const renderer = npmPackageSplit.slice(1).join('-');
 const package = require(path + '/package.json');
 
 function trimNpmPackage() {