@crystallize/react-image - npm Package Compare versions

Comparing version 6.0.3 to 6.1.0

dist/index.d.ts

@@ -6,2 +6,3 @@ import { FC, HTMLAttributes, FunctionComponent } from 'react';
     height: number;
+    size?: number;
 }
@@ -8,0 +9,0 @@ interface RichTextContent {

dist/react-image.cjs.development.js

@@ -246,3 +246,3 @@ 'use strict';
   var std = vars.filter(function (v) {
-    return v.url && !v.url.endsWith('.webp');
+    return v.url && !v.url.endsWith('.webp') && !v.url.endsWith('.avif');
   });
@@ -252,4 +252,8 @@ var webp = vars.filter(function (v) {
   });
+  var avif = vars.filter(function (v) {
+    return v.url && v.url.endsWith('.avif');
+  });
   var srcSet = std.map(getVariantSrc).join(', ');
-  var srcSetWebp = webp.map(getVariantSrc).join(', '); // Determine the original file extension
+  var srcSetWebp = webp.map(getVariantSrc).join(', ');
+  var srcSetAvif = avif.map(getVariantSrc).join(', '); // Determine the original file extension
 
@@ -286,8 +290,25 @@ var originalFileExtension = 'jpeg';
   var captionString = (caption == null ? void 0 : (_caption$html = caption.html) == null ? void 0 : _caption$html[0]) || (caption == null ? void 0 : (_caption$plainText = caption.plainText) == null ? void 0 : _caption$plainText[0]) || '';
+  var useWebP = srcSetWebp.length > 0;
+  var useAvif = srcSetAvif.length > 0; // If image size is given, let's pick the smallest version
+
+  if (useWebP && useAvif) {
+    var firstWebp = webp[0];
+    var firstAvif = avif[0];
+
+    if (firstWebp.size && firstAvif.size) {
+      useWebP = firstWebp.size < firstAvif.size;
+      useAvif = !useWebP;
+    }
+  }
+
   return React.createElement("figure", null, React.createElement("picture", {
     className: className
-  }, srcSetWebp.length > 0 && React.createElement("source", {
+  }, 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", {
@@ -294,0 +315,0 @@ srcSet: srcSet,

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

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

dist/react-image.esm.js

@@ -240,3 +240,3 @@ import React from 'react';
   var std = vars.filter(function (v) {
-    return v.url && !v.url.endsWith('.webp');
+    return v.url && !v.url.endsWith('.webp') && !v.url.endsWith('.avif');
   });
@@ -246,4 +246,8 @@ var webp = vars.filter(function (v) {
   });
+  var avif = vars.filter(function (v) {
+    return v.url && v.url.endsWith('.avif');
+  });
   var srcSet = std.map(getVariantSrc).join(', ');
-  var srcSetWebp = webp.map(getVariantSrc).join(', '); // Determine the original file extension
+  var srcSetWebp = webp.map(getVariantSrc).join(', ');
+  var srcSetAvif = avif.map(getVariantSrc).join(', '); // Determine the original file extension
 
@@ -280,8 +284,25 @@ var originalFileExtension = 'jpeg';
   var captionString = (caption == null ? void 0 : (_caption$html = caption.html) == null ? void 0 : _caption$html[0]) || (caption == null ? void 0 : (_caption$plainText = caption.plainText) == null ? void 0 : _caption$plainText[0]) || '';
+  var useWebP = srcSetWebp.length > 0;
+  var useAvif = srcSetAvif.length > 0; // If image size is given, let's pick the smallest version
+
+  if (useWebP && useAvif) {
+    var firstWebp = webp[0];
+    var firstAvif = avif[0];
+
+    if (firstWebp.size && firstAvif.size) {
+      useWebP = firstWebp.size < firstAvif.size;
+      useAvif = !useWebP;
+    }
+  }
+
   return React.createElement("figure", null, React.createElement("picture", {
     className: className
-  }, srcSetWebp.length > 0 && React.createElement("source", {
+  }, 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", {
@@ -288,0 +309,0 @@ srcSet: srcSet,

package.json

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

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

55053

increased by12.54%

Lines of code

692

increased by8.98%

No dependency changes