@quintype/components 3.5.2-csv-table.0 → 3.5.3-fix-image-sizes.0

package/dist/cjs/index.js

@@ -1856,11 +1856,26 @@ function responsiveProps(props) {
     }, props.imgParams));
   }
 
+  function generateSizes() {
+    // return "(max-width: 600px) 100vw, (max-width: 900px) 50vw, (max-width: 1240px) 33vw, 11.13vw";
+    var sizes = props.widths.map(function (size) {
+      if (size === 250) {
+        return "(max-width: 600px) 250px";
+      } else if (size === 480) {
+        return "(max-width: 900px) 480px";
+      }
+
+      return "640px";
+    });
+    return sizes.join(",");
+  }
+
   return {
     src: generatePath(props.defaultWidth),
     srcSet: props.widths ? props.widths.map(function (size) {
       return "".concat(generatePath(size), " ").concat(size, "w");
     }).join(",") : undefined,
+    sizes: generateSizes(),
     key: hashString(props.slug)
   };
 }
@@ -1910,7 +1925,7 @@ var ThumborImage = /*#__PURE__*/function (_React$Component) {
         ref: function ref(dom) {
           return _this2.dom = dom;
         },
-        className: this.props.className ? "qt-image ".concat(this.props.className) : 'qt-image'
+        className: this.props.className ? "qt-image ".concat(this.props.className) : "qt-image"
       }));
     }
   }, {
@@ -1950,7 +1965,7 @@ function loadGumlet() {
     return;
   }
 
-  if (process.env.NODE_ENV == 'development') {
+  if (process.env.NODE_ENV == "development") {
     console.warn("Loading Gumlet Dynamically! This is really bad for page speed. Please see https://developers.quintype.com/malibu/tutorial/gumlet-integration");
   }
 
@@ -1958,9 +1973,9 @@ function loadGumlet() {
   window.GUMLET_CONFIG = window.GUMLET_CONFIG || {
     hosts: []
   };
-  var script = document.createElement('script');
-  script.type = 'text/javascript';
-  script.src = 'https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js';
+  var script = document.createElement("script");
+  script.type = "text/javascript";
+  script.src = "https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js";
   document.body.appendChild(script);
 }
 
@@ -1973,15 +1988,40 @@ function GumletImage(props) {
       reactTag = props.reactTag,
       className = props.className;
   var image = new quintypeJs.FocusedImage(slug, metadata);
+
+  function generatePath(size) {
+    return "//" + imageCDN + "/" + image.path(aspectRatio, Object.assign({
+      w: size
+    }, imgParams));
+  }
+
+  function generateSizes() {
+    // return "(max-width: 600px) 100vw, (max-width: 900px) 50vw, (max-width: 1240px) 33vw, 11.13vw";
+    var sizes = props.widths.map(function (size) {
+      if (size === 250) {
+        return "(max-width: 600px) 250px";
+      } else if (size === 480) {
+        return "(max-width: 900px) 480px";
+      }
+
+      return "640px";
+    });
+    return sizes.join(",");
+  }
+
   var imageProps = {
     src: emptyWebGif__default["default"],
     "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams),
+    srcSet: props.widths ? props.widths.map(function (size) {
+      return "".concat(generatePath(size), " ").concat(size, "w");
+    }).join(",") : undefined,
+    sizes: generateSizes(),
     key: hashString(slug)
   };
   var Tag = reactTag || "img";
   React.useEffect(loadGumlet);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Tag, _extends__default["default"]({}, imageProps, omit__default["default"](props, USED_PARAMS), {
-    className: className ? "qt-image ".concat(className) : 'qt-image'
+    className: className ? "qt-image ".concat(className) : "qt-image"
   })), /*#__PURE__*/React__default["default"].createElement("noscript", null, /*#__PURE__*/React__default["default"].createElement("img", {
     src: "https://".concat(imageCDN, "/").concat(image.path(aspectRatio, _objectSpread$4(_objectSpread$4({}, imgParams), {}, {
       w: 1200

package/dist/es/components/impl/gumlet-image.js

@@ -5,11 +5,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import React, { useEffect } from "react";
-import emptyWebGif from 'empty-web-gif';
+import omit from "@babel/runtime/helpers/objectWithoutProperties";
+import emptyWebGif from "empty-web-gif";
 import { FocusedImage } from "quintype-js";
+import React, { useEffect } from "react";
 import { hashString, USED_PARAMS } from "./image-utils";
-import omit from '@babel/runtime/helpers/objectWithoutProperties';
 var forceLoadingGumlet = false;
 
 function loadGumlet() {
@@ -17,7 +17,7 @@ function loadGumlet() {
     return;
   }
 
-  if (process.env.NODE_ENV == 'development') {
+  if (process.env.NODE_ENV == "development") {
     console.warn("Loading Gumlet Dynamically! This is really bad for page speed. Please see https://developers.quintype.com/malibu/tutorial/gumlet-integration");
   }
 
@@ -25,9 +25,9 @@ function loadGumlet() {
   window.GUMLET_CONFIG = window.GUMLET_CONFIG || {
     hosts: []
   };
-  var script = document.createElement('script');
-  script.type = 'text/javascript';
-  script.src = 'https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js';
+  var script = document.createElement("script");
+  script.type = "text/javascript";
+  script.src = "https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js";
   document.body.appendChild(script);
 }
 
@@ -40,15 +40,40 @@ export function GumletImage(props) {
       reactTag = props.reactTag,
       className = props.className;
   var image = new FocusedImage(slug, metadata);
+
+  function generatePath(size) {
+    return "//" + imageCDN + "/" + image.path(aspectRatio, Object.assign({
+      w: size
+    }, imgParams));
+  }
+
+  function generateSizes() {
+    // return "(max-width: 600px) 100vw, (max-width: 900px) 50vw, (max-width: 1240px) 33vw, 11.13vw";
+    var sizes = props.widths.map(function (size) {
+      if (size === 250) {
+        return "(max-width: 600px) 250px";
+      } else if (size === 480) {
+        return "(max-width: 900px) 480px";
+      }
+
+      return "640px";
+    });
+    return sizes.join(",");
+  }
+
   var imageProps = {
     src: emptyWebGif,
     "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams),
+    srcSet: props.widths ? props.widths.map(function (size) {
+      return "".concat(generatePath(size), " ").concat(size, "w");
+    }).join(",") : undefined,
+    sizes: generateSizes(),
     key: hashString(slug)
   };
   var Tag = reactTag || "img";
   useEffect(loadGumlet);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, _extends({}, imageProps, omit(props, USED_PARAMS), {
-    className: className ? "qt-image ".concat(className) : 'qt-image'
+    className: className ? "qt-image ".concat(className) : "qt-image"
   })), /*#__PURE__*/React.createElement("noscript", null, /*#__PURE__*/React.createElement("img", {
     src: "https://".concat(imageCDN, "/").concat(image.path(aspectRatio, _objectSpread(_objectSpread({}, imgParams), {}, {
       w: 1200

package/dist/es/components/impl/thumbor-image.js

@@ -8,12 +8,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from "react";
-import emptyWebGif from 'empty-web-gif';
-import omit from '@babel/runtime/helpers/objectWithoutProperties';
-import { func } from 'prop-types';
+import omit from "@babel/runtime/helpers/objectWithoutProperties";
+import emptyWebGif from "empty-web-gif";
+import { func } from "prop-types";
 import { FocusedImage } from "quintype-js";
-import { USED_PARAMS, hashString } from './image-utils';
+import React from "react";
+import { USED_PARAMS, hashString } from "./image-utils";
 export function responsiveProps(props) {
   var image = new FocusedImage(props.slug, props.metadata);
 
@@ -23,11 +23,26 @@ export function responsiveProps(props) {
     }, props.imgParams));
   }
 
+  function generateSizes() {
+    // return "(max-width: 600px) 100vw, (max-width: 900px) 50vw, (max-width: 1240px) 33vw, 11.13vw";
+    var sizes = props.widths.map(function (size) {
+      if (size === 250) {
+        return "(max-width: 600px) 250px";
+      } else if (size === 480) {
+        return "(max-width: 900px) 480px";
+      }
+
+      return "640px";
+    });
+    return sizes.join(",");
+  }
+
   return {
     src: generatePath(props.defaultWidth),
     srcSet: props.widths ? props.widths.map(function (size) {
       return "".concat(generatePath(size), " ").concat(size, "w");
     }).join(",") : undefined,
+    sizes: generateSizes(),
     key: hashString(props.slug)
   };
 }
@@ -77,7 +92,7 @@ export var ThumborImage = /*#__PURE__*/function (_React$Component) {
         ref: function ref(dom) {
           return _this2.dom = dom;
         },
-        className: this.props.className ? "qt-image ".concat(this.props.className) : 'qt-image'
+        className: this.props.className ? "qt-image ".concat(this.props.className) : "qt-image"
       }));
     }
   }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/components",
-  "version": "3.5.2-csv-table.0",
+  "version": "3.5.3-fix-image-sizes.0",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",