diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 00000000..e7d0ba29 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,8 @@ +blank_issues_enabled: false +contact_links: + - name: Rive Documentation + url: https://rive.app/docs/ + about: Please refer to the Rive documentation for feature use, supported versions, and troubleshooting steps before submitting an issue. + - name: Rive Community Support + url: https://community.rive.app/ + about: For general questions and answers, please use the Rive Community. diff --git a/.github/ISSUE_TEMPLATE/runtime-issue-template.yml b/.github/ISSUE_TEMPLATE/runtime-issue-template.yml new file mode 100644 index 00000000..4aa18d8f --- /dev/null +++ b/.github/ISSUE_TEMPLATE/runtime-issue-template.yml @@ -0,0 +1,105 @@ +name: Problem with the Rive React Runtime +description: Report a bug or unexpected behavior in the Rive React runtime. +body: + - type: markdown + attributes: + value: | + Thanks for using Rive and taking the time to fill this issue report out! Before filing an issue, please: + - Confirm if the issue is still present on the [latest version of `@rive-app/react-canvas`](https://www.npmjs.com/package/@rive-app/react-canvas) or [`@rive-app/react-webgl2`](https://www.npmjs.com/package/@rive-app/react-webgl2) + - Check the [Rive documentation](https://rive.app/docs/runtimes/react/react) + - Search for help on the [Rive forums](https://community.rive.app/c/start-here) + - For general Rive product feature requests, use the [feature request forum](https://community.rive.app/c/feature-requests/) + + - type: checkboxes + id: preflight + attributes: + label: Submission checklist + options: + - label: I have confirmed the issue is present in the latest version of `@rive-app/react-canvas` or `@rive-app/react-webgl2` (or the renderer variant I'm using) + required: true + - label: I have searched the documentation and forums and could not find an answer + required: true + - label: I have searched existing issues and this is not a duplicate + required: true + + - type: textarea + id: description + attributes: + label: Description + description: What issue are you running into? What's your expected behavior? + placeholder: Describe the issue you're experiencing + validations: + required: true + + - type: textarea + id: repro-description + attributes: + label: Reproduction steps / code + description: | + Please provide the most **minimal reproduction** you can. Paste a code snippet if the problem is small enough. Or, you can also share a link to a minimal GitHub repository that reproduces the issue (ideally with a `package.json` and instructions to run) + + Alternatively, you can share a CodeSandbox link or upload a .zip of your reproduction in the next question. + placeholder: | + ```js + // paste your code here + ``` + validations: + required: false + + - type: upload + id: repro-files + attributes: + label: Upload your reproduction files / stack trace + description: | + + If your reproduction is more complex, you can upload a .zip of your project. + Include a file with your stack trace if available as well if you cannot provide it above. + Please make sure to include a `README` with instructions on how to run the reproduction. + + - type: input + id: rive_version + attributes: + label: Rive React package version + description: Which version of `@rive-app/react-canvas` (or other renderer variant) are you using? + placeholder: "e.g. @rive-app/react-canvas@4.27.3" + validations: + required: true + + - type: upload + id: riv_file + attributes: + label: Source `.riv` / `.rev` file + description: | + If you are able, attaching the runtime-exported `.riv` file (and ideally the source `.rev` backup) is immensely helpful for reproducing and fixing the issue quickly. + + Note: Use a ZIP archive to upload `.riv`/`.rev` files (GitHub only supports certain file types). You can also share files privately at support@rive.app. + validations: + required: false + + - type: upload + id: screenshots + attributes: + label: Screenshots / video + description: If applicable, add screenshots or a screen recording to help explain the problem. + validations: + required: false + + - type: input + id: browser + attributes: + label: Browser & version + placeholder: "e.g. Chrome 123 Stable, Firefox 124, Safari 17.4" + + - type: input + id: os + attributes: + label: Operating system & version + placeholder: "e.g. macOS 14.4, Windows 11, Ubuntu 22.04" + + - type: textarea + id: additional_context + attributes: + label: Additional context + description: Any other context about the problem (frameworks, bundlers, relevant config, frequency of occurrence, etc.). + validations: + required: false diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 168feba6..f2affb47 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -69,10 +69,10 @@ git commit -m "Major: Restructuring the useRive API with new parameters" These messages help make the changelog clear as to what changes are made for future devs to see. -When pull requests are merged, the runtime will automatically deploy the next release version. By default, patch versions are published. If you want to set the next version as a minor/major version to be released, you have to manually update the `package.json` file at the root of the project to the verison you want it to. +When pull requests are merged, the runtime will automatically deploy the next release version. By default, patch versions are published. If you want to set the next version as a minor/major version to be released, you have to manually update the `package.json` file at the root of the project to the version you want it to. You can find the deploy scripts in `.github/` ## Bumping the underlying JS/WASM runtime -Many times, fixes to the runtime and feature adds come from the underlying JS/WASM runtime. In these cases, just bump the `@rive-app/canvas` and `@rive-app/webgl` versions to the verison you need to incorporate the fix/feature. Run `npm i` and test out the change locally against the Storybook examples and run the test suite to make sure nothing breaks, and then submit a PR with just the `package.json` change if that's all that's needed. +Many times, fixes to the runtime and feature adds come from the underlying JS/WASM runtime. In these cases, just bump the `@rive-app/canvas` and `@rive-app/webgl2` versions to the version you need to incorporate the fix/feature. Run `npm i` and test out the change locally against the Storybook examples and run the test suite to make sure nothing breaks, and then submit a PR with just the `package.json` change if that's all that's needed. diff --git a/examples/.storybook/main.ts b/examples/.storybook/main.ts index 4f7b9d0b..992f7784 100644 --- a/examples/.storybook/main.ts +++ b/examples/.storybook/main.ts @@ -34,10 +34,6 @@ const config: StorybookConfig = { __dirname, '../../' ); - config.resolve.alias['@rive-app/react-webgl'] = path.resolve( - __dirname, - '../../' - ); config.resolve.alias['@rive-app/react-webgl2'] = path.resolve( __dirname, '../../' diff --git a/examples/public/NotoSansArabic-VariableFont_wdth,wght.ttf b/examples/public/NotoSansArabic-VariableFont_wdth,wght.ttf new file mode 100644 index 00000000..85dd0aea Binary files /dev/null and b/examples/public/NotoSansArabic-VariableFont_wdth,wght.ttf differ diff --git a/examples/public/fallback-fonts-3.riv b/examples/public/fallback-fonts-3.riv new file mode 100644 index 00000000..0ceea603 Binary files /dev/null and b/examples/public/fallback-fonts-3.riv differ diff --git a/examples/src/components/FallbackFonts.stories.ts b/examples/src/components/FallbackFonts.stories.ts new file mode 100644 index 00000000..4baa0c1c --- /dev/null +++ b/examples/src/components/FallbackFonts.stories.ts @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import FallbackFonts from './FallbackFonts'; + +const meta = { + title: 'FallbackFonts', + component: FallbackFonts, + parameters: { + layout: 'fullscreen', + }, + args: {}, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/examples/src/components/FallbackFonts.tsx b/examples/src/components/FallbackFonts.tsx new file mode 100644 index 00000000..f4fe9e32 --- /dev/null +++ b/examples/src/components/FallbackFonts.tsx @@ -0,0 +1,59 @@ +import React, {useEffect} from "react"; +import {useRive, RiveFont, decodeFont, Layout, Fit, Alignment} from "@rive-app/react-webgl2"; + +const THAI_FALLBACK_FONT_URL = + "https://raw.githubusercontent.com/google/fonts/main/ofl/notoserifthai/NotoSerifThai%5Bwdth%2Cwght%5D.ttf"; + +const ARABIC_FALLBACK_FONT_URL = + "./NotoSansArabic-VariableFont_wdth,wght.ttf"; + +const INITIAL_TEXT_SUFFIX = " สวัสดี AND مرحبا بالعالم"; + + +const FallbackFonts = () => { + // Run before the Rive component is loaded to ensure fallback font strategy is set before Rive begins rendering + useEffect(() => { + const loadFont = async () => { + const notoSerifThai = await fetch(THAI_FALLBACK_FONT_URL).then((res) => res.arrayBuffer()); + const notoSansArabic = await fetch(ARABIC_FALLBACK_FONT_URL).then((res) => res.arrayBuffer()); + const riveArabicDecodedFont = await decodeFont(new Uint8Array(notoSansArabic)); + const riveThaiDecodedFont = await decodeFont(new Uint8Array(notoSerifThai)); + // Check unicode ranges for glyphs and map to font support + RiveFont.setFallbackFontCallback((missingGlyph: number, weight: number) => { + if (missingGlyph >= 0x0600 && missingGlyph <= 0x06FF && riveArabicDecodedFont) { + console.log("Setting fallback for Arabic. Missing Glyph unicode: ", String.fromCodePoint(missingGlyph), missingGlyph, " Weight: ", weight); + return riveArabicDecodedFont; + } else if (missingGlyph >= 0x0E00 && missingGlyph <= 0x0E7F && riveThaiDecodedFont) { + console.log("Setting fallback for Thai. Missing Glyph unicode: ", String.fromCodePoint(missingGlyph), missingGlyph, " Weight: ", weight); + return riveThaiDecodedFont; + } + return null; + }); + }; + loadFont(); + }, []); + + const { RiveComponent } = useRive({ + src: "fallback-fonts-3.riv", + autoplay: true, + autoBind: true, + stateMachines: "State Machine 1", + layout: new Layout({ + fit: Fit.Contain, + alignment: Alignment.Center, + }), + onRiveReady: (rive) => { + const defaultInstance = rive.viewModelInstance; + const textProp = defaultInstance?.string("text"); + if (textProp) { + textProp.value = `${textProp.value} - ${INITIAL_TEXT_SUFFIX}`; // Add Thai and Arabic text to demonstrate fallback font support. + } + }, + }); + + return ( + + ); +}; + +export default FallbackFonts; \ No newline at end of file diff --git a/examples/tsconfig.json b/examples/tsconfig.json index b84744c8..27bca10c 100644 --- a/examples/tsconfig.json +++ b/examples/tsconfig.json @@ -8,7 +8,6 @@ ], "paths": { "@rive-app/react-canvas": ["../"], - "@rive-app/react-webgl": ["../"], "@rive-app/react-webgl2": ["../"], "@rive-app/react-canvas-lite": ["../"] }, diff --git a/npm/react-webgl/README.md b/npm/react-webgl/README.md deleted file mode 100644 index 3a915d05..00000000 --- a/npm/react-webgl/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# @rive-app/react-webgl - -Output for `rive-react` using the backing `@rive-app/webgl` JS runtime diff --git a/npm/react-webgl/package.json b/npm/react-webgl/package.json deleted file mode 100644 index dfad559f..00000000 --- a/npm/react-webgl/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "@rive-app/react-webgl", - "version": "4.27.3", - "description": "React wrapper around the @rive-app/webgl 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/webgl": "2.35.4" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0" - } -} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e6a7bdbf..078eb15d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,9 @@ "version": "4.27.3", "license": "MIT", "dependencies": { - "@rive-app/canvas": "2.35.4", - "@rive-app/canvas-lite": "2.35.4", - "@rive-app/webgl": "2.35.4", - "@rive-app/webgl2": "2.35.4" + "@rive-app/canvas": "2.37.1", + "@rive-app/canvas-lite": "2.37.1", + "@rive-app/webgl2": "2.37.1" }, "devDependencies": { "@babel/core": "^7.18.0", @@ -1358,27 +1357,21 @@ } }, "node_modules/@rive-app/canvas": { - "version": "2.35.4", - "resolved": "https://registry.npmjs.org/@rive-app/canvas/-/canvas-2.35.4.tgz", - "integrity": "sha512-Blyi0jeBnRvgU9JQsFW3MZkmAdhKakSmqp6lZeOupFENjd8OGt4YrR1E0btH7soO9lae7m8N76MtnBwupNzxSw==", + "version": "2.37.1", + "resolved": "https://registry.npmjs.org/@rive-app/canvas/-/canvas-2.37.1.tgz", + "integrity": "sha512-Uw14b9vXD5g56ttUktlV+mXX1EOpAwqOoMS+DAVSs6EDoeaUYM4bRSKB1glDiOotqjshLSfNihua73mLPp10cQ==", "license": "MIT" }, "node_modules/@rive-app/canvas-lite": { - "version": "2.35.4", - "resolved": "https://registry.npmjs.org/@rive-app/canvas-lite/-/canvas-lite-2.35.4.tgz", - "integrity": "sha512-r08MkxrsIfntgbbzyl39ougUBBgsYO8SQ35SOB10OtzTekySSAnjQVQ7VpFWR7YPrrDc94qNyVdOcwLN1tTdVQ==", - "license": "MIT" - }, - "node_modules/@rive-app/webgl": { - "version": "2.35.4", - "resolved": "https://registry.npmjs.org/@rive-app/webgl/-/webgl-2.35.4.tgz", - "integrity": "sha512-I3gIiQq2CV7/lNIy5rvgSatN+ASXuC2jXWCPwUCQ5uHsyR8WdmelUnJIHe9Tudh/4gUvrYs8A1CUP1YjxBVx+g==", + "version": "2.37.1", + "resolved": "https://registry.npmjs.org/@rive-app/canvas-lite/-/canvas-lite-2.37.1.tgz", + "integrity": "sha512-2ZiV4Sq3l0o5b52SmtzGrxNTvL+klX258eiw+0r4mum60EiUbtSpOTnMrOneM5V3TxpcXk+su+bNIkUcEzd0+Q==", "license": "MIT" }, "node_modules/@rive-app/webgl2": { - "version": "2.35.4", - "resolved": "https://registry.npmjs.org/@rive-app/webgl2/-/webgl2-2.35.4.tgz", - "integrity": "sha512-1dX1axIC6WgrvCkBsH1tjHjPz3xXGoDUuu3CZMdnlCOtGmASq4WM7LOPvuggmLgGl5mLHX9VF7Nr/AakpcMeUw==", + "version": "2.37.1", + "resolved": "https://registry.npmjs.org/@rive-app/webgl2/-/webgl2-2.37.1.tgz", + "integrity": "sha512-ll7HBYQfhxKUPYspJpICajIrPfPyg63rj3obqulRjwrzlmwXljoOl8CQgUofZi/pNM1Cfz3Und+nB8irK8tuQg==", "license": "MIT" }, "node_modules/@rollup/plugin-commonjs": { diff --git a/package.json b/package.json index cb0d9cc6..ab1e954e 100644 --- a/package.json +++ b/package.json @@ -35,10 +35,9 @@ }, "homepage": "https://github.com/rive-app/rive-react#readme", "dependencies": { - "@rive-app/canvas": "2.35.4", - "@rive-app/canvas-lite": "2.35.4", - "@rive-app/webgl": "2.35.4", - "@rive-app/webgl2": "2.35.4" + "@rive-app/canvas": "2.37.1", + "@rive-app/canvas-lite": "2.37.1", + "@rive-app/webgl2": "2.37.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0" diff --git a/scripts/build.sh b/scripts/build.sh index f7543e24..a4472c8c 100755 --- a/scripts/build.sh +++ b/scripts/build.sh @@ -3,22 +3,10 @@ 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 cp -r ./dist ./npm/react-webgl2 -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\/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\/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 - echo "Replacing the canvas with webgl2 references in react-webgl2" pushd ./npm/react-webgl2/dist if [[ "$OSTYPE" == "darwin"* ]]; then diff --git a/scripts/trimPackageJson.js b/scripts/trimPackageJson.js index f2aa1a3f..89e01660 100644 --- a/scripts/trimPackageJson.js +++ b/scripts/trimPackageJson.js @@ -1,7 +1,7 @@ const fs = require('fs'); const path = process.argv[2]; const npmPackageSplit = process.argv[3].split('-'); -// extracts "webgl" or "canvas-lite" from the npm package name +// extracts "webgl2" or "canvas-lite" from the npm package name const renderer = npmPackageSplit.slice(1).join('-'); const package = require(path + '/package.json'); diff --git a/src/components/Rive.tsx b/src/components/Rive.tsx index 567953cd..7437539e 100644 --- a/src/components/Rive.tsx +++ b/src/components/Rive.tsx @@ -21,11 +21,11 @@ export interface RiveProps { */ stateMachines?: string | string[]; /** - * Specify a starting Layout object to set Fill and Alignment for the drawing surface. See docs at https://rive.app/community/doc/layout/docBl81zd1GB for more on layout configuration. + * Specify a starting Layout object to set Fill and Alignment for the drawing surface. See docs at https://rive.app/docs/runtimes/react/layouts for more on layout configuration. */ layout?: Layout; /** - * For `@rive-app/react-webgl`, sets this property to maintain a single WebGL context for multiple canvases. **We recommend to keep the default value** when rendering multiple Rive instances on a page. + * For `@rive-app/react-webgl2`, sets this property to maintain a single WebGL context for multiple canvases. **We recommend to keep the default value** when rendering multiple Rive instances on a page. */ useOffscreenRenderer?: boolean; /**