rive-react - npm Package Compare versions

Comparing version 0.1.0-alpha.2 to 0.2.0-alpha.1

dist/index.js

@@ -1,1 +0,1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("rive-js/dist/rive_light.js"),i=require("rive-js"),a=function(){return(a=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}).apply(this,arguments)};function u(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 o(e){var t=e.setContainerRef,r=e.setCanvasRef,i=u(e,["setContainerRef","setCanvasRef"]);return n.createElement("div",a({ref:t,style:"className"in i?void 0:{width:"100%",height:"100%"}},i),n.createElement("canvas",{ref:r,style:{verticalAlign:"top"}}))}var c={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1};function s(e,i){void 0===i&&(i={});var u=t.useRef(null),s=t.useRef(null),f=t.useState(null),l=f[0],v=f[1],h=t.useState({height:0,width:0}),d=h[0],p=h[1],g=function(){var e=t.useState({width:0,height:0}),n=e[0],r=e[1];return t.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}(),w=Boolean(e),b=function(e){return Object.assign({},c,e)}(i);function y(){if(s.current){var e=function(){var e,t,n=null!==(t=null===(e=s.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&&b.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!==d.width||n!==d.height;if(u.current&&l&&r){if(b.fitCanvasToArtboardHeight&&(s.current.style.height=n+"px"),b.useDevicePixelRatio){var i=window.devicePixelRatio||1;u.current.width=i*t,u.current.height=i*n,u.current.style.width=t+"px",u.current.style.height=n+"px"}else u.current.width=t,u.current.height=n;p({width:t,height:n}),l.startRendering()}l&&l.resizeToCanvas()}}t.useEffect(function(){l&&y()},[l,g]);var R=t.useCallback(function(t){if(t&&e){var n=new r.Rive(a(a({},e),{canvas:t}));n.on(r.EventType.Load,function(){return v(n)})}else null===t&&u.current&&(u.current.height=0,u.current.width=0);u.current=t},[w]),m=t.useCallback(function(e){s.current=e},[]);t.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?l&&l.startRendering():l&&l.stopRendering()});return u.current&&e.observe(u.current),function(){e.disconnect()}},[l]),t.useEffect(function(){return function(){l&&(l.stop(),v(null))}},[l]);var C=t.useCallback(function(e){return n.createElement(o,a({setContainerRef:m,setCanvasRef:R},e))},[]);return{canvas:u.current,setCanvasRef:R,setContainerRef:m,rive:l,RiveComponent:C}}Object.keys(i).forEach(function(e){"default"!==e&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return i[e]}})}),exports.default=function(e){var t=e.src,r=e.artboard,i=e.animations,o=e.layout,c=u(e,["src","artboard","animations","layout"]),f=s({src:t,artboard:r,animations:i,layout:o,autoplay:!0}).RiveComponent;return n.createElement(f,a({},c))},exports.useRive=s,exports.useStateMachineInput=function(e,n,r){var i=t.useState(null),a=i[0],u=i[1];return t.useEffect(function(){if(e&&n&&r||u(null),e&&n&&r){var t=e.stateMachineInputs(n);if(t){var i=t.find(function(e){return e.name===r});u(i||null)}}else u(null)},[e]),a};
+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=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};function c(n,a){void 0===a&&(a={});var c=e.useRef(null),s=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(s.current){var e=function(){var e,t,n=null!==(t=null===(e=s.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(c.current&&l&&r){if(y.fitCanvasToArtboardHeight&&(s.current.style.height=n+"px"),y.useDevicePixelRatio){var i=window.devicePixelRatio||1;c.current.width=i*t,c.current.height=i*n,c.current.style.width=t+"px",c.current.style.height=n+"px"}else c.current.width=t,c.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=new t.Rive(i(i({},n),{canvas:e}));r.on(t.EventType.Load,function(){return d(r)})}else null===e&&c.current&&(c.current.height=0,c.current.width=0);c.current=e},[g]),O=e.useCallback(function(e){s.current=e},[]);e.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?l&&l.startRendering():l&&l.stopRendering()});return c.current&&e.observe(c.current),function(){e.disconnect()}},[l]),e.useEffect(function(){return function(){l&&(l.stop(),d(null))}},[l]);var m=e.useCallback(function(e){return r.default.createElement(u,i({setContainerRef:O,setCanvasRef:R},e))},[]);return{canvas:c.current,setCanvasRef:R,setContainerRef:O,rive:l,RiveComponent:m}}exports.default=function(e){var t=e.src,n=e.artboard,u=e.animations,o=e.layout,s=a(e,["src","artboard","animations","layout"]),f=c({src:t,artboard:n,animations:u,layout:o,autoplay:!0}).RiveComponent;return r.default.createElement(f,i({},s))},exports.useRive=c,exports.useStateMachineInput=function(t,n,r){var i=e.useState(null),a=i[0],u=i[1];return e.useEffect(function(){if(t&&n&&r||u(null),t&&n&&r){var e=t.stateMachineInputs(n);if(e){var i=e.find(function(e){return e.name===r});u(i||null)}}else u(null)},[t]),a},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-js';
+import { Layout } from '@rive-app/canvas';
 import { ComponentProps } from 'react';
@@ -3,0 +3,0 @@ export declare type RiveProps = {

dist/types/hooks/useStateMachineInput.d.ts

@@ -1,2 +0,2 @@
-import { Rive, StateMachineInput } from 'rive-js';
+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-js';
+export * from '@rive-app/canvas';

dist/types/types.d.ts

 import { RefCallback, ComponentProps } from 'react';
-import { Rive, RiveParameters } from 'rive-js';
+import { Rive, RiveParameters } from '@rive-app/canvas';
 export declare type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
@@ -4,0 +4,0 @@ export declare type UseRiveOptions = {

package.json

 {
   "name": "rive-react",
-  "version": "0.1.0-alpha.2",
+  "version": "0.2.0-alpha.1",
   "description": "React wrapper around the rive-js library",
@@ -13,2 +13,3 @@ "main": "dist/index.js",
     "build": "bunchee src/index.ts -m --no-sourcemap",
+    "dev": "watch 'npm run build' src",
     "lint": "eslint -c .eslintrc.js 'src/**/*{.ts,.tsx}'",
@@ -30,3 +31,3 @@ "format": "prettier --write src",
   "dependencies": {
-    "rive-js": "^1.0.1"
+    "@rive-app/webgl": "1.0.10"
   },
@@ -40,9 +41,10 @@ "peerDependencies": {
     "@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.6.0",
+    "bunchee": "^1.7.3",
     "eslint": "^7.28.0",
@@ -55,3 +57,3 @@ "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.27.1",
     "jest": "^27.0.4",
@@ -62,4 +64,6 @@ "prettier": "^2.3.1",
     "release-it": "^14.10.0",
-    "ts-jest": "^27.0.2"
+    "ts-jest": "^27.1.1",
+    "typescript": "^4.5.4",
+    "watch": "^1.0.2"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

16347

increased by1.43%

Worsened metrics

Dev dependency count

27

increased by12.5%

Dependency changes

• + Added@rive-app/webgl@1.0.10

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

• - Removedrive-js@^1.0.1

• - Removedrive-js@1.0.1(transitive)