next-cloudinary 6.12.0 → 7.0.0-beta.1

package/dist/CldImage-4b579fe8.esm.js

@@ -0,0 +1,138 @@
+'use client';
+import { forwardRef, useState, useCallback } from 'react';
+import Image from 'next/image';
+import { pollForProcessingImage } from '@cloudinary-util/util';
+import { transformationPlugins } from '@cloudinary-util/url-loader';
+import { g as getCldImageUrl, c as cloudinaryLoader } from './cloudinary-loader-1863f0f4.esm.js';
+import { jsx } from 'react/jsx-runtime';
+import './cloudinary-9437f0ad.esm.js';
+import 'next/package.json';
+
+const CldImage = /*#__PURE__*/forwardRef(function CldImage(props, ref) {
+  let hasThrownError = false;
+
+  // Add props here that are intended to only be used for
+  // Cloudinary URL construction to avoid them being forwarded
+  // to the DOM
+
+  const CLD_OPTIONS = ['assetType', 'config', 'deliveryType', 'strictTransformations'];
+
+  // Loop through all of the props available on the transformation plugins and verify
+  // that we're not accientally applying the same prop twice
+
+  // We're also using those props to push into CLD_OPTIONS which helps us filter what
+  // props are applied to the underlaying Image component vs what's being sent
+  // to Cloudinary URL construction
+
+  transformationPlugins.forEach(({
+    props
+  }) => {
+    const pluginProps = Object.keys(props);
+    pluginProps.forEach(prop => {
+      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
+
+  const imageProps = {
+    alt: props.alt,
+    src: props.src
+  };
+  Object.keys(props).filter(key => typeof key === 'string' && !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 => {
+    const prop = props[key];
+    if (prop) {
+      // @ts-expect-error
+      cldOptions[key] = prop;
+    }
+  });
+
+  // The unoptimized flag is intended to remove all optimizations including quality, format, and sizing
+  // via responsive sizing. When passing this in, it also prevents the `loader` from running, thus
+  // breaking this component. This rewrites the `src` to construct a fully formed Cloudinary URL
+  // that also disables format and quality transformations, to deliver it as unoptimized
+  // See about unoptimized not working with loader: https://github.com/vercel/next.js/issues/50764
+
+  const IMAGE_OPTIONS = process.env.__NEXT_IMAGE_OPTS || {};
+  if (props.unoptimized === true || IMAGE_OPTIONS?.unoptimized === true) {
+    imageProps.src = getCldImageUrl({
+      ...cldOptions,
+      width: imageProps.width,
+      height: imageProps.height,
+      src: imageProps.src,
+      format: 'default',
+      quality: 'default'
+    }, props.config);
+  }
+
+  /**
+   * handleOnError
+   */
+
+  async function onError(options) {
+    let pollForImage = true;
+
+    // The onError function should never fire more than once. The use case for tracking it
+    // at all outside of the standard Next Image flow is for scenarios like when Cloudinary
+    // is processing an image where we want to try to update the UI upon completion.
+    // If this fires a second time, it is likely because of another issue, which will end
+    // up triggering an infinite loop if the resulting image keeps erroring and
+    // this function sets a key using the current time to force refresh the UI
+
+    if (hasThrownError) return;
+    hasThrownError = true;
+    if (typeof props.onError === 'function') {
+      const onErrorResult = props.onError(options);
+      if (typeof onErrorResult === 'boolean' && onErrorResult === false) {
+        pollForImage = false;
+      }
+    } else if (typeof props.onError === 'boolean' && props.onError === false) {
+      pollForImage = false;
+    }
+
+    // Give an escape hatch in case the user wants to handle the error themselves
+    // or if they want to disable polling for the image
+
+    if (pollForImage === false) return;
+    const image = options.target;
+    const result = await pollForProcessingImage({
+      src: image.src
+    });
+    if (result) {
+      setImgKey(`${defaultImgKey};${Date.now()}`);
+    }
+  }
+  const handleOnError = useCallback(onError, [pollForProcessingImage, defaultImgKey]);
+
+  // Copypasta from https://github.com/prismicio/prismic-next/pull/79/files
+  // Thanks Angelo!
+  // TODO: Remove once https://github.com/vercel/next.js/issues/52216 is resolved.
+
+  let ResolvedImage = Image;
+  if ("default" in ResolvedImage) {
+    ResolvedImage = ResolvedImage.default;
+  }
+  return /*#__PURE__*/jsx(ResolvedImage, {
+    ...imageProps,
+    loader: loaderOptions => cloudinaryLoader({
+      loaderOptions,
+      imageProps,
+      cldOptions,
+      cldConfig: props.config
+    }),
+    onError: handleOnError,
+    ref: ref
+  }, imgKey);
+});
+
+export { CldImage as default };

package/dist/CldImage-68dff3e6.cjs.js

@@ -0,0 +1,146 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var Image = require('next/image');
+var util = require('@cloudinary-util/util');
+var urlLoader = require('@cloudinary-util/url-loader');
+var cloudinaryLoader = require('./cloudinary-loader-80d421f0.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('./cloudinary-1cbbab64.cjs.js');
+require('next/package.json');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var Image__default = /*#__PURE__*/_interopDefault(Image);
+
+const CldImage = /*#__PURE__*/react.forwardRef(function CldImage(props, ref) {
+  let hasThrownError = false;
+
+  // Add props here that are intended to only be used for
+  // Cloudinary URL construction to avoid them being forwarded
+  // to the DOM
+
+  const CLD_OPTIONS = ['assetType', 'config', 'deliveryType', 'strictTransformations'];
+
+  // Loop through all of the props available on the transformation plugins and verify
+  // that we're not accientally applying the same prop twice
+
+  // We're also using those props to push into CLD_OPTIONS which helps us filter what
+  // props are applied to the underlaying Image component vs what's being sent
+  // to Cloudinary URL construction
+
+  urlLoader.transformationPlugins.forEach(({
+    props
+  }) => {
+    const pluginProps = Object.keys(props);
+    pluginProps.forEach(prop => {
+      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
+
+  const imageProps = {
+    alt: props.alt,
+    src: props.src
+  };
+  Object.keys(props).filter(key => typeof key === 'string' && !CLD_OPTIONS.includes(key)).forEach(key => imageProps[key] = props[key]);
+  const defaultImgKey = Object.keys(imageProps).map(key => `${key}:${imageProps[key]}`).join(';');
+  const [imgKey, setImgKey] = react.useState(defaultImgKey);
+
+  // Construct Cloudinary-specific props by looking for values for any of the supported prop keys
+
+  const cldOptions = {};
+  CLD_OPTIONS.forEach(key => {
+    const prop = props[key];
+    if (prop) {
+      // @ts-expect-error
+      cldOptions[key] = prop;
+    }
+  });
+
+  // The unoptimized flag is intended to remove all optimizations including quality, format, and sizing
+  // via responsive sizing. When passing this in, it also prevents the `loader` from running, thus
+  // breaking this component. This rewrites the `src` to construct a fully formed Cloudinary URL
+  // that also disables format and quality transformations, to deliver it as unoptimized
+  // See about unoptimized not working with loader: https://github.com/vercel/next.js/issues/50764
+
+  const IMAGE_OPTIONS = process.env.__NEXT_IMAGE_OPTS || {};
+  if (props.unoptimized === true || IMAGE_OPTIONS?.unoptimized === true) {
+    imageProps.src = cloudinaryLoader.getCldImageUrl({
+      ...cldOptions,
+      width: imageProps.width,
+      height: imageProps.height,
+      src: imageProps.src,
+      format: 'default',
+      quality: 'default'
+    }, props.config);
+  }
+
+  /**
+   * handleOnError
+   */
+
+  async function onError(options) {
+    let pollForImage = true;
+
+    // The onError function should never fire more than once. The use case for tracking it
+    // at all outside of the standard Next Image flow is for scenarios like when Cloudinary
+    // is processing an image where we want to try to update the UI upon completion.
+    // If this fires a second time, it is likely because of another issue, which will end
+    // up triggering an infinite loop if the resulting image keeps erroring and
+    // this function sets a key using the current time to force refresh the UI
+
+    if (hasThrownError) return;
+    hasThrownError = true;
+    if (typeof props.onError === 'function') {
+      const onErrorResult = props.onError(options);
+      if (typeof onErrorResult === 'boolean' && onErrorResult === false) {
+        pollForImage = false;
+      }
+    } else if (typeof props.onError === 'boolean' && props.onError === false) {
+      pollForImage = false;
+    }
+
+    // Give an escape hatch in case the user wants to handle the error themselves
+    // or if they want to disable polling for the image
+
+    if (pollForImage === false) return;
+    const image = options.target;
+    const result = await util.pollForProcessingImage({
+      src: image.src
+    });
+    if (result) {
+      setImgKey(`${defaultImgKey};${Date.now()}`);
+    }
+  }
+  const handleOnError = react.useCallback(onError, [util.pollForProcessingImage, defaultImgKey]);
+
+  // Copypasta from https://github.com/prismicio/prismic-next/pull/79/files
+  // Thanks Angelo!
+  // TODO: Remove once https://github.com/vercel/next.js/issues/52216 is resolved.
+
+  let ResolvedImage = Image__default["default"];
+  if ("default" in ResolvedImage) {
+    ResolvedImage = ResolvedImage.default;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(ResolvedImage, {
+    ...imageProps,
+    loader: loaderOptions => cloudinaryLoader.cloudinaryLoader({
+      loaderOptions,
+      imageProps,
+      cldOptions,
+      cldConfig: props.config
+    }),
+    onError: handleOnError,
+    ref: ref
+  }, imgKey);
+});
+
+exports["default"] = CldImage;

package/dist/CldUploadButton-196b419b.esm.js

@@ -0,0 +1,101 @@
+'use client';
+import 'react';
+import CldUploadWidget from './CldUploadWidget-a9c04a78.esm.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const CldUploadButton = ({
+  className,
+  children,
+  onClick,
+  onError,
+  onOpen,
+  onUpload,
+  onAbort,
+  onBatchCancelled,
+  onClose,
+  onDisplayChanged,
+  onPublicId,
+  onQueuesEnd,
+  onQueuesStart,
+  onRetry,
+  onShowCompleted,
+  onSourceChanged,
+  onSuccess,
+  onTags,
+  onUploadAdded,
+  options,
+  signatureEndpoint,
+  uploadPreset,
+  onAbortAction,
+  onBatchCancelledAction,
+  onCloseAction,
+  onDisplayChangedAction,
+  onPublicIdAction,
+  onQueuesEndAction,
+  onQueuesStartAction,
+  onRetryAction,
+  onShowCompletedAction,
+  onSourceChangedAction,
+  onSuccessAction,
+  onTagsAction,
+  onUploadAddedAction,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsx(CldUploadWidget, {
+      onError: onError,
+      onOpen: onOpen,
+      onUpload: onUpload,
+      onAbort: onAbort,
+      onBatchCancelled: onBatchCancelled,
+      onClose: onClose,
+      onDisplayChanged: onDisplayChanged,
+      onPublicId: onPublicId,
+      onQueuesEnd: onQueuesEnd,
+      onQueuesStart: onQueuesStart,
+      onRetry: onRetry,
+      onShowCompleted: onShowCompleted,
+      onSourceChanged: onSourceChanged,
+      onSuccess: onSuccess,
+      onTags: onTags,
+      onUploadAdded: onUploadAdded,
+      options: options,
+      signatureEndpoint: signatureEndpoint,
+      uploadPreset: uploadPreset,
+      onAbortAction: onAbortAction,
+      onBatchCancelledAction: onBatchCancelledAction,
+      onCloseAction: onCloseAction,
+      onDisplayChangedAction: onDisplayChangedAction,
+      onPublicIdAction: onPublicIdAction,
+      onQueuesEndAction: onQueuesEndAction,
+      onQueuesStartAction: onQueuesStartAction,
+      onRetryAction: onRetryAction,
+      onShowCompletedAction: onShowCompletedAction,
+      onSourceChangedAction: onSourceChangedAction,
+      onSuccessAction: onSuccessAction,
+      onTagsAction: onTagsAction,
+      onUploadAddedAction: onUploadAddedAction,
+      children: ({
+        open,
+        isLoading
+      }) => {
+        function handleOnClick(e) {
+          e.preventDefault();
+          open();
+          if (typeof onClick === 'function') {
+            onClick(e);
+          }
+        }
+        return /*#__PURE__*/jsx("button", {
+          ...props,
+          className: className || '',
+          onClick: handleOnClick,
+          disabled: isLoading,
+          children: children || 'Upload'
+        });
+      }
+    })
+  });
+};
+
+export { CldUploadButton as default };

package/dist/CldUploadButton-db9b095b.cjs.js

@@ -0,0 +1,109 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+var CldUploadWidget = require('./CldUploadWidget-e39838cc.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var CldUploadWidget__default = /*#__PURE__*/_interopDefault(CldUploadWidget);
+
+const CldUploadButton = ({
+  className,
+  children,
+  onClick,
+  onError,
+  onOpen,
+  onUpload,
+  onAbort,
+  onBatchCancelled,
+  onClose,
+  onDisplayChanged,
+  onPublicId,
+  onQueuesEnd,
+  onQueuesStart,
+  onRetry,
+  onShowCompleted,
+  onSourceChanged,
+  onSuccess,
+  onTags,
+  onUploadAdded,
+  options,
+  signatureEndpoint,
+  uploadPreset,
+  onAbortAction,
+  onBatchCancelledAction,
+  onCloseAction,
+  onDisplayChangedAction,
+  onPublicIdAction,
+  onQueuesEndAction,
+  onQueuesStartAction,
+  onRetryAction,
+  onShowCompletedAction,
+  onSourceChangedAction,
+  onSuccessAction,
+  onTagsAction,
+  onUploadAddedAction,
+  ...props
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/jsxRuntime.jsx(CldUploadWidget__default["default"], {
+      onError: onError,
+      onOpen: onOpen,
+      onUpload: onUpload,
+      onAbort: onAbort,
+      onBatchCancelled: onBatchCancelled,
+      onClose: onClose,
+      onDisplayChanged: onDisplayChanged,
+      onPublicId: onPublicId,
+      onQueuesEnd: onQueuesEnd,
+      onQueuesStart: onQueuesStart,
+      onRetry: onRetry,
+      onShowCompleted: onShowCompleted,
+      onSourceChanged: onSourceChanged,
+      onSuccess: onSuccess,
+      onTags: onTags,
+      onUploadAdded: onUploadAdded,
+      options: options,
+      signatureEndpoint: signatureEndpoint,
+      uploadPreset: uploadPreset,
+      onAbortAction: onAbortAction,
+      onBatchCancelledAction: onBatchCancelledAction,
+      onCloseAction: onCloseAction,
+      onDisplayChangedAction: onDisplayChangedAction,
+      onPublicIdAction: onPublicIdAction,
+      onQueuesEndAction: onQueuesEndAction,
+      onQueuesStartAction: onQueuesStartAction,
+      onRetryAction: onRetryAction,
+      onShowCompletedAction: onShowCompletedAction,
+      onSourceChangedAction: onSourceChangedAction,
+      onSuccessAction: onSuccessAction,
+      onTagsAction: onTagsAction,
+      onUploadAddedAction: onUploadAddedAction,
+      children: ({
+        open,
+        isLoading
+      }) => {
+        function handleOnClick(e) {
+          e.preventDefault();
+          open();
+          if (typeof onClick === 'function') {
+            onClick(e);
+          }
+        }
+        return /*#__PURE__*/jsxRuntime.jsx("button", {
+          ...props,
+          className: className || '',
+          onClick: handleOnClick,
+          disabled: isLoading,
+          children: children || 'Upload'
+        });
+      }
+    })
+  });
+};
+
+exports["default"] = CldUploadButton;

package/dist/CldUploadWidget-a9c04a78.esm.js

@@ -0,0 +1,207 @@
+'use client';
+import { useRef, useState, useEffect } from 'react';
+import Script from 'next/script';
+import { generateSignatureCallback, getUploadWidgetOptions, generateUploadWidgetResultCallback, UPLOAD_WIDGET_EVENTS } from '@cloudinary-util/url-loader';
+import { g as getCloudinaryConfig } from './cloudinary-9437f0ad.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'next/package.json';
+
+/**
+ * triggerOnIdle
+ * @see MDN Polyfill https://github.com/behnammodi/polyfill/blob/master/window.polyfill.js#L7-L24
+ */
+
+function triggerOnIdle(callback) {
+  if (typeof window !== undefined && 'requestIdleCallback' in window) {
+    return requestIdleCallback(callback);
+  }
+  return setTimeout(() => callback(), 1);
+}
+
+const CldUploadWidget = ({
+  children,
+  config,
+  onError,
+  onOpen,
+  onUpload,
+  options,
+  signatureEndpoint,
+  uploadPreset,
+  ...props
+}) => {
+  const cloudinary = useRef();
+  const widget = useRef();
+  const [error, setError] = useState(undefined);
+  const [results, setResults] = useState(undefined);
+  const [isScriptLoading, setIsScriptLoading] = useState(true);
+
+  // 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 cloudinaryConfig = getCloudinaryConfig(config);
+  const uploadSignature = signatureEndpoint && generateSignatureCallback({
+    signatureEndpoint: String(signatureEndpoint),
+    fetch
+  });
+  const uploadOptions = getUploadWidgetOptions({
+    uploadPreset: uploadPreset || process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET,
+    uploadSignature,
+    ...options
+  }, cloudinaryConfig);
+  const resultsCallback = generateUploadWidgetResultCallback({
+    onError: uploadError => {
+      setError(uploadError);
+      if (typeof onError === 'function') {
+        onError(uploadError, {
+          widget: widget.current,
+          ...instanceMethods
+        });
+      }
+    },
+    onResult: uploadResult => {
+      if (typeof uploadResult?.event !== 'string') return;
+      setResults(uploadResult);
+      const widgetEvent = UPLOAD_WIDGET_EVENTS[uploadResult.event];
+      if (typeof widgetEvent === 'string' && typeof props[widgetEvent] === 'function') {
+        const callback = props[widgetEvent];
+        callback(uploadResult, {
+          widget: widget.current,
+          ...instanceMethods
+        });
+      }
+      const widgetEventAction = `${widgetEvent}Action`;
+      if (widgetEventAction && typeof props[widgetEventAction] === 'function') {
+        const action = props[widgetEventAction];
+        action(uploadResult);
+      }
+    }
+  });
+
+  // Handle result states and callbacks
+
+  useEffect(() => {
+    if (typeof results === 'undefined') return;
+    const isSuccess = results.event === 'success';
+    if (isSuccess && typeof onUpload === 'function') {
+      if (process.env.NODE_ENVIRONMENT === 'development') {
+        console.warn('The onUpload callback is deprecated. Please use onSuccess instead.');
+      }
+      onUpload(results, widget.current);
+    }
+  }, [results]);
+
+  /**
+   * handleOnLoad
+   * @description Stores the Cloudinary window instance to a ref when the widget script loads
+   */
+
+  function handleOnLoad() {
+    setIsScriptLoading(false);
+    if (!cloudinary.current) {
+      cloudinary.current = window.cloudinary;
+    }
+
+    // To help improve load time of the widget on first instance, use requestIdleCallback
+    // to trigger widget creation. Optional.
+
+    triggerOnIdle(() => {
+      if (!widget.current) {
+        widget.current = createWidget();
+      }
+    });
+  }
+  useEffect(() => {
+    return () => {
+      widget.current?.destroy();
+      widget.current = undefined;
+    };
+  }, []);
+
+  /**
+   * Instance Methods
+   * Gives the ability to interface directly with the Upload Widget instance methods like open and close
+   * https://cloudinary.com/documentation/upload_widget_reference#instance_methods
+   */
+
+  function invokeInstanceMethod(method, options = []) {
+    if (!widget.current) {
+      widget.current = createWidget();
+    }
+    if (typeof widget?.current[method] === "function") {
+      return widget.current[method](...options);
+    }
+  }
+  function close(options) {
+    invokeInstanceMethod('close', [options]);
+  }
+  function destroy(options) {
+    return invokeInstanceMethod('destroy', [options]);
+  }
+  function hide() {
+    invokeInstanceMethod('hide');
+  }
+  function isDestroyed() {
+    return invokeInstanceMethod('isDestroyed');
+  }
+  function isMinimized() {
+    return invokeInstanceMethod('isMinimized');
+  }
+  function isShowing() {
+    return invokeInstanceMethod('isShowing');
+  }
+  function minimize() {
+    invokeInstanceMethod('minimize');
+  }
+  function open(widgetSource, options) {
+    invokeInstanceMethod('open', [widgetSource, options]);
+    if (typeof onOpen === 'function') {
+      onOpen(widget.current);
+    }
+  }
+  function show() {
+    invokeInstanceMethod('show');
+  }
+  function update() {
+    invokeInstanceMethod('update');
+  }
+  const instanceMethods = {
+    close,
+    destroy,
+    hide,
+    isDestroyed,
+    isMinimized,
+    isShowing,
+    minimize,
+    open,
+    show,
+    update
+  };
+
+  /**
+   * createWidget
+   * @description Creates a new instance of the Cloudinary widget and stores in a ref
+   */
+
+  function createWidget() {
+    return cloudinary.current?.createUploadWidget(uploadOptions, resultsCallback);
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [typeof children === 'function' && children({
+      cloudinary: cloudinary.current,
+      widget: widget.current,
+      results,
+      error,
+      isLoading: isScriptLoading,
+      ...instanceMethods
+    }), /*#__PURE__*/jsx(Script, {
+      id: `cloudinary-uploadwidget-${Math.floor(Math.random() * 100)}`,
+      src: "https://upload-widget.cloudinary.com/global/all.js",
+      onLoad: handleOnLoad,
+      onError: e => console.error(`Failed to load Cloudinary Upload Widget: ${e.message}`)
+    })]
+  });
+};
+
+export { CldUploadWidget as default };