next-cloudinary 1.10.0 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,7 @@
1
1
  import { useState, useRef } from 'react';
2
2
  import Image from 'next/image';
3
3
  import { Cloudinary } from '@cloudinary/url-gen';
4
+ import nextPkg from 'next/package.json';
4
5
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
5
6
  import Head from 'next/head';
6
7
  import Script from 'next/script';
@@ -868,8 +869,56 @@ var zoompanPlugin = {
868
869
  plugin: plugin
869
870
  };
870
871
 
871
- /**
872
- * pollForProcessingImage
872
+ var NEXT_CLOUDINARY_ANALYTICS_ID = 'V';
873
+
874
+ var name = "next-cloudinary";
875
+ var version = "1.12.0";
876
+ var main = "dist/next-cloudinary.umd.js";
877
+ var module = "dist/next-cloudinary.module.js";
878
+ var source = "src/index.ts";
879
+ var types = "dist/index.d.ts";
880
+ var scripts = {
881
+ build: "microbundle --no-compress --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react",
882
+ dev: "microbundle watch --no-compress --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react",
883
+ prepublishOnly: "cp ../README.md . && yarn build",
884
+ postpublish: "rm ./README.md",
885
+ test: "jest"
886
+ };
887
+ var dependencies = {
888
+ "@cloudinary/url-gen": "^1.8.6"
889
+ };
890
+ var devDependencies = {
891
+ "@babel/core": "^7.19.6",
892
+ "@babel/preset-env": "^7.19.4",
893
+ "@types/jest": "^29.2.0",
894
+ "babel-jest": "^29.2.2",
895
+ dotenv: "^16.0.3",
896
+ jest: "^29.2.2",
897
+ "jest-environment-jsdom": "^29.2.2",
898
+ microbundle: "^0.15.1",
899
+ "ts-jest": "^29.0.3",
900
+ typescript: "^4.9.4"
901
+ };
902
+ var peerDependencies = {
903
+ next: "^12 || ^13",
904
+ react: "^17 || ^18"
905
+ };
906
+ var pkg = {
907
+ name: name,
908
+ version: version,
909
+ main: main,
910
+ module: module,
911
+ "umd:main": "dist/next-cloudinary.umd.js",
912
+ source: source,
913
+ types: types,
914
+ scripts: scripts,
915
+ dependencies: dependencies,
916
+ devDependencies: devDependencies,
917
+ peerDependencies: peerDependencies
918
+ };
919
+
920
+ /**
921
+ * pollForProcessingImage
873
922
  */
874
923
 
875
924
  function _catch(body, recover) {
@@ -925,14 +974,11 @@ var transformationPlugins = [
925
974
  removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, namedTransformationsPlugin, underlaysPlugin, zoompanPlugin,
926
975
  // Raw transformations needs to be last simply to make sure
927
976
  // it's always expected to applied the same way
928
-
929
977
  rawTransformationsPlugin];
930
978
  var cld;
931
-
932
- /**
933
- * constructCloudinaryUrl
979
+ /**
980
+ * constructCloudinaryUrl
934
981
  */
935
-
936
982
  function constructCloudinaryUrl(_ref) {
937
983
  var options = _ref.options,
938
984
  config = _ref.config;
@@ -940,50 +986,51 @@ function constructCloudinaryUrl(_ref) {
940
986
  cld = new Cloudinary(_extends({
941
987
  cloud: {
942
988
  cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
943
- },
944
- url: {
945
- // Used to avoid issues with SSR particularly for the blurred placeholder
946
- analytics: false
947
989
  }
948
990
  }, config));
949
991
  }
950
- var publicId = getPublicId(options.src);
992
+ var publicId = getPublicId(options == null ? void 0 : options.src);
951
993
  var cldImage = cld.image(publicId);
952
994
  transformationPlugins.forEach(function (_ref2) {
953
995
  var plugin = _ref2.plugin;
996
+ // @ts-ignore
954
997
  var _ref3 = plugin({
955
998
  cldImage: cldImage,
956
999
  options: options
957
1000
  }) || {},
958
1001
  pluginOptions = _ref3.options;
959
- if (pluginOptions != null && pluginOptions.format) {
1002
+ if (pluginOptions != null && pluginOptions.format && options) {
960
1003
  options.format = pluginOptions.format;
961
1004
  }
962
- if (pluginOptions != null && pluginOptions.width) {
1005
+ if (pluginOptions != null && pluginOptions.width && options) {
963
1006
  options.resize = {
964
1007
  width: pluginOptions == null ? void 0 : pluginOptions.width
965
1008
  };
966
1009
  }
967
1010
  });
968
- if (options.resize) {
1011
+ if (options != null && options.resize) {
969
1012
  var _options$resize = options.resize,
970
1013
  width = _options$resize.width,
971
1014
  _options$resize$crop = _options$resize.crop,
972
1015
  crop = _options$resize$crop === void 0 ? 'scale' : _options$resize$crop;
973
1016
  cldImage.effect("c_" + crop + ",w_" + width);
974
1017
  }
975
- return cldImage.setDeliveryType(options.deliveryType || 'upload').format(options.format || 'auto').delivery("q_" + (options.quality || 'auto')).toURL();
1018
+ 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({
1019
+ trackedAnalytics: {
1020
+ sdkCode: NEXT_CLOUDINARY_ANALYTICS_ID,
1021
+ sdkSemver: pkg.version,
1022
+ techVersion: nextPkg.version
1023
+ }
1024
+ });
976
1025
  }
977
-
978
- /**
979
- * Retrieves the public id of a cloudiary image url. If no url is recognized it returns the parameter it self.
980
- * If it's recognized that is a url and it's not possible to get the public id, it warns the user.
981
- *
982
- * @param {string} src The cloudiary url or public id.
983
- *
984
- * @return {string} The images public id
1026
+ /**
1027
+ * Retrieves the public id of a cloudiary image url. If no url is recognized it returns the parameter it self.
1028
+ * If it's recognized that is a url and it's not possible to get the public id, it warns the user.
1029
+ *
1030
+ * @param {string} src The cloudiary url or public id.
1031
+ *
1032
+ * @return {string} The images public id
985
1033
  */
986
-
987
1034
  function getPublicId(src) {
988
1035
  if (typeof src !== 'string') {
989
1036
  throw new Error("Invalid src of type " + typeof src);
@@ -1003,11 +1050,9 @@ function getPublicId(src) {
1003
1050
  }
1004
1051
  return src;
1005
1052
  }
1006
-
1007
- /**
1008
- * createPlaceholderUrl
1053
+ /**
1054
+ * createPlaceholderUrl
1009
1055
  */
1010
-
1011
1056
  function createPlaceholderUrl(_ref4) {
1012
1057
  var src = _ref4.src,
1013
1058
  _ref4$placeholder = _ref4.placeholder,
@@ -1060,8 +1105,8 @@ function cloudinaryLoader(_ref) {
1060
1105
  }
1061
1106
 
1062
1107
  var CldImage = function CldImage(props) {
1063
- /**
1064
- * handleOnError
1108
+ /**
1109
+ * handleOnError
1065
1110
  */
1066
1111
  var handleOnError = function handleOnError(options) {
1067
1112
  try {
@@ -1087,10 +1132,11 @@ var CldImage = function CldImage(props) {
1087
1132
  CLD_OPTIONS.push(prop);
1088
1133
  });
1089
1134
  });
1090
-
1091
1135
  // Construct the base Image component props by filtering out Cloudinary-specific props
1092
-
1093
- var imageProps = {};
1136
+ var imageProps = {
1137
+ alt: props.alt,
1138
+ src: props.src
1139
+ };
1094
1140
  Object.keys(props).filter(function (key) {
1095
1141
  return !CLD_OPTIONS.includes(key);
1096
1142
  }).forEach(function (key) {
@@ -1102,16 +1148,13 @@ var CldImage = function CldImage(props) {
1102
1148
  var _useState = useState(defaultImgKey),
1103
1149
  imgKey = _useState[0],
1104
1150
  setImgKey = _useState[1];
1105
-
1106
1151
  // Construct Cloudinary-specific props by looking for values for any of the supported prop keys
1107
-
1108
1152
  var cldOptions = {};
1109
1153
  CLD_OPTIONS.forEach(function (key) {
1110
1154
  if (props[key]) {
1111
1155
  cldOptions[key] = props[key];
1112
1156
  }
1113
1157
  });
1114
-
1115
1158
  // If we see a placeholder option, configure a Cloudinary-based URL.
1116
1159
  // The resulting image will always be blurred per Next.js, so we're
1117
1160
  // limited on options for placeholders.
@@ -1120,7 +1163,6 @@ var CldImage = function CldImage(props) {
1120
1163
  // an Image component prop as opposed to simply the URL
1121
1164
  //
1122
1165
  // https://nextjs.org/docs/api-reference/next/image#blurdataurl
1123
-
1124
1166
  if (imageProps.placeholder) {
1125
1167
  var publicId = getPublicId(props.src);
1126
1168
  imageProps.blurDataURL = createPlaceholderUrl({
@@ -1133,7 +1175,8 @@ var CldImage = function CldImage(props) {
1133
1175
  }
1134
1176
  if (props.src && props.preserveTransformations) {
1135
1177
  var transformations = getTransformations(props.src, props.preserveTransformations);
1136
- imageProps.rawTransformations = [].concat(imageProps.rawTransformations, transformations);
1178
+ var rawTransformations = imageProps.rawTransformations ? [].concat(imageProps.rawTransformations) : [];
1179
+ imageProps.rawTransformations = [].concat(rawTransformations, transformations);
1137
1180
  }
1138
1181
  return /*#__PURE__*/jsx(Image, _extends({}, imageProps, {
1139
1182
  loader: function loader(loaderOptions) {
@@ -1160,15 +1203,14 @@ var CldOgImage = function CldOgImage(_ref) {
1160
1203
  width: props.width || IMAGE_WIDTH,
1161
1204
  height: props.height || IMAGE_HEIGHT,
1162
1205
  crop: props.crop || 'fill',
1163
- gravity: props.gravity || 'center'
1206
+ gravity: props.gravity || 'center',
1207
+ alt: props.alt
1164
1208
  });
1165
1209
  var ogImageUrl = constructCloudinaryUrl({
1166
1210
  options: options
1167
1211
  });
1168
-
1169
1212
  // We need to include the tags within the Next.js Head component rather than
1170
1213
  // direcly adding them inside of the Head otherwise we get unexpected results
1171
-
1172
1214
  return /*#__PURE__*/jsxs(Head, {
1173
1215
  children: [/*#__PURE__*/jsx("meta", {
1174
1216
  property: "og:image",
@@ -1207,12 +1249,10 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
1207
1249
  var cloudinary = useRef();
1208
1250
  var widget = useRef();
1209
1251
  var signed = !!signatureEndpoint;
1210
-
1211
- /**
1212
- * generateSignature
1213
- * @description Makes a request to an endpoint to sign Cloudinary parameters as part of widget creation
1252
+ /**
1253
+ * generateSignature
1254
+ * @description Makes a request to an endpoint to sign Cloudinary parameters as part of widget creation
1214
1255
  */
1215
-
1216
1256
  function generateSignature(callback, paramsToSign) {
1217
1257
  fetch(signatureEndpoint, {
1218
1258
  method: "POST",
@@ -1226,19 +1266,16 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
1226
1266
  callback(signature);
1227
1267
  });
1228
1268
  }
1229
-
1230
- /**
1231
- * createWidget
1232
- * @description Creates a new instance of the Cloudinary widget and stores in a ref
1269
+ /**
1270
+ * createWidget
1271
+ * @description Creates a new instance of the Cloudinary widget and stores in a ref
1233
1272
  */
1234
-
1235
1273
  function createWidget() {
1236
1274
  var _cloudinary$current;
1237
1275
  // When creating a signed upload, you need to provide both your Cloudinary API Key
1238
1276
  // as well as a signature generator function that will sign any paramters
1239
1277
  // either on page load or during the upload process. Read more about signed uploads at:
1240
1278
  // https://cloudinary.com/documentation/upload_widget#signed_uploads
1241
-
1242
1279
  var uploadOptions = _extends({
1243
1280
  cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
1244
1281
  uploadPreset: uploadPreset || process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET,
@@ -1246,13 +1283,12 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
1246
1283
  }, options);
1247
1284
  if (signed) {
1248
1285
  uploadOptions.uploadSignature = generateSignature;
1249
-
1250
1286
  // No need for apiSecret here because of api/sign-cloudinary-params
1251
-
1252
1287
  if (!uploadOptions.apiKey) {
1253
1288
  return new Error("Signed Upload needs apiKey!");
1254
1289
  }
1255
1290
  }
1291
+ // @ts-ignore
1256
1292
  return (_cloudinary$current = cloudinary.current) == null ? void 0 : _cloudinary$current.createUploadWidget(uploadOptions, function (error, result) {
1257
1293
  // The callback is a bit more chatty than failed or success so
1258
1294
  // only trigger when one of those are the case. You can additionally
@@ -1263,25 +1299,23 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
1263
1299
  }
1264
1300
  });
1265
1301
  }
1266
-
1267
- /**
1268
- * open
1269
- * @description When triggered, uses the current widget instance to open the upload modal
1302
+ /**
1303
+ * open
1304
+ * @description When triggered, uses the current widget instance to open the upload modal
1270
1305
  */
1271
-
1272
1306
  function open() {
1273
1307
  if (!(widget != null && widget.current)) {
1274
1308
  widget.current = createWidget();
1275
1309
  }
1310
+ // @ts-ignore
1276
1311
  (widget == null ? void 0 : widget.current) && widget.current.open();
1277
1312
  }
1278
-
1279
- /**
1280
- * handleOnLoad
1281
- * @description Stores the Cloudinary window instance to a ref when the widget script loads
1313
+ /**
1314
+ * handleOnLoad
1315
+ * @description Stores the Cloudinary window instance to a ref when the widget script loads
1282
1316
  */
1283
-
1284
1317
  function handleOnLoad() {
1318
+ // @ts-ignore
1285
1319
  cloudinary.current = window.cloudinary;
1286
1320
  }
1287
1321
  return /*#__PURE__*/jsxs(Fragment, {