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

Author: zplata

.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

examples/public/NotoSansArabic-VariableFont_wdth,wght.ttf

@@ -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/public/fallback-fonts-3.riv

@@ -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/src/components/FallbackFonts.stories.ts

@@ -35,10 +35,10 @@
   },
   "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.0",
+    "@rive-app/canvas-lite": "2.37.0",
+    "@rive-app/webgl": "2.37.0",
+    "@rive-app/webgl2": "2.37.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"