diff --git a/examples/stories/StateMachineDocs.stories.mdx b/examples/stories/StateMachineDocs.stories.mdx index ab480eb..5afbc4b 100644 --- a/examples/stories/StateMachineDocs.stories.mdx +++ b/examples/stories/StateMachineDocs.stories.mdx @@ -165,6 +165,29 @@ Unlike the boolean and number inputs, you invoke the `.fire()` method on a trigg +## Rive Text + +To listen for Rive Events reported during state machine play, use the `on` API to add an event listener. + + + + {() => { + const STATE_MACHINE_NAME = 'State Machine 1'; + const { rive, RiveComponent } = useRive({ + src: 'text_test.riv', + stateMachines: STATE_MACHINE_NAME, + autoplay: true, + automaticallyHandleEvents: true, + }); + return ( +
+ +
+ ); + }} +
+
+ ## Rive Events To listen for Rive Events reported during state machine play, use the `on` API to add an event listener. diff --git a/examples/stories/assets/text_test.riv b/examples/stories/assets/text_test.riv new file mode 100644 index 0000000..cf21c9f Binary files /dev/null and b/examples/stories/assets/text_test.riv differ diff --git a/npm/react-canvas-lite/README.md b/npm/react-canvas-lite/README.md new file mode 100644 index 0000000..1eec158 --- /dev/null +++ b/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. diff --git a/npm/react-canvas-lite/package.json b/npm/react-canvas-lite/package.json new file mode 100644 index 0000000..3961fd9 --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/package.json b/package.json index 43962a5..382e2d1 100644 --- a/package.json +++ b/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": { diff --git a/scripts/build.sh b/scripts/build.sh index 9ea494e..787622b 100755 --- a/scripts/build.sh +++ b/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 diff --git a/scripts/trimPackageJson.js b/scripts/trimPackageJson.js index ad636c3..f2aa1a3 100644 --- a/scripts/trimPackageJson.js +++ b/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() {