@quintype/components 3.0.0 → 3.1.0-gumlet-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,7 +1947,8 @@ function GumletImage(props) {
       imageCDN = props.imageCDN,
       imgParams = props.imgParams,
       reactTag = props.reactTag,
-      className = props.className;
+      className = props.className,
+      disableLazy = props.disableLazy;
   var image = new quintypeJs.FocusedImage(slug, metadata);
   var imageProps = {
     src: emptyWebGif__default["default"],
@@ -1955,9 +1956,16 @@ function GumletImage(props) {
     key: hashString(slug)
   };
   var Tag = reactTag || "img";
+
+  if (disableLazy) {
+    imageProps = _objectSpread$3(_objectSpread$3({}, imageProps), {}, {
+      "data-gmlazy": "false"
+    });
+  }
+
   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

@@ -1,15 +1,15 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 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 React, { useEffect } from "react";
-import emptyWebGif from 'empty-web-gif';
+import emptyWebGif from "empty-web-gif";
 import { FocusedImage } from "quintype-js";
 import { hashString, USED_PARAMS } from "./image-utils";
-import omit from '@babel/runtime/helpers/objectWithoutProperties';
+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,7 +38,8 @@ export function GumletImage(props) {
       imageCDN = props.imageCDN,
       imgParams = props.imgParams,
       reactTag = props.reactTag,
-      className = props.className;
+      className = props.className,
+      disableLazy = props.disableLazy;
   var image = new FocusedImage(slug, metadata);
   var imageProps = {
     src: emptyWebGif,
@@ -46,9 +47,16 @@ export function GumletImage(props) {
     key: hashString(slug)
   };
   var Tag = reactTag || "img";
+
+  if (disableLazy) {
+    imageProps = _objectSpread(_objectSpread({}, imageProps), {}, {
+      "data-gmlazy": "false"
+    });
+  }
+
   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.1.0-gumlet-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"