next-cloudinary 1.10.0 → 1.12.0

package/dist/next-cloudinary.modern.mjs

@@ -1,6 +1,7 @@
 import { useState, useRef } from 'react';
 import Image from 'next/image';
 import { Cloudinary } from '@cloudinary/url-gen';
+import nextPkg from 'next/package.json';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Head from 'next/head';
 import Script from 'next/script';
@@ -885,19 +886,64 @@ var zoompanPlugin = {
   plugin: plugin
 };
 
+const NEXT_CLOUDINARY_ANALYTICS_ID = 'V';
+
+var name = "next-cloudinary";
+var version = "1.12.0";
+var main = "dist/next-cloudinary.umd.js";
+var module = "dist/next-cloudinary.module.js";
+var source = "src/index.ts";
+var types = "dist/index.d.ts";
+var scripts = {
+	build: "microbundle --no-compress --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react",
+	dev: "microbundle watch --no-compress --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react",
+	prepublishOnly: "cp ../README.md . && yarn build",
+	postpublish: "rm ./README.md",
+	test: "jest"
+};
+var dependencies = {
+	"@cloudinary/url-gen": "^1.8.6"
+};
+var devDependencies = {
+	"@babel/core": "^7.19.6",
+	"@babel/preset-env": "^7.19.4",
+	"@types/jest": "^29.2.0",
+	"babel-jest": "^29.2.2",
+	dotenv: "^16.0.3",
+	jest: "^29.2.2",
+	"jest-environment-jsdom": "^29.2.2",
+	microbundle: "^0.15.1",
+	"ts-jest": "^29.0.3",
+	typescript: "^4.9.4"
+};
+var peerDependencies = {
+	next: "^12 || ^13",
+	react: "^17 || ^18"
+};
+var pkg = {
+	name: name,
+	version: version,
+	main: main,
+	module: module,
+	"umd:main": "dist/next-cloudinary.umd.js",
+	source: source,
+	types: types,
+	scripts: scripts,
+	dependencies: dependencies,
+	devDependencies: devDependencies,
+	peerDependencies: peerDependencies
+};
+
 const transformationPlugins = [
 // Background Removal must always come first
 removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, namedTransformationsPlugin, 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
+/**
+ * constructCloudinaryUrl
  */
-
 function constructCloudinaryUrl({
   options,
   config
@@ -906,52 +952,53 @@ function constructCloudinaryUrl({
     cld = new Cloudinary(_extends({
       cloud: {
         cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
-      },
-      url: {
-        // Used to avoid issues with SSR particularly for the blurred placeholder
-        analytics: false
       }
     }, config));
   }
-  const publicId = getPublicId(options.src);
+  const publicId = getPublicId(options == null ? void 0 : options.src);
   const cldImage = cld.image(publicId);
   transformationPlugins.forEach(({
     plugin
   }) => {
+    // @ts-ignore
     const {
       options: pluginOptions
     } = plugin({
       cldImage,
       options
     }) || {};
-    if (pluginOptions != null && pluginOptions.format) {
+    if (pluginOptions != null && pluginOptions.format && options) {
       options.format = pluginOptions.format;
     }
-    if (pluginOptions != null && pluginOptions.width) {
+    if (pluginOptions != null && pluginOptions.width && options) {
       options.resize = {
         width: pluginOptions == null ? void 0 : pluginOptions.width
       };
     }
   });
-  if (options.resize) {
+  if (options != null && options.resize) {
     const {
       width,
       crop = 'scale'
     } = options.resize;
     cldImage.effect(`c_${crop},w_${width}`);
   }
-  return cldImage.setDeliveryType(options.deliveryType || 'upload').format(options.format || 'auto').delivery(`q_${options.quality || 'auto'}`).toURL();
+  return cldImage.setDeliveryType((options == null ? void 0 : options.deliveryType) || 'upload').format((options == null ? void 0 : options.format) || 'auto').delivery(`q_${(options == null ? void 0 : options.quality) || 'auto'}`).toURL({
+    trackedAnalytics: {
+      sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
+      sdkSemver: pkg.version,
+      techVersion: nextPkg.version
+    }
+  });
 }
-
-/**
- * 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.
- *
- * @param {string} src The cloudiary url or public id.
- *
- * @return {string} The images public id
+/**
+ * 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.
+ *
+ * @param {string} src The cloudiary url or public id.
+ *
+ * @return {string} The images public id
  */
-
 function getPublicId(src) {
   if (typeof src !== 'string') {
     throw new Error(`Invalid src of type ${typeof src}`);
@@ -971,11 +1018,9 @@ function getPublicId(src) {
   }
   return src;
 }
-
-/**
- * createPlaceholderUrl
+/**
+ * createPlaceholderUrl
  */
-
 function createPlaceholderUrl({
   src,
   placeholder = true,
@@ -1000,11 +1045,9 @@ function createPlaceholderUrl({
     config
   });
 }
-
-/**
- * pollForProcessingImage
+/**
+ * pollForProcessingImage
  */
-
 async function pollForProcessingImage(options) {
   const {
     src
@@ -1066,23 +1109,21 @@ const CldImage = props => {
       CLD_OPTIONS.push(prop);
     });
   });
-
   // Construct the base Image component props by filtering out Cloudinary-specific props
-
-  const imageProps = {};
+  const imageProps = {
+    alt: props.alt,
+    src: props.src
+  };
   Object.keys(props).filter(key => !CLD_OPTIONS.includes(key)).forEach(key => imageProps[key] = props[key]);
   const defaultImgKey = Object.keys(imageProps).map(key => `${key}:${imageProps[key]}`).join(';');
   const [imgKey, setImgKey] = useState(defaultImgKey);
-
   // 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.
   // The resulting image will always be blurred per Next.js, so we're
   // limited on options for placeholders.
@@ -1091,7 +1132,6 @@ const CldImage = props => {
   // an Image component prop as opposed to simply the URL
   //
   // https://nextjs.org/docs/api-reference/next/image#blurdataurl
-
   if (imageProps.placeholder) {
     const publicId = getPublicId(props.src);
     imageProps.blurDataURL = createPlaceholderUrl({
@@ -1104,13 +1144,12 @@ const CldImage = props => {
   }
   if (props.src && props.preserveTransformations) {
     const transformations = getTransformations(props.src, props.preserveTransformations);
-    imageProps.rawTransformations = [...imageProps.rawTransformations, ...transformations];
+    const rawTransformations = imageProps.rawTransformations ? [...imageProps.rawTransformations] : [];
+    imageProps.rawTransformations = [...rawTransformations, ...transformations];
   }
-
-  /**
-   * handleOnError
+  /**
+   * handleOnError
    */
-
   async function handleOnError(options) {
     const result = await pollForProcessingImage({
       src: options.target.src
@@ -1143,15 +1182,14 @@ const CldOgImage = _ref => {
     width: props.width || IMAGE_WIDTH,
     height: props.height || IMAGE_HEIGHT,
     crop: props.crop || 'fill',
-    gravity: props.gravity || 'center'
+    gravity: props.gravity || 'center',
+    alt: props.alt
   });
   const ogImageUrl = constructCloudinaryUrl({
     options
   });
-
   // 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, {
     children: [/*#__PURE__*/jsx("meta", {
       property: "og:image",
@@ -1191,12 +1229,10 @@ const CldUploadWidget = ({
   const cloudinary = useRef();
   const widget = useRef();
   const signed = !!signatureEndpoint;
-
-  /**
-   * generateSignature
-   * @description Makes a request to an endpoint to sign Cloudinary parameters as part of widget creation
+  /**
+   * generateSignature
+   * @description Makes a request to an endpoint to sign Cloudinary parameters as part of widget creation
    */
-
   function generateSignature(callback, paramsToSign) {
     fetch(signatureEndpoint, {
       method: "POST",
@@ -1209,19 +1245,16 @@ const CldUploadWidget = ({
       callback(signature);
     });
   }
-
-  /**
-   * createWidget
-   * @description Creates a new instance of the Cloudinary widget and stores in a ref
+  /**
+   * 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 uploadOptions = _extends({
       cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
       uploadPreset: uploadPreset || process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET,
@@ -1229,13 +1262,12 @@ const CldUploadWidget = ({
     }, options);
     if (signed) {
       uploadOptions.uploadSignature = generateSignature;
-
       // No need for apiSecret here because of api/sign-cloudinary-params
-
       if (!uploadOptions.apiKey) {
         return new Error("Signed Upload needs apiKey!");
       }
     }
+    // @ts-ignore
     return (_cloudinary$current = cloudinary.current) == null ? void 0 : _cloudinary$current.createUploadWidget(uploadOptions, 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
@@ -1246,25 +1278,23 @@ const CldUploadWidget = ({
       }
     });
   }
-
-  /**
-   * open
-   * @description When triggered, uses the current widget instance to open the upload modal
+  /**
+   * open
+   * @description When triggered, uses the current widget instance to open the upload modal
    */
-
   function open() {
     if (!(widget != null && widget.current)) {
       widget.current = createWidget();
     }
+    // @ts-ignore
     (widget == null ? void 0 : widget.current) && widget.current.open();
   }
-
-  /**
-   * handleOnLoad
-   * @description Stores the Cloudinary window instance to a ref when the widget script loads
+  /**
+   * handleOnLoad
+   * @description Stores the Cloudinary window instance to a ref when the widget script loads
    */
-
   function handleOnLoad() {
+    // @ts-ignore
     cloudinary.current = window.cloudinary;
   }
   return /*#__PURE__*/jsxs(Fragment, {