@crystallize/react-image - npm Package Compare versions

Comparing version 7.1.0 to 7.1.1

dist/react-image.cjs.development.js

@@ -303,10 +303,10 @@ 'use strict';
     className: className
-  }, React.createElement("picture", null, useWebP && React.createElement("source", {
+  }, React.createElement("picture", null, useAvif && React.createElement("source", {
+    srcSet: srcSetAvif,
+    type: "image/avif",
+    sizes: sizes
+  }), useWebP && React.createElement("source", {
     srcSet: srcSetWebp,
     type: "image/webp",
     sizes: sizes
-  }), useAvif && React.createElement("source", {
-    srcSet: srcSetAvif,
-    type: "image/avif",
-    sizes: sizes
   }), srcSet.length > 0 && React.createElement("source", {
@@ -313,0 +313,0 @@ srcSet: srcSet,

dist/react-image.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e;function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&o(e,t)}function i(e){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function o(e,t){return(o=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function c(e,t,r){return(c=u()?Reflect.construct:function(e,t,r){var n=[null];n.push.apply(n,t);var i=new(Function.bind.apply(e,n));return r&&o(i,r.prototype),i}).apply(null,arguments)}function l(e){var t="function"==typeof Map?new Map:void 0;return(l=function(e){if(null===e||-1===Function.toString.call(e).indexOf("[native code]"))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,r)}function r(){return c(e,arguments,i(this).constructor)}return r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),o(r,e)})(e)}function a(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(i[r]=e[r]);return i}function s(e,t){s=function(e,t){return new u(e,void 0,t)};var r=l(RegExp),i=RegExp.prototype,o=new WeakMap;function u(e,t,n){var i=r.call(this,e,t);return o.set(i,n||o.get(e)),i}function c(e,t){var r=o.get(t);return Object.keys(r).reduce((function(t,n){return t[n]=e[r[n]],t}),Object.create(null))}return n(u,r),u.prototype.exec=function(e){var t=i.exec.call(this,e);return t&&(t.groups=c(t,this)),t},u.prototype[Symbol.replace]=function(e,t){if("string"==typeof t){var r=o.get(this);return i[Symbol.replace].call(this,e,t.replace(/\$<([^>]+)>/g,(function(e,t){return"$"+r[t]})))}if("function"==typeof t){var n=this;return i[Symbol.replace].call(this,e,(function(){var e=[];return e.push.apply(e,arguments),"object"!=typeof e[e.length-1]&&e.push(c(e,n)),t.apply(this,e)}))}return i[Symbol.replace].call(this,e,t)},s.apply(this,arguments)}function p(e){return e.url+" "+e.width+"w"}exports.Image=function(e){var n,i,o,u,c=e.children,l=a(e,["children"]),f=l.src,h=l.url,y=l.sizes,g=l.variants,v=l.altText,d=l.alt,b=l.caption,m=l.className,w=a(l,["src","url","sizes","variants","altText","alt","caption","className"]),j=(g||[]).filter((function(e){return!!e})),O="string"==typeof d?d:v,x=j.length>0,S=j[0];x&&(S=j.reduce((function(e,t){return!e.width||t.width>e.width?t:e}),j[0]));var E=j.filter((function(e){return e.url&&!e.url.endsWith(".webp")&&!e.url.endsWith(".avif")})),_=j.filter((function(e){return e.url&&e.url.endsWith(".webp")})),z=j.filter((function(e){return e.url&&e.url.endsWith(".avif")})),P=E.map(p).join(", "),R=_.map(p).join(", "),T=z.map(p).join(", ");E.length>0&&E[0].url.match(s(/\.((?:(?!\.)[\s\S])+)$/,{name:1}));var W={src:f||h||(x?E[0].url:void 0),alt:O,caption:b,width:null==(n=S)?void 0:n.width,height:null==(i=S)?void 0:i.height};if(c)return c(r({srcSet:P,srcSetWebp:R,className:m,sizes:y},W,w,{originalFileExtension:"jpeg"}));var M=(null==b||null==(o=b.html)?void 0:o[0])||(null==b||null==(u=b.plainText)?void 0:u[0])||"",N=R.length>0,k=T.length>0;if(N&&k){var F=_[0],$=z[0];F.size&&$.size&&(k=!(N=F.size<$.size))}return t.createElement("figure",{className:m},t.createElement("picture",null,N&&t.createElement("source",{srcSet:R,type:"image/webp",sizes:y}),k&&t.createElement("source",{srcSet:T,type:"image/avif",sizes:y}),P.length>0&&t.createElement("source",{srcSet:P,type:"image/jpeg",sizes:y}),t.createElement("img",Object.assign({},W,w))),M&&t.createElement("figcaption",{dangerouslySetInnerHTML:{__html:M}}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e;function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&o(e,t)}function i(e){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function o(e,t){return(o=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}function c(e,t,r){return(c=u()?Reflect.construct:function(e,t,r){var n=[null];n.push.apply(n,t);var i=new(Function.bind.apply(e,n));return r&&o(i,r.prototype),i}).apply(null,arguments)}function l(e){var t="function"==typeof Map?new Map:void 0;return(l=function(e){if(null===e||-1===Function.toString.call(e).indexOf("[native code]"))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,r)}function r(){return c(e,arguments,i(this).constructor)}return r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),o(r,e)})(e)}function a(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(i[r]=e[r]);return i}function s(e,t){s=function(e,t){return new u(e,void 0,t)};var r=l(RegExp),i=RegExp.prototype,o=new WeakMap;function u(e,t,n){var i=r.call(this,e,t);return o.set(i,n||o.get(e)),i}function c(e,t){var r=o.get(t);return Object.keys(r).reduce((function(t,n){return t[n]=e[r[n]],t}),Object.create(null))}return n(u,r),u.prototype.exec=function(e){var t=i.exec.call(this,e);return t&&(t.groups=c(t,this)),t},u.prototype[Symbol.replace]=function(e,t){if("string"==typeof t){var r=o.get(this);return i[Symbol.replace].call(this,e,t.replace(/\$<([^>]+)>/g,(function(e,t){return"$"+r[t]})))}if("function"==typeof t){var n=this;return i[Symbol.replace].call(this,e,(function(){var e=[];return e.push.apply(e,arguments),"object"!=typeof e[e.length-1]&&e.push(c(e,n)),t.apply(this,e)}))}return i[Symbol.replace].call(this,e,t)},s.apply(this,arguments)}function p(e){return e.url+" "+e.width+"w"}exports.Image=function(e){var n,i,o,u,c=e.children,l=a(e,["children"]),f=l.src,h=l.url,y=l.sizes,g=l.variants,v=l.altText,d=l.alt,b=l.caption,m=l.className,w=a(l,["src","url","sizes","variants","altText","alt","caption","className"]),j=(g||[]).filter((function(e){return!!e})),O="string"==typeof d?d:v,x=j.length>0,S=j[0];x&&(S=j.reduce((function(e,t){return!e.width||t.width>e.width?t:e}),j[0]));var E=j.filter((function(e){return e.url&&!e.url.endsWith(".webp")&&!e.url.endsWith(".avif")})),_=j.filter((function(e){return e.url&&e.url.endsWith(".webp")})),z=j.filter((function(e){return e.url&&e.url.endsWith(".avif")})),P=E.map(p).join(", "),R=_.map(p).join(", "),T=z.map(p).join(", ");E.length>0&&E[0].url.match(s(/\.((?:(?!\.)[\s\S])+)$/,{name:1}));var W={src:f||h||(x?E[0].url:void 0),alt:O,caption:b,width:null==(n=S)?void 0:n.width,height:null==(i=S)?void 0:i.height};if(c)return c(r({srcSet:P,srcSetWebp:R,className:m,sizes:y},W,w,{originalFileExtension:"jpeg"}));var M=(null==b||null==(o=b.html)?void 0:o[0])||(null==b||null==(u=b.plainText)?void 0:u[0])||"",N=R.length>0,k=T.length>0;if(N&&k){var F=_[0],$=z[0];F.size&&$.size&&(k=!(N=F.size<$.size))}return t.createElement("figure",{className:m},t.createElement("picture",null,k&&t.createElement("source",{srcSet:T,type:"image/avif",sizes:y}),N&&t.createElement("source",{srcSet:R,type:"image/webp",sizes:y}),P.length>0&&t.createElement("source",{srcSet:P,type:"image/jpeg",sizes:y}),t.createElement("img",Object.assign({},W,w))),M&&t.createElement("figcaption",{dangerouslySetInnerHTML:{__html:M}}))};
 //# sourceMappingURL=react-image.cjs.production.min.js.map

dist/react-image.esm.js

@@ -297,10 +297,10 @@ import React from 'react';
     className: className
-  }, React.createElement("picture", null, useWebP && React.createElement("source", {
+  }, React.createElement("picture", null, useAvif && React.createElement("source", {
+    srcSet: srcSetAvif,
+    type: "image/avif",
+    sizes: sizes
+  }), useWebP && React.createElement("source", {
     srcSet: srcSetWebp,
     type: "image/webp",
     sizes: sizes
-  }), useAvif && React.createElement("source", {
-    srcSet: srcSetAvif,
-    type: "image/avif",
-    sizes: sizes
   }), srcSet.length > 0 && React.createElement("source", {
@@ -307,0 +307,0 @@ srcSet: srcSet,

package.json

 {
   "name": "@crystallize/react-image",
   "description": "Modern and responsive images based on the source variations from Crystallize",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "keywords": [
@@ -6,0 +6,0 @@ "react",

README.md

@@ -7,3 +7,4 @@ ![alt text](https://raw.githubusercontent.com/CrystallizeAPI/react-image/HEAD/media/logo.png 'An illustration of an atom')
 
-[React Image Srcset resource home](https://crystallize.com/developers/react-components/react-image-srcset).
+And don't forget:
+[react image sizes attribute for fast ecommerce](https://crystallize.com/blog/react-image-sizes-attribute-for-fast-ecommerce).
 
@@ -10,0 +11,0 @@ ## Demo

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

55145

increased by0.07%

Number of lines in readme file

76

increased by1.33%

No dependency changes