Add example of webgl issues

examples/basic/src/App.js

@@ -1,11 +1,13 @@
-import Rive from 'rive-react';
+import SizeExample from './SizeExample';
+import FlowerExample from './FlowerExample';
 
 function App() {
   return (
     // The animation will fit to the parent element.
-    <div style={{ height: '500px', width: '500px' }}>
-      <Rive src="poison-loader.riv" autoplay />
-    </div>
+    <>
+      <SizeExample />
+      <FlowerExample />
+    </>
   );
 }
 

examples/basic/src/FlowerExample.js

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { useRive } from 'rive-react';
+
+function FlowerExample() {
+  const { rive, canvas, RiveComponent } = useRive({
+    src: 'flower.riv',
+    artboard: 'Motion',
+    animations: 'Animation 1',
+    autoplay: true,
+  });
+
+  useEffect(() => {
+    console.log('change');
+    if (canvas) {
+      canvas.width = 200;
+      canvas.height = 200;
+    }
+  }, [canvas]);
+
+  function onLargerClick() {
+    if (rive && canvas) {
+      canvas.width = canvas.width + 50;
+      canvas.height = canvas.height + 50;
+      rive.resizeToCanvas();
+    }
+  }
+
+  function onSmallerClick() {
+    if (rive && canvas && canvas.width > 0) {
+      canvas.width = canvas.width - 50;
+      canvas.height = canvas.height - 50;
+      rive.resizeToCanvas();
+    }
+  }
+
+  return (
+    // The animation will fit to the parent element.
+    <>
+      <button onClick={onLargerClick}>Larger</button>
+      <button onClick={onSmallerClick}>Smaller</button>
+      <div>
+        <RiveComponent />
+      </div>
+    </>
+  );
+}
+
+export default FlowerExample;

examples/basic/src/SizeExample.js

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { useRive } from 'rive-react';
+
+function SizeExample() {
+  const { rive, canvas, RiveComponent } = useRive({
+    src: 'poison-loader.riv',
+    // artboard: 'Motion',
+    // animations: 'Animation 1',
+    autoplay: true,
+  });
+
+  useEffect(() => {
+    console.log('change');
+    if (canvas) {
+      canvas.width = 200;
+      canvas.height = 200;
+    }
+  }, [canvas]);
+
+  function onLargerClick() {
+    if (rive && canvas) {
+      canvas.width = canvas.width + 50;
+      canvas.height = canvas.height + 50;
+      rive.resizeToCanvas();
+    }
+  }
+
+  function onSmallerClick() {
+    if (rive && canvas && canvas.width > 0) {
+      canvas.width = canvas.width - 50;
+      canvas.height = canvas.height - 50;
+      rive.resizeToCanvas();
+    }
+  }
+
+  return (
+    // The animation will fit to the parent element.
+    <>
+      <button onClick={onLargerClick}>Larger</button>
+      <button onClick={onSmallerClick}>Smaller</button>
+      <div>
+        <RiveComponent />
+      </div>
+    </>
+  );
+}
+
+export default SizeExample;

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.26",
       "license": "MIT",
       "dependencies": {
-        "rive-js": "0.7.33"
+        "@rive/webgl_single": "file:../rive-wasm/js/npm/webgl_single"
       },
       "devDependencies": {
         "@testing-library/jest-dom": "^5.13.0",
@@ -42,6 +42,50 @@
         "react": "^16.8.0 || ^17.0.0"
       }
     },
+    "../rive-wasm/js": {
+      "name": "rive-js",
+      "version": "1.0.0",
+      "license": "MIT",
+      "devDependencies": {
+        "@babel/core": "^7.14.3",
+        "@babel/plugin-transform-modules-commonjs": "^7.14.0",
+        "@babel/preset-env": "^7.14.4",
+        "@babel/preset-typescript": "^7.13.0",
+        "@types/jest": "^26.0.23",
+        "babel-jest": "^27.0.2",
+        "jest": "^26.6.3",
+        "jest-canvas-mock": "^2.3.1",
+        "ts-jest": "^26.5.6",
+        "ts-loader": "^9.2.3",
+        "typescript": "^4.3.2",
+        "webpack": "^5.38.1",
+        "webpack-cli": "^4.7.2"
+      }
+    },
+    "../rive-wasm/js/npm": {},
+    "../rive-wasm/js/npm/canvas": {
+      "name": "@rive/canvas",
+      "version": "1.0.0",
+      "extraneous": true,
+      "license": "MIT"
+    },
+    "../rive-wasm/js/npm/canvas_single": {
+      "name": "@rive/canvas-single",
+      "version": "1.0.0",
+      "extraneous": true,
+      "license": "MIT"
+    },
+    "../rive-wasm/js/npm/webgl": {
+      "name": "@rive/webgl",
+      "version": "1.0.0",
+      "extraneous": true,
+      "license": "MIT"
+    },
+    "../rive-wasm/js/npm/webgl_single": {
+      "name": "@rive/webgl-single",
+      "version": "1.0.0",
+      "license": "MIT"
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz",
@@ -2337,6 +2381,10 @@
         "@octokit/openapi-types": "^7.3.5"
       }
     },
+    "node_modules/@rive/webgl_single": {
+      "resolved": "../rive-wasm/js/npm/webgl_single",
+      "link": true
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.2.1.tgz",
@@ -9518,11 +9566,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/rive-js": {
-      "version": "0.7.33",
-      "resolved": "https://registry.npmjs.org/rive-js/-/rive-js-0.7.33.tgz",
-      "integrity": "sha512-u/dqr4XYx1TOo5xtSCN+6YvUKYU88ii6xWP82Xz15O4OqF3GM1Pa4WXx4dEOa6QG6IqbM0JcfsAhae7TjVZf6Q=="
-    },
     "node_modules/rollup": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.0.tgz",
@@ -12704,6 +12747,9 @@
         "@octokit/openapi-types": "^7.3.5"
       }
     },
+    "@rive/webgl_single": {
+      "version": "file:../rive-wasm/js/npm/webgl_single"
+    },
     "@rollup/plugin-babel": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.2.1.tgz",
@@ -18100,11 +18146,6 @@
         "glob": "^7.1.3"
       }
     },
-    "rive-js": {
-      "version": "0.7.33",
-      "resolved": "https://registry.npmjs.org/rive-js/-/rive-js-0.7.33.tgz",
-      "integrity": "sha512-u/dqr4XYx1TOo5xtSCN+6YvUKYU88ii6xWP82Xz15O4OqF3GM1Pa4WXx4dEOa6QG6IqbM0JcfsAhae7TjVZf6Q=="
-    },
     "rollup": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.0.tgz",

package.json

@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "rive-js": "0.7.33"
+    "@rive/webgl_single": "file:../rive-wasm/js/npm/webgl_single"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"

src/components/Rive.tsx

@@ -1,4 +1,4 @@
-import { Layout } from 'rive-js';
+import { Layout } from '@rive/webgl_single';
 import React, { ComponentProps } from 'react';
 import useRive from '../hooks/useRive';
 

src/hooks/useRive.tsx

@@ -6,7 +6,7 @@ import React, {
   ComponentProps,
   RefCallback,
 } from 'react';
-import { Rive, EventType } from 'rive-js';
+import { Rive, EventType } from '@rive/webgl_single';
 import {
   UseRiveParameters,
   UseRiveOptions,
@@ -125,11 +125,12 @@ export default function useRive(
         containerRef.current.style.height = height + 'px';
       }
       if (options.useDevicePixelRatio) {
-        const dpr = window.devicePixelRatio || 1;
-        canvasRef.current.width = dpr * width;
-        canvasRef.current.height = dpr * height;
-        canvasRef.current.style.width = width + 'px';
-        canvasRef.current.style.height = height + 'px';
+        console.log('updating canvas width, height');
+        // const dpr = window.devicePixelRatio || 1;
+        // canvasRef.current.width = dpr * width;
+        // canvasRef.current.height = dpr * height;
+        // canvasRef.current.style.width = width + 'px';
+        // canvasRef.current.style.height = height + 'px';
       } else {
         canvasRef.current.width = width;
         canvasRef.current.height = height;

src/hooks/useStateMachineInput.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Rive, StateMachineInput } from 'rive-js';
+import { Rive, StateMachineInput } from '@rive/webgl_single';
 
 /**
  * Custom hook for fetching a stateMachine input from a rive file.

src/index.ts

@@ -5,4 +5,4 @@ import useStateMachineInput from './hooks/useStateMachineInput';
 export default Rive;
 export { useRive, useStateMachineInput };
 export { RiveState, UseRiveParameters, UseRiveOptions } from './types';
-export * from 'rive-js';
+export * from '@rive/webgl_single';

src/types.ts

@@ -1,5 +1,5 @@
 import { RefCallback, ComponentProps } from 'react';
-import { Rive, RiveParameters } from 'rive-js';
+import { Rive, RiveParameters } from '@rive/webgl_single';
 
 export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
 

tsconfig.json

@@ -6,6 +6,7 @@
     "lib": ["esnext", "dom"],
     "module": "commonjs",
     "moduleResolution": "node",
+    "noImplicitAny": false,
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,