Add srcset attribute to img tag

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/components",
-  "version": "2.31.3",
+  "version": "2.31.4-enable-srcset.5",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

src/components/__snapshots__/responsive-image.spec.js.snap

@@ -15,6 +15,9 @@ exports[`ResponsiveImage Checks for a gumlet image 1`] = `
   class="qt-image"
   data-src="https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427"
   src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
+  srcset="https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427&w=320 320w,
+    https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427&w=640 640w,
+    https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427&w=1024 1024w,"
 />
 `;
 

src/components/__snapshots__/responsive-source.spec.js.snap

@@ -5,5 +5,8 @@ exports[`ResponsiveSource Checks for a gumlet image 1`] = `
   alt="Alt Text"
   class="qt-image"
   data-src="https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427"
+  srcset="https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427&w=320 320w,
+    https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427&w=640 640w,
+    https://images.assettype.com/somepublisher%2Fimage.png?rect=0%2C0%2C759%2C427&w=1024 1024w,"
 />
 `;

src/components/impl/gumlet-image.js

@@ -1,24 +1,28 @@
-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 { object, string } from "prop-types";
 import { FocusedImage } from "quintype-js";
+import React, { useEffect } from "react";
 import { hashString, USED_PARAMS } from "./image-utils";
-import omit from '@babel/runtime/helpers/objectWithoutProperties';
 
 let forceLoadingGumlet = false;
 function loadGumlet() {
-  if(window.GUMLET_CONFIG || window.gumlet || forceLoadingGumlet === true) {
+  if (window.GUMLET_CONFIG || window.gumlet || forceLoadingGumlet === true) {
     return;
   }
-  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");
+  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"
+    );
   }
   forceLoadingGumlet = true;
   window.GUMLET_CONFIG = window.GUMLET_CONFIG || {
     hosts: []
-  }
-  const script = document.createElement('script');
-  script.type = 'text/javascript';
-  script.src = 'https://cdn.gumlet.com/gumlet.js/2.0/gumlet.min.js';
+  };
+  const 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);
 }
 
@@ -29,17 +33,33 @@ export function GumletImage(props) {
   const imageProps = {
     src: emptyWebGif,
     "data-src": "https://" + imageCDN + "/" + image.path(aspectRatio, imgParams),
+    srcSet: `https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=320 320w,
+    https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=640 640w,
+    https://${imageCDN}/${image.path(aspectRatio, imgParams)}&w=1024 1024w,`,
     key: hashString(slug)
   };
 
   const Tag = reactTag || "img";
 
   useEffect(loadGumlet);
 
-  return <React.Fragment>
-    <Tag {...imageProps} {...omit(props, USED_PARAMS)} className={className ? `qt-image ${className}` : 'qt-image'} />
-    <noscript>
-      <img src={`https://${imageCDN}/${image.path(aspectRatio, {...imgParams, w: 1200})}`} alt={props.alt || ""} />
-    </noscript>
-  </React.Fragment>
+  return (
+    <React.Fragment>
+      <Tag {...imageProps} {...omit(props, USED_PARAMS)} className={className ? `qt-image ${className}` : "qt-image"} />
+      <noscript>
+        <img src={`https://${imageCDN}/${image.path(aspectRatio, { ...imgParams, w: 1200 })}`} alt={props.alt || ""} />
+      </noscript>
+    </React.Fragment>
+  );
 }
+
+GumletImage.propTypes = {
+  slug: string,
+  metadata: object,
+  aspectRatio: string,
+  imageCDN: string,
+  imgParams: object,
+  reactTag: string,
+  className: string,
+  alt: string
+};