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.
- package/README.md +1 -0
- package/dist/next-cloudinary.js +100 -65
- package/dist/next-cloudinary.js.map +1 -1
- package/dist/next-cloudinary.modern.mjs +99 -69
- package/dist/next-cloudinary.modern.mjs.map +1 -1
- package/dist/next-cloudinary.module.js +99 -65
- package/dist/next-cloudinary.module.js.map +1 -1
- package/dist/next-cloudinary.umd.js +103 -69
- package/dist/next-cloudinary.umd.js.map +1 -1
- package/package.json +6 -3
- package/tsconfig.json +26 -0
|
@@ -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
|
-
|
|
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
|
-
*
|
|
980
|
-
*
|
|
981
|
-
*
|
|
982
|
-
*
|
|
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
|
-
|
|
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
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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, {
|