feat: allow path encoding to be disabled for Imgix component

imgix · Feb 28, 2022 · 045bb42 · 045bb42
1 parent c7b1273
commit 045bb42
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/src/constructUrl.js b/src/constructUrl.js
@@ -6,8 +6,8 @@ Minor syntax modifications have been made
 */
 
 const PACKAGE_VERSION = require("../package.json").version;
-import extractQueryParams from "./extractQueryParams";
 import ImgixClient from "@imgix/js-core";
+import extractQueryParams from "./extractQueryParams";
 
 // @see https://www.imgix.com/docs/reference
 var PARAM_EXPANSION = Object.freeze({
@@ -110,28 +110,28 @@ var DEFAULT_OPTIONS = Object.freeze({
  * Construct a URL for an image with an Imgix proxy, expanding image options
  * per the [API reference docs](https://www.imgix.com/docs/reference).
  * @param  {String} src         src of raw image
- * @param  {Object} longOptions map of image API options, in long or short form per expansion rules
+ * @param  {Object} longImgixParams map of image API options, in long or short form per expansion rules
  * @return {String}             URL of image src transformed by Imgix
  */
-function constructUrl(src, longOptions) {
+function constructUrl(src, longImgixParams, srcOptions) {
   if (!src) {
     return "";
   }
-  const params = compactParamKeys(longOptions);
+  const params = compactParamKeys(longImgixParams);
   const { client, pathComponents } = extractClientAndPathComponents(src);
-  return client.buildURL(pathComponents.join("/"), params);
+  return client.buildURL(pathComponents.join("/"), params, srcOptions);
 }
 
-function compactParamKeys(longOptions) {
-  const keys = Object.keys(longOptions);
+function compactParamKeys(longImgixParams) {
+  const keys = Object.keys(longImgixParams);
   const keysLength = keys.length;
   const params = {};
   for (let i = 0; i < keysLength; i++) {
     let key = keys[i];
     if (PARAM_EXPANSION[key]) {
-      params[PARAM_EXPANSION[key]] = longOptions[key];
+      params[PARAM_EXPANSION[key]] = longImgixParams[key];
     } else {
-      params[key] = longOptions[key];
+      params[key] = longImgixParams[key];
     }
   }
 

diff --git a/src/react-imgix.jsx b/src/react-imgix.jsx
@@ -41,6 +41,7 @@ const SHARED_IMGIX_AND_SOURCE_PROP_TYPES = Object.assign(
     disableQualityByDPR: PropTypes.bool,
     disableSrcSet: PropTypes.bool,
     disableLibraryParam: PropTypes.bool,
+    disablePathEncoding: PropTypes.bool,
     imgixParams: PropTypes.object,
     sizes: PropTypes.string,
     width: PropTypes.number,
@@ -103,6 +104,7 @@ function buildSrc({
   height,
   disableLibraryParam,
   disableSrcSet,
+  disablePathEncoding,
   imgixParams,
   disableQualityByDPR,
   srcSetOptions,
@@ -111,7 +113,7 @@ function buildSrc({
 
   const [rawSrc, params] = extractQueryParams(inputSrc);
 
-  const srcOptions = Object.assign(
+  const srcImgixParams = Object.assign(
     {},
     params,
     imgixParams,
@@ -120,15 +122,20 @@ function buildSrc({
     fixedSize && width ? { width } : {}
   );
 
-  const src = constructUrl(rawSrc, srcOptions);
+  const srcOptions = {
+    disablePathEncoding,
+  };
+
+  const src = constructUrl(rawSrc, srcImgixParams, srcOptions);
 
   let srcSet;
 
   if (disableSrcSet) {
     srcSet = src;
   } else {
+    const sharedSrcSetOptions = Object.assign({}, srcSetOptions, {disablePathEncoding});
     if (fixedSize) {
-      const { width, w, height, h, q, ...urlParams } = srcOptions;
+      const { width, w, height, h, q, ...urlParams } = srcImgixParams;
       if (q) {
         urlParams["q"] = q;
       }
@@ -144,18 +151,15 @@ function buildSrc({
         urlParams["h"] = finalHeight;
       }
 
-      srcSet = buildSrcSet(rawSrc, urlParams, {
-        disableVariableQuality: disableQualityByDPR,
-        ...srcSetOptions,
-      });
+      srcSet = buildSrcSet(rawSrc, urlParams, Object.assign({disableVariableQuality: disableQualityByDPR}, sharedSrcSetOptions ));
     } else {
-      const { width, w, height, h, ...urlParams } = srcOptions;
+      const { width, w, height, h, ...urlParams } = srcImgixParams;
 
       const aspectRatio = imgixParams.ar;
       let showARWarning =
         aspectRatio != null && aspectRatioIsValid(aspectRatio) === false;
 
-      srcSet = buildSrcSet(rawSrc, urlParams, srcSetOptions);
+      srcSet = buildSrcSet(rawSrc, urlParams, sharedSrcSetOptions);
 
       if (
         NODE_ENV !== "production" &&