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
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare const CldUploadButton: ({ children, onClick, onUpload, options, signatureEndpoint, uploadPreset, ...props }: {
|
|
3
|
+
[x: string]: any;
|
|
4
|
+
children: any;
|
|
5
|
+
onClick: any;
|
|
6
|
+
onUpload: any;
|
|
7
|
+
options: any;
|
|
8
|
+
signatureEndpoint: any;
|
|
9
|
+
uploadPreset: any;
|
|
10
|
+
}) => JSX.Element;
|
|
11
|
+
export default CldUploadButton;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare const CldUploadWidget: ({ children, onUpload, options, signatureEndpoint, uploadPreset, }: {
|
|
3
|
+
children: any;
|
|
4
|
+
onUpload: any;
|
|
5
|
+
options: any;
|
|
6
|
+
signatureEndpoint: any;
|
|
7
|
+
uploadPreset: any;
|
|
8
|
+
}) => JSX.Element;
|
|
9
|
+
export default CldUploadWidget;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { default as CldImage } from './components/CldImage';
|
|
2
|
+
export { default as CldOgImage } from './components/CldOgImage';
|
|
3
|
+
export { default as CldUploadButton } from './components/CldUploadButton';
|
|
4
|
+
export { default as CldUploadWidget } from './components/CldUploadWidget';
|
|
5
|
+
export { cloudinaryLoader } from './loaders/cloudinary-loader';
|
|
6
|
+
export { primary, position, text, effects } from './constants/qualifiers';
|
|
7
|
+
export { constructCloudinaryUrl } from './lib/cloudinary';
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as effectsPlugin from '../plugins/effects';
|
|
2
|
+
import ICloudinaryConfigurations from '@cloudinary/url-gen/config/interfaces/Config/ICloudinaryConfigurations';
|
|
3
|
+
export declare const transformationPlugins: (typeof effectsPlugin)[];
|
|
4
|
+
interface ImageUrlOptions {
|
|
5
|
+
src?: string;
|
|
6
|
+
width?: number;
|
|
7
|
+
quality?: number;
|
|
8
|
+
deliveryType?: string;
|
|
9
|
+
format?: string;
|
|
10
|
+
rawTransformations?: string[];
|
|
11
|
+
resize?: {
|
|
12
|
+
crop?: string;
|
|
13
|
+
width?: number;
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
interface ConstructUrlProps {
|
|
17
|
+
options?: ImageUrlOptions;
|
|
18
|
+
config?: ICloudinaryConfigurations;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* constructCloudinaryUrl
|
|
22
|
+
*/
|
|
23
|
+
export declare function constructCloudinaryUrl({ options, config }: ConstructUrlProps): string;
|
|
24
|
+
/**
|
|
25
|
+
* Retrieves the public id of a cloudiary image url. If no url is recognized it returns the parameter it self.
|
|
26
|
+
* If it's recognized that is a url and it's not possible to get the public id, it warns the user.
|
|
27
|
+
*
|
|
28
|
+
* @param {string} src The cloudiary url or public id.
|
|
29
|
+
*
|
|
30
|
+
* @return {string} The images public id
|
|
31
|
+
*/
|
|
32
|
+
export declare function getPublicId(src: any): string;
|
|
33
|
+
/**
|
|
34
|
+
* createPlaceholderUrl
|
|
35
|
+
*/
|
|
36
|
+
export declare function createPlaceholderUrl({ src, placeholder, config }: {
|
|
37
|
+
src?: any;
|
|
38
|
+
placeholder?: boolean | string;
|
|
39
|
+
config?: any;
|
|
40
|
+
}): string;
|
|
41
|
+
/**
|
|
42
|
+
* pollForProcessingImage
|
|
43
|
+
*/
|
|
44
|
+
export declare function pollForProcessingImage(options: any): Promise<boolean>;
|
|
45
|
+
export {};
|
package/dist/next-cloudinary.js
CHANGED
|
@@ -874,8 +874,8 @@ var zoompanPlugin = {
|
|
|
874
874
|
plugin: plugin
|
|
875
875
|
};
|
|
876
876
|
|
|
877
|
-
/**
|
|
878
|
-
* pollForProcessingImage
|
|
877
|
+
/**
|
|
878
|
+
* pollForProcessingImage
|
|
879
879
|
*/
|
|
880
880
|
|
|
881
881
|
function _catch(body, recover) {
|
|
@@ -931,14 +931,11 @@ var transformationPlugins = [
|
|
|
931
931
|
removeBackgroundPlugin, croppingPlugin, effectsPlugin, overlaysPlugin, namedTransformationsPlugin, underlaysPlugin, zoompanPlugin,
|
|
932
932
|
// Raw transformations needs to be last simply to make sure
|
|
933
933
|
// it's always expected to applied the same way
|
|
934
|
-
|
|
935
934
|
rawTransformationsPlugin];
|
|
936
935
|
var cld;
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
* constructCloudinaryUrl
|
|
936
|
+
/**
|
|
937
|
+
* constructCloudinaryUrl
|
|
940
938
|
*/
|
|
941
|
-
|
|
942
939
|
function constructCloudinaryUrl(_ref) {
|
|
943
940
|
var options = _ref.options,
|
|
944
941
|
config = _ref.config;
|
|
@@ -953,43 +950,42 @@ function constructCloudinaryUrl(_ref) {
|
|
|
953
950
|
}
|
|
954
951
|
}, config));
|
|
955
952
|
}
|
|
956
|
-
var publicId = getPublicId(options.src);
|
|
953
|
+
var publicId = getPublicId(options == null ? void 0 : options.src);
|
|
957
954
|
var cldImage = cld.image(publicId);
|
|
958
955
|
transformationPlugins.forEach(function (_ref2) {
|
|
959
956
|
var plugin = _ref2.plugin;
|
|
957
|
+
// @ts-ignore
|
|
960
958
|
var _ref3 = plugin({
|
|
961
959
|
cldImage: cldImage,
|
|
962
960
|
options: options
|
|
963
961
|
}) || {},
|
|
964
962
|
pluginOptions = _ref3.options;
|
|
965
|
-
if (pluginOptions != null && pluginOptions.format) {
|
|
963
|
+
if (pluginOptions != null && pluginOptions.format && options) {
|
|
966
964
|
options.format = pluginOptions.format;
|
|
967
965
|
}
|
|
968
|
-
if (pluginOptions != null && pluginOptions.width) {
|
|
966
|
+
if (pluginOptions != null && pluginOptions.width && options) {
|
|
969
967
|
options.resize = {
|
|
970
968
|
width: pluginOptions == null ? void 0 : pluginOptions.width
|
|
971
969
|
};
|
|
972
970
|
}
|
|
973
971
|
});
|
|
974
|
-
if (options.resize) {
|
|
972
|
+
if (options != null && options.resize) {
|
|
975
973
|
var _options$resize = options.resize,
|
|
976
974
|
width = _options$resize.width,
|
|
977
975
|
_options$resize$crop = _options$resize.crop,
|
|
978
976
|
crop = _options$resize$crop === void 0 ? 'scale' : _options$resize$crop;
|
|
979
977
|
cldImage.effect("c_" + crop + ",w_" + width);
|
|
980
978
|
}
|
|
981
|
-
return cldImage.setDeliveryType(options.deliveryType || 'upload').format(options.format || 'auto').delivery("q_" + (options.quality || 'auto')).toURL();
|
|
979
|
+
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();
|
|
982
980
|
}
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
*
|
|
986
|
-
*
|
|
987
|
-
*
|
|
988
|
-
*
|
|
989
|
-
*
|
|
990
|
-
* @return {string} The images public id
|
|
981
|
+
/**
|
|
982
|
+
* Retrieves the public id of a cloudiary image url. If no url is recognized it returns the parameter it self.
|
|
983
|
+
* If it's recognized that is a url and it's not possible to get the public id, it warns the user.
|
|
984
|
+
*
|
|
985
|
+
* @param {string} src The cloudiary url or public id.
|
|
986
|
+
*
|
|
987
|
+
* @return {string} The images public id
|
|
991
988
|
*/
|
|
992
|
-
|
|
993
989
|
function getPublicId(src) {
|
|
994
990
|
if (typeof src !== 'string') {
|
|
995
991
|
throw new Error("Invalid src of type " + typeof src);
|
|
@@ -1009,11 +1005,9 @@ function getPublicId(src) {
|
|
|
1009
1005
|
}
|
|
1010
1006
|
return src;
|
|
1011
1007
|
}
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
* createPlaceholderUrl
|
|
1008
|
+
/**
|
|
1009
|
+
* createPlaceholderUrl
|
|
1015
1010
|
*/
|
|
1016
|
-
|
|
1017
1011
|
function createPlaceholderUrl(_ref4) {
|
|
1018
1012
|
var src = _ref4.src,
|
|
1019
1013
|
_ref4$placeholder = _ref4.placeholder,
|
|
@@ -1066,8 +1060,8 @@ function cloudinaryLoader(_ref) {
|
|
|
1066
1060
|
}
|
|
1067
1061
|
|
|
1068
1062
|
var CldImage = function CldImage(props) {
|
|
1069
|
-
/**
|
|
1070
|
-
* handleOnError
|
|
1063
|
+
/**
|
|
1064
|
+
* handleOnError
|
|
1071
1065
|
*/
|
|
1072
1066
|
var handleOnError = function handleOnError(options) {
|
|
1073
1067
|
try {
|
|
@@ -1093,10 +1087,11 @@ var CldImage = function CldImage(props) {
|
|
|
1093
1087
|
CLD_OPTIONS.push(prop);
|
|
1094
1088
|
});
|
|
1095
1089
|
});
|
|
1096
|
-
|
|
1097
1090
|
// Construct the base Image component props by filtering out Cloudinary-specific props
|
|
1098
|
-
|
|
1099
|
-
|
|
1091
|
+
var imageProps = {
|
|
1092
|
+
alt: props.alt,
|
|
1093
|
+
src: props.src
|
|
1094
|
+
};
|
|
1100
1095
|
Object.keys(props).filter(function (key) {
|
|
1101
1096
|
return !CLD_OPTIONS.includes(key);
|
|
1102
1097
|
}).forEach(function (key) {
|
|
@@ -1108,16 +1103,13 @@ var CldImage = function CldImage(props) {
|
|
|
1108
1103
|
var _useState = react.useState(defaultImgKey),
|
|
1109
1104
|
imgKey = _useState[0],
|
|
1110
1105
|
setImgKey = _useState[1];
|
|
1111
|
-
|
|
1112
1106
|
// Construct Cloudinary-specific props by looking for values for any of the supported prop keys
|
|
1113
|
-
|
|
1114
1107
|
var cldOptions = {};
|
|
1115
1108
|
CLD_OPTIONS.forEach(function (key) {
|
|
1116
1109
|
if (props[key]) {
|
|
1117
1110
|
cldOptions[key] = props[key];
|
|
1118
1111
|
}
|
|
1119
1112
|
});
|
|
1120
|
-
|
|
1121
1113
|
// If we see a placeholder option, configure a Cloudinary-based URL.
|
|
1122
1114
|
// The resulting image will always be blurred per Next.js, so we're
|
|
1123
1115
|
// limited on options for placeholders.
|
|
@@ -1126,7 +1118,6 @@ var CldImage = function CldImage(props) {
|
|
|
1126
1118
|
// an Image component prop as opposed to simply the URL
|
|
1127
1119
|
//
|
|
1128
1120
|
// https://nextjs.org/docs/api-reference/next/image#blurdataurl
|
|
1129
|
-
|
|
1130
1121
|
if (imageProps.placeholder) {
|
|
1131
1122
|
var publicId = getPublicId(props.src);
|
|
1132
1123
|
imageProps.blurDataURL = createPlaceholderUrl({
|
|
@@ -1139,7 +1130,8 @@ var CldImage = function CldImage(props) {
|
|
|
1139
1130
|
}
|
|
1140
1131
|
if (props.src && props.preserveTransformations) {
|
|
1141
1132
|
var transformations = getTransformations(props.src, props.preserveTransformations);
|
|
1142
|
-
imageProps.rawTransformations
|
|
1133
|
+
var rawTransformations = imageProps.rawTransformations ? [].concat(imageProps.rawTransformations) : [];
|
|
1134
|
+
imageProps.rawTransformations = [].concat(rawTransformations, transformations);
|
|
1143
1135
|
}
|
|
1144
1136
|
return /*#__PURE__*/jsxRuntime.jsx(Image__default["default"], _extends({}, imageProps, {
|
|
1145
1137
|
loader: function loader(loaderOptions) {
|
|
@@ -1166,15 +1158,14 @@ var CldOgImage = function CldOgImage(_ref) {
|
|
|
1166
1158
|
width: props.width || IMAGE_WIDTH,
|
|
1167
1159
|
height: props.height || IMAGE_HEIGHT,
|
|
1168
1160
|
crop: props.crop || 'fill',
|
|
1169
|
-
gravity: props.gravity || 'center'
|
|
1161
|
+
gravity: props.gravity || 'center',
|
|
1162
|
+
alt: props.alt
|
|
1170
1163
|
});
|
|
1171
1164
|
var ogImageUrl = constructCloudinaryUrl({
|
|
1172
1165
|
options: options
|
|
1173
1166
|
});
|
|
1174
|
-
|
|
1175
1167
|
// We need to include the tags within the Next.js Head component rather than
|
|
1176
1168
|
// direcly adding them inside of the Head otherwise we get unexpected results
|
|
1177
|
-
|
|
1178
1169
|
return /*#__PURE__*/jsxRuntime.jsxs(Head__default["default"], {
|
|
1179
1170
|
children: [/*#__PURE__*/jsxRuntime.jsx("meta", {
|
|
1180
1171
|
property: "og:image",
|
|
@@ -1213,12 +1204,10 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
|
|
|
1213
1204
|
var cloudinary = react.useRef();
|
|
1214
1205
|
var widget = react.useRef();
|
|
1215
1206
|
var signed = !!signatureEndpoint;
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
*
|
|
1219
|
-
* @description Makes a request to an endpoint to sign Cloudinary parameters as part of widget creation
|
|
1207
|
+
/**
|
|
1208
|
+
* generateSignature
|
|
1209
|
+
* @description Makes a request to an endpoint to sign Cloudinary parameters as part of widget creation
|
|
1220
1210
|
*/
|
|
1221
|
-
|
|
1222
1211
|
function generateSignature(callback, paramsToSign) {
|
|
1223
1212
|
fetch(signatureEndpoint, {
|
|
1224
1213
|
method: "POST",
|
|
@@ -1232,19 +1221,16 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
|
|
|
1232
1221
|
callback(signature);
|
|
1233
1222
|
});
|
|
1234
1223
|
}
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
*
|
|
1238
|
-
* @description Creates a new instance of the Cloudinary widget and stores in a ref
|
|
1224
|
+
/**
|
|
1225
|
+
* createWidget
|
|
1226
|
+
* @description Creates a new instance of the Cloudinary widget and stores in a ref
|
|
1239
1227
|
*/
|
|
1240
|
-
|
|
1241
1228
|
function createWidget() {
|
|
1242
1229
|
var _cloudinary$current;
|
|
1243
1230
|
// When creating a signed upload, you need to provide both your Cloudinary API Key
|
|
1244
1231
|
// as well as a signature generator function that will sign any paramters
|
|
1245
1232
|
// either on page load or during the upload process. Read more about signed uploads at:
|
|
1246
1233
|
// https://cloudinary.com/documentation/upload_widget#signed_uploads
|
|
1247
|
-
|
|
1248
1234
|
var uploadOptions = _extends({
|
|
1249
1235
|
cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
|
|
1250
1236
|
uploadPreset: uploadPreset || process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET,
|
|
@@ -1252,13 +1238,12 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
|
|
|
1252
1238
|
}, options);
|
|
1253
1239
|
if (signed) {
|
|
1254
1240
|
uploadOptions.uploadSignature = generateSignature;
|
|
1255
|
-
|
|
1256
1241
|
// No need for apiSecret here because of api/sign-cloudinary-params
|
|
1257
|
-
|
|
1258
1242
|
if (!uploadOptions.apiKey) {
|
|
1259
1243
|
return new Error("Signed Upload needs apiKey!");
|
|
1260
1244
|
}
|
|
1261
1245
|
}
|
|
1246
|
+
// @ts-ignore
|
|
1262
1247
|
return (_cloudinary$current = cloudinary.current) == null ? void 0 : _cloudinary$current.createUploadWidget(uploadOptions, function (error, result) {
|
|
1263
1248
|
// The callback is a bit more chatty than failed or success so
|
|
1264
1249
|
// only trigger when one of those are the case. You can additionally
|
|
@@ -1269,25 +1254,23 @@ var CldUploadWidget = function CldUploadWidget(_ref) {
|
|
|
1269
1254
|
}
|
|
1270
1255
|
});
|
|
1271
1256
|
}
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
* open
|
|
1275
|
-
* @description When triggered, uses the current widget instance to open the upload modal
|
|
1257
|
+
/**
|
|
1258
|
+
* open
|
|
1259
|
+
* @description When triggered, uses the current widget instance to open the upload modal
|
|
1276
1260
|
*/
|
|
1277
|
-
|
|
1278
1261
|
function open() {
|
|
1279
1262
|
if (!(widget != null && widget.current)) {
|
|
1280
1263
|
widget.current = createWidget();
|
|
1281
1264
|
}
|
|
1265
|
+
// @ts-ignore
|
|
1282
1266
|
(widget == null ? void 0 : widget.current) && widget.current.open();
|
|
1283
1267
|
}
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
*
|
|
1287
|
-
* @description Stores the Cloudinary window instance to a ref when the widget script loads
|
|
1268
|
+
/**
|
|
1269
|
+
* handleOnLoad
|
|
1270
|
+
* @description Stores the Cloudinary window instance to a ref when the widget script loads
|
|
1288
1271
|
*/
|
|
1289
|
-
|
|
1290
1272
|
function handleOnLoad() {
|
|
1273
|
+
// @ts-ignore
|
|
1291
1274
|
cloudinary.current = window.cloudinary;
|
|
1292
1275
|
}
|
|
1293
1276
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|