@crystallize/react-image - npm Package Compare versions

Comparing version 7.1.2 to 7.2.0

dist/react-image.cjs.development.js

@@ -202,3 +202,8 @@ 'use strict';
   var useWebP = srcSetWebp.length > 0;
-  var useAvif = srcSetAvif.length > 0; // If image size is given, let's pick the smallest version
+  var useAvif = srcSetAvif.length > 0;
+  /**
+   * Only output Avif format if it is smaller than
+   * webP. For the future: show only one of them when
+   * the browser support for Avif is good enough
+   */
 
@@ -210,4 +215,3 @@ if (useWebP && useAvif) {
     if (firstWebp.size && firstAvif.size) {
-      useWebP = firstWebp.size < firstAvif.size;
-      useAvif = !useWebP;
+      useAvif = firstWebp.size > firstAvif.size;
     }
@@ -221,2 +225,4 @@ }
       srcSetAvif: srcSetAvif,
+      useAvif: useAvif,
+      useWebP: useWebP,
       className: className,
@@ -223,0 +229,0 @@ sizes: sizes

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(){r=function(e,t){return new n(e,void 0,t)};var e=RegExp.prototype,t=new WeakMap;function n(e,r,i){var u=new RegExp(e,r);return t.set(u,i||t.get(e)),l(u,n.prototype)}function u(e,r){var n=t.get(r);return Object.keys(n).reduce((function(t,r){return t[r]=e[n[r]],t}),Object.create(null))}return i(n,RegExp),n.prototype.exec=function(t){var r=e.exec.call(this,t);return r&&(r.groups=u(r,this)),r},n.prototype[Symbol.replace]=function(r,n){if("string"==typeof n){var i=t.get(this);return e[Symbol.replace].call(this,r,n.replace(/\$<([^>]+)>/g,(function(e,t){return"$"+i[t]})))}if("function"==typeof n){var l=this;return e[Symbol.replace].call(this,r,(function(){var e=arguments;return"object"!=typeof e[e.length-1]&&(e=[].slice.call(e)).push(u(e,l)),n.apply(this,e)}))}return e[Symbol.replace].call(this,r,n)},r.apply(this,arguments)}function n(){return(n=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 i(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&&l(e,t)}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e,t){if(null==e)return{};var r,n,i={},l=Object.keys(e);for(n=0;n<l.length;n++)t.indexOf(r=l[n])>=0||(i[r]=e[r]);return i}var a=["children"],c=["src","url","sizes","variants","altText","alt","caption","className"];function o(e){return e.url+" "+e.width+"w"}exports.Image=function(e){var i,l,s,p,f=e.children,h=u(e,a),g=h.src,v=h.url,y=h.sizes,m=h.variants,d=h.altText,b=h.alt,w=h.caption,j=h.className,x=u(h,c),S=(m||[]).filter((function(e){return!!e})),E="string"==typeof b?b:d,O=S.length>0,z=S[0];O&&(z=S.reduce((function(e,t){return!e.width||t.width>e.width?t:e}),S[0]));var _=S.filter((function(e){return e.url&&!e.url.endsWith(".webp")&&!e.url.endsWith(".avif")})),W=S.filter((function(e){return e.url&&e.url.endsWith(".webp")})),T=S.filter((function(e){return e.url&&e.url.endsWith(".avif")})),N=_.map(o).join(", "),k=W.map(o).join(", "),M=T.map(o).join(", ");_.length>0&&_[0].url.match(r(/\.((?:(?!\.)[\s\S])+)$/,{name:1}));var P={src:g||v||(O?_[0].url:void 0),alt:E,caption:w,width:null==(i=z)?void 0:i.width,height:null==(l=z)?void 0:l.height},R=k.length>0,$=M.length>0;if(R&&$){var I=W[0],q=T[0];I.size&&q.size&&($=!(R=I.size<q.size))}if(f)return f(n({srcSet:N,srcSetWebp:k,srcSetAvif:M,className:j,sizes:y},P,x,{originalFileExtension:"jpeg"}));var A=(null==w||null==(s=w.html)?void 0:s[0])||(null==w||null==(p=w.plainText)?void 0:p[0])||"";return t.createElement("figure",{className:j},t.createElement("picture",null,$&&t.createElement("source",{srcSet:M,type:"image/avif",sizes:y}),R&&t.createElement("source",{srcSet:k,type:"image/webp",sizes:y}),N.length>0&&t.createElement("source",{srcSet:N,type:"image/jpeg",sizes:y}),t.createElement("img",Object.assign({},P,x))),A&&t.createElement("figcaption",{dangerouslySetInnerHTML:{__html:A}}))};
+"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(){r=function(e,t){return new n(e,void 0,t)};var e=RegExp.prototype,t=new WeakMap;function n(e,r,i){var u=new RegExp(e,r);return t.set(u,i||t.get(e)),l(u,n.prototype)}function u(e,r){var n=t.get(r);return Object.keys(n).reduce((function(t,r){return t[r]=e[n[r]],t}),Object.create(null))}return i(n,RegExp),n.prototype.exec=function(t){var r=e.exec.call(this,t);return r&&(r.groups=u(r,this)),r},n.prototype[Symbol.replace]=function(r,n){if("string"==typeof n){var i=t.get(this);return e[Symbol.replace].call(this,r,n.replace(/\$<([^>]+)>/g,(function(e,t){return"$"+i[t]})))}if("function"==typeof n){var l=this;return e[Symbol.replace].call(this,r,(function(){var e=arguments;return"object"!=typeof e[e.length-1]&&(e=[].slice.call(e)).push(u(e,l)),n.apply(this,e)}))}return e[Symbol.replace].call(this,r,n)},r.apply(this,arguments)}function n(){return(n=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 i(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&&l(e,t)}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e,t){if(null==e)return{};var r,n,i={},l=Object.keys(e);for(n=0;n<l.length;n++)t.indexOf(r=l[n])>=0||(i[r]=e[r]);return i}var a=["children"],c=["src","url","sizes","variants","altText","alt","caption","className"];function o(e){return e.url+" "+e.width+"w"}exports.Image=function(e){var i,l,s,p,f=e.children,h=u(e,a),g=h.src,v=h.url,y=h.sizes,m=h.variants,d=h.altText,b=h.alt,w=h.caption,j=h.className,x=u(h,c),S=(m||[]).filter((function(e){return!!e})),E="string"==typeof b?b:d,O=S.length>0,z=S[0];O&&(z=S.reduce((function(e,t){return!e.width||t.width>e.width?t:e}),S[0]));var _=S.filter((function(e){return e.url&&!e.url.endsWith(".webp")&&!e.url.endsWith(".avif")})),W=S.filter((function(e){return e.url&&e.url.endsWith(".webp")})),T=S.filter((function(e){return e.url&&e.url.endsWith(".avif")})),N=_.map(o).join(", "),P=W.map(o).join(", "),k=T.map(o).join(", ");_.length>0&&_[0].url.match(r(/\.((?:(?!\.)[\s\S])+)$/,{name:1}));var M={src:g||v||(O?_[0].url:void 0),alt:E,caption:w,width:null==(i=z)?void 0:i.width,height:null==(l=z)?void 0:l.height},R=P.length>0,$=k.length>0;if(R&&$){var A=W[0],I=T[0];A.size&&I.size&&($=A.size>I.size)}if(f)return f(n({srcSet:N,srcSetWebp:P,srcSetAvif:k,useAvif:$,useWebP:R,className:j,sizes:y},M,x,{originalFileExtension:"jpeg"}));var q=(null==w||null==(s=w.html)?void 0:s[0])||(null==w||null==(p=w.plainText)?void 0:p[0])||"";return t.createElement("figure",{className:j},t.createElement("picture",null,$&&t.createElement("source",{srcSet:k,type:"image/avif",sizes:y}),R&&t.createElement("source",{srcSet:P,type:"image/webp",sizes:y}),N.length>0&&t.createElement("source",{srcSet:N,type:"image/jpeg",sizes:y}),t.createElement("img",Object.assign({},M,x))),q&&t.createElement("figcaption",{dangerouslySetInnerHTML:{__html:q}}))};
 //# sourceMappingURL=react-image.cjs.production.min.js.map

dist/react-image.esm.js

@@ -196,3 +196,8 @@ import React from 'react';
   var useWebP = srcSetWebp.length > 0;
-  var useAvif = srcSetAvif.length > 0; // If image size is given, let's pick the smallest version
+  var useAvif = srcSetAvif.length > 0;
+  /**
+   * Only output Avif format if it is smaller than
+   * webP. For the future: show only one of them when
+   * the browser support for Avif is good enough
+   */
 
@@ -204,4 +209,3 @@ if (useWebP && useAvif) {
     if (firstWebp.size && firstAvif.size) {
-      useWebP = firstWebp.size < firstAvif.size;
-      useAvif = !useWebP;
+      useAvif = firstWebp.size > firstAvif.size;
     }
@@ -215,2 +219,4 @@ }
       srcSetAvif: srcSetAvif,
+      useAvif: useAvif,
+      useWebP: useWebP,
       className: className,
@@ -217,0 +223,0 @@ sizes: sizes

package.json

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

README.md

@@ -49,21 +49,24 @@ ![alt text](https://raw.githubusercontent.com/CrystallizeAPI/react-image/HEAD/media/logo.png 'An illustration of an atom')
 >
-  {({ src, srcSet, srcSetWebp, sizes, originalFileExtension, ...rest }) => {
+  {({
+      src,
+      srcSet,
+      srcSetWebp,
+      useAvif,
+      useWebP,
+      sizes,
+      width,
+      height,
+      loading,
+      alt,
+      originalFileExtension,
+      ...rest
+    }) => {
       // Roll your own render
       return (
-          <picture>
-            {srcSetAvif.length > 0 && (
-                <source
-                    srcSet={srcSetAvif.join(", ")}
-                    src={webp[0].url}
-                    type="image/avif"
-                    sizes={sizes}
-                />
+          <picture {...rest}>
+            {useAvif && (
+                <source srcSet={srcSetAvif} type="image/avif" sizes={sizes} />
             )}
-            {srcSetWebp.length > 0 && (
-                <source
-                    srcSet={srcSetWebp.join(", ")}
-                    src={webp[0].url}
-                    type="image/webp"
-                    sizes={sizes}
-                />
+            {useWebP && (
+                <source srcSet={srcSetWebp} type="image/webp" sizes={sizes} />
             )}
@@ -79,3 +82,3 @@ {srcSet.length > 0 && (
 
-            <img src={src} sizes={sizes} {...rest} />
+            <img src={src} width={width} height={height} loading={loading} alt={alt} />
         </picture>
@@ -82,0 +85,0 @@ )

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

51573

increased by1.38%

Lines of code

588

increased by2.98%

Number of lines in readme file

87

increased by3.57%

No dependency changes