next-cloudinary 1.10.0 → 1.11.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.
- package/dist/components/CldImage/CldImage.d.ts +3 -0
- package/dist/components/CldOgImage/CldOgImage.d.ts +7 -0
- package/dist/components/CldUploadButton/CldUploadButton.d.ts +11 -0
- package/dist/components/CldUploadWidget/CldUploadWidget.d.ts +9 -0
- package/dist/index.d.ts +7 -0
- package/dist/lib/cloudinary.d.ts +45 -0
- package/dist/next-cloudinary.js +44 -61
- package/dist/next-cloudinary.js.map +1 -1
- package/dist/next-cloudinary.modern.mjs +44 -65
- package/dist/next-cloudinary.modern.mjs.map +1 -1
- package/dist/next-cloudinary.module.js +44 -61
- package/dist/next-cloudinary.module.js.map +1 -1
- package/dist/next-cloudinary.umd.js +44 -61
- package/dist/next-cloudinary.umd.js.map +1 -1
- package/package.json +6 -3
- package/tsconfig.json +26 -0
|
@@ -868,8 +868,8 @@ var zoompanPlugin = {
|
|
|
868
868
|
plugin: plugin
|
|
869
869
|
};
|
|
870
870
|
|
|
871
|
-
/**
|
|
872
|
-
* pollForProcessingImage
|
|
871
|
+
/**
|
|
872
|
+
* pollForProcessingImage
|
|
873
873
|
*/
|
|
874
874
|
|
|
875
875
|
function _catch(body, recover) {
|
|
@@ -925,14 +925,11 @@ var transformationPlugins = [
|
|
|
925
925
|
removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, namedTransformationsPlugin, underlaysPlugin, zoompanPlugin,
|
|
926
926
|
// Raw transformations needs to be last simply to make sure
|
|
927
927
|
// it's always expected to applied the same way
|
|
928
|
-
|
|
929
928
|
rawTransformationsPlugin];
|
|
930
929
|
var cld;
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
* constructCloudinaryUrl
|
|
930
|
+
/**
|
|
931
|
+
* constructCloudinaryUrl
|
|
934
932
|
*/
|
|
935
|
-
|
|
936
933
|
function constructCloudinaryUrl(_ref) {
|
|
937
934
|
var options = _ref.options,
|
|
938
935
|
config = _ref.config;
|
|
@@ -947,43 +944,42 @@ function constructCloudinaryUrl(_ref) {
|
|
|
947
944
|
}
|
|
948
945
|
}, config));
|
|
949
946
|
}
|
|
950
|
-
var publicId = getPublicId(options.src);
|
|
947
|
+
var publicId = getPublicId(options == null ? void 0 : options.src);
|
|
951
948
|
var cldImage = cld.image(publicId);
|
|
952
949
|
transformationPlugins.forEach(function (_ref2) {
|
|
953
950
|
var plugin = _ref2.plugin;
|
|
951
|
+
// @ts-ignore
|
|
954
952
|
var _ref3 = plugin({
|
|
955
953
|
cldImage: cldImage,
|
|
956
954
|
options: options
|
|
957
955
|
}) || {},
|
|
958
956
|
pluginOptions = _ref3.options;
|
|
959
|
-
if (pluginOptions != null && pluginOptions.format) {
|
|
957
|
+
if (pluginOptions != null && pluginOptions.format && options) {
|
|
960
958
|
options.format = pluginOptions.format;
|
|
961
959
|
}
|
|
962
|
-
if (pluginOptions != null && pluginOptions.width) {
|
|
960
|
+
if (pluginOptions != null && pluginOptions.width && options) {
|
|
963
961
|
options.resize = {
|
|
964
962
|
width: pluginOptions == null ? void 0 : pluginOptions.width
|
|
965
963
|
};
|
|
966
964
|
}
|
|
967
965
|
});
|
|
968
|
-
if (options.resize) {
|
|
966
|
+
if (options != null && options.resize) {
|
|
969
967
|
var _options$resize = options.resize,
|
|
970
968
|
width = _options$resize.width,
|
|
971
969
|
_options$resize$crop = _options$resize.crop,
|
|
972
970
|
crop = _options$resize$crop === void 0 ? 'scale' : _options$resize$crop;
|
|
973
971
|
cldImage.effect("c_" + crop + ",w_" + width);
|
|
974
972
|
}
|
|
975
|
-
return cldImage.setDeliveryType(options.deliveryType || 'upload').format(options.format || 'auto').delivery("q_" + (options.quality || 'auto')).toURL();
|
|
973
|
+
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();
|
|
976
974
|
}
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
*
|
|
980
|
-
*
|
|
981
|
-
*
|
|
982
|
-
*
|
|
983
|
-
*
|
|
984
|
-
* @return {string} The images public id
|
|
975
|
+
/**
|
|
976
|
+
* Retrieves the public id of a cloudiary image url. If no url is recognized it returns the parameter it self.
|
|
977
|
+
* If it's recognized that is a url and it's not possible to get the public id, it warns the user.
|
|
978
|
+
*
|
|
979
|
+
* @param {string} src The cloudiary url or public id.
|
|
980
|
+
*
|
|
981
|
+
* @return {string} The images public id
|
|
985
982
|
*/
|
|
986
|
-
|
|
987
983
|
function getPublicId(src) {
|
|
988
984
|
if (typeof src !== 'string') {
|
|
989
985
|
throw new Error("Invalid src of type " + typeof src);
|
|
@@ -1003,11 +999,9 @@ function getPublicId(src) {
|
|
|
1003
999
|
}
|
|
1004
1000
|
return src;
|
|
1005
1001
|
}
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
* createPlaceholderUrl
|
|
1002
|
+
/**
|
|
1003
|
+
* createPlaceholderUrl
|
|
1009
1004
|
*/
|
|
1010
|
-
|
|
1011
1005
|
function createPlaceholderUrl(_ref4) {
|
|
1012
1006
|
var src = _ref4.src,
|
|
1013
1007
|
_ref4$placeholder = _ref4.placeholder,
|
|
@@ -1060,8 +1054,8 @@ function cloudinaryLoader(_ref) {
|
|
|
1060
1054
|
}
|
|
1061
1055
|
|
|
1062
1056
|
var CldImage = function CldImage(props) {
|
|
1063
|
-
/**
|
|
1064
|
-
* handleOnError
|
|
1057
|
+
/**
|
|
1058
|
+
* handleOnError
|
|
1065
1059
|
*/
|
|
1066
1060
|
var handleOnError = function handleOnError(options) {
|
|
1067
1061
|
try {
|
|
@@ -1087,10 +1081,11 @@ var CldImage = function CldImage(props) {
|
|
|
1087
1081
|
CLD_OPTIONS.push(prop);
|
|
1088
1082
|
});
|
|
1089
1083
|
});
|
|
1090
|
-
|
|
1091
1084
|
// Construct the base Image component props by filtering out Cloudinary-specific props
|
|
1092
|
-
|
|
1093
|
-
|
|
1085
|
+
var imageProps = {
|
|
1086
|
+
alt: props.alt,
|
|
1087
|
+
src: props.src
|
|
1088
|
+
};
|
|
1094
1089
|
Object.keys(props).filter(function (key) {
|
|
1095
1090
|
return !CLD_OPTIONS.includes(key);
|
|
1096
1091
|
}).forEach(function (key) {
|
|
@@ -1102,16 +1097,13 @@ var CldImage = function CldImage(props) {
|
|
|
1102
1097
|
var _useState = useState(defaultImgKey),
|
|
1103
1098
|
imgKey = _useState[0],
|
|
1104
1099
|
setImgKey = _useState[1];
|
|
1105
|
-
|
|
1106
1100
|
// Construct Cloudinary-specific props by looking for values for any of the supported prop keys
|
|
1107
|
-
|
|
1108
1101
|
var cldOptions = {};
|
|
1109
1102
|
CLD_OPTIONS.forEach(function (key) {
|
|
1110
1103
|
if (props[key]) {
|
|
1111
1104
|
cldOptions[key] = props[key];
|
|
1112
1105
|
}
|
|
1113
1106
|
});
|
|
1114
|
-
|
|
1115
1107
|
// If we see a placeholder option, configure a Cloudinary-based URL.
|
|
1116
1108
|
// The resulting image will always be blurred per Next.js, so we're
|
|
1117
1109
|
// limited on options for placeholders.
|
|
@@ -1120,7 +1112,6 @@ var CldImage = function CldImage(props) {
|
|
|
1120
1112
|
// an Image component prop as opposed to simply the URL
|
|
1121
1113
|
//
|
|
1122
1114
|
// https://nextjs.org/docs/api-reference/next/image#blurdataurl
|
|
1123
|
-
|
|
1124
1115
|
if (imageProps.placeholder) {
|
|
1125
1116
|
var publicId = getPublicId(props.src);
|
|
1126
1117
|
imageProps.blurDataURL = createPlaceholderUrl({
|
|
@@ -1133,7 +1124,8 @@ var CldImage = function CldImage(props) {
|
|
|
1133
1124
|
}
|
|
1134
1125
|
if (props.src && props.preserveTransformations) {
|
|
1135
1126
|
var transformations = getTransformations(props.src, props.preserveTransformations);
|
|
1136
|
-
imageProps.rawTransformations
|
|
1127
|
+
var rawTransformations = imageProps.rawTransformations ? [].concat(imageProps.rawTransformations) : [];
|
|
1128
|
+
imageProps.rawTransformations = [].concat(rawTransformations, transformations);
|
|
1137
1129
|
}
|
|
1138
1130
|
return /*#__PURE__*/jsx(Image, _extends({}, imageProps, {
|
|
1139
1131
|
loader: function loader(loaderOptions) {
|
|
@@ -1160,15 +1152,14 @@ var CldOgImage = function CldOgImage(_ref) {
|
|
|
1160
1152
|
width: props.width || IMAGE_WIDTH,
|
|
1161
1153
|
height: props.height || IMAGE_HEIGHT,
|
|
1162
1154
|
crop: props.crop || 'fill',
|
|
1163
|
-
gravity: props.gravity || 'center'
|
|
1155
|
+
gravity: props.gravity || 'center',
|
|
1156
|
+
alt: props.alt
|
|
1164
1157
|
});
|
|
1165
1158
|
var ogImageUrl = constructCloudinaryUrl({
|
|
1166
1159
|
options: options
|
|
1167
1160
|
});
|
|
1168
|
-
|
|
1169
1161
|
// We need to include the tags within the Next.js Head component rather than
|
|
1170
1162
|
// direcly adding them inside of the Head otherwise we get unexpected results
|
|
1171
|
-
|
|
1172
1163
|
return /*#__PURE__*/jsxs(Head, {
|
|
1173
1164
|
children: [/*#__PURE__*/jsx("meta", {
|
|
1174
1165
|
property: "og:image",
|
|
@@ -1207,12 +1198,10 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
|
|
|
1207
1198
|
var cloudinary = useRef();
|
|
1208
1199
|
var widget = useRef();
|
|
1209
1200
|
var signed = !!signatureEndpoint;
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
*
|
|
1213
|
-
* @description Makes a request to an endpoint to sign Cloudinary parameters as part of widget creation
|
|
1201
|
+
/**
|
|
1202
|
+
* generateSignature
|
|
1203
|
+
* @description Makes a request to an endpoint to sign Cloudinary parameters as part of widget creation
|
|
1214
1204
|
*/
|
|
1215
|
-
|
|
1216
1205
|
function generateSignature(callback, paramsToSign) {
|
|
1217
1206
|
fetch(signatureEndpoint, {
|
|
1218
1207
|
method: "POST",
|
|
@@ -1226,19 +1215,16 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
|
|
|
1226
1215
|
callback(signature);
|
|
1227
1216
|
});
|
|
1228
1217
|
}
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
*
|
|
1232
|
-
* @description Creates a new instance of the Cloudinary widget and stores in a ref
|
|
1218
|
+
/**
|
|
1219
|
+
* createWidget
|
|
1220
|
+
* @description Creates a new instance of the Cloudinary widget and stores in a ref
|
|
1233
1221
|
*/
|
|
1234
|
-
|
|
1235
1222
|
function createWidget() {
|
|
1236
1223
|
var _cloudinary$current;
|
|
1237
1224
|
// When creating a signed upload, you need to provide both your Cloudinary API Key
|
|
1238
1225
|
// as well as a signature generator function that will sign any paramters
|
|
1239
1226
|
// either on page load or during the upload process. Read more about signed uploads at:
|
|
1240
1227
|
// https://cloudinary.com/documentation/upload_widget#signed_uploads
|
|
1241
|
-
|
|
1242
1228
|
var uploadOptions = _extends({
|
|
1243
1229
|
cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
|
|
1244
1230
|
uploadPreset: uploadPreset || process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET,
|
|
@@ -1246,13 +1232,12 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
|
|
|
1246
1232
|
}, options);
|
|
1247
1233
|
if (signed) {
|
|
1248
1234
|
uploadOptions.uploadSignature = generateSignature;
|
|
1249
|
-
|
|
1250
1235
|
// No need for apiSecret here because of api/sign-cloudinary-params
|
|
1251
|
-
|
|
1252
1236
|
if (!uploadOptions.apiKey) {
|
|
1253
1237
|
return new Error("Signed Upload needs apiKey!");
|
|
1254
1238
|
}
|
|
1255
1239
|
}
|
|
1240
|
+
// @ts-ignore
|
|
1256
1241
|
return (_cloudinary$current = cloudinary.current) == null ? void 0 : _cloudinary$current.createUploadWidget(uploadOptions, function (error, result) {
|
|
1257
1242
|
// The callback is a bit more chatty than failed or success so
|
|
1258
1243
|
// only trigger when one of those are the case. You can additionally
|
|
@@ -1263,25 +1248,23 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
|
|
|
1263
1248
|
}
|
|
1264
1249
|
});
|
|
1265
1250
|
}
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
* open
|
|
1269
|
-
* @description When triggered, uses the current widget instance to open the upload modal
|
|
1251
|
+
/**
|
|
1252
|
+
* open
|
|
1253
|
+
* @description When triggered, uses the current widget instance to open the upload modal
|
|
1270
1254
|
*/
|
|
1271
|
-
|
|
1272
1255
|
function open() {
|
|
1273
1256
|
if (!(widget != null && widget.current)) {
|
|
1274
1257
|
widget.current = createWidget();
|
|
1275
1258
|
}
|
|
1259
|
+
// @ts-ignore
|
|
1276
1260
|
(widget == null ? void 0 : widget.current) && widget.current.open();
|
|
1277
1261
|
}
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
*
|
|
1281
|
-
* @description Stores the Cloudinary window instance to a ref when the widget script loads
|
|
1262
|
+
/**
|
|
1263
|
+
* handleOnLoad
|
|
1264
|
+
* @description Stores the Cloudinary window instance to a ref when the widget script loads
|
|
1282
1265
|
*/
|
|
1283
|
-
|
|
1284
1266
|
function handleOnLoad() {
|
|
1267
|
+
// @ts-ignore
|
|
1285
1268
|
cloudinary.current = window.cloudinary;
|
|
1286
1269
|
}
|
|
1287
1270
|
return /*#__PURE__*/jsxs(Fragment, {
|