chore: release 0.0.29

.eslintrc.js

@@ -19,4 +19,9 @@ module.exports = {
     'no-var': 'error',
     eqeqeq: ['error', 'smart'],
   },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
 };

.github/workflows/publish.yml

@@ -11,10 +11,10 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '12.x'
+          node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
       - name: Install Modules
-        run: npm ci
+        run: npm install
       - name: Run type check
         run: npm run types:check
       - name: Run Linter

.github/workflows/tests.yml

@@ -7,7 +7,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
       - name: Install Modules
-        run: npm ci
+        run: npm install
       - name: Run type check
         run: npm run types:check
       - name: Run Linter

.gitignore

@@ -5,3 +5,4 @@ dist
 .idea
 .vscode
 examples/**/package-lock.json
+package-lock.json

CHANGELOG.md

@@ -4,9 +4,51 @@ 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.26](https://github.com/rive-app/rive-react/compare/v0.0.20...v0.0.26)
+#### [v0.0.29](https://github.com/rive-app/rive-react/compare/v0.0.26...v0.0.29)
+
+- Add offscreencanvas types [`956b76d`](https://github.com/rive-app/rive-react/commit/956b76d01c59a04eb83f3b0b2ca722798af80fb2)
+
+#### [v0.0.26](https://github.com/rive-app/rive-react/compare/v0.0.25...v0.0.26)
+
+> 16 November 2021
 
 - bump rive-js to0.7.33 [`c4dc027`](https://github.com/rive-app/rive-react/commit/c4dc027522502f6aaa0f85392a5e90396c8b719d)
+- chore: release 0.0.26 [`5a19354`](https://github.com/rive-app/rive-react/commit/5a19354ab3fcf128b52973bb1882690f98b0ebe2)
+
+#### [v0.0.25](https://github.com/rive-app/rive-react/compare/v0.0.24...v0.0.25)
+
+> 12 November 2021
+
+- Update rive-js to 0.7.32 to fixed nested artboard speed [`1a59794`](https://github.com/rive-app/rive-react/commit/1a597943cb629be520052f2a86733998f44d6885)
+- chore: release 0.0.25 [`e54a0d4`](https://github.com/rive-app/rive-react/commit/e54a0d42d3910c39a944a144a856a33cae87f3ed)
+
+#### [v0.0.24](https://github.com/rive-app/rive-react/compare/v0.0.23...v0.0.24)
+
+> 12 November 2021
+
+- Update package.json to version 2 [`a4777ec`](https://github.com/rive-app/rive-react/commit/a4777ec7e33ded6a3581c88f2e708f45f7ea1828)
+- chore: release 0.0.24 [`026d097`](https://github.com/rive-app/rive-react/commit/026d0976582eaeb68daf09977fef5d16917c09d8)
+
+#### [v0.0.23](https://github.com/rive-app/rive-react/compare/v0.0.22...v0.0.23)
+
+> 8 November 2021
+
+- chore: release 0.0.23 [`416334e`](https://github.com/rive-app/rive-react/commit/416334ef44b7a9bdaa8c6ff8dac937cfda59d77d)
+- Add verticalAlign = top to canvas to prevent canvas growth on resize [`f309481`](https://github.com/rive-app/rive-react/commit/f309481a43307b1e2b7f77cd418498cacd8022d2)
+
+#### [v0.0.22](https://github.com/rive-app/rive-react/compare/v0.0.21...v0.0.22)
+
+> 15 October 2021
+
+- chore: release 0.0.22 [`06500e6`](https://github.com/rive-app/rive-react/commit/06500e6dcf38165ac8b5f7bf60e0503666947819)
+- Bump rive-js version to 0.7.31 [`33e34a4`](https://github.com/rive-app/rive-react/commit/33e34a46e1e394d67d6981307534fb5512df9dcf)
+
+#### [v0.0.21](https://github.com/rive-app/rive-react/compare/v0.0.20...v0.0.21)
+
+> 10 September 2021
+
+- Update examples to use latest rive-react [`5d08228`](https://github.com/rive-app/rive-react/commit/5d0822836cbc7c5645d7580173c3cdda772b616d)
+- chore: release 0.0.21 [`c8f57f5`](https://github.com/rive-app/rive-react/commit/c8f57f58960987d238ca48646b354c460bfeee59)
 
 #### [v0.0.20](https://github.com/rive-app/rive-react/compare/v0.0.19...v0.0.20)
 

examples/basic/src/App.js

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

examples/basic/src/FlowerExample.js

@@ -1,48 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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.26",
+  "version": "0.0.29",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive/webgl_single": "file:../rive-wasm/js/npm/webgl_single"
+    "@rive-app/canvas": "1.0.8"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
@@ -36,11 +36,12 @@
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^7.0.0",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^27.0.3",
+    "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.9",
     "@types/testing-library__jest-dom": "^5.9.5",
-    "@typescript-eslint/eslint-plugin": "^4.26.0",
-    "@typescript-eslint/parser": "^4.26.0",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
     "auto-changelog": "^2.3.0",
     "bunchee": "^1.7.3",
     "eslint": "^7.28.0",
@@ -50,13 +51,14 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.27.1",
     "jest": "^27.0.4",
     "prettier": "^2.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "release-it": "^14.10.0",
-    "ts-jest": "^27.0.2",
+    "ts-jest": "^27.1.1",
+    "typescript": "^4.5.4",
     "watch": "^1.0.2"
   }
 }

setupTests.ts

@@ -24,7 +24,7 @@ window.IntersectionObserver = class IntersectionObserver {
   unobserve() {}
 };
 
-jest.mock('rive-js', () => ({
+jest.mock('@rive-app/canvas', () => ({
   Rive: jest.fn().mockImplementation(() => ({
     on: jest.fn(),
     stop: jest.fn(),

src/components/Rive.tsx

@@ -1,4 +1,4 @@
-import { Layout } from '@rive/webgl_single';
+import { Layout } from '@rive-app/canvas';
 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/webgl_single';
+import { Rive, EventType } from '@rive-app/canvas';
 import {
   UseRiveParameters,
   UseRiveOptions,
@@ -125,12 +125,11 @@ export default function useRive(
         containerRef.current.style.height = height + 'px';
       }
       if (options.useDevicePixelRatio) {
-        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';
+        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/webgl_single';
+import { Rive, StateMachineInput } from '@rive-app/canvas';
 
 /**
  * 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/webgl_single';
+export * from '@rive-app/canvas';

src/types.ts

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

test/useRive.test.tsx

@@ -1,10 +1,10 @@
 import { renderHook, act } from '@testing-library/react-hooks';
-import { mocked } from 'ts-jest/utils';
+import { mocked } from 'jest-mock';
 
 import useRive from '../src/hooks/useRive';
-import * as rive from 'rive-js';
+import * as rive from '@rive-app/canvas';
 
-jest.mock('rive-js', () => ({
+jest.mock('@rive-app/canvas', () => ({
   Rive: jest.fn().mockImplementation(() => ({
     on: jest.fn(),
     stop: jest.fn(),

tsconfig.json

@@ -6,12 +6,12 @@
     "lib": ["esnext", "dom"],
     "module": "commonjs",
     "moduleResolution": "node",
-    "noImplicitAny": false,
+    "noImplicitAny": true,
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "outDir": "./dist",
-    "types": ["node", "jest"],
+    "types": ["node", "jest", "offscreencanvas"],
     "rootDir": "src",
     "strict": true,
     "target": "es5",