caravaggio-react - npm Package Compare versions

Comparing version 0.4.0 to 1.0.0

CHANGELOG.md

 # caravaggio-react
 
+## 1.0.0
+  - ⚠ Breaking changes
+  - Image can be null when using hook `useCaravaggioIfAvailable`
+  - "useCaravaggioImage" has been renamed to "useCarvaggio". the old name is deprecated
+
 ## 0.4.0
-
   - Add explanation of parameters
@@ -13,3 +17,2 @@ - `opt` is optional in Image component. If not passed, no transformation is applied and it behaves
 ## 0.3.9
-
   - Image url is correctly escaped

dist/index.cjs.js

@@ -55,3 +55,3 @@ 'use strict';
 // This hook expose the Caravaggio url through the context
-var useCaravaggio = function () {
+var useCaravaggioContext = function () {
     var context = React.useContext(CaravaggioContext);
@@ -132,4 +132,31 @@ if (!context) {
 
+/**
+ * Given an image, return the url with the transofmrations applied
+ * @param imageUrl The image to tranform
+ * @param opt Caravaggio options. @see https://caravaggio.ramielcreations.com/
+ */
+var useCaravaggio = function (imageUrl, opt) {
+    var context = useCaravaggioContext();
+    return urlBuilder(context, imageUrl, opt);
+};
+/**
+ * Given an image, return the url with the transofmrations applied
+ * @param imageUrl The image to tranform
+ * @param opt Caravaggio options. @see https://caravaggio.ramielcreations.com/
+ */
 var useCaravaggioImage = function (imageUrl, opt) {
-    var context = useCaravaggio();
+    console.warn('@deprecated "useCaravaggioImage" is deprecated, its name changed to "useCaravaggio"');
+    return useCaravaggio(imageUrl, opt);
+};
+/**
+ * Same as useCaravaggio but return the original image if there's no context
+ * or no image
+ * @param imageUrl The optional image url
+ * @param opt The options
+ */
+var useCaravaggioIfAvailable = function (imageUrl, opt) {
+    var context = React.useContext(CaravaggioContext);
+    if (!context || !imageUrl) {
+        return imageUrl;
+    }
     return urlBuilder(context, imageUrl, opt);
@@ -140,3 +167,3 @@ };
     var opt = _a.opt, src = _a.src, otherProps = __rest(_a, ["opt", "src"]);
-    var url = useCaravaggioImage(src, opt);
+    var url = useCaravaggio(src, opt);
     return React__default.createElement("img", __assign({ src: url }, otherProps, { ref: ref }));
@@ -148,3 +175,3 @@ });
     var sets = _a.sets, otherProps = __rest(_a, ["sets"]);
-    var context = useCaravaggio();
+    var context = useCaravaggioContext();
     var sources = sets.map(function (set, i) {
@@ -168,2 +195,4 @@ var srcSet = Object.entries(set.rules)
 exports.ImageSet = ImageSet;
+exports.useCaravaggio = useCaravaggio;
+exports.useCaravaggioIfAvailable = useCaravaggioIfAvailable;
 exports.useCaravaggioImage = useCaravaggioImage;

dist/index.d.ts

 export * from './Image';
 export * from './ImageSet';
-export * from './useCaravaggioImage';
+export * from './useCaravaggio';
 export * from './CaravaggioProvider';

dist/index.esm.js

@@ -48,3 +48,3 @@ import React, { useContext } from 'react';
 // This hook expose the Caravaggio url through the context
-var useCaravaggio = function () {
+var useCaravaggioContext = function () {
     var context = useContext(CaravaggioContext);
@@ -125,4 +125,31 @@ if (!context) {
 
+/**
+ * Given an image, return the url with the transofmrations applied
+ * @param imageUrl The image to tranform
+ * @param opt Caravaggio options. @see https://caravaggio.ramielcreations.com/
+ */
+var useCaravaggio = function (imageUrl, opt) {
+    var context = useCaravaggioContext();
+    return urlBuilder(context, imageUrl, opt);
+};
+/**
+ * Given an image, return the url with the transofmrations applied
+ * @param imageUrl The image to tranform
+ * @param opt Caravaggio options. @see https://caravaggio.ramielcreations.com/
+ */
 var useCaravaggioImage = function (imageUrl, opt) {
-    var context = useCaravaggio();
+    console.warn('@deprecated "useCaravaggioImage" is deprecated, its name changed to "useCaravaggio"');
+    return useCaravaggio(imageUrl, opt);
+};
+/**
+ * Same as useCaravaggio but return the original image if there's no context
+ * or no image
+ * @param imageUrl The optional image url
+ * @param opt The options
+ */
+var useCaravaggioIfAvailable = function (imageUrl, opt) {
+    var context = useContext(CaravaggioContext);
+    if (!context || !imageUrl) {
+        return imageUrl;
+    }
     return urlBuilder(context, imageUrl, opt);
@@ -133,3 +160,3 @@ };
     var opt = _a.opt, src = _a.src, otherProps = __rest(_a, ["opt", "src"]);
-    var url = useCaravaggioImage(src, opt);
+    var url = useCaravaggio(src, opt);
     return React.createElement("img", __assign({ src: url }, otherProps, { ref: ref }));
@@ -141,3 +168,3 @@ });
     var sets = _a.sets, otherProps = __rest(_a, ["sets"]);
-    var context = useCaravaggio();
+    var context = useCaravaggioContext();
     var sources = sets.map(function (set, i) {
@@ -157,2 +184,2 @@ var srcSet = Object.entries(set.rules)
 
-export { CaravaggioContext, CaravaggioProvider, Image, ImageSet, useCaravaggioImage };
+export { CaravaggioContext, CaravaggioProvider, Image, ImageSet, useCaravaggio, useCaravaggioIfAvailable, useCaravaggioImage };

dist/useCaravaggio.d.ts

@@ -1,3 +0,20 @@
-import { CaravaggioContext } from './CaravaggioProvider';
-declare const useCaravaggio: () => CaravaggioContext;
-export default useCaravaggio;
+import { CaravaggioOptions } from './urlBuilder';
+/**
+ * Given an image, return the url with the transofmrations applied
+ * @param imageUrl The image to tranform
+ * @param opt Caravaggio options. @see https://caravaggio.ramielcreations.com/
+ */
+export declare const useCaravaggio: (imageUrl: string, opt?: CaravaggioOptions | undefined) => string;
+/**
+ * Given an image, return the url with the transofmrations applied
+ * @param imageUrl The image to tranform
+ * @param opt Caravaggio options. @see https://caravaggio.ramielcreations.com/
+ */
+export declare const useCaravaggioImage: (imageUrl: string, opt?: CaravaggioOptions | undefined) => string;
+/**
+ * Same as useCaravaggio but return the original image if there's no context
+ * or no image
+ * @param imageUrl The optional image url
+ * @param opt The options
+ */
+export declare const useCaravaggioIfAvailable: (imageUrl?: string | null | undefined, opt?: CaravaggioOptions | undefined) => string | null | undefined;

package.json

 {
   "name": "caravaggio-react",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "Caravaggio react library",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

README.md

@@ -182,2 +182,2 @@ # caravaggio-react
 
-To know about all the options, check [Caravaggio documentation](https://caravaggio.ramielcreations.com).
+To know about all the options, check [Caravaggio documentation](https://caravaggio.ramielcreations.com).

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30927

increased by11.46%

Lines of code

615

increased by13.47%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

183

increased by0.55%

No dependency changes