caravaggio-react - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

dist/CaravaggioProvider.d.ts

 import React from 'react';
 interface CaravaggioProviderProps {
     url: string;
+    baseUrl?: string;
 }
-export declare const CaravaggioContext: React.Context<{
+export declare type CaravaggioContext = {
     url: string;
-} | null>;
+    baseUrl?: string;
+};
+export declare const CaravaggioContext: React.Context<CaravaggioContext | null>;
 declare const CaravaggioProvider: React.SFC<CaravaggioProviderProps>;
 export default CaravaggioProvider;

dist/index.cjs.js

@@ -50,4 +50,4 @@ 'use strict';
 var CaravaggioProvider = function (_a) {
-    var children = _a.children, url = _a.url;
-    return (React__default.createElement(CaravaggioContext.Provider, { value: { url: url } }, children));
+    var children = _a.children, url = _a.url, baseUrl = _a.baseUrl;
+    return (React__default.createElement(CaravaggioContext.Provider, { value: { url: url, baseUrl: baseUrl } }, children));
 };
@@ -61,3 +61,3 @@
     }
-    return context.url;
+    return context;
 };
@@ -109,3 +109,4 @@
 })(GRAVITY || (GRAVITY = {}));
-var urlBuilder = function (caravaggioUrl, imageUrl, opt) {
+var urlBuilder = function (_a, imageUrl, opt) {
+    var caravaggioUrl = _a.url, baseUrl = _a.baseUrl;
     var options = Object.entries(opt)
@@ -126,8 +127,10 @@ .map(function (_a) {
         .join('/');
-    return caravaggioUrl + "/" + options + "?image=" + imageUrl;
+    var finalImageUrl = /^\.?\//.test(imageUrl) && baseUrl ? "" + baseUrl + imageUrl : imageUrl;
+    console.log(imageUrl, baseUrl);
+    return caravaggioUrl + "/" + options + "?image=" + finalImageUrl;
 };
 
 var useCaravaggioImage = function (imageUrl, opt) {
-    var url = useCaravaggio();
-    return urlBuilder(url, imageUrl, opt);
+    var context = useCaravaggio();
+    return urlBuilder(context, imageUrl, opt);
 };
@@ -138,3 +141,3 @@
     var url = useCaravaggioImage(src, opt);
-    return (React__default.createElement("img", __assign({ src: url }, otherProps)));
+    return React__default.createElement("img", __assign({ src: url }, otherProps));
 };
@@ -145,3 +148,3 @@ var Image$1 = React__default.memo(Image);
     var sets = _a.sets, otherProps = __rest(_a, ["sets"]);
-    var caravaggioUrl = useCaravaggio();
+    var context = useCaravaggio();
     var sources = sets.map(function (set, i) {
@@ -151,3 +154,3 @@ var srcSet = Object.entries(set.rules)
             var rule = _a[0], _b = _a[1], opt = _b.opt, url = _b.url;
-            return urlBuilder(caravaggioUrl, url || otherProps.src, opt) + " " + rule;
+            return urlBuilder(context, url || otherProps.src, opt) + " " + rule;
         })
@@ -154,0 +157,0 @@ .join(',');

dist/index.esm.js

@@ -43,4 +43,4 @@ import React, { useContext } from 'react';
 var CaravaggioProvider = function (_a) {
-    var children = _a.children, url = _a.url;
-    return (React.createElement(CaravaggioContext.Provider, { value: { url: url } }, children));
+    var children = _a.children, url = _a.url, baseUrl = _a.baseUrl;
+    return (React.createElement(CaravaggioContext.Provider, { value: { url: url, baseUrl: baseUrl } }, children));
 };
@@ -54,3 +54,3 @@
     }
-    return context.url;
+    return context;
 };
@@ -102,3 +102,4 @@
 })(GRAVITY || (GRAVITY = {}));
-var urlBuilder = function (caravaggioUrl, imageUrl, opt) {
+var urlBuilder = function (_a, imageUrl, opt) {
+    var caravaggioUrl = _a.url, baseUrl = _a.baseUrl;
     var options = Object.entries(opt)
@@ -119,8 +120,10 @@ .map(function (_a) {
         .join('/');
-    return caravaggioUrl + "/" + options + "?image=" + imageUrl;
+    var finalImageUrl = /^\.?\//.test(imageUrl) && baseUrl ? "" + baseUrl + imageUrl : imageUrl;
+    console.log(imageUrl, baseUrl);
+    return caravaggioUrl + "/" + options + "?image=" + finalImageUrl;
 };
 
 var useCaravaggioImage = function (imageUrl, opt) {
-    var url = useCaravaggio();
-    return urlBuilder(url, imageUrl, opt);
+    var context = useCaravaggio();
+    return urlBuilder(context, imageUrl, opt);
 };
@@ -131,3 +134,3 @@
     var url = useCaravaggioImage(src, opt);
-    return (React.createElement("img", __assign({ src: url }, otherProps)));
+    return React.createElement("img", __assign({ src: url }, otherProps));
 };
@@ -138,3 +141,3 @@ var Image$1 = React.memo(Image);
     var sets = _a.sets, otherProps = __rest(_a, ["sets"]);
-    var caravaggioUrl = useCaravaggio();
+    var context = useCaravaggio();
     var sources = sets.map(function (set, i) {
@@ -144,3 +147,3 @@ var srcSet = Object.entries(set.rules)
             var rule = _a[0], _b = _a[1], opt = _b.opt, url = _b.url;
-            return urlBuilder(caravaggioUrl, url || otherProps.src, opt) + " " + rule;
+            return urlBuilder(context, url || otherProps.src, opt) + " " + rule;
         })
@@ -147,0 +150,0 @@ .join(',');

dist/urlBuilder.d.ts

@@ -0,1 +1,2 @@
+import { CaravaggioContext } from './CaravaggioProvider';
 export declare enum GRAVITY {
@@ -80,3 +81,3 @@ c = "center",
 }
-declare const urlBuilder: (caravaggioUrl: string, imageUrl: string, opt: CaravaggioOptions) => string;
+declare const urlBuilder: ({ url: caravaggioUrl, baseUrl }: CaravaggioContext, imageUrl: string, opt: CaravaggioOptions) => string;
 export default urlBuilder;

dist/useCaravaggio.d.ts

@@ -1,2 +0,3 @@
-declare const useCaravaggio: () => string;
+import { CaravaggioContext } from './CaravaggioProvider';
+declare const useCaravaggio: () => CaravaggioContext;
 export default useCaravaggio;

package.json

 {
   "name": "caravaggio-react",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Caravaggio react library",
@@ -27,2 +27,3 @@ "main": "dist/index.cjs.js",
     "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.8",
     "prettier": "^2.0.5",
@@ -29,0 +30,0 @@ "rimraf": "^3.0.2",

No alert changes

Improved metrics

Total package byte prevSize

17697

increased by4.33%

Lines of code

412

increased by2.74%

Worsened metrics

Dev dependency count

12

increased by9.09%

No dependency changes