feat: bump js runtime to 2.37.1 for fallback font API exposure. Also add github issue template

.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.

.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

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.

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,
       '../../'

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<typeof FallbackFonts>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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 (
+    <RiveComponent />
+  );
+};
+
+export default FallbackFonts;

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": ["../"]
     },

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"

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

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');
 

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;
   /**