@quintype/components 3.0.0 → 3.0.1-img-lazy.0

package/dist/cjs/index.js

@@ -1926,7 +1926,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");
   }
 
@@ -1934,9 +1934,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);
 }
 
@@ -1947,17 +1947,20 @@ function GumletImage(props) {
       imageCDN = props.imageCDN,
       imgParams = props.imgParams,
       reactTag = props.reactTag,
-      className = props.className;
+      className = props.className,
+      _props$imgLazy = props.imgLazy,
+      imgLazy = _props$imgLazy === void 0 ? "true" : _props$imgLazy;
   var image = new quintypeJs.FocusedImage(slug, metadata);
   var imageProps = {
     src: emptyWebGif__default["default"],
     "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams),
-    key: hashString(slug)
+    key: hashString(slug),
+    "data-gmlazy": imgLazy
   };
   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$3(_objectSpread$3({}, 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);
 }
 
@@ -38,17 +38,20 @@ export function GumletImage(props) {
       imageCDN = props.imageCDN,
       imgParams = props.imgParams,
       reactTag = props.reactTag,
-      className = props.className;
+      className = props.className,
+      _props$imgLazy = props.imgLazy,
+      imgLazy = _props$imgLazy === void 0 ? "true" : _props$imgLazy;
   var image = new FocusedImage(slug, metadata);
   var imageProps = {
     src: emptyWebGif,
     "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams),
-    key: hashString(slug)
+    key: hashString(slug),
+    "data-gmlazy": imgLazy
   };
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/components",
-  "version": "3.0.0",
+  "version": "3.0.1-img-lazy.0",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -102,6 +102,7 @@
     "clean:dist": "rimraf dist",
     "docs": "rimraf docs && jsdoc -c jsdoc.json",
     "prepack": "npm run build",
+    "prepublishOnly": "./bin-dev-scripts/standard-version-release.sh",
     "sync-files-to": "npx onchange --verbose --wait --await-write-finish 'src/**/*' -- ./bin-dev-scripts/sync-to.sh",
     "test": "jest --config jest.config.js",
     "test:cover": "jest --coverage --watchAll; open coverage/index.html"