rive-react - npm Package Compare versions

Comparing version 1.0.7 to 2.0.0

dist/index.js

@@ -1,1 +0,1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@rive-app/webgl");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),i=function(){return i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n}function u(e){var t=e.setContainerRef,n=e.setCanvasRef,u=a(e,["setContainerRef","setCanvasRef"]);return r.default.createElement("div",i({ref:t,style:"className"in u?void 0:{width:"100%",height:"100%"}},u),r.default.createElement("canvas",{ref:n,style:{verticalAlign:"top"}}))}var o={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0};function s(n,a){void 0===a&&(a={});var s=e.useRef(null),c=e.useRef(null),f=e.useState(null),l=f[0],d=f[1],v=e.useState({height:0,width:0}),h=v[0],p=v[1],w=function(){var t=e.useState({width:0,height:0}),n=t[0],r=t[1];return e.useEffect(function(){if("undefined"!=typeof window){var e=function(){r({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",e),e(),function(){return window.removeEventListener("resize",e)}}},[]),n}(),g=Boolean(n),y=function(e){return Object.assign({},o,e)}(a);function b(){if(c.current){var e=function(){var e,t,n=null!==(t=null===(e=c.current)||void 0===e?void 0:e.getBoundingClientRect())&&void 0!==t?t:new DOMRect(0,0,0,0),r=n.width,i=n.height;if(l&&y.fitCanvasToArtboardHeight){var a=l.bounds;return{width:r,height:r*(a.maxY/a.maxX)}}return{width:r,height:i}}(),t=e.width,n=e.height,r=t!==h.width||n!==h.height;if(s.current&&l&&r){if(y.fitCanvasToArtboardHeight&&(c.current.style.height=n+"px"),y.useDevicePixelRatio){var i=window.devicePixelRatio||1;s.current.width=i*t,s.current.height=i*n,s.current.style.width=t+"px",s.current.style.height=n+"px"}else s.current.width=t,s.current.height=n;p({width:t,height:n}),l.startRendering()}l&&l.resizeToCanvas()}}e.useEffect(function(){l&&b()},[l,w]);var R=e.useCallback(function(e){if(e&&n){var r=y.useOffscreenRenderer,a=new t.Rive(i(i({useOffscreenRenderer:r},n),{canvas:e}));a.on(t.EventType.Load,function(){return d(a)})}else null===e&&s.current&&(s.current.height=0,s.current.width=0);s.current=e},[g]),O=e.useCallback(function(e){c.current=e},[]);e.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?l&&l.startRendering():l&&l.stopRendering()});return s.current&&e.observe(s.current),function(){e.disconnect()}},[l]),e.useEffect(function(){return function(){l&&(l.stop(),d(null))}},[l]);var m=null==n?void 0:n.animations;e.useEffect(function(){l&&m&&(l.stop(l.animationNames),l.play(m))},[m,l]);var C=e.useCallback(function(e){return r.default.createElement(u,i({setContainerRef:O,setCanvasRef:R},e))},[]);return{canvas:s.current,setCanvasRef:R,setContainerRef:O,rive:l,RiveComponent:C}}exports.default=function(e){var t=e.src,n=e.artboard,u=e.animations,o=e.layout,c=e.useOffscreenRenderer,f=void 0===c||c,l=a(e,["src","artboard","animations","layout","useOffscreenRenderer"]),d=s({src:t,artboard:n,animations:u,layout:o,autoplay:!0},{useOffscreenRenderer:f}).RiveComponent;return r.default.createElement(d,i({},l))},exports.useRive=s,exports.useStateMachineInput=function(t,n,r,i){var a=e.useState(null),u=a[0],o=a[1];return e.useEffect(function(){if(t&&n&&r||o(null),t&&n&&r){var e=t.stateMachineInputs(n);if(e){var a=e.find(function(e){return e.name===r});void 0!==i&&a&&(a.value=i),o(a||null)}}else o(null)},[t]),u},Object.keys(t).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})});
+Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@rive-app/canvas");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),i=function(){return i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},i.apply(this,arguments)};function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(n[r[i]]=e[r[i]])}return n}function u(e){var t=e.setContainerRef,n=e.setCanvasRef,u=e.className,o=void 0===u?"":u,s=e.style,c=a(e,["setContainerRef","setCanvasRef","className","style"]),f=i({width:"100%",height:"100%"},s);return r.default.createElement("div",i({ref:t,className:o},!o&&{style:f}),r.default.createElement("canvas",i({ref:n,style:{verticalAlign:"top"}},c)))}var o={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0};function s(n,a){void 0===a&&(a={});var s=e.useRef(null),c=e.useRef(null),f=e.useState(null),l=f[0],d=f[1],v=e.useState({height:0,width:0}),h=v[0],p=v[1],w=function(){var t=e.useState({width:0,height:0}),n=t[0],r=t[1];return e.useEffect(function(){if("undefined"!=typeof window){var e=function(){r({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",e),e(),function(){return window.removeEventListener("resize",e)}}},[]),n}(),g=Boolean(n),y=function(e){return Object.assign({},o,e)}(a);function R(){if(c.current){var e=function(){var e,t,n=null!==(t=null===(e=c.current)||void 0===e?void 0:e.getBoundingClientRect())&&void 0!==t?t:new DOMRect(0,0,0,0),r=n.width,i=n.height;if(l&&y.fitCanvasToArtboardHeight){var a=l.bounds;return{width:r,height:r*(a.maxY/a.maxX)}}return{width:r,height:i}}(),t=e.width,n=e.height,r=t!==h.width||n!==h.height;if(s.current&&l&&r){if(y.fitCanvasToArtboardHeight&&(c.current.style.height=n+"px"),y.useDevicePixelRatio){var i=window.devicePixelRatio||1;s.current.width=i*t,s.current.height=i*n,s.current.style.width=t+"px",s.current.style.height=n+"px"}else s.current.width=t,s.current.height=n;p({width:t,height:n}),l.startRendering()}l&&l.resizeToCanvas()}}e.useEffect(function(){l&&R()},[l,w]);var b=e.useCallback(function(e){if(e&&n){var r=y.useOffscreenRenderer,a=new t.Rive(i(i({useOffscreenRenderer:r},n),{canvas:e}));a.on(t.EventType.Load,function(){return d(a)})}else null===e&&s.current&&(s.current.height=0,s.current.width=0);s.current=e},[g]),O=e.useCallback(function(e){c.current=e},[]);e.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?l&&l.startRendering():l&&l.stopRendering()});return s.current&&e.observe(s.current),function(){e.disconnect()}},[l]),e.useEffect(function(){return function(){l&&(l.stop(),d(null))}},[l]);var m=null==n?void 0:n.animations;e.useEffect(function(){l&&m&&(l.stop(l.animationNames),l.play(m))},[m,l]);var C=e.useCallback(function(e){return r.default.createElement(u,i({setContainerRef:O,setCanvasRef:b},e))},[]);return{canvas:s.current,setCanvasRef:b,setContainerRef:O,rive:l,RiveComponent:C}}exports.default=function(e){var t=e.src,n=e.artboard,u=e.animations,o=e.layout,c=e.useOffscreenRenderer,f=void 0===c||c,l=a(e,["src","artboard","animations","layout","useOffscreenRenderer"]),d=s({src:t,artboard:n,animations:u,layout:o,autoplay:!0},{useOffscreenRenderer:f}).RiveComponent;return r.default.createElement(d,i({},l))},exports.useRive=s,exports.useStateMachineInput=function(t,n,r,i){var a=e.useState(null),u=a[0],o=a[1];return e.useEffect(function(){if(t&&n&&r||o(null),t&&n&&r){var e=t.stateMachineInputs(n);if(e){var a=e.find(function(e){return e.name===r});void 0!==i&&a&&(a.value=i),o(a||null)}}else o(null)},[t]),u},Object.keys(t).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})});

dist/types/components/Rive.d.ts

@@ -1,2 +0,2 @@
-import { Layout } from '@rive-app/webgl';
+import { Layout } from '@rive-app/canvas';
 import { ComponentProps } from 'react';
@@ -10,3 +10,3 @@ export declare type RiveProps = {
 };
-declare const Rive: ({ src, artboard, animations, layout, useOffscreenRenderer, ...rest }: RiveProps & ComponentProps<'div'>) => JSX.Element;
+declare const Rive: ({ src, artboard, animations, layout, useOffscreenRenderer, ...rest }: RiveProps & ComponentProps<'canvas'>) => JSX.Element;
 export default Rive;

dist/types/hooks/useStateMachineInput.d.ts

@@ -1,2 +0,2 @@
-import { Rive, StateMachineInput } from '@rive-app/webgl';
+import { Rive, StateMachineInput } from '@rive-app/canvas';
 /**
@@ -3,0 +3,0 @@ * Custom hook for fetching a stateMachine input from a rive file.

dist/types/index.d.ts

@@ -7,2 +7,2 @@ import Rive from './components/Rive';
 export { RiveState, UseRiveParameters, UseRiveOptions } from './types';
-export * from '@rive-app/webgl';
+export * from '@rive-app/canvas';

dist/types/types.d.ts

 import { RefCallback, ComponentProps } from 'react';
-import { Rive, RiveParameters } from '@rive-app/webgl';
+import { Rive, RiveParameters } from '@rive-app/canvas';
 export declare type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
@@ -28,3 +28,3 @@ export declare type UseRiveOptions = {
     rive: Rive | null;
-    RiveComponent: (props: ComponentProps<'div'>) => JSX.Element;
+    RiveComponent: (props: ComponentProps<'canvas'>) => JSX.Element;
 };

package.json

 {
   "name": "rive-react",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "description": "React wrapper around the rive-js library",
@@ -30,3 +30,4 @@ "main": "dist/index.js",
   "dependencies": {
-    "@rive-app/webgl": "1.0.39"
+    "@rive-app/canvas": "1.0.46",
+    "@rive-app/webgl": "1.0.43"
   },
@@ -33,0 +34,0 @@ "peerDependencies": {

README.md

@@ -25,26 +25,2 @@ ![Build Status](https://github.com/rive-app/rive-react/actions/workflows/tests.yml/badge.svg)
 
-### Migrating from v 0.0.x to 1.x.x
-
-Starting in v 1.0.0, we've migrated from wrapping around the `@rive-app/canvas` runtime (which uses the `CanvasRendereringContext2D` renderer) to the `@rive-app/webgl` runtime (which uses the WebGL renderer). The high-level API doesn't require any change to upgrade, but there are some notes to consider about the backing renderer.
-
-The backing `WebGL` runtime allows for best performance across all devices, as well as support for some features that are not supported in the `canvas` renderer runtime. To allow the `react` runtime to support some of the newer features in Rive, we needed to switch the `rive-react` backing runtime to `@rive-app/webgl`. 
-
-One note about this switch is that some browsers may limit the number of concurrent WebGL contexts. For example, Chrome may only support up to 16 contexts concurrently. We pass a property called `useOffscreenRenderer` set to true to the backing runtime when instantiating Rive by default, which helps to manage the lifecycle of the `canvas` with a single offscreen `WebGL` context, even if there are many Rive animations on the screen (i.e 16+). If you need a single `WebGL` context per Rive animation/instance, pass in the `useOffscreenRenderer` property set to `false` in the `useRive` options, or as a prop in the default export component from this runtime. See below for an example:
-
-```js
-const {rive, RiveComponent} = useRive({
-  src: 'foo.riv',
-}, {
-  // Default (you don't need to set this)
-  useOffscreenRenderer: true,
-  // To override and use one context per Rive instance, uncomment and use the line below
-  // useOffscreenRenderer: false,
-});
-
-// or you can override the flag in JSX via props
-return (
-  <Rive src="foo.riv" useOffscreenRenderer={false} />
-);
-```
-
 ## Usage
@@ -72,4 +48,14 @@
 - `layout`: _(optional)_ Layout object to define how animations are displayed on the canvas. See [Rive.js](https://github.com/rive-app/rive-wasm#layout) for more details.
-- _All attributes and eventHandlers that can be passed to a `div` element can also be passed to the `Rive` component and used in the same manner._
+- _All attributes and eventHandlers that can be passed to a `canvas` element can also be passed to the `Rive` component and used in the same manner._
 
+#### Styles and Classes
+
+When rendering out a Rive component, in the DOM, it will show as a `<div>` element that contains the `<canvas>` element that powers the Rive animations. The purpose of the `<div>` element is to help control the sizing of the component. By default, the container has the following styles set on the `style` attribute:
+```css
+width: 100%;
+height: 100%;
+```
+
+If you decide to pass in a `className` to the Rive component, you will override these attributes, and you will need to either set these style attributes in your CSS associated with that `className`, or set your own sizing preferences. 
+
 ### useRive Hook
@@ -107,3 +93,3 @@
 
-- `RiveComponent`: A Component that can be used to display your .riv file. This component accepts the same attributes and event handlers as a `div` element.
+- `RiveComponent`: A Component that can be used to display your .riv file. This component accepts the same attributes and event handlers as a `canvas` element.
 - `rive`: A Rive.js `Rive` object. This will return as null until the .riv file has fully loaded.
@@ -184,1 +170,37 @@ - `canvas`: HTMLCanvasElement object, on which the .riv file is rendering.
 The [examples](examples) shows a number of different ways to use Rive React. See the instructions for each example to run locally.
+
+
+## Migration notes
+
+### Migrating from version 0.0.x to 1.x.x
+
+Starting in v 1.0.0, we've migrated from wrapping around the `@rive-app/canvas` runtime (which uses the `CanvasRendereringContext2D` renderer) to the `@rive-app/webgl` runtime (which uses the WebGL renderer). The high-level API doesn't require any change to upgrade, but there are some notes to consider about the backing renderer.
+
+The backing `WebGL` runtime allows for best performance across all devices, as well as support for some features that are not supported in the `canvas` renderer runtime. To allow the `react` runtime to support some of the newer features in Rive, we needed to switch the `rive-react` backing runtime to `@rive-app/webgl`. 
+
+One note about this switch is that some browsers may limit the number of concurrent WebGL contexts. For example, Chrome may only support up to 16 contexts concurrently. We pass a property called `useOffscreenRenderer` set to true to the backing runtime when instantiating Rive by default, which helps to manage the lifecycle of the `canvas` with a single offscreen `WebGL` context, even if there are many Rive animations on the screen (i.e 16+). If you need a single `WebGL` context per Rive animation/instance, pass in the `useOffscreenRenderer` property set to `false` in the `useRive` options, or as a prop in the default export component from this runtime. See below for an example:
+
+```js
+const {rive, RiveComponent} = useRive({
+  src: 'foo.riv',
+}, {
+  // Default (you don't need to set this)
+  useOffscreenRenderer: true,
+  // To override and use one context per Rive instance, uncomment and use the line below
+  // useOffscreenRenderer: false,
+});
+
+// or you can override the flag in JSX via props
+return (
+  <Rive src="foo.riv" useOffscreenRenderer={false} />
+);
+```
+
+### Migrating from version 1.x.x to 2.x.x
+
+#### Package split
+
+In most cases, you may be able to migrate safely. We are mainly enabling the React runtime to work with both backing renderers `@rive-app/webgl` and `@rive-app/canvas`, such that you can use either `@rive-app/react-canvas` or `@rive-app/react-webgl` as the dependency in your React applications. Another change that is mostly internal is that by default, `rive-react` will now use `@rive-app/canvas` (as opposed to `@rive-app/webgl`) to wrap around, as it currently yields the fastest performance across devices. Therefore, **we recommend installing `@rive-app/react-canvas` in your applicaions**. However, if you need a WebGL backing renderer, you may want to use `@rive-app/react-webgl`.
+
+#### Classes, styles, and component props
+Starting in v2.0, we introduce one breaking change where any non-style props set on the `RiveComponent` (i.e `aria-*`, `role`, etc.) will be set on the inner `<canvas>` element. Previously, all extra props would be set onto the containing `<div>` element. Both the `className` and `style` props will continue to be set on the `<div>` element that wraps the canvas, as this dictates the sizing of the Rive component.

No alert changes

Improved metrics

Total package byte prevSize

21417

increased by10.18%

Number of lines in readme file

203

increased by12.15%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Added@rive-app/canvas@1.0.46

• + Added@rive-app/canvas@1.0.46(transitive)

• + Added@rive-app/webgl@1.0.43(transitive)

• - Removed@rive-app/webgl@1.0.39(transitive)

• Updated@rive-app/webgl@1.0.43