@rive-app/react-canvas-lite - npm Package Compare versions

Comparing version 4.7.0 to 4.7.1

dist/index.js

@@ -1,1 +0,1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("@rive-app/canvas-lite");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=/*#__PURE__*/t(e),i=function(){return i=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var i in n=arguments[t])Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);return e},i.apply(this,arguments)};function a(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)n.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(t[r[i]]=e[r[i]])}return t}function o(){var e="undefined"!=typeof window&&"number"==typeof window.devicePixelRatio?window.devicePixelRatio:1;return Math.min(Math.max(1,e),3)}"function"==typeof SuppressedError&&SuppressedError;var s=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}();var u=globalThis.ResizeObserver||s,c=void 0!==globalThis.ResizeObserver,f=!c;function l(n,t){void 0===t&&(t=!0);var r=e.useState({width:0,height:0}),i=r[0],a=r[1];e.useEffect(function(){if("undefined"!=typeof window&&t){var e=function(){a({width:window.innerWidth,height:window.innerHeight})};return f&&(e(),window.addEventListener("resize",e)),function(){return window.removeEventListener("resize",e)}}},[]);var o,s,l,d=e.useRef(new u((o=function(e){c&&a({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})},s=0,l=0,function(){for(var e=this,n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];clearTimeout(l),l=window.setTimeout(function(){return o.apply(e,n)},s)})));return e.useEffect(function(){var e=d.current;if(t){var r=n.current;return n.current&&c&&e.observe(n.current),function(){e.disconnect(),r&&c&&e.unobserve(r)}}e.disconnect()},[n,d]),i}var d={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0,shouldResizeCanvasToContainer:!0};function v(e){return Object.assign({},d,e)}function h(n){var t=n.riveLoaded,r=void 0!==t&&t,i=n.canvasRef,a=n.containerRef,s=n.options,u=void 0===s?{}:s,c=n.onCanvasHasResized,f=n.artboardBounds,d=v(u),h=e.useState({height:0,width:0}),p=h[0],w=p.height,R=p.width,y=h[1],g=e.useState({height:0,width:0}),b=g[0],m=b.height,C=b.width,O=g[1],E=e.useState(!0),x=E[0],P=E[1],T=d.fitCanvasToArtboardHeight,L=d.shouldResizeCanvasToContainer,z=d.useDevicePixelRatio,S=l(a,L),j=function(){var n=o(),t=e.useState(n),r=t[0],i=t[1];return e.useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window){var e=function(){var e=o();i(e)},n=window.matchMedia("screen and (resolution: ".concat(r,"dppx)"));return n.hasOwnProperty("addEventListener")?n.addEventListener("change",e):n.addListener(e),function(){n.hasOwnProperty("removeEventListener")?n.removeEventListener("change",e):n.removeListener(e)}}},[r]),r}(),H=null!=f?f:{},M=H.maxX,k=H.maxY,D=e.useCallback(function(){var e,n,t,r,i=null!==(n=null===(e=a.current)||void 0===e?void 0:e.clientWidth)&&void 0!==n?n:0,o=null!==(r=null===(t=a.current)||void 0===t?void 0:t.clientHeight)&&void 0!==r?r:0;return T&&f?{width:i,height:i*(f.maxY/f.maxX)}:{width:i,height:o}},[a,T,M,k]);e.useEffect(function(){if(L&&a.current&&r){var e=D(),n=e.width,t=e.height,o=!1;if(i.current){var s=n!==R||t!==w;if(d.fitCanvasToArtboardHeight&&s&&(a.current.style.height=t+"px",o=!0),d.useDevicePixelRatio){if(s||(n*j!==C||t*j!==m)){var u=j*n,f=j*t;i.current.width=u,i.current.height=f,i.current.style.width=n+"px",i.current.style.height=t+"px",O({width:u,height:f}),o=!0}}else s&&(i.current.width=n,i.current.height=t,O({width:n,height:t}),o=!0);y({width:n,height:t})}c&&(x||o)&&c&&c(),x&&P(!1)}},[i,a,S,j,D,x,P,m,C,w,R,c,L,T,z,r])}function p(e){var n=e.setContainerRef,t=e.setCanvasRef,o=e.className,s=void 0===o?"":o,u=e.style,c=e.children,f=a(e,["setContainerRef","setCanvasRef","className","style","children"]),l=i({width:"100%",height:"100%"},u);return r.default.createElement("div",i({ref:n,className:s},!s&&{style:l}),r.default.createElement("canvas",i({ref:t,style:{verticalAlign:"top",width:0,height:0}},f),c))}function w(t,a){void 0===a&&(a={});var o=e.useRef(null),s=e.useRef(null),u=e.useState(null),c=u[0],f=u[1],l=Boolean(t),d=v(a),w=e.useCallback(function(){c&&(c.startRendering(),c.resizeToCanvas())},[c]);h({riveLoaded:!!c,canvasRef:o,containerRef:s,options:d,onCanvasHasResized:w,artboardBounds:null==c?void 0:c.bounds});var R=e.useCallback(function(e){if(e&&t&&l){var r=d.useOffscreenRenderer,a=new n.Rive(i(i({useOffscreenRenderer:r},t),{canvas:e}));a.on(n.EventType.Load,function(){o.current?f(a):a.cleanup()})}else null===e&&o.current&&(o.current.height=0,o.current.width=0);o.current=e},[l]),y=e.useCallback(function(e){s.current=e},[]);e.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?c&&c.startRendering():c&&c.stopRendering()});return o.current&&e.observe(o.current),function(){e.disconnect()}},[c]),e.useEffect(function(){return function(){c&&(c.cleanup(),f(null))}},[c]);var g=null==t?void 0:t.animations;e.useEffect(function(){c&&g&&(c.isPlaying?(c.stop(c.animationNames),c.play(g)):c.isPaused&&(c.stop(c.animationNames),c.pause(g)))},[g,c]);var b=e.useCallback(function(e){return r.default.createElement(p,i({setContainerRef:y,setCanvasRef:R},e))},[R,y]);return{canvas:o.current,container:s.current,setCanvasRef:R,setContainerRef:y,rive:c,RiveComponent:b}}exports.default=function(e){var n=e.src,t=e.artboard,o=e.animations,s=e.stateMachines,u=e.layout,c=e.useOffscreenRenderer,f=void 0===c||c,l=e.shouldDisableRiveListeners,d=void 0!==l&&l,v=e.shouldResizeCanvasToContainer,h=void 0===v||v,p=e.automaticallyHandleEvents,R=void 0!==p&&p,y=e.children,g=a(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer","shouldDisableRiveListeners","shouldResizeCanvasToContainer","automaticallyHandleEvents","children"]),b=w({src:n,artboard:t,animations:o,layout:u,stateMachines:s,autoplay:!0,shouldDisableRiveListeners:d,automaticallyHandleEvents:R},{useOffscreenRenderer:f,shouldResizeCanvasToContainer:h}).RiveComponent;return r.default.createElement(b,i({},g),y)},exports.useResizeCanvas=h,exports.useRive=w,exports.useStateMachineInput=function(t,r,i,a){var o=e.useState(null),s=o[0],u=o[1];return e.useEffect(function(){function e(){if(t&&r&&i||u(null),t&&r&&i){var e=t.stateMachineInputs(r);if(e){var n=e.find(function(e){return e.name===i});void 0!==a&&n&&(n.value=a),u(n||null)}}else u(null)}e(),t&&t.on(n.EventType.Play,function(){e()})},[t]),s},Object.keys(n).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return n[e]}})});
+Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("@rive-app/canvas-lite");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=/*#__PURE__*/t(e),i=function(){return i=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var i in n=arguments[t])Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);return e},i.apply(this,arguments)};function a(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i<r.length;i++)n.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i])&&(t[r[i]]=e[r[i]])}return t}function o(){var e="undefined"!=typeof window&&"number"==typeof window.devicePixelRatio?window.devicePixelRatio:1;return Math.min(Math.max(1,e),3)}"function"==typeof SuppressedError&&SuppressedError;var s=function(){function e(){}return e.prototype.observe=function(){},e.prototype.unobserve=function(){},e.prototype.disconnect=function(){},e}();var u=globalThis.ResizeObserver||s,c=void 0!==globalThis.ResizeObserver,l=!c;function f(n,t){void 0===t&&(t=!0);var r=e.useState({width:0,height:0}),i=r[0],a=r[1];e.useEffect(function(){if("undefined"!=typeof window&&t){var e=function(){a({width:window.innerWidth,height:window.innerHeight})};return l&&(e(),window.addEventListener("resize",e)),function(){return window.removeEventListener("resize",e)}}},[]);var o,s,f,d=e.useRef(new u((o=function(e){c&&a({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})},s=0,f=0,function(){for(var e=this,n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];clearTimeout(f),f=window.setTimeout(function(){return o.apply(e,n)},s)})));return e.useEffect(function(){var e=d.current;if(t){var r=n.current;return n.current&&c&&e.observe(n.current),function(){e.disconnect(),r&&c&&e.unobserve(r)}}e.disconnect()},[n,d]),i}var d={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0,shouldResizeCanvasToContainer:!0};function v(e){return Object.assign({},d,e)}function h(n){var t=n.riveLoaded,r=void 0!==t&&t,i=n.canvasRef,a=n.containerRef,s=n.options,u=void 0===s?{}:s,c=n.onCanvasHasResized,l=n.artboardBounds,d=v(u),h=e.useState({height:0,width:0}),p=h[0],w=p.height,R=p.width,y=h[1],g=e.useState({height:0,width:0}),b=g[0],m=b.height,C=b.width,O=g[1],E=e.useState(!0),x=E[0],P=E[1],T=d.fitCanvasToArtboardHeight,L=d.shouldResizeCanvasToContainer,z=d.useDevicePixelRatio,S=d.customDevicePixelRatio,j=f(a,L),H=function(n){var t=n||o(),r=e.useState(t),i=r[0],a=r[1];return e.useEffect(function(){if("undefined"!=typeof window&&"matchMedia"in window){var e=function(){var e=n||o();a(e)},t=window.matchMedia("screen and (resolution: ".concat(i,"dppx)"));return t.hasOwnProperty("addEventListener")?t.addEventListener("change",e):t.addListener(e),function(){t.hasOwnProperty("removeEventListener")?t.removeEventListener("change",e):t.removeListener(e)}}},[i,n]),i}(S),M=null!=l?l:{},D=M.maxX,k=M.maxY,I=e.useCallback(function(){var e,n,t,r,i=null!==(n=null===(e=a.current)||void 0===e?void 0:e.clientWidth)&&void 0!==n?n:0,o=null!==(r=null===(t=a.current)||void 0===t?void 0:t.clientHeight)&&void 0!==r?r:0;return T&&l?{width:i,height:i*(l.maxY/l.maxX)}:{width:i,height:o}},[a,T,D,k]);e.useEffect(function(){if(L&&a.current&&r){var e=I(),n=e.width,t=e.height,o=!1;if(i.current){var s=n!==R||t!==w;if(d.fitCanvasToArtboardHeight&&s&&(a.current.style.height=t+"px",o=!0),d.useDevicePixelRatio){if(s||(n*H!==C||t*H!==m)){var u=H*n,l=H*t;i.current.width=u,i.current.height=l,i.current.style.width=n+"px",i.current.style.height=t+"px",O({width:u,height:l}),o=!0}}else s&&(i.current.width=n,i.current.height=t,O({width:n,height:t}),o=!0);y({width:n,height:t})}c&&(x||o)&&c&&c(),x&&P(!1)}},[i,a,j,H,I,x,P,m,C,w,R,c,L,T,z,r])}function p(e){var n=e.setContainerRef,t=e.setCanvasRef,o=e.className,s=void 0===o?"":o,u=e.style,c=e.children,l=a(e,["setContainerRef","setCanvasRef","className","style","children"]),f=i({width:"100%",height:"100%"},u);return r.default.createElement("div",i({ref:n,className:s},!s&&{style:f}),r.default.createElement("canvas",i({ref:t,style:{verticalAlign:"top",width:0,height:0}},l),c))}function w(t,a){void 0===a&&(a={});var o=e.useRef(null),s=e.useRef(null),u=e.useState(null),c=u[0],l=u[1],f=Boolean(t),d=v(a),w=e.useCallback(function(){c&&(c.startRendering(),c.resizeToCanvas())},[c]);h({riveLoaded:!!c,canvasRef:o,containerRef:s,options:d,onCanvasHasResized:w,artboardBounds:null==c?void 0:c.bounds});var R=e.useCallback(function(e){if(e&&t&&f){var r=d.useOffscreenRenderer,a=new n.Rive(i(i({useOffscreenRenderer:r},t),{canvas:e}));a.on(n.EventType.Load,function(){o.current?l(a):a.cleanup()})}else null===e&&o.current&&(o.current.height=0,o.current.width=0);o.current=e},[f]),y=e.useCallback(function(e){s.current=e},[]);e.useEffect(function(){var e=new IntersectionObserver(function(e){e[0].isIntersecting?c&&c.startRendering():c&&c.stopRendering()});return o.current&&e.observe(o.current),function(){e.disconnect()}},[c]),e.useEffect(function(){return function(){c&&(c.cleanup(),l(null))}},[c]);var g=null==t?void 0:t.animations;e.useEffect(function(){c&&g&&(c.isPlaying?(c.stop(c.animationNames),c.play(g)):c.isPaused&&(c.stop(c.animationNames),c.pause(g)))},[g,c]);var b=e.useCallback(function(e){return r.default.createElement(p,i({setContainerRef:y,setCanvasRef:R},e))},[R,y]);return{canvas:o.current,container:s.current,setCanvasRef:R,setContainerRef:y,rive:c,RiveComponent:b}}exports.default=function(e){var n=e.src,t=e.artboard,o=e.animations,s=e.stateMachines,u=e.layout,c=e.useOffscreenRenderer,l=void 0===c||c,f=e.shouldDisableRiveListeners,d=void 0!==f&&f,v=e.shouldResizeCanvasToContainer,h=void 0===v||v,p=e.automaticallyHandleEvents,R=void 0!==p&&p,y=e.children,g=a(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer","shouldDisableRiveListeners","shouldResizeCanvasToContainer","automaticallyHandleEvents","children"]),b=w({src:n,artboard:t,animations:o,layout:u,stateMachines:s,autoplay:!0,shouldDisableRiveListeners:d,automaticallyHandleEvents:R},{useOffscreenRenderer:l,shouldResizeCanvasToContainer:h}).RiveComponent;return r.default.createElement(b,i({},g),y)},exports.useResizeCanvas=h,exports.useRive=w,exports.useStateMachineInput=function(t,r,i,a){var o=e.useState(null),s=o[0],u=o[1];return e.useEffect(function(){function e(){if(t&&r&&i||u(null),t&&r&&i){var e=t.stateMachineInputs(r);if(e){var n=e.find(function(e){return e.name===i});void 0!==a&&n&&(n.value=a),u(n||null)}}else u(null)}e(),t&&t.on(n.EventType.Play,function(){e()})},[t]),s},Object.keys(n).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return n[e]}})});

dist/types/hooks/useDevicePixelRatio.d.ts

@@ -9,4 +9,6 @@ /**
  *
+ * @param customDevicePixelRatio - Number to force a dpr to abide by, rather than using the window's
+ *
  * @returns dpr: Number - Device pixel ratio; ratio of physical px to resolution in CSS pixels for current device
  */
-export default function useDevicePixelRatio(): number;
+export default function useDevicePixelRatio(customDevicePixelRatio?: number): number;

dist/types/types.d.ts

@@ -6,2 +6,3 @@ import { RefCallback, ComponentProps } from 'react';
     useDevicePixelRatio: boolean;
+    customDevicePixelRatio: number;
     fitCanvasToArtboardHeight: boolean;
@@ -8,0 +9,0 @@ useOffscreenRenderer: boolean;

package.json

 {
   "name": "@rive-app/react-canvas-lite",
-  "version": "4.7.0",
+  "version": "4.7.1",
   "description": "React wrapper around the @rive-app/canvas-lite library",
@@ -21,3 +21,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "@rive-app/canvas-lite": "2.9.0"
+    "@rive-app/canvas-lite": "2.9.2"
   },
@@ -24,0 +24,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17105

increased by1.23%

Lines of code

227

increased by1.34%

Dependency changes

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

• - Removed@rive-app/canvas-lite@2.9.0(transitive)

• Updated@rive-app/canvas-lite@2.9.2