next-cloudinary 2.1.2 → 2.3.0

package/dist/index.mjs

@@ -0,0 +1,400 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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 __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/components/CldImage/CldImage.tsx
+import { useState } from "react";
+import Image from "next/image";
+import { getTransformations } from "@cloudinary-util/util";
+import { transformationPlugins } from "@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
+import { constructCloudinaryUrl } from "@cloudinary-util/url-loader";
+
+// src/constants/analytics.ts
+import nextPkg from "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 = nextPkg.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 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
+import { jsx } from "react/jsx-runtime";
+"use client";
+var CldImage = (props) => {
+  const CLD_OPTIONS = [
+    "deliveryType",
+    "preserveTransformations"
+  ];
+  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] = useState(defaultImgKey);
+  const cldOptions = {};
+  CLD_OPTIONS.forEach((key) => {
+    if (props[key]) {
+      cldOptions[key] = props[key] || void 0;
+    }
+  });
+  if (props.preserveTransformations) {
+    try {
+      const transformations = 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__ */ jsx(
+    Image,
+    __spreadProps(__spreadValues({}, imageProps), {
+      loader: (loaderOptions) => cloudinaryLoader({ loaderOptions, imageProps, cldOptions }),
+      onError: handleOnError
+    }),
+    imgKey
+  );
+};
+var CldImage_default = CldImage;
+
+// src/components/CldOgImage/CldOgImage.tsx
+import Head from "next/head";
+import { constructCloudinaryUrl as constructCloudinaryUrl2 } from "@cloudinary-util/url-loader";
+import { jsx as jsx2, jsxs } from "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 = constructCloudinaryUrl2({
+    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__ */ jsxs(Head, { children: [
+    /* @__PURE__ */ jsx2("meta", { property: "og:image", content: ogImageUrl }),
+    /* @__PURE__ */ jsx2("meta", { property: "og:image:secure_url", content: ogImageUrl }),
+    /* @__PURE__ */ jsx2("meta", { property: "og:image:width", content: `${options.width}` }),
+    /* @__PURE__ */ jsx2("meta", { property: "og:image:height", content: `${options.height}` }),
+    options.alt && /* @__PURE__ */ jsx2("meta", { property: "og:image:alt", content: options.alt }),
+    !excludeTags.includes("twitter:title") && /* @__PURE__ */ jsx2("meta", { property: "twitter:title", content: twitterTitle || " " }),
+    /* @__PURE__ */ jsx2("meta", { property: "twitter:card", content: TWITTER_CARD }),
+    /* @__PURE__ */ jsx2("meta", { property: "twitter:image", content: ogImageUrl })
+  ] });
+};
+var CldOgImage_default = CldOgImage;
+
+// src/components/CldUploadWidget/CldUploadWidget.tsx
+import Script from "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
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "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__ */ jsxs2(Fragment, { children: [
+    typeof children === "function" && children({
+      cloudinary,
+      widget,
+      open
+    }),
+    /* @__PURE__ */ jsx3(
+      Script,
+      {
+        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
+import { Fragment as Fragment2, jsx as jsx4 } from "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__ */ jsx4(Fragment2, { children: /* @__PURE__ */ jsx4(
+    CldUploadWidget_default,
+    {
+      onUpload,
+      options,
+      signatureEndpoint,
+      uploadPreset,
+      children: ({ open }) => {
+        function handleOnClick(e) {
+          e.preventDefault();
+          open();
+          if (typeof onClick === "function") {
+            onClick(e);
+          }
+        }
+        return /* @__PURE__ */ jsx4("button", __spreadProps(__spreadValues({}, props), { onClick: handleOnClick, children: children || "Upload" }));
+      }
+    }
+  ) });
+};
+var CldUploadButton_default = CldUploadButton;
+export {
+  CldImage_default as CldImage,
+  CldOgImage_default as CldOgImage,
+  CldUploadButton_default as CldUploadButton,
+  CldUploadWidget_default as CldUploadWidget,
+  cloudinaryLoader
+};

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "next-cloudinary",
-  "version": "2.1.2",
-  "main": "dist/next-cloudinary.umd.js",
-  "module": "dist/next-cloudinary.module.js",
-  "umd:main": "dist/next-cloudinary.umd.js",
+  "version": "2.3.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "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",
+    "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.2.8",
+    "@cloudinary-util/url-loader": "^1.3.0",
     "@cloudinary-util/util": "^1.2.0",
     "@cloudinary/url-gen": "^1.8.6"
   },
@@ -21,12 +21,14 @@
     "@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",
-    "microbundle": "^0.15.1",
     "ts-jest": "^29.0.3",
+    "tsup": "^6.6.3",
     "typescript": "^4.9.4"
   },
   "peerDependencies": {

package/tsconfig.json

@@ -1,30 +1,36 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
-  "display": "Next.js",
+  "display": "Next Cloudinary",
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitAny": false,
+    "target": "es6",
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
     "esModuleInterop": true,
-    "module": "esnext",
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "module": "ESNext",
     "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext",
+      "ES2015"
+    ],
     "plugins": [
       {
         "name": "next"
       }
     ],
-    "rootDir": ".",
-    "composite": true,
-    "declaration": true,
-    "declarationDir": "dist",
+    "jsx": "react-jsx"
+
   },
-  "include": ["./package.json", "src/**/*"],
+  "exclude": ["node_modules"]
 }