Add example of webgl issues

CHANGELOG.md

@@ -4,9 +4,9 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v0.0.24](https://github.com/rive-app/rive-react/compare/v0.0.20...v0.0.24)
+#### [v0.0.26](https://github.com/rive-app/rive-react/compare/v0.0.20...v0.0.26)
 
-- Update package.json to version 2 [`a4777ec`](https://github.com/rive-app/rive-react/commit/a4777ec7e33ded6a3581c88f2e708f45f7ea1828)
+- bump rive-js to0.7.33 [`c4dc027`](https://github.com/rive-app/rive-react/commit/c4dc027522502f6aaa0f85392a5e90396c8b719d)
 
 #### [v0.0.20](https://github.com/rive-app/rive-react/compare/v0.0.19...v0.0.20)
 

examples/basic/package.json

@@ -6,10 +6,10 @@
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
+    "react": "file:../../node_modules/react",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "rive-react": "latest",
+    "rive-react": "file:../..",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

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

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -10,6 +10,7 @@
   "scripts": {
     "test": "jest",
     "build": "bunchee src/index.ts -m --no-sourcemap",
+    "dev": "watch 'npm run build' src",
     "lint": "eslint -c .eslintrc.js 'src/**/*{.ts,.tsx}'",
     "format": "prettier --write src",
     "types:check": "tsc --noEmit",
@@ -26,7 +27,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "rive-js": "0.7.31"
+    "@rive/webgl_single": "file:../rive-wasm/js/npm/webgl_single"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
@@ -41,7 +42,7 @@
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",
     "auto-changelog": "^2.3.0",
-    "bunchee": "^1.6.0",
+    "bunchee": "^1.7.3",
     "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^16.0.3",
@@ -55,6 +56,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "release-it": "^14.10.0",
-    "ts-jest": "^27.0.2"
+    "ts-jest": "^27.0.2",
+    "watch": "^1.0.2"
   }
 }

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,