@crystallize/react-image - npm Package Compare versions

Comparing version 7.2.1 to 7.3.0

dist/index.d.ts

@@ -24,4 +24,6 @@ import { FC, HTMLAttributes, FunctionComponent } from 'react';
     loading?: 'eager' | 'lazy';
+    _availableSizes: number[];
+    _availableFormats: string[];
 }
 export declare const Image: FC<Props>;
 export {};

dist/react-image.cjs.development.js

@@ -130,3 +130,3 @@ 'use strict';
 var _excluded = ["children"],
-    _excluded2 = ["src", "url", "sizes", "variants", "altText", "alt", "caption", "className", "media"];
+    _excluded2 = ["src", "url", "sizes", "variants", "altText", "alt", "caption", "className", "media", "_availableSizes", "_availableFormats"];
 
@@ -152,2 +152,4 @@ function getVariantSrc(variant) {
       media = restOfAllProps.media,
+      _availableSizes = restOfAllProps._availableSizes,
+      _availableFormats = restOfAllProps._availableFormats,
       rest = _objectWithoutPropertiesLoose(restOfAllProps, _excluded2);
@@ -158,3 +160,24 @@
   });
-  var alt = typeof altPassed === 'string' ? altPassed : altText;
+  var alt = typeof altPassed === 'string' ? altPassed : altText; // Naive rendering POC
+
+  if (url && _availableSizes && _availableFormats) {
+    vars = [];
+    var urlWithoutFileExtension = url.replace(/\.[^/]+$/, '');
+    var match = urlWithoutFileExtension.match(/(.+)(\/)([^/]+)$/);
+
+    if (match) {
+      var base = match[1],
+          filename = match[3];
+
+      _availableSizes.forEach(function (size) {
+        _availableFormats.forEach(function (format) {
+          vars.push({
+            url: base + "/@" + size + "/" + filename + "." + format,
+            width: size
+          });
+        });
+      });
+    }
+  }
+
   var hasVariants = vars.length > 0; // Get the biggest image from the variants
@@ -193,7 +216,8 @@
 
-    var match = std[0].url.match( /*#__PURE__*/_wrapRegExp(/\.((?:(?!\.)[\s\S])+)$/, {
+    var _match = std[0].url.match( /*#__PURE__*/_wrapRegExp(/\.((?:(?!\.)[\s\S])+)$/, {
       name: 1
     }));
-    originalFileExtension = (match == null ? void 0 : (_match$groups = match.groups) == null ? void 0 : _match$groups.name) || 'jpeg'; // Provide correct mime type for jpg
 
+    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') {
@@ -200,0 +224,0 @@ originalFileExtension = 'jpeg';

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"],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}}))};
+"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 l=new RegExp(e,r);return t.set(l,i||t.get(e)),a(l,n.prototype)}function l(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=l(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 a=this;return e[Symbol.replace].call(this,r,(function(){var e=arguments;return"object"!=typeof e[e.length-1]&&(e=[].slice.call(e)).push(l(e,a)),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&&a(e,t)}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function l(e,t){if(null==e)return{};var r,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)t.indexOf(r=a[n])>=0||(i[r]=e[r]);return i}var u=["children"],o=["src","url","sizes","variants","altText","alt","caption","className","media","_availableSizes","_availableFormats"];function c(e){return e.url+" "+e.width+"w"}exports.Image=function(e){var i,a,s,p,f=e.children,h=l(e,u),v=h.src,m=h.url,g=h.sizes,d=h.variants,y=h.altText,b=h.alt,j=h.caption,w=h.className,S=h.media,E=h._availableSizes,x=h._availableFormats,z=l(h,o),O=(d||[]).filter((function(e){return!!e})),_="string"==typeof b?b:y;if(m&&E&&x){O=[];var W=m.replace(/\.[^/]+$/,"").match(/(.+)(\/)([^/]+)$/);if(W){var T=W[1],$=W[3];E.forEach((function(e){x.forEach((function(t){O.push({url:T+"/@"+e+"/"+$+"."+t,width:e})}))}))}}var N=O.length>0,P=O[0];N&&(P=O.reduce((function(e,t){return!e.width||t.width>e.width?t:e}),O[0]));var k=O.filter((function(e){return e.url&&!e.url.endsWith(".webp")&&!e.url.endsWith(".avif")})),F=O.filter((function(e){return e.url&&e.url.endsWith(".webp")})),M=O.filter((function(e){return e.url&&e.url.endsWith(".avif")})),R=k.map(c).join(", "),A=F.map(c).join(", "),I=M.map(c).join(", "),q="jpeg";if(k.length>0){var H,L=k[0].url.match(r(/\.((?:(?!\.)[\s\S])+)$/,{name:1}));"jpg"===(q=(null==L||null==(H=L.groups)?void 0:H.name)||"jpeg")&&(q="jpeg")}var B={src:v||m||(N?k[0].url:void 0),alt:_,caption:j,width:null==(i=P)?void 0:i.width,height:null==(a=P)?void 0:a.height},C=A.length>0,D=I.length>0;if(C&&D){var G=F[0],J=M[0];G.size&&J.size&&(D=G.size>J.size)}if(f)return f(n({srcSet:R,srcSetWebp:A,srcSetAvif:I,useAvif:D,useWebP:C,className:w,sizes:g,media:S},B,z,{originalFileExtension:q}));var K=(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,D&&t.createElement("source",{srcSet:I,type:"image/avif",sizes:g,media:S}),C&&t.createElement("source",{srcSet:A,type:"image/webp",sizes:g,media:S}),R.length>0&&t.createElement("source",{srcSet:R,type:"image/"+q,sizes:g,media:S}),t.createElement("img",Object.assign({},B,z))),K&&t.createElement("figcaption",{dangerouslySetInnerHTML:{__html:K}}))};
 //# 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", "media"];
+    _excluded2 = ["src", "url", "sizes", "variants", "altText", "alt", "caption", "className", "media", "_availableSizes", "_availableFormats"];
 
@@ -146,2 +146,4 @@ function getVariantSrc(variant) {
       media = restOfAllProps.media,
+      _availableSizes = restOfAllProps._availableSizes,
+      _availableFormats = restOfAllProps._availableFormats,
       rest = _objectWithoutPropertiesLoose(restOfAllProps, _excluded2);
@@ -152,3 +154,24 @@
   });
-  var alt = typeof altPassed === 'string' ? altPassed : altText;
+  var alt = typeof altPassed === 'string' ? altPassed : altText; // Naive rendering POC
+
+  if (url && _availableSizes && _availableFormats) {
+    vars = [];
+    var urlWithoutFileExtension = url.replace(/\.[^/]+$/, '');
+    var match = urlWithoutFileExtension.match(/(.+)(\/)([^/]+)$/);
+
+    if (match) {
+      var base = match[1],
+          filename = match[3];
+
+      _availableSizes.forEach(function (size) {
+        _availableFormats.forEach(function (format) {
+          vars.push({
+            url: base + "/@" + size + "/" + filename + "." + format,
+            width: size
+          });
+        });
+      });
+    }
+  }
+
   var hasVariants = vars.length > 0; // Get the biggest image from the variants
@@ -187,7 +210,8 @@
 
-    var match = std[0].url.match( /*#__PURE__*/_wrapRegExp(/\.((?:(?!\.)[\s\S])+)$/, {
+    var _match = std[0].url.match( /*#__PURE__*/_wrapRegExp(/\.((?:(?!\.)[\s\S])+)$/, {
       name: 1
     }));
-    originalFileExtension = (match == null ? void 0 : (_match$groups = match.groups) == null ? void 0 : _match$groups.name) || 'jpeg'; // Provide correct mime type for jpg
 
+    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') {
@@ -194,0 +218,0 @@ originalFileExtension = 'jpeg';

package.json

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

60607

increased by11.59%

Lines of code

686

increased by9.94%

No dependency changes