next-cloudinary 0.3.0 → 0.4.1

package/dist/next-cloudinary.modern.mjs

@@ -9,31 +9,26 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
@@ -49,15 +44,12 @@ function plugin$6({
     crop = 'limit'
   } = options;
   let transformationString = `c_${crop},w_${width}`;
-
   if (!options.gravity && cropsGravityAuto.includes(crop)) {
     options.gravity = 'auto';
   }
-
   if (!['limit'].includes(crop)) {
     transformationString = `${transformationString},h_${height}`;
   }
-
   if (options.gravity) {
     if (options.gravity === 'auto' && !cropsGravityAuto.includes(crop)) {
       console.warn('Auto gravity can only be used with crop, fill, lfill, fill_pad or thumb. Not applying gravity.');
@@ -65,7 +57,6 @@ function plugin$6({
       transformationString = `${transformationString},g_${options.gravity}`;
     }
   }
-
   cldImage.resize(transformationString);
 }
 
@@ -129,7 +120,6 @@ function plugin$5({
   params.forEach(key => {
     const prop = key.prop || key;
     const effect = key.effect || key;
-
     if (options[prop] === true) {
       cldImage.effect(`e_${effect}`);
     } else if (typeof options[prop] === 'string') {
@@ -145,6 +135,7 @@ var effectsPlugin = {
 };
 
 // aspectRatio
+
 const primary = {
   aspectRatio: {
     qualifier: 'ar'
@@ -216,11 +207,9 @@ function plugin$4({
   } = options;
   const type = 'overlay';
   const typeQualifier = 'l';
-
   if (Array.isArray(overlays)) {
     overlays.forEach(applyOverlay);
   }
-
   if (typeof text$1 === 'string') {
     applyOverlay({
       text: _extends({}, DEFAULT_TEXT_OPTIONS, {
@@ -232,43 +221,44 @@ function plugin$4({
       text: _extends({}, DEFAULT_TEXT_OPTIONS, text$1)
     });
   }
+
   /**
    * applyOverlay
    */
 
-
   function applyOverlay(_ref) {
     let {
-      publicId,
-      position: position$1,
-      text: text$1,
-      effects: layerEffects = []
-    } = _ref,
-        options = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
+        publicId,
+        position: position$1,
+        text: text$1,
+        effects: layerEffects = []
+      } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded$3);
     const hasPublicId = typeof publicId === 'string';
     const hasText = typeof text$1 === 'object' || typeof text$1 === 'string';
     const hasPosition = typeof position$1 === 'object';
-
     if (!hasPublicId && !hasText) {
       console.warn(`An ${type} is missing Public ID or Text`);
       return;
-    } // Start to construct the transformation string using text or the public ID
-    // if it's image-based
+    }
 
+    // Start to construct the transformation string using text or the public ID
+    // if it's image-based
 
     let layerTransformation;
-
     if (hasText) {
       layerTransformation = `${typeQualifier}_text`;
     } else {
       layerTransformation = `${typeQualifier}_${publicId.replace(/\//g, ':')}`;
-    } // Begin organizing transformations based on what it is and the location
-    // it needs to be placed in the URL
+    }
 
+    // Begin organizing transformations based on what it is and the location
+    // it needs to be placed in the URL
 
     const primary$1 = [];
-    const applied = []; // Gemeral options
+    const applied = [];
+
+    // Gemeral options
 
     Object.keys(options).forEach(key => {
       if (!primary[key]) return;
@@ -276,7 +266,9 @@ function plugin$4({
         qualifier
       } = primary[key];
       primary$1.push(`${qualifier}_${options[key]}`);
-    }); // Layer effects
+    });
+
+    // Layer effects
 
     layerEffects.forEach(effect => {
       Object.keys(effect).forEach(key => {
@@ -286,7 +278,9 @@ function plugin$4({
         } = primary[key];
         primary$1.push(`${qualifier}_${effect[key]}`);
       });
-    }); // Text styling
+    });
+
+    // Text styling
 
     if (hasText) {
       if (typeof text$1 === 'string') {
@@ -294,7 +288,6 @@ function plugin$4({
           text: text$1
         });
       }
-
       const textTransformations = [];
       Object.keys(text$1).forEach(key => {
         if (!text[key]) return;
@@ -302,7 +295,6 @@ function plugin$4({
           qualifier,
           location
         } = text[key];
-
         if (location === 'primary') {
           primary$1.push(`${qualifier}_${text$1[key]}`);
         } else {
@@ -310,8 +302,9 @@ function plugin$4({
         }
       });
       layerTransformation = `${layerTransformation}:${textTransformations.join('_')}:${text$1.text}`;
-    } // Positioning
+    }
 
+    // Positioning
 
     if (hasPosition) {
       Object.keys(position$1).forEach(key => {
@@ -321,17 +314,20 @@ function plugin$4({
         } = position[key];
         applied.push(`${qualifier}_${position$1[key]}`);
       });
-    } // Add all primary transformations
+    }
 
+    // Add all primary transformations
 
-    layerTransformation = `${layerTransformation},${primary$1.join(',')}`; // Add all applied transformations
+    layerTransformation = `${layerTransformation},${primary$1.join(',')}`;
 
-    layerTransformation = `${layerTransformation}/fl_layer_apply,fl_no_overflow`;
+    // Add all applied transformations
 
+    layerTransformation = `${layerTransformation}/fl_layer_apply,fl_no_overflow`;
     if (applied.length > 0) {
       layerTransformation = `${layerTransformation},${applied.join(',')}`;
-    } // Finally add it to the image
+    }
 
+    // Finally add it to the image
 
     cldImage.addTransformation(layerTransformation);
   }
@@ -371,7 +367,6 @@ function plugin$2({
   const {
     removeBackground = false
   } = options;
-
   if (removeBackground) {
     cldImage.effect('e_background_removal');
   }
@@ -394,56 +389,54 @@ function plugin$1({
     underlays = []
   } = options;
   const typeQualifier = 'u';
-
   if (Array.isArray(underlays)) {
     underlays.forEach(applyUnderlay);
   }
-
   if (typeof underlay === 'string') {
     const underlayOptions = {
       publicId: underlay,
       crop: 'fill'
     };
-
     if (options.width) {
       underlayOptions.width = options.width;
     }
-
     if (options.height) {
       underlayOptions.height = options.height;
     }
-
     applyUnderlay(underlayOptions);
   }
+
   /**
    * applyUnderlay
    */
 
-
   function applyUnderlay(_ref) {
     let {
-      publicId,
-      type,
-      position: position$1,
-      effects: layerEffects = []
-    } = _ref,
-        options = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-
+        publicId,
+        type,
+        position: position$1,
+        effects: layerEffects = []
+      } = _ref,
+      options = _objectWithoutPropertiesLoose(_ref, _excluded$2);
     const hasPublicId = typeof publicId === 'string';
     const hasPosition = typeof position$1 === 'object';
-
     if (!hasPublicId) {
       console.warn(`An ${type} is missing a Public ID`);
       return;
-    } // Start to construct the transformation string using text or the public ID
+    }
+
+    // Start to construct the transformation string using text or the public ID
     // if it's image-based
 
+    let layerTransformation = `${typeQualifier}_${publicId.replace(/\//g, ':')}`;
 
-    let layerTransformation = `${typeQualifier}_${publicId.replace(/\//g, ':')}`; // Begin organizing transformations based on what it is and the location
+    // Begin organizing transformations based on what it is and the location
     // it needs to be placed in the URL
 
     const primary$1 = [];
-    const applied = []; // Gemeral options
+    const applied = [];
+
+    // Gemeral options
 
     Object.keys(options).forEach(key => {
       if (!primary[key]) return;
@@ -451,7 +444,9 @@ function plugin$1({
         qualifier
       } = primary[key];
       primary$1.push(`${qualifier}_${options[key]}`);
-    }); // Layer effects
+    });
+
+    // Layer effects
 
     layerEffects.forEach(effect => {
       Object.keys(effect).forEach(key => {
@@ -461,7 +456,9 @@ function plugin$1({
         } = primary[key];
         primary$1.push(`${qualifier}_${effect[key]}`);
       });
-    }); // Positioning
+    });
+
+    // Positioning
 
     if (hasPosition) {
       Object.keys(position$1).forEach(key => {
@@ -471,17 +468,20 @@ function plugin$1({
         } = position[key];
         applied.push(`${qualifier}_${position$1[key]}`);
       });
-    } // Add all primary transformations
+    }
 
+    // Add all primary transformations
 
-    layerTransformation = `${layerTransformation},${primary$1.join(',')}`; // Add all applied transformations
+    layerTransformation = `${layerTransformation},${primary$1.join(',')}`;
 
-    layerTransformation = `${layerTransformation}/fl_layer_apply,fl_no_overflow`;
+    // Add all applied transformations
 
+    layerTransformation = `${layerTransformation}/fl_layer_apply,fl_no_overflow`;
     if (applied.length > 0) {
       layerTransformation = `${layerTransformation},${applied.join(',')}`;
-    } // Finally add it to the image
+    }
 
+    // Finally add it to the image
 
     cldImage.addTransformation(layerTransformation);
   }
@@ -502,7 +502,6 @@ function plugin({
     zoompan = false
   } = options;
   const overrides = {};
-
   if (zoompan === true) {
     cldImage.effect('e_zoompan');
   } else if (typeof zoompan === 'string') {
@@ -514,29 +513,23 @@ function plugin({
     }
   } else if (typeof zoompan === 'object') {
     let zoompanEffect = 'e_zoompan';
-
     if (typeof zoompan.options === 'string') {
       zoompanEffect = `${zoompanEffect}${zoompan.options}`;
     }
-
     cldImage.effect(zoompanEffect);
     let loopEffect;
-
     if (zoompan.loop === true) {
       loopEffect = 'e_loop';
     } else if (typeof zoompan.loop === 'string') {
       loopEffect = `e_loop${zoompan.loop}`;
     }
-
     if (loopEffect) {
       cldImage.effect(loopEffect);
     }
   }
-
   if (zoompan !== false) {
     overrides.format = 'gif';
   }
-
   return {
     options: overrides
   };
@@ -548,11 +541,15 @@ var zoompanPlugin = {
   plugin: plugin
 };
 
-const transformationPlugins = [// Background Removal must always come first
-removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, underlaysPlugin, zoompanPlugin, // Raw transformations needs to be last simply to make sure
+const transformationPlugins = [
+// Background Removal must always come first
+removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, underlaysPlugin, zoompanPlugin,
+// Raw transformations needs to be last simply to make sure
 // it's always expected to applied the same way
+
 rawTransformationsPlugin];
 let cld;
+
 /**
  * constructCloudinaryUrl
  */
@@ -572,7 +569,6 @@ function constructCloudinaryUrl({
       }
     }, config));
   }
-
   const publicId = getPublicId(options.src);
   const cldImage = cld.image(publicId);
   transformationPlugins.forEach(({
@@ -584,13 +580,13 @@ function constructCloudinaryUrl({
       cldImage,
       options
     }) || {};
-
     if (pluginOptions != null && pluginOptions.format) {
       options.format = pluginOptions.format;
     }
   });
   return cldImage.setDeliveryType(options.deliveryType || 'upload').format(options.format || 'auto').delivery(`q_${options.quality || 'auto'}`).toURL();
 }
+
 /**
  * Retrieves the public id of a cloudiary image url. If no url is recognized it returns the parameter it self.
  * If it's recognized that is a url and it's not possible to get the public id, it warns the user.
@@ -604,13 +600,11 @@ function getPublicId(src) {
   if (typeof src !== 'string') {
     throw new Error(`Invalid src of type ${typeof src}`);
   }
-
   if (src.includes('res.cloudinary.com')) {
     const regexWithTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(.*)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
     const regexWithoutTransformations = /(https?)\:\/\/(res.cloudinary.com)\/([^\/]+)\/(image|video|raw)\/(upload|authenticated)\/(v[0-9]+)\/(.+)(?:\.[a-z]{3})?/;
     const withTransformations = src.match(regexWithTransformations);
     const withoutTransformations = src.match(regexWithoutTransformations);
-
     if (withTransformations) {
       return withTransformations[withTransformations.length - 1];
     } else if (withoutTransformations) {
@@ -619,9 +613,9 @@ function getPublicId(src) {
       console.warn(`Not possible to retrieve the publicUrl from ${src}, make sure it's a valid cloudinary image url.`);
     }
   }
-
   return src;
 }
+
 /**
  * createPlaceholderUrl
  */
@@ -632,17 +626,14 @@ function createPlaceholderUrl({
   config
 }) {
   const rawTransformations = [];
-
   if (placeholder === 'grayscale') {
     rawTransformations.push('e_grayscale');
   }
-
   if (typeof placeholder === 'string' && placeholder.includes('color:')) {
     const color = placeholder.split(':').splice(1).join(':');
     rawTransformations.push('e_grayscale');
     rawTransformations.push(`e_colorize:60,co_${color}`);
   }
-
   return constructCloudinaryUrl({
     options: {
       src,
@@ -670,20 +661,25 @@ const CldImage = props => {
       if (CLD_OPTIONS.includes(prop)) {
         throw new Error(`Option ${prop} already exists!`);
       }
-
       CLD_OPTIONS.push(prop);
     });
-  }); // Construct the base Image component props by filtering out Cloudinary-specific props
+  });
+
+  // Construct the base Image component props by filtering out Cloudinary-specific props
 
   const imageProps = {};
-  Object.keys(props).filter(key => !CLD_OPTIONS.includes(key)).forEach(key => imageProps[key] = props[key]); // Construct Cloudinary-specific props by looking for values for any of the supported prop keys
+  Object.keys(props).filter(key => !CLD_OPTIONS.includes(key)).forEach(key => imageProps[key] = props[key]);
+
+  // Construct Cloudinary-specific props by looking for values for any of the supported prop keys
 
   const cldOptions = {};
   CLD_OPTIONS.forEach(key => {
     if (props[key]) {
       cldOptions[key] = props[key];
     }
-  }); // If we see a placeholder option, configure a Cloudinary-based URL.
+  });
+
+  // If we see a placeholder option, configure a Cloudinary-based URL.
   // The resulting image will always be blurred per Next.js, so we're
   // limited on options for placeholders.
   //
@@ -698,12 +694,10 @@ const CldImage = props => {
       src: publicId,
       placeholder: props.placeholder
     });
-
     if (imageProps.placeholder !== 'blur') {
       imageProps.placeholder = 'blur';
     }
   }
-
   return /*#__PURE__*/jsx(Image, _extends({}, imageProps, {
     loader: options => cloudinaryLoader(_extends({}, imageProps, {
       options
@@ -715,24 +709,23 @@ const _excluded$1 = ["excludeTags", "twitterTitle"];
 const IMAGE_WIDTH = 2400;
 const IMAGE_HEIGHT = 1200;
 const TWITTER_CARD = 'summary_large_image';
-
 const CldOgImage = _ref => {
   let {
-    excludeTags = [],
-    twitterTitle
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
+      excludeTags = [],
+      twitterTitle
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   const options = _extends({}, props, {
     width: props.width || IMAGE_WIDTH,
     height: props.height || IMAGE_HEIGHT,
     crop: props.crop || 'fill',
     gravity: props.gravity || 'center'
   });
-
   const ogImageUrl = constructCloudinaryUrl({
     options
-  }); // We need to include the tags within the Next.js Head component rather than
+  });
+
+  // We need to include the tags within the Next.js Head component rather than
   // direcly adding them inside of the Head otherwise we get unexpected results
 
   return /*#__PURE__*/jsxs(Head, {
@@ -773,6 +766,7 @@ const CldUploadWidget = ({
 }) => {
   const cloudinary = useRef();
   const widget = useRef();
+
   /**
    * generateSignature
    * @description Makes a request to an endpoint to sign Cloudinary parameters as part of widget creation
@@ -790,28 +784,27 @@ const CldUploadWidget = ({
       callback(signature);
     });
   }
+
   /**
    * createWidget
    * @description Creates a new instance of the Cloudinary widget and stores in a ref
    */
 
-
   function createWidget() {
     var _cloudinary$current;
-
     // When creating a signed upload, you need to provide both your Cloudinary API Key
     // as well as a signature generator function that will sign any paramters
     // either on page load or during the upload process. Read more about signed uploads at:
     // https://cloudinary.com/documentation/upload_widget#signed_uploads
+
     const totalOptions = _extends({}, options, !!signed && {
       uploadSignature: generateSignature
-    }); // no need for apiSecret because of api/sign-cloudinary-params
-
+    });
 
+    // no need for apiSecret because of api/sign-cloudinary-params
     if (signed && !totalOptions.apiKey) {
       return new Error("Signed Upload needs apiKey!");
     }
-
     return (_cloudinary$current = cloudinary.current) == null ? void 0 : _cloudinary$current.createUploadWidget(totalOptions, function (error, result) {
       // The callback is a bit more chatty than failed or success so
       // only trigger when one of those are the case. You can additionally
@@ -822,29 +815,27 @@ const CldUploadWidget = ({
       }
     });
   }
+
   /**
    * open
    * @description When triggered, uses the current widget instance to open the upload modal
    */
 
-
   function open() {
     if (!(widget != null && widget.current)) {
       widget.current = createWidget();
     }
-
     (widget == null ? void 0 : widget.current) && widget.current.open();
   }
+
   /**
    * handleOnLoad
    * @description Stores the Cloudinary window instance to a ref when the widget script loads
    */
 
-
   function handleOnLoad() {
     cloudinary.current = window.cloudinary;
   }
-
   return /*#__PURE__*/jsxs(Fragment, {
     children: [children({
       cloudinary: cloudinary.current,
@@ -862,16 +853,14 @@ const CldUploadWidget = ({
 };
 
 const _excluded = ["onUpload", "options", "signed", "label", "children"];
-
 const CldUploadButton = _ref => {
   let {
-    onUpload,
-    options,
-    signed,
-    children
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      onUpload,
+      options,
+      signed,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/jsx(Fragment, {
     children: /*#__PURE__*/jsx(CldUploadWidget, {
       signed: signed,
@@ -885,7 +874,6 @@ const CldUploadButton = _ref => {
           e.preventDefault();
           open();
         }
-
         return /*#__PURE__*/jsx("button", _extends({
           onClick: handleOnClick
         }, props, {