next-cloudinary 2.2.0 → 2.3.0

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+import { ImageProps } from 'next/image';
+
+interface CldImageProps extends Omit<ImageProps, 'src'> {
+    src: string;
+    preserveTransformations?: boolean;
+    rawTransformations?: Array<string>;
+}
+declare const CldImage: (props: CldImageProps) => JSX.Element;
+
+interface CldOgImageProps {
+    alt: string;
+    crop?: string;
+    excludeTags?: Array<string>;
+    gravity?: string;
+    height: string | number;
+    src: string;
+    twitterTitle?: string;
+    width: string | number;
+}
+declare const CldOgImage: ({ excludeTags, twitterTitle, ...props }: CldOgImageProps) => JSX.Element;
+
+interface CldUploadWidgetPropsOptions {
+    uploadSignature?: Function;
+}
+interface CldUploadWidgetPropsChildren {
+    cloudinary: any;
+    widget: any;
+    open: Function;
+}
+interface CldUploadWidgetProps {
+    children?: ({ cloudinary, widget, open }: CldUploadWidgetPropsChildren) => JSX.Element;
+    onUpload?: Function;
+    options?: CldUploadWidgetPropsOptions;
+    signatureEndpoint?: URL | RequestInfo;
+    uploadPreset?: string;
+}
+declare const CldUploadWidget: ({ children, onUpload, options, signatureEndpoint, uploadPreset, }: CldUploadWidgetProps) => JSX.Element;
+
+interface CldUploadButtonProps extends Omit<CldUploadWidgetProps, 'children'> {
+    children?: JSX.Element | string | Array<JSX.Element | string>;
+    onClick?: Function;
+}
+declare const CldUploadButton: ({ children, onClick, onUpload, options, signatureEndpoint, uploadPreset, ...props }: CldUploadButtonProps) => JSX.Element;
+
+interface CloudinaryLoaderCldOptions {
+    heightResize?: string | number;
+    widthResize?: string | number;
+}
+interface CloudinaryLoaderLoaderOptions {
+    height?: string | number;
+    width?: string | number;
+}
+interface CloudinaryLoader {
+    loaderOptions: CloudinaryLoaderLoaderOptions;
+    imageProps: ImageProps;
+    cldOptions: CloudinaryLoaderCldOptions;
+    cldConfig?: object;
+}
+declare function cloudinaryLoader({ loaderOptions, imageProps, cldOptions, cldConfig }: CloudinaryLoader): string;
+
+export { CldImage, CldImageProps, CldOgImage, CldOgImageProps, CldUploadButton, CldUploadButtonProps, CldUploadWidget, CldUploadWidgetProps, CldUploadWidgetPropsOptions, CloudinaryLoader, CloudinaryLoaderCldOptions, CloudinaryLoaderLoaderOptions, cloudinaryLoader };

package/dist/index.js

@@ -0,0 +1,438 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CldImage: () => CldImage_default,
+  CldOgImage: () => CldOgImage_default,
+  CldUploadButton: () => CldUploadButton_default,
+  CldUploadWidget: () => CldUploadWidget_default,
+  cloudinaryLoader: () => cloudinaryLoader
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/CldImage/CldImage.tsx
+var import_react = require("react");
+var import_image = __toESM(require("next/image"));
+var import_util = require("@cloudinary-util/util");
+var import_url_loader2 = require("@cloudinary-util/url-loader");
+
+// src/lib/cloudinary.ts
+function pollForProcessingImage(options) {
+  return __async(this, null, function* () {
+    const { src } = options;
+    try {
+      yield new Promise((resolve, reject) => {
+        fetch(src).then((res) => {
+          if (!res.ok) {
+            reject(res);
+            return;
+          }
+          resolve(res);
+        });
+      });
+    } catch (e) {
+      if (e.status === 423) {
+        return yield pollForProcessingImage(options);
+      }
+      return false;
+    }
+    return true;
+  });
+}
+
+// src/loaders/cloudinary-loader.ts
+var import_url_loader = require("@cloudinary-util/url-loader");
+
+// src/constants/analytics.ts
+var import_package = __toESM(require("next/package.json"));
+
+// package.json
+var package_default = {
+  name: "next-cloudinary",
+  version: "2.3.0",
+  main: "./dist/index.js",
+  module: "./dist/index.mjs",
+  types: "./dist/index.d.ts",
+  source: "src/index.ts",
+  scripts: {
+    build: "tsup src/index.ts --format esm,cjs --dts --external react",
+    dev: "tsup src/index.ts --format esm,cjs --watch --dts --external react",
+    prepublishOnly: "cp ../README.md . && yarn build",
+    postpublish: "rm ./README.md",
+    test: "jest"
+  },
+  dependencies: {
+    "@cloudinary-util/url-loader": "^1.3.0",
+    "@cloudinary-util/util": "^1.2.0",
+    "@cloudinary/url-gen": "^1.8.6"
+  },
+  devDependencies: {
+    "@babel/core": "^7.19.6",
+    "@babel/preset-env": "^7.19.4",
+    "@types/jest": "^29.2.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "babel-jest": "^29.2.2",
+    dotenv: "^16.0.3",
+    jest: "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
+    "ts-jest": "^29.0.3",
+    tsup: "^6.6.3",
+    typescript: "^4.9.4"
+  },
+  peerDependencies: {
+    next: "^12 || ^13",
+    react: "^17 || ^18"
+  }
+};
+
+// src/constants/analytics.ts
+var NEXT_CLOUDINARY_ANALYTICS_ID = "V";
+var NEXT_CLOUDINARY_VERSION = package_default.version;
+var NEXT_VERSION = import_package.default.version;
+
+// src/loaders/cloudinary-loader.ts
+function cloudinaryLoader({ loaderOptions, imageProps, cldOptions, cldConfig = {} }) {
+  const options = __spreadValues(__spreadValues({}, imageProps), cldOptions);
+  options.width = typeof options.width === "string" ? parseInt(options.width) : options.width;
+  options.height = typeof options.height === "string" ? parseInt(options.height) : options.height;
+  if (typeof (loaderOptions == null ? void 0 : loaderOptions.width) === "number" && typeof options.width === "number" && loaderOptions.width !== options.width) {
+    const multiplier = loaderOptions.width / options.width;
+    options.widthResize = loaderOptions.width;
+    if (typeof options.height === "number") {
+      options.heightResize = Math.round(options.height * multiplier);
+    }
+  }
+  return (0, import_url_loader.constructCloudinaryUrl)({
+    // @ts-expect-error
+    options,
+    config: __spreadValues({
+      cloud: {
+        cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
+      }
+    }, cldConfig),
+    analytics: {
+      sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
+      sdkSemver: NEXT_CLOUDINARY_VERSION,
+      techVersion: NEXT_VERSION,
+      feature: ""
+    }
+  });
+}
+
+// src/components/CldImage/CldImage.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+"use client";
+var CldImage = (props) => {
+  const CLD_OPTIONS = [
+    "deliveryType",
+    "preserveTransformations"
+  ];
+  import_url_loader2.transformationPlugins.forEach(({ props: props2 = [] }) => {
+    props2.forEach((prop) => {
+      if (CLD_OPTIONS.includes(prop)) {
+        throw new Error(`Option ${prop} already exists!`);
+      }
+      CLD_OPTIONS.push(prop);
+    });
+  });
+  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] = (0, import_react.useState)(defaultImgKey);
+  const cldOptions = {};
+  CLD_OPTIONS.forEach((key) => {
+    if (props[key]) {
+      cldOptions[key] = props[key] || void 0;
+    }
+  });
+  if (props.preserveTransformations) {
+    try {
+      const transformations = (0, import_util.getTransformations)(props.src);
+      cldOptions.rawTransformations = [...transformations.flat(), ...props.rawTransformations || []];
+    } catch (e) {
+      console.warn(`Failed to preserve transformations: ${e.message}`);
+    }
+  }
+  function handleOnError(options) {
+    return __async(this, null, function* () {
+      const result = yield pollForProcessingImage({ src: options.target.src });
+      if (result) {
+        setImgKey(`${defaultImgKey};${Date.now()}`);
+      }
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_image.default,
+    __spreadProps(__spreadValues({}, imageProps), {
+      loader: (loaderOptions) => cloudinaryLoader({ loaderOptions, imageProps, cldOptions }),
+      onError: handleOnError
+    }),
+    imgKey
+  );
+};
+var CldImage_default = CldImage;
+
+// src/components/CldOgImage/CldOgImage.tsx
+var import_head = __toESM(require("next/head"));
+var import_url_loader3 = require("@cloudinary-util/url-loader");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var IMAGE_WIDTH = 2400;
+var IMAGE_HEIGHT = 1200;
+var TWITTER_CARD = "summary_large_image";
+var CldOgImage = (_a) => {
+  var _b = _a, { excludeTags = [], twitterTitle } = _b, props = __objRest(_b, ["excludeTags", "twitterTitle"]);
+  const options = __spreadProps(__spreadValues({}, props), {
+    alt: props.alt,
+    crop: props.crop || "fill",
+    gravity: props.gravity || "center",
+    height: props.height || IMAGE_HEIGHT,
+    src: props.src,
+    width: props.width || IMAGE_WIDTH
+  });
+  const ogImageUrl = (0, import_url_loader3.constructCloudinaryUrl)({
+    options,
+    config: {
+      cloud: {
+        cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
+      }
+    },
+    analytics: {
+      sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
+      sdkSemver: NEXT_CLOUDINARY_VERSION,
+      techVersion: NEXT_VERSION,
+      feature: ""
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_head.default, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meta", { property: "og:image", content: ogImageUrl }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meta", { property: "og:image:secure_url", content: ogImageUrl }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meta", { property: "og:image:width", content: `${options.width}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meta", { property: "og:image:height", content: `${options.height}` }),
+    options.alt && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meta", { property: "og:image:alt", content: options.alt }),
+    !excludeTags.includes("twitter:title") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meta", { property: "twitter:title", content: twitterTitle || " " }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meta", { property: "twitter:card", content: TWITTER_CARD }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("meta", { property: "twitter:image", content: ogImageUrl })
+  ] });
+};
+var CldOgImage_default = CldOgImage;
+
+// src/components/CldUploadWidget/CldUploadWidget.tsx
+var import_script = __toESM(require("next/script"));
+
+// src/lib/util.ts
+function triggerOnIdle(callback) {
+  if (window && "requestIdleCallback" in window) {
+    return requestIdleCallback(callback);
+  }
+  return setTimeout(() => callback(), 1);
+}
+
+// src/components/CldUploadWidget/CldUploadWidget.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var cloudinary;
+var widget;
+var CldUploadWidget = ({
+  children,
+  onUpload,
+  options,
+  signatureEndpoint,
+  uploadPreset
+}) => {
+  const signed = !!signatureEndpoint;
+  function handleOnLoad() {
+    if (!cloudinary) {
+      cloudinary = window.cloudinary;
+    }
+    triggerOnIdle(() => {
+      if (!widget) {
+        widget = createWidget();
+      }
+    });
+  }
+  function generateSignature(callback, paramsToSign) {
+    if (typeof signatureEndpoint === "undefined") {
+      throw Error("Failed to generate signature: signatureEndpoint undefined.");
+    }
+    fetch(signatureEndpoint, {
+      method: "POST",
+      body: JSON.stringify({
+        paramsToSign
+      })
+    }).then((r) => r.json()).then(({ signature }) => {
+      callback(signature);
+    });
+  }
+  function createWidget() {
+    const uploadOptions = __spreadValues({
+      cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
+      uploadPreset: uploadPreset || process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET,
+      apiKey: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY
+    }, options);
+    if (signed) {
+      uploadOptions.uploadSignature = generateSignature;
+      if (!uploadOptions.apiKey) {
+        return new Error("Signed Upload needs apiKey!");
+      }
+    }
+    return cloudinary == null ? void 0 : cloudinary.createUploadWidget(
+      uploadOptions,
+      function(error, result) {
+        if ((error || result.event === "success") && typeof onUpload === "function") {
+          onUpload(error, result, widget);
+        }
+      }
+    );
+  }
+  function open() {
+    if (!widget) {
+      widget = createWidget();
+    }
+    widget && widget.open();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    typeof children === "function" && children({
+      cloudinary,
+      widget,
+      open
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_script.default,
+      {
+        id: `cloudinary-${Math.floor(Math.random() * 100)}`,
+        src: "https://widget.cloudinary.com/v2.0/global/all.js",
+        onLoad: handleOnLoad,
+        onError: (e) => console.error(`Failed to load Cloudinary: ${e.message}`)
+      }
+    )
+  ] });
+};
+var CldUploadWidget_default = CldUploadWidget;
+
+// src/components/CldUploadButton/CldUploadButton.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CldUploadButton = (_a) => {
+  var _b = _a, {
+    children,
+    onClick,
+    onUpload,
+    options,
+    signatureEndpoint,
+    uploadPreset
+  } = _b, props = __objRest(_b, [
+    "children",
+    "onClick",
+    "onUpload",
+    "options",
+    "signatureEndpoint",
+    "uploadPreset"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    CldUploadWidget_default,
+    {
+      onUpload,
+      options,
+      signatureEndpoint,
+      uploadPreset,
+      children: ({ open }) => {
+        function handleOnClick(e) {
+          e.preventDefault();
+          open();
+          if (typeof onClick === "function") {
+            onClick(e);
+          }
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", __spreadProps(__spreadValues({}, props), { onClick: handleOnClick, children: children || "Upload" }));
+      }
+    }
+  ) });
+};
+var CldUploadButton_default = CldUploadButton;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CldImage,
+  CldOgImage,
+  CldUploadButton,
+  CldUploadWidget,
+  cloudinaryLoader
+});