@quintype/components 3.6.1-image-sizes.1 → 3.6.4-image-sizes.0

package/dist/cjs/index.js

@@ -495,9 +495,9 @@ function withError(clazz) {
   }(React__default["default"].Component);
 }
 
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 /**
  * This is a function which can be used to manage ad units in a single place. A component must be created, and used with the `adtype` parameter. These ads are lazy-loaded and single-request mode is disabled by default which can be overwritten as follows.
  *
@@ -582,7 +582,7 @@ function DfpAdBase(_ref2) {
       deferAdsBy = _ref2.deferAdsBy;
   var adConfig = config[adtype] || {};
 
-  var adProps = _objectSpread$7({
+  var adProps = _objectSpread$8({
     slotId: slotId
   }, adConfig);
 
@@ -915,9 +915,9 @@ function withFocusObserver(Component) {
 
 var InfiniteScroll = /*#__PURE__*/withFocusObserver(InfiniteScrollBase);
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function removeDuplicateStories(existingStories, newStories) {
   var keyFn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (story) {
     return story.id;
@@ -989,13 +989,13 @@ var computeAccess = function computeAccess(previousState, currentState) {
     var storyAccess = previousState[currentStoryId];
 
     if (storyAccess.granted !== currentAccess[currentStoryId].granted || storyAccess.grantReason !== currentAccess[currentStoryId].grantReason) {
-      return _objectSpread$6(_objectSpread$6({}, previousState), currentAccess);
+      return _objectSpread$7(_objectSpread$7({}, previousState), currentAccess);
     }
 
     return previousState;
   }
 
-  return _objectSpread$6(_objectSpread$6({}, previousState), currentAccess);
+  return _objectSpread$7(_objectSpread$7({}, previousState), currentAccess);
 };
 function initiateNewObserver(targetElement, intersectionCallBack) {
   var intersectionObserver = new IntersectionObserver(intersectionCallBack, {
@@ -1371,9 +1371,9 @@ LazyLoadImages.childContextTypes = {
   lazyLoadUnobserveImage: propTypes.func
 };
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function StoryNotImplemented() {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     "data-comment": "Story Template Not Implemented"
@@ -1389,7 +1389,7 @@ function renderCollectionItem(collectionItem, index, collectionTemplates, storyT
 
   switch (collectionItem.type) {
     case "collection":
-      return /*#__PURE__*/React__default["default"].createElement(collectionTemplates(getAssociatedTemplate(collectionItem), index), _objectSpread$5({
+      return /*#__PURE__*/React__default["default"].createElement(collectionTemplates(getAssociatedTemplate(collectionItem), index), _objectSpread$6({
         key: "".concat(index, "-").concat(collectionItem.id),
         index: index,
         collection: collectionItem,
@@ -1397,7 +1397,7 @@ function renderCollectionItem(collectionItem, index, collectionTemplates, storyT
       }, otherProps));
 
     case "story":
-      return /*#__PURE__*/React__default["default"].createElement(storyTemplates(index), _objectSpread$5({
+      return /*#__PURE__*/React__default["default"].createElement(storyTemplates(index), _objectSpread$6({
         key: "".concat(index, "-").concat(collectionItem.id),
         index: index,
         story: collectionItem.story,
@@ -1844,9 +1844,9 @@ function hashString(string) {
   return hash;
 }
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var forceLoadingGumlet = false;
 
 function loadGumlet() {
@@ -1876,21 +1876,26 @@ function GumletImage(props) {
       imgParams = props.imgParams,
       reactTag = props.reactTag,
       className = props.className,
+      priority = props.priority,
       sizes = props.sizes;
   var image = new quintypeJs.FocusedImage(slug, metadata);
-  console.log("aa--sizes", sizes);
   var imageProps = {
     src: emptyWebGif__default["default"],
     "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams),
     key: hashString(slug),
     sizes: sizes
   };
+
+  if (priority) {
+    imageProps.fetchPriority = "high";
+  }
+
   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"
   })), /*#__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), {}, {
+    src: "https://".concat(imageCDN, "/").concat(image.path(aspectRatio, _objectSpread$5(_objectSpread$5({}, imgParams), {}, {
       w: 1200
     }))),
     alt: props.alt || ""
@@ -1900,8 +1905,14 @@ function GumletImage(props) {
 function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
 
 function _isNativeReflectConstruct$g() { 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; } }
+
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function responsiveProps(props) {
   var image = new quintypeJs.FocusedImage(props.slug, props.metadata);
+  var _props$priority = props.priority,
+      priority = _props$priority === void 0 ? false : _props$priority;
 
   function generatePath(size) {
     return "//" + props.imageCDN + "/" + image.path(props.aspectRatio, Object.assign({
@@ -1909,8 +1920,7 @@ function responsiveProps(props) {
     }, props.imgParams));
   }
 
-  console.log("aa--sizes", props === null || props === void 0 ? void 0 : props.sizes);
-  return {
+  var imageProps = {
     src: generatePath(props.defaultWidth),
     srcSet: props.widths ? props.widths.map(function (size) {
       return "".concat(generatePath(size), " ").concat(size, "w");
@@ -1918,6 +1928,14 @@ function responsiveProps(props) {
     key: hashString(props.slug),
     sizes: props === null || props === void 0 ? void 0 : props.sizes
   };
+
+  if (priority) {
+    return _objectSpread$4(_objectSpread$4({}, imageProps), {}, {
+      fetchPriority: "high"
+    });
+  }
+
+  return _objectSpread$4({}, imageProps);
 }
 var ThumborImage = /*#__PURE__*/function (_React$Component) {
   _inherits__default["default"](ThumborImage, _React$Component);
@@ -2007,8 +2025,6 @@ function ResponsiveImageBase(props) {
     global.console && global.console.warn("Image Found without an alt attribute: ".concat(props.slug));
   }
 
-  console.log("aa--imageCdnFormat", props.imageCDNFormat);
-
   if (props.imageCDNFormat === "gumlet") {
     return /*#__PURE__*/React__default["default"].createElement(GumletImage, props);
   }

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

@@ -5,8 +5,8 @@ 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 omit from "@babel/runtime/helpers/objectWithoutProperties";
-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";
@@ -39,15 +39,20 @@ export function GumletImage(props) {
       imgParams = props.imgParams,
       reactTag = props.reactTag,
       className = props.className,
+      priority = props.priority,
       sizes = props.sizes;
   var image = new FocusedImage(slug, metadata);
-  console.log("aa--sizes", sizes);
   var imageProps = {
     src: emptyWebGif,
     "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams),
     key: hashString(slug),
     sizes: sizes
   };
+
+  if (priority) {
+    imageProps.fetchPriority = "high";
+  }
+
   var Tag = reactTag || "img";
   useEffect(loadGumlet);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, _extends({}, imageProps, omit(props, USED_PARAMS), {

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

@@ -3,11 +3,16 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 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; } }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+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 omit from "@babel/runtime/helpers/objectWithoutProperties";
 import emptyWebGif from "empty-web-gif";
 import { func } from "prop-types";
@@ -16,6 +21,8 @@ import React from "react";
 import { USED_PARAMS, hashString } from "./image-utils";
 export function responsiveProps(props) {
   var image = new FocusedImage(props.slug, props.metadata);
+  var _props$priority = props.priority,
+      priority = _props$priority === void 0 ? false : _props$priority;
 
   function generatePath(size) {
     return "//" + props.imageCDN + "/" + image.path(props.aspectRatio, Object.assign({
@@ -23,8 +30,7 @@ export function responsiveProps(props) {
     }, props.imgParams));
   }
 
-  console.log("aa--sizes", props === null || props === void 0 ? void 0 : props.sizes);
-  return {
+  var imageProps = {
     src: generatePath(props.defaultWidth),
     srcSet: props.widths ? props.widths.map(function (size) {
       return "".concat(generatePath(size), " ").concat(size, "w");
@@ -32,6 +38,14 @@ export function responsiveProps(props) {
     key: hashString(props.slug),
     sizes: props === null || props === void 0 ? void 0 : props.sizes
   };
+
+  if (priority) {
+    return _objectSpread(_objectSpread({}, imageProps), {}, {
+      fetchPriority: "high"
+    });
+  }
+
+  return _objectSpread({}, imageProps);
 }
 export var ThumborImage = /*#__PURE__*/function (_React$Component) {
   _inherits(ThumborImage, _React$Component);

package/dist/es/components/responsive-image.js

@@ -16,8 +16,6 @@ function ResponsiveImageBase(props) {
     global.console && global.console.warn("Image Found without an alt attribute: ".concat(props.slug));
   }
 
-  console.log("aa--imageCdnFormat", props.imageCDNFormat);
-
   if (props.imageCDNFormat === "gumlet") {
     return /*#__PURE__*/React.createElement(GumletImage, props);
   }

package/package.json

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