@hashicorp/react-image - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/index.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
@@ -65,4 +63,8 @@
 
+var fragment = "fragment imageFields on FileField {\n  url\n  alt\n  format\n}\n";
+
 function Image(_ref) {
-  var src = _ref.src,
+  var url = _ref.url,
+      alt = _ref.alt,
+      format = _ref.format,
       _ref$steps = _ref.steps,
@@ -72,54 +74,54 @@ steps = _ref$steps === void 0 ? [250, 500, 750, 1000, 1500, 2000, 2500] : _ref$steps,
       sizes = _ref$sizes === void 0 ? '100vw' : _ref$sizes,
-      _ref$svg = _ref.svg,
-      svg = _ref$svg === void 0 ? false : _ref$svg,
-      classes = _ref.classes,
       aspectRatio = _ref.aspectRatio,
-      _ref$params = _ref.params,
-      params = _ref$params === void 0 ? {} : _ref$params,
-      alt = _ref.alt,
-      props = _objectWithoutProperties(_ref, ["src", "steps", "sizes", "svg", "classes", "aspectRatio", "params", "alt"]);
+      _ref$imgixOptions = _ref.imgixOptions,
+      imgixOptions = _ref$imgixOptions === void 0 ? {} : _ref$imgixOptions,
+      props = _objectWithoutProperties(_ref, ["url", "alt", "format", "steps", "sizes", "aspectRatio", "imgixOptions"]);
 
-  // set default params, merge user preferences with priority
+  // scrape format from file extension if not provided
+  if (!format) format = url.match(/\.(\w+)$/)[1]; // set default imgix options, merge user preferences with priority
+
   var opts = assign({
-    fm: src.match(/\.(\w+)$/)[1],
+    fm: format,
     fit: aspectRatio ? 'crop' : 'max',
     q: 80
-  }, params); // handle aspect ratios & steps passed as a string
+  }, imgixOptions); // if it's an SVG, we don't need the picture element, so return
 
-  aspectRatio = typeof aspectRatio === 'string' ? aspectRatio.split(',').map(Number) : aspectRatio;
-  steps = typeof steps === 'string' ? steps.split(',').map(Number) : steps;
+  if (format === 'svg') return React.createElement("img", _extends({
+    "data-testid": "image-root",
+    src: url,
+    alt: alt
+  }, props)); // otherwise, we return a picture element with multiple sizes and a webp
+  // optimized version for performance
 
-  if (svg && svg !== 'false') {
-    // if it's an SVG, we don't need the picture element, so return
-    return React.createElement("img", _extends({
-      className: classes,
-      src: src,
-      alt: alt
-    }, props));
-  } else {
-    // otherwise, we return a picture element with multiple sizes and a webp
-    // optimized version for performance
-    var srcDefault = formatSteps(steps, opts, aspectRatio, src);
-    var srcWebp = formatSteps(steps, assign({}, opts, {
-      fm: 'webp'
-    }), aspectRatio, src);
-    return React.createElement("picture", null, React.createElement("source", {
-      type: "image/webp",
-      srcSet: srcWebp,
-      sizes: sizes
-    }), React.createElement("img", _extends({
-      className: classes,
-      src: format(src, opts, aspectRatio && aspectRatio[2], aspectRatio),
-      srcSet: srcDefault,
-      sizes: sizes,
-      alt: alt
-    }, props)));
-  }
+  var srcSetDefault = formatSteps(steps, opts, aspectRatio, url);
+  var srcSetWebp = formatSteps(steps, assign({}, opts, {
+    fm: 'webp'
+  }), aspectRatio, url);
+  return React.createElement("picture", {
+    "data-testid": "image-root"
+  }, React.createElement("source", {
+    type: "image/webp",
+    srcSet: srcSetWebp,
+    sizes: sizes,
+    "data-testid": "webp-source"
+  }), React.createElement("img", _extends({
+    src: formatSrc(url, opts, aspectRatio && aspectRatio[2], aspectRatio),
+    srcSet: srcSetDefault,
+    sizes: sizes,
+    alt: alt,
+    "data-testid": "img"
+  }, props)));
 }
+
+Image.fragmentSpec = {
+  fragment: fragment
+};
+
 function formatSteps(steps, opts, aspectRatio, src) {
   return steps.map(function (s) {
-    return "".concat(format(src, opts, s, aspectRatio), " ").concat(s, "w");
+    return "".concat(formatSrc(src, opts, s, aspectRatio), " ").concat(s, "w");
   });
 }
-function format(src, opts, width, aspectRatio) {
+
+function formatSrc(src, opts, width, aspectRatio) {
   var opt = assign({}, opts);
@@ -131,4 +133,2 @@ if (width) opt.w = width;
 
-exports.default = Image;
-exports.format = format;
-exports.formatSteps = formatSteps;
+module.exports = Image;

package.json

 {
   "name": "@hashicorp/react-image",
   "description": "super optimized image element, pulls from dato and formats for 7 screen sizes in two formats. Skips optimization for SVGs.",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "author": "Hashicorp - Jeff Escalante",
@@ -21,3 +21,3 @@ "dependencies": {
   },
-  "gitHead": "032ccd478ca16b2fb5139c43a579c086ac4d7885"
+  "gitHead": "2820c17206084ce62de83b43a65d4f407418e519"
 }

readme.md

@@ -10,9 +10,9 @@ ### Image
 
-- `src` (str): url of the image [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src)
+- `url` (str): url of the image [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src)
+- `alt` (str): [optional] alt text for the image [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt)
+- `format` (str): [optional] format of the image, for example `svg`, `jpg`, `png`, etc.
 - `steps` (arr): [optional] array of screen sizes to optimize for
 - `sizes` (str): [optional] same as sizes on an img tag [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)
-- `classes` (str): [optional] any classes to be added to the image
-- `alt` (str): [optional] alt text for the image [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt)
-- `aspectRatio` (arr or str): [optional] automatically crops to aspect ratio. first two items in the array are the ratio (ex. `[16,9]`), and the third is the base width that images will be cropped to in IE, which doesn't support srcset (ex. `[16,9,500]`). if string is provided, brackets should be excluded (ex. `16,9,500`). string will be converted to array
-- `params` (obj): [optional] params passed directly to imgix
+- `aspectRatio` (arr): [optional] automatically crops to aspect ratio. first two items in the array are the ratio (ex. `[16,9]`), and the third is the base width that images will be cropped to in IE, which doesn't support srcset (ex. `[16,9,500]`).
+- `imgixOptions` (obj): [optional] params passed directly to imgix, [reference here](https://docs.imgix.com/apis/url)
 
@@ -19,0 +19,0 @@ ### Dependents:

No alert changes

Improved metrics

Number of package files

5

increased by25%

Worsened metrics

Total package byte prevSize

22829

decreased by-0.53%

Lines of code

106

decreased by-3.64%

No dependency changes