@crystallize/react-image - npm Package Compare versions

Comparing version 7.2.0 to 7.2.1

dist/index.d.ts

@@ -20,2 +20,3 @@ import { FC, HTMLAttributes, FunctionComponent } from 'react';
     alt?: string;
+    media?: string;
     caption?: RichTextContent;
@@ -22,0 +23,0 @@ variants?: CrystallizeImageVariant[];

dist/react-image.cjs.development.js

@@ -130,3 +130,3 @@ 'use strict';
 var _excluded = ["children"],
-    _excluded2 = ["src", "url", "sizes", "variants", "altText", "alt", "caption", "className"];
+    _excluded2 = ["src", "url", "sizes", "variants", "altText", "alt", "caption", "className", "media"];
 
@@ -151,2 +151,3 @@ function getVariantSrc(variant) {
       className = restOfAllProps.className,
+      media = restOfAllProps.media,
       rest = _objectWithoutPropertiesLoose(restOfAllProps, _excluded2);
@@ -189,2 +190,3 @@
   if (std.length > 0) {
+    var _match$groups;
 
@@ -194,2 +196,7 @@ var match = std[0].url.match( /*#__PURE__*/_wrapRegExp(/\.((?:(?!\.)[\s\S])+)$/, {
     }));
+    originalFileExtension = (match == null ? void 0 : (_match$groups = match.groups) == null ? void 0 : _match$groups.name) || 'jpeg'; // Provide correct mime type for jpg
+
+    if (originalFileExtension === 'jpg') {
+      originalFileExtension = 'jpeg';
+    }
   }
@@ -230,3 +237,4 @@
       className: className,
-      sizes: sizes
+      sizes: sizes,
+      media: media
     }, commonProps, rest, {
@@ -243,11 +251,14 @@ originalFileExtension: originalFileExtension
     type: "image/avif",
-    sizes: sizes
+    sizes: sizes,
+    media: media
   }), useWebP && React.createElement("source", {
     srcSet: srcSetWebp,
     type: "image/webp",
-    sizes: sizes
+    sizes: sizes,
+    media: media
   }), srcSet.length > 0 && React.createElement("source", {
     srcSet: srcSet,
     type: "image/" + originalFileExtension,
-    sizes: sizes
+    sizes: sizes,
+    media: media
   }), React.createElement("img", Object.assign({}, commonProps, rest))), captionString && React.createElement("figcaption", {
@@ -254,0 +265,0 @@ dangerouslySetInnerHTML: {

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(", "),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}}))};
+"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"],o=["src","url","sizes","variants","altText","alt","caption","className","media"];function c(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,m=h.url,v=h.sizes,d=h.variants,y=h.altText,b=h.alt,j=h.caption,w=h.className,x=h.media,S=u(h,o),E=(d||[]).filter((function(e){return!!e})),O="string"==typeof b?b:y,z=E.length>0,_=E[0];z&&(_=E.reduce((function(e,t){return!e.width||t.width>e.width?t:e}),E[0]));var W=E.filter((function(e){return e.url&&!e.url.endsWith(".webp")&&!e.url.endsWith(".avif")})),T=E.filter((function(e){return e.url&&e.url.endsWith(".webp")})),N=E.filter((function(e){return e.url&&e.url.endsWith(".avif")})),P=W.map(c).join(", "),k=T.map(c).join(", "),M=N.map(c).join(", "),R="jpeg";if(W.length>0){var $,A=W[0].url.match(r(/\.((?:(?!\.)[\s\S])+)$/,{name:1}));"jpg"===(R=(null==A||null==($=A.groups)?void 0:$.name)||"jpeg")&&(R="jpeg")}var I={src:g||m||(z?W[0].url:void 0),alt:O,caption:j,width:null==(i=_)?void 0:i.width,height:null==(l=_)?void 0:l.height},q=k.length>0,F=M.length>0;if(q&&F){var H=T[0],L=N[0];H.size&&L.size&&(F=H.size>L.size)}if(f)return f(n({srcSet:P,srcSetWebp:k,srcSetAvif:M,useAvif:F,useWebP:q,className:w,sizes:v,media:x},I,S,{originalFileExtension:R}));var B=(null==j||null==(s=j.html)?void 0:s[0])||(null==j||null==(p=j.plainText)?void 0:p[0])||"";return t.createElement("figure",{className:w},t.createElement("picture",null,F&&t.createElement("source",{srcSet:M,type:"image/avif",sizes:v,media:x}),q&&t.createElement("source",{srcSet:k,type:"image/webp",sizes:v,media:x}),P.length>0&&t.createElement("source",{srcSet:P,type:"image/"+R,sizes:v,media:x}),t.createElement("img",Object.assign({},I,S))),B&&t.createElement("figcaption",{dangerouslySetInnerHTML:{__html:B}}))};
 //# sourceMappingURL=react-image.cjs.production.min.js.map

dist/react-image.esm.js

@@ -124,3 +124,3 @@ import React from 'react';
 var _excluded = ["children"],
-    _excluded2 = ["src", "url", "sizes", "variants", "altText", "alt", "caption", "className"];
+    _excluded2 = ["src", "url", "sizes", "variants", "altText", "alt", "caption", "className", "media"];
 
@@ -145,2 +145,3 @@ function getVariantSrc(variant) {
       className = restOfAllProps.className,
+      media = restOfAllProps.media,
       rest = _objectWithoutPropertiesLoose(restOfAllProps, _excluded2);
@@ -183,2 +184,3 @@
   if (std.length > 0) {
+    var _match$groups;
 
@@ -188,2 +190,7 @@ var match = std[0].url.match( /*#__PURE__*/_wrapRegExp(/\.((?:(?!\.)[\s\S])+)$/, {
     }));
+    originalFileExtension = (match == null ? void 0 : (_match$groups = match.groups) == null ? void 0 : _match$groups.name) || 'jpeg'; // Provide correct mime type for jpg
+
+    if (originalFileExtension === 'jpg') {
+      originalFileExtension = 'jpeg';
+    }
   }
@@ -224,3 +231,4 @@
       className: className,
-      sizes: sizes
+      sizes: sizes,
+      media: media
     }, commonProps, rest, {
@@ -237,11 +245,14 @@ originalFileExtension: originalFileExtension
     type: "image/avif",
-    sizes: sizes
+    sizes: sizes,
+    media: media
   }), useWebP && React.createElement("source", {
     srcSet: srcSetWebp,
     type: "image/webp",
-    sizes: sizes
+    sizes: sizes,
+    media: media
   }), srcSet.length > 0 && React.createElement("source", {
     srcSet: srcSet,
     type: "image/" + originalFileExtension,
-    sizes: sizes
+    sizes: sizes,
+    media: media
   }), React.createElement("img", Object.assign({}, commonProps, rest))), captionString && React.createElement("figcaption", {
@@ -248,0 +259,0 @@ dangerouslySetInnerHTML: {

package.json

 {
   "name": "@crystallize/react-image",
   "description": "Modern and responsive images based on the source variations from Crystallize",
-  "version": "7.2.0",
+  "version": "7.2.1",
   "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

54313

increased by5.31%

Lines of code

624

increased by6.12%

No dependency changes