flipping - npm Package Compare versions

Comparing version 2.0.0-0 to 2.0.0-1

dist/flipping.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).Flipping={})}(this,function(t){"use strict";var e=function(){return(e=Object.assign||function(t){for(var e,i=1,r=arguments.length;i<r;i++)for(var n in e=arguments[i])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t}).apply(this,arguments)};function i(t,e){var i=t.getBoundingClientRect(),r=i.top,n=i.bottom,o=i.left,a=i.right,s=i.width,l=i.height,f=e?e.getBoundingClientRect():void 0;return{top:r-(f?f.top:0),bottom:n,left:o-(f?f.left:0),right:a,width:s,height:l,get transform(){return getComputedStyle(t).transform||void 0}}}function r(t){return{radius:getComputedStyle(t).borderRadius||0}}var n={x:0,y:0,top:0,bottom:0,left:0,right:0,width:0,height:0,widthRatio:1,heightRatio:1};function o(t,e){var i=e.left-t.left,r=e.top-t.top,n=e.width-t.width,o=e.height-t.height;return{x:i,y:r,top:r,bottom:e.bottom-t.bottom,left:i,right:e.right-t.right,width:n,height:o,widthRatio:e.width/t.width,heightRatio:e.height/t.height}}function a(t){return{x:-1*t.x,y:-1*t.y,top:-1*t.top,bottom:-1*t.bottom,left:-1*t.left,right:-1*t.right,width:-1*t.width,height:-1*t.height,widthRatio:1/t.widthRatio,heightRatio:1/t.heightRatio}}function s(t){if(!t)return!1;var e=i(t),r=e.width,n=e.height;return!(0===r&&0===n)}var l=function(){function t(i){void 0===i&&(i=t.defaultConfig),this.data={},this.listeners=new Map,this.globalListeners=new Set,this.config=e({},t.defaultConfig,i),i.withStyle&&this.withStyle()}return t.create=function(i){return void 0===i&&(i=t.defaultConfig),new t(e({},t.defaultConfig,i))},t.prototype.onFlip=function(t){this.globalListeners.add(t)},t.prototype.findAncestor=function(e){for(var i=e.parentElement;i&&!i.hasAttribute(t.keyAttr);)i=i.parentElement;return i||void 0},t.prototype.set=function(e,i){if(this.data[e]=i,this.globalListeners.forEach(function(t){t(i)}),i.element?i.element.dataset.flipState=i.state:i.previous&&i.previous.element&&(i.previous.element.dataset.flipState=i.state),i.rect&&i.styles){var r=Math.abs(i.delta.left),n=Math.abs(i.delta.top),o="translate("+i.inverse.left+"px, "+i.inverse.top+"px)",a="scale("+i.inverse.widthRatio+", "+i.inverse.heightRatio+")",s="translate("+(i.inverse.left+i.inverse.top)+"px, "+i.inverse.top+"px) rotate(-90deg) translateY("+i.delta.top+"px) rotate(90deg) "+a,l="translate("+(i.inverse.left+i.inverse.top)+"px, "+i.inverse.top+"px) rotate(0deg) translate("+(i.delta.left+i.delta.top)+"px, "+i.delta.top+"px) rotate(0deg) scale(1)";t.style(i,{x:i.rect.left,y:i.rect.top,dx:i.delta.left,dy:i.delta.top,ix:i.inverse.left,iy:i.inverse.top,"inverse-xy":o,iw:i.inverse.width,ih:i.inverse.height,"iw-ratio":i.inverse.widthRatio,"ih-ratio":i.inverse.heightRatio,"inverse-scale":a,"distance-x":r,"distance-y":n,distance:Math.hypot(r,n),"inverse-radius-x":"calc(("+i.styles.radius+" * "+i.delta.widthRatio+"))","inverse-radius-y":"calc(("+i.styles.radius+" * "+i.delta.heightRatio+"))","inverse-radius":"var(--flip-inverse-radius-x) / var(--flip-inverse-radius-y)",curve:s,fcurve:l},{px:!0})}},t.style=function(i,r,n){var o=i.element;if(o){var a=e({px:!0},n);Object.keys(r).forEach(function(e){var i="--"+t.prefix+"-"+e,n=""+r[e];o.style.setProperty(i,n),a.px&&!isNaN(+i)&&o.style.setProperty(i+"-px",n+"px")})}},t.prototype.toElementMap=function(e){var i=this;e||(e=Array.from(document.querySelectorAll("["+t.keyAttr+"]")).filter(function(t){return s(t)}));var r={};return Array.isArray(e)?(e.forEach(function(t){var e="string"==typeof i.config.getKey?t.getAttribute(i.config.getKey):i.config.getKey(t);e&&(r[e]=t)}),r):e},t.prototype.read=function(t){var e=this,o=this.toElementMap(t);Object.keys(o).forEach(function(t){var a=o[t],s=e.data[t];a&&e.set(t,{key:t,element:a,state:"read",rect:i(a,e.findAncestor(a)),styles:r(a),delta:n,inverse:n,previous:s})})},t.prototype.flip=function(t){var l=this,f=this.toElementMap(t);new Set(Object.keys(this.data).concat(Object.keys(f))).forEach(function(t){var p,d=f[t],h=l.data[t],u=s(d);if(d&&u){if(!h&&d&&u)p={key:t,element:d,state:"enter",rect:i(d,l.findAncestor(d)),styles:r(d),delta:n,inverse:n,previous:void 0};else if(h&&d&&u){var c=h.rect?o(h.rect,i(d,l.findAncestor(d))):n;p={key:t,element:d,state:"exit"===h.state?u?"enter":"exit":u?"move":"exit",rect:i(d,l.findAncestor(d)),styles:r(d),delta:c,inverse:a(c),previous:h}}}else p={key:t,element:d,state:"exit",rect:void 0,styles:void 0,delta:n,inverse:n,previous:h};requestAnimationFrame(function(){l.set(t,e({},p,{state:"pre-"+p.state})),requestAnimationFrame(function(){l.set(t,p)})})})},t.prototype.wrap=function(t,e){var i=this;return function(){for(var r=[],n=0;n<arguments.length;n++)r[n]=arguments[n];i.read(e);var o=t.apply(null,r);return i.flip(e),o}},t.prototype.withStyle=function(){var t=document.createElement("style");return t.innerHTML='\n      :root {\n        --flip-duration: .3s;\n        --flip-transition: transform var(--flip-duration) ease;\n      }\n      [data-flip-state] {\n        will-change: transform;\n      }\n      [data-flip-state="read"] {\n        transition: none;\n      }\n      [data-flip-state="pre-move"] {\n        transition: none;\n        transform: var(--flip-inverse-xy);\n      }\n      [data-flip-state="move"] {\n        transition: var(--flip-transition);\n        transform: none;\n      }\n    ',document.head.appendChild(t),this},t.prefix="flip",t.keyAttr="data-flip-key",t.defaultConfig={getKey:function(e){var i=e.getAttribute(t.keyAttr);if(!i)throw console.error("No flip key found for element:",e),new Error("Missing flip key for element");return i}},t}(),f=l.create;t.getRect=i,t.getStyles=r,t.getDelta=o,t.getInverse=a,t.isVisible=s,t.Flipping=l,t.create=f,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).Flipping={})}(this,function(t){"use strict";var e=function(){return(e=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var r in e=arguments[i])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function i(t,e){var i=t.getBoundingClientRect(),n=i.top,r=i.bottom,a=i.left,o=i.right,s=i.width,f=i.height,l=e?e.getBoundingClientRect():void 0;return{top:n-(l?l.top:0),bottom:r,left:a-(l?l.left:0),right:o,width:s,height:f,get transform(){return getComputedStyle(t).transform||void 0}}}function n(t){return{radius:getComputedStyle(t).borderRadius||0}}var r={x:0,y:0,top:0,bottom:0,left:0,right:0,width:0,height:0,widthRatio:1,heightRatio:1};function a(t,e){var i=e.left-t.left,n=e.top-t.top,r=e.width-t.width,a=e.height-t.height;return{x:i,y:n,top:n,bottom:e.bottom-t.bottom,left:i,right:e.right-t.right,width:r,height:a,widthRatio:e.width/t.width,heightRatio:e.height/t.height}}function o(t){return{x:-1*t.x,y:-1*t.y,top:-1*t.top,bottom:-1*t.bottom,left:-1*t.left,right:-1*t.right,width:-1*t.width,height:-1*t.height,widthRatio:1/t.widthRatio,heightRatio:1/t.heightRatio}}function s(t){if(!t)return!1;var e=i(t),n=e.width,r=e.height;return!(0===n&&0===r)}var f=function(){function t(i){void 0===i&&(i=t.defaultConfig),this.data={},this.listeners=new Map,this.globalListeners=new Set,this.config=e({},t.defaultConfig,i),i.style&&this.withStyle()}return t.create=function(i){return void 0===i&&(i=t.defaultConfig),new t(e({},t.defaultConfig,i))},t.prototype.onFlip=function(t){this.globalListeners.add(t)},t.prototype.findAncestor=function(e){for(var i=e.parentElement;i&&!i.hasAttribute(t.keyAttr);)i=i.parentElement;return i||void 0},t.prototype.set=function(e,i){if(this.data[e]=i,this.globalListeners.forEach(function(t){t(i)}),i.element?i.element.dataset.flip=i.state:i.previous&&i.previous.element&&(i.previous.element.dataset.flip=i.state),i.rect&&i.styles){var n=Math.abs(i.delta.left),r=Math.abs(i.delta.top),a="translate("+i.inverse.left+"px, "+i.inverse.top+"px)",o="scale("+i.inverse.widthRatio+", "+i.inverse.heightRatio+")",s=[a,o].join(" ");t.style(i,{x:i.rect.left,y:i.rect.top,dx:i.delta.left,dy:i.delta.top,ix:i.inverse.left,iy:i.inverse.top,ixy:a,iw:i.inverse.width,ih:i.inverse.height,"iw-ratio":i.inverse.widthRatio,"ih-ratio":i.inverse.heightRatio,"inverse-scale":o,inverse:s,"distance-x":n,"distance-y":r,distance:Math.hypot(n,r),"inverse-radius-x":"calc(("+i.styles.radius+" * "+i.delta.widthRatio+"))","inverse-radius-y":"calc(("+i.styles.radius+" * "+i.delta.heightRatio+"))","inverse-radius":"var(--flip-inverse-radius-x) / var(--flip-inverse-radius-y)"},{px:!0})}},t.style=function(i,n,r){var a=i.element;if(a){var o=e({px:!0},r);Object.keys(n).forEach(function(e){var i="--"+t.prefix+"-"+e,r=""+n[e];a.style.setProperty(i,r),o.px&&!isNaN(+i)&&a.style.setProperty(i+"-px",r+"px")})}},t.prototype.toElementMap=function(e){var i=this;e||(e=Array.from(document.querySelectorAll("["+t.keyAttr+"]")).filter(function(t){return s(t)}));var n={};return Array.isArray(e)||e instanceof NodeList?(e.forEach(function(t){var e="string"==typeof i.config.getKey?t.getAttribute(i.config.getKey):i.config.getKey(t);e&&(n[e]=t)}),n):e},t.prototype.read=function(t){var e=this,a=this.toElementMap(t);Object.keys(a).forEach(function(t){var o=a[t],s=e.data[t];o&&e.set(t,{key:t,element:o,state:"read",rect:i(o,e.findAncestor(o)),styles:n(o),delta:r,inverse:r,previous:s})})},t.prototype.flip=function(t){var f=this,l=this.toElementMap(t);new Set(Object.keys(this.data).concat(Object.keys(l))).forEach(function(t){var p,d=l[t],c=f.data[t],h=s(d);if(d&&h){if(!c&&d&&h)p={key:t,element:d,state:"enter",rect:i(d,f.findAncestor(d)),styles:n(d),delta:r,inverse:r,previous:void 0};else if(c&&d&&h){var u=c.rect?a(c.rect,i(d,f.findAncestor(d))):r;p={key:t,element:d,state:"exit"===c.state?h?"enter":"exit":h?"move":"exit",rect:i(d,f.findAncestor(d)),styles:n(d),delta:u,inverse:o(u),previous:c}}}else p={key:t,element:d,state:"exit",rect:void 0,styles:void 0,delta:r,inverse:r,previous:c};requestAnimationFrame(function(){f.set(t,e({},p,{state:"pre-"+p.state})),requestAnimationFrame(function(){f.set(t,p)})})})},t.prototype.wrap=function(t,e){var i=this;return function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];i.read(e);var a=t.apply(null,n);return i.flip(e),a}},t.prototype.withStyle=function(){var e="\n      :root {\n        --flip-duration: .3s;\n        --flip-easing: ease;\n        --flip-transition: transform var(--flip-duration) var(--flip-easing);\n      }\n      ["+t.flipStateAttr+"] {\n        will-change: transform;\n      }\n      ["+t.flipStateAttr+'="read"] {\n        transition: none;\n      }\n      ['+t.flipStateAttr+'="pre-move"] {\n        transition: none;\n        transform: var(--flip-ixy);\n      }\n      ['+t.flipStateAttr+'="pre-move"][data-flip-properties*="scale"] {\n        transition: none;\n        transform: var(--flip-inverse);\n      }\n      ['+t.flipStateAttr+'="move"] {\n        transition: var(--flip-transition);\n        transform: none;\n      }\n\n      /* BG */\n      ['+t.flipStateAttr+"] > [data-flip-bg] {\n        transform-origin: 0 0;\n      }\n      ["+t.flipStateAttr+'="pre-move"] > [data-flip-bg] {\n        transition: none;\n        transform: var(--flip-inverse-scale);\n      }\n      ['+t.flipStateAttr+'="move"] > [data-flip-bg] {\n        transition: var(--flip-transition);\n        transform: none;\n      }\n    ',i=document.createElement("style");return i.innerHTML=e,document.head.appendChild(i),this},t.prototype.setState=function(e,i){void 0===i&&(i=document.body);var n=i.dataset.state,r=Array.from(i.querySelectorAll("["+t.keyAttr+"]")),a=r.filter(function(t){return!t.matches("[data-flip-inactive], [data-flip-inactive] *")&&s(t)});this.read(a),i.querySelectorAll("[data-flip-active], [data-flip-inactive]").forEach(function(t){t.removeAttribute("data-flip-active"),t.removeAttribute("data-flip-inactive")}),i.dataset.prevState=n,i.dataset.state=e,i.querySelectorAll('[data-flip-show~="'+e+'"], [data-flip-hide]:not([data-flip-hide~="'+e+'"])').forEach(function(t){t.setAttribute("data-flip-active","")}),i.querySelectorAll('[data-flip-hide~="'+e+'"], [data-flip-show]:not([data-flip-show~="'+e+'"])').forEach(function(t){t.setAttribute("data-flip-inactive","")});var o=r.filter(function(t){return!t.matches("[data-flip-inactive], [data-flip-inactive] *")});this.flip(o)},t.prefix="flip",t.keyAttr="data-flip-key",t.flipStateAttr="data-flip",t.defaultConfig={getKey:function(e){var i=e.getAttribute(t.keyAttr);if(!i)throw console.error("No flip key found for element:",e),new Error("Missing flip key for element");return i}},t}(),l=f.create;t.getRect=i,t.getStyles=n,t.getDelta=a,t.getInverse=o,t.isVisible=s,t.Flipping=f,t.create=l,Object.defineProperty(t,"__esModule",{value:!0})});

package.json

 {
   "name": "flipping",
-  "version": "2.0.0-0",
+  "version": "2.0.0-1",
   "description": "Flipping awesome animations.",
@@ -13,3 +13,3 @@ "main": "lib/index.js",
     "build:watch": "rollup -cw",
-    "examples": "node-sass -w examples/scss -o examples/css",
+    "examples": "concurrently \"npm run build:watch\" \"node-sass -w examples/scss -o examples/css\"",
     "publish:next": "npm version prerelease && npm publish --tag next",
@@ -38,2 +38,3 @@ "prepublish": "npm run build:prod"
     "chai": "^3.5.0",
+    "concurrently": "^4.1.0",
     "jsdom": "^11.12.0",
@@ -40,0 +41,0 @@ "jsdom-global": "^3.0.2",

src/index.ts

@@ -135,3 +135,3 @@ interface StyleMap {
   getKey: ((element: HTMLElement) => string | null | undefined) | string;
-  withStyle?: boolean;
+  style?: boolean;
 }
@@ -146,2 +146,3 @@
   public static keyAttr = 'data-flip-key';
+  public static flipStateAttr = 'data-flip';
 
@@ -173,3 +174,3 @@ public static defaultConfig = {
 
-    if (config.withStyle) {
+    if (config.style) {
       this.withStyle();
@@ -201,5 +202,5 @@ }
     if (data.element) {
-      data.element.dataset.flipState = data.state;
+      data.element.dataset.flip = data.state;
     } else if (data.previous && data.previous.element) {
-      data.previous.element.dataset.flipState = data.state;
+      data.previous.element.dataset.flip = data.state;
     }
@@ -225,2 +226,3 @@ if (!data.rect || !data.styles) {
     })`;
+    const inverseTransform = [inverseXY, inverseScale].join(' ');
 
@@ -235,12 +237,12 @@ // const s = `translateY(${data.inverse.top *
 
-    const a = `translate(${data.inverse.left + data.inverse.top}px, ${
-      data.inverse.top
-    }px) rotate(-90deg) translateY(${
-      data.delta.top
-    }px) rotate(90deg) ${inverseScale}`;
-    const aa = `translate(${data.inverse.left + data.inverse.top}px, ${
-      data.inverse.top
-    }px) rotate(0deg) translate(${data.delta.left + data.delta.top}px, ${
-      data.delta.top
-    }px) rotate(0deg) scale(1)`;
+    // const a = `translate(${data.inverse.left + data.inverse.top}px, ${
+    //   data.inverse.top
+    // }px) rotate(-90deg) translateY(${
+    //   data.delta.top
+    // }px) rotate(90deg) ${inverseScale}`;
+    // const aa = `translate(${data.inverse.left + data.inverse.top}px, ${
+    //   data.inverse.top
+    // }px) rotate(0deg) translate(${data.delta.left + data.delta.top}px, ${
+    //   data.delta.top
+    // }px) rotate(0deg) scale(1)`;
 
@@ -259,3 +261,3 @@ Flipping.style(
         iy: data.inverse.top,
-        'inverse-xy': inverseXY,
+        ixy: inverseXY,
         // scale
@@ -267,2 +269,4 @@ iw: data.inverse.width,
         'inverse-scale': inverseScale,
+        // inverse combo
+        inverse: inverseTransform,
         // distance
@@ -279,6 +283,6 @@ 'distance-x': distX,
         }))`,
-        'inverse-radius': `var(--flip-inverse-radius-x) / var(--flip-inverse-radius-y)`,
+        'inverse-radius': `var(--flip-inverse-radius-x) / var(--flip-inverse-radius-y)`
         // curve
-        curve: a,
-        fcurve: aa
+        // curve: a,
+        // fcurve: aa
       },
@@ -314,3 +318,7 @@ { px: true }
   private toElementMap(
-    elements: HTMLElement[] | FlipElementMap | undefined
+    elements:
+      | HTMLElement[]
+      | NodeListOf<HTMLElement>
+      | FlipElementMap
+      | undefined
   ): FlipElementMap {
@@ -324,3 +332,3 @@ if (!elements) {
 
-    if (Array.isArray(elements)) {
+    if (Array.isArray(elements) || elements instanceof NodeList) {
       elements.forEach(element => {
@@ -345,3 +353,5 @@ const key =
 
-  public read(elements?: HTMLElement[] | FlipElementMap): void {
+  public read(
+    elements?: HTMLElement[] | NodeListOf<HTMLElement> | FlipElementMap
+  ): void {
     const elementMap = this.toElementMap(elements);
@@ -369,3 +379,3 @@ Object.keys(elementMap).forEach(key => {
 
-  public flip(elements?: HTMLElement[]) {
+  public flip(elements?: HTMLElement[] | NodeListOf<HTMLElement>) {
     const elementMap = this.toElementMap(elements);
@@ -457,9 +467,9 @@ const allKeys = new Set(
     // const styles = `
-    //   [data-flip-state] {
+    //   [data-flip] {
     //     will-change: transform;
     //   }
-    //   [data-flip-state="read"] {
+    //   [data-flip="read"] {
     //     transition: none;
     //   }
-    //   [data-flip-state="pre-move"] {
+    //   [data-flip="pre-move"] {
     //     transition: none;
@@ -469,3 +479,3 @@ //     transform: var(--flip-inverse-xy);
     //   }
-    //   [data-flip-state="move"] {
+    //   [data-flip="move"] {
     //     transition: all .6s ease;
@@ -480,18 +490,36 @@ //     transform: none;
         --flip-duration: .3s;
-        --flip-transition: transform var(--flip-duration) ease;
+        --flip-easing: ease;
+        --flip-transition: transform var(--flip-duration) var(--flip-easing);
       }
-      [data-flip-state] {
+      [${Flipping.flipStateAttr}] {
         will-change: transform;
       }
-      [data-flip-state="read"] {
+      [${Flipping.flipStateAttr}="read"] {
         transition: none;
       }
-      [data-flip-state="pre-move"] {
+      [${Flipping.flipStateAttr}="pre-move"] {
         transition: none;
-        transform: var(--flip-inverse-xy);
+        transform: var(--flip-ixy);
       }
-      [data-flip-state="move"] {
+      [${Flipping.flipStateAttr}="pre-move"][data-flip-properties*="scale"] {
+        transition: none;
+        transform: var(--flip-inverse);
+      }
+      [${Flipping.flipStateAttr}="move"] {
         transition: var(--flip-transition);
         transform: none;
       }
+
+      /* BG */
+      [${Flipping.flipStateAttr}] > [data-flip-bg] {
+        transform-origin: 0 0;
+      }
+      [${Flipping.flipStateAttr}="pre-move"] > [data-flip-bg] {
+        transition: none;
+        transform: var(--flip-inverse-scale);
+      }
+      [${Flipping.flipStateAttr}="move"] > [data-flip-bg] {
+        transition: var(--flip-transition);
+        transform: none;
+      }
     `;
@@ -505,4 +533,49 @@
   }
+
+  public setState(state: string, element: HTMLElement = document.body): void {
+    const prevState = element.dataset.state;
+    const flipElements = Array.from(element.querySelectorAll(
+      `[${Flipping.keyAttr}]`
+    ) as NodeListOf<HTMLElement>);
+
+    const currentFlipElements = flipElements.filter(flipElement => {
+      return (
+        !flipElement.matches('[data-flip-inactive], [data-flip-inactive] *') &&
+        isVisible(flipElement)
+      );
+    });
+    this.read(currentFlipElements);
+    element
+      .querySelectorAll('[data-flip-active], [data-flip-inactive]')
+      .forEach(el => {
+        el.removeAttribute('data-flip-active');
+        el.removeAttribute('data-flip-inactive');
+      });
+    element.dataset.prevState = prevState;
+    element.dataset.state = state;
+    element
+      .querySelectorAll(
+        `[data-flip-show~="${state}"], [data-flip-hide]:not([data-flip-hide~="${state}"])`
+      )
+      .forEach(el => {
+        el.setAttribute('data-flip-active', '');
+      });
+    element
+      .querySelectorAll(
+        `[data-flip-hide~="${state}"], [data-flip-show]:not([data-flip-show~="${state}"])`
+      )
+      .forEach(el => {
+        el.setAttribute('data-flip-inactive', '');
+      });
+
+    const nextFlipElements = flipElements.filter(flipElement => {
+      return !flipElement.matches(
+        '[data-flip-inactive], [data-flip-inactive] *'
+      );
+    });
+
+    this.flip(nextFlipElements);
+  }
 }
 
 export const create = Flipping.create;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

144796

increased by2.57%

Lines of code

3830

increased by1.92%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

19

increased by5.56%

No dependency changes