chore(release): 3.4.0

# [3.4.0](v3.2.2...v3.4.0) (2021-12-16) ### Features * dpr srcset options ([#307](#307)) ([380abf0](380abf0))
imgix · Dec 16, 2021 · 1897efa · 1897efa
1 parent 380abf0
commit 1897efa
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [v3.4.0](https://github.com/imgix/js-core/compare/v3.2.2...v3.4.0) (2021-12-16)
+
+### Features
+
+* dpr srcset options ([#307](https://github.com/imgix/js-core/issues/307)) ([380abf0](https://github.com/imgix/js-core/commit/380abf094ce617d6f23208e57b46169ca9949609))
+
 ## [v3.2.1](https://github.com/imgix/js-core/compare/v3.2.0...v3.2.1) (2021-06-28)
 
 * build: remove stale `.d.ts` file from `dist` ([#293](https://github.com/imgix/js-core/pull/293))

diff --git a/dist/imgix-js-core.umd.js b/dist/imgix-js-core.umd.js
diff --git a/dist/index.cjs.js b/dist/index.cjs.js
@@ -45,6 +45,22 @@ function _objectSpread2(target) {
   return target;
 }
 
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
@@ -158,7 +174,7 @@ function _nonIterableRest() {
 }
 
 // package version used in the ix-lib parameter
-var VERSION = '3.2.1'; // regex pattern used to determine if a domain is valid
+var VERSION = '3.4.0'; // regex pattern used to determine if a domain is valid
 
 var DOMAIN_REGEX = /^(?:[a-z\d\-_]{1,62}\.){0,125}(?:[a-z\d](?:\-(?=\-*[a-z\d])|[a-z]|\d){0,62}\.)[a-z\d]{1,63}$/i; // minimum generated srcset width
 
@@ -175,6 +191,7 @@ var DPR_QUALITIES = {
   4: 23,
   5: 20
 };
+var DEFAULT_DPR = [1, 2, 3, 4, 5];
 var DEFAULT_OPTIONS = {
   domain: null,
   useHTTPS: true,
@@ -230,6 +247,24 @@ function validateVariableQuality(disableVariableQuality) {
     throw new Error('The disableVariableQuality argument can only be passed a Boolean value');
   }
 }
+function validateDevicePixelRatios(devicePixelRatios) {
+  if (!Array.isArray(devicePixelRatios) || !devicePixelRatios.length) {
+    throw new Error('The devicePixelRatios argument can only be passed a valid non-empty array of integers');
+  } else {
+    var allValidDPR = devicePixelRatios.every(function (dpr) {
+      return typeof dpr === 'number' && dpr >= 1 && dpr <= 5;
+    });
+
+    if (!allValidDPR) {
+      throw new Error('The devicePixelRatios argument can only contain positive integer values between 1 and 5');
+    }
+  }
+}
+function validateVariableQualities(variableQualities) {
+  if (_typeof(variableQualities) !== 'object') {
+    throw new Error('The variableQualities argument can only be an object');
+  }
+}
 
 var ImgixClient = /*#__PURE__*/function () {
   function ImgixClient() {
@@ -364,17 +399,27 @@ var ImgixClient = /*#__PURE__*/function () {
     value: function _buildDPRSrcSet(path, params, options) {
       var _this2 = this;
 
-      var targetRatios = [1, 2, 3, 4, 5];
+      if (options.devicePixelRatios) {
+        validateDevicePixelRatios(options.devicePixelRatios);
+      }
+
+      var targetRatios = options.devicePixelRatios || DEFAULT_DPR;
       var disableVariableQuality = options.disableVariableQuality || false;
 
       if (!disableVariableQuality) {
         validateVariableQuality(disableVariableQuality);
       }
 
+      if (options.variableQualities) {
+        validateVariableQualities(options.variableQualities);
+      }
+
+      var qualities = _objectSpread2(_objectSpread2({}, DPR_QUALITIES), options.variableQualities);
+
       var withQuality = function withQuality(path, params, dpr) {
         return "".concat(_this2.buildURL(path, _objectSpread2(_objectSpread2({}, params), {}, {
           dpr: dpr,
-          q: params.q || DPR_QUALITIES[dpr]
+          q: params.q || qualities[dpr] || qualities[Math.floor(dpr)]
         })), " ").concat(dpr, "x");
       };
 

diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -26,12 +26,18 @@ declare class ImgixClient {
   ): number[];
 }
 
+export type DevicePixelRatio = 1 | 2 | 3 | 4 | 5 | number;
+
+export type VariableQualities = { [key in DevicePixelRatio]?: number };
+
 export interface SrcSetOptions {
   widths?: number[];
   widthTolerance?: number;
   minWidth?: number;
   maxWidth?: number;
   disableVariableQuality?: boolean;
+  devicePixelRatios?: DevicePixelRatio[];
+  variableQualities?: VariableQualities;
 }
 
 export default ImgixClient;
diff --git a/dist/index.esm.js b/dist/index.esm.js
@@ -39,6 +39,22 @@ function _objectSpread2(target) {
   return target;
 }
 
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
@@ -152,7 +168,7 @@ function _nonIterableRest() {
 }
 
 // package version used in the ix-lib parameter
-var VERSION = '3.2.1'; // regex pattern used to determine if a domain is valid
+var VERSION = '3.4.0'; // regex pattern used to determine if a domain is valid
 
 var DOMAIN_REGEX = /^(?:[a-z\d\-_]{1,62}\.){0,125}(?:[a-z\d](?:\-(?=\-*[a-z\d])|[a-z]|\d){0,62}\.)[a-z\d]{1,63}$/i; // minimum generated srcset width
 
@@ -169,6 +185,7 @@ var DPR_QUALITIES = {
   4: 23,
   5: 20
 };
+var DEFAULT_DPR = [1, 2, 3, 4, 5];
 var DEFAULT_OPTIONS = {
   domain: null,
   useHTTPS: true,
@@ -224,6 +241,24 @@ function validateVariableQuality(disableVariableQuality) {
     throw new Error('The disableVariableQuality argument can only be passed a Boolean value');
   }
 }
+function validateDevicePixelRatios(devicePixelRatios) {
+  if (!Array.isArray(devicePixelRatios) || !devicePixelRatios.length) {
+    throw new Error('The devicePixelRatios argument can only be passed a valid non-empty array of integers');
+  } else {
+    var allValidDPR = devicePixelRatios.every(function (dpr) {
+      return typeof dpr === 'number' && dpr >= 1 && dpr <= 5;
+    });
+
+    if (!allValidDPR) {
+      throw new Error('The devicePixelRatios argument can only contain positive integer values between 1 and 5');
+    }
+  }
+}
+function validateVariableQualities(variableQualities) {
+  if (_typeof(variableQualities) !== 'object') {
+    throw new Error('The variableQualities argument can only be an object');
+  }
+}
 
 var ImgixClient = /*#__PURE__*/function () {
   function ImgixClient() {
@@ -358,17 +393,27 @@ var ImgixClient = /*#__PURE__*/function () {
     value: function _buildDPRSrcSet(path, params, options) {
       var _this2 = this;
 
-      var targetRatios = [1, 2, 3, 4, 5];
+      if (options.devicePixelRatios) {
+        validateDevicePixelRatios(options.devicePixelRatios);
+      }
+
+      var targetRatios = options.devicePixelRatios || DEFAULT_DPR;
       var disableVariableQuality = options.disableVariableQuality || false;
 
       if (!disableVariableQuality) {
         validateVariableQuality(disableVariableQuality);
       }
 
+      if (options.variableQualities) {
+        validateVariableQualities(options.variableQualities);
+      }
+
+      var qualities = _objectSpread2(_objectSpread2({}, DPR_QUALITIES), options.variableQualities);
+
       var withQuality = function withQuality(path, params, dpr) {
         return "".concat(_this2.buildURL(path, _objectSpread2(_objectSpread2({}, params), {}, {
           dpr: dpr,
-          q: params.q || DPR_QUALITIES[dpr]
+          q: params.q || qualities[dpr] || qualities[Math.floor(dpr)]
         })), " ").concat(dpr, "x");
       };
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@imgix/js-core",
   "description": "A JavaScript client library for generating image URLs with imgix",
-  "version": "3.2.2",
+  "version": "3.4.0",
   "repository": "https://github.com/imgix/js-core",
   "license": "BSD-2-Clause",
   "main": "dist/index.cjs.js",

diff --git a/src/constants.js b/src/constants.js
@@ -1,5 +1,5 @@
 // package version used in the ix-lib parameter
-export const VERSION = '3.2.2';
+export const VERSION = '3.4.0';
 // regex pattern used to determine if a domain is valid
 export const DOMAIN_REGEX = /^(?:[a-z\d\-_]{1,62}\.){0,125}(?:[a-z\d](?:\-(?=\-*[a-z\d])|[a-z]|\d){0,62}\.)[a-z\d]{1,63}$/i;
 // minimum generated srcset width