caravaggio-react - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/Image.d.ts

 import React from 'react';
-import { CaravaggioOptions } from './useCaravaggioImage';
+import { CaravaggioOptions } from './urlBuilder';
 interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
@@ -4,0 +4,0 @@ opt: CaravaggioOptions;

dist/index.cjs.js

@@ -107,4 +107,3 @@ 'use strict';
 })(GRAVITY || (GRAVITY = {}));
-var useCaravaggioImage = function (imageUrl, opt) {
-    var url = useCaravaggio();
+var urlBuilder = function (caravaggioUrl, imageUrl, opt) {
     var options = Object.entries(opt)
@@ -125,5 +124,10 @@ .map(function (_a) {
         .join('/');
-    return url + "/" + options + "?image=" + imageUrl;
+    return caravaggioUrl + "/" + options + "?image=" + imageUrl;
 };
 
+var useCaravaggioImage = function (imageUrl, opt) {
+    var url = useCaravaggio();
+    return urlBuilder(url, imageUrl, opt);
+};
+
 var Image = function (_a) {
@@ -136,4 +140,23 @@ var opt = _a.opt, src = _a.src, otherProps = __rest(_a, ["opt", "src"]);
 
+var ImageSet = function (_a) {
+    var sets = _a.sets, otherProps = __rest(_a, ["sets"]);
+    var caravaggioUrl = useCaravaggio();
+    var sources = sets.map(function (set) {
+        var srcSet = Object.entries(set.rules)
+            .map(function (_a) {
+            var rule = _a[0], _b = _a[1], opt = _b.opt, url = _b.url;
+            console.log('->', opt);
+            return urlBuilder(caravaggioUrl, url || otherProps.src, opt) + " " + rule;
+        })
+            .join(',');
+        return React__default.createElement("source", { type: set.type, srcSet: srcSet });
+    });
+    return (React__default.createElement("picture", null,
+        sources,
+        React__default.createElement("img", __assign({}, otherProps))));
+};
+
 exports.CaravaggioProvider = CaravaggioProvider;
 exports.Image = Image$1;
+exports.ImageSet = ImageSet;
 exports.useCaravaggioImage = useCaravaggioImage;

dist/index.d.ts

 import Image from './Image';
 import useCaravaggioImage from './useCaravaggioImage';
 import CaravaggioProvider from './CaravaggioProvider';
-export { CaravaggioProvider, useCaravaggioImage, Image, };
+import ImageSet from './ImageSet';
+export { CaravaggioProvider, useCaravaggioImage, Image, ImageSet };

dist/index.esm.js

@@ -100,4 +100,3 @@ import React, { useContext } from 'react';
 })(GRAVITY || (GRAVITY = {}));
-var useCaravaggioImage = function (imageUrl, opt) {
-    var url = useCaravaggio();
+var urlBuilder = function (caravaggioUrl, imageUrl, opt) {
     var options = Object.entries(opt)
@@ -118,5 +117,10 @@ .map(function (_a) {
         .join('/');
-    return url + "/" + options + "?image=" + imageUrl;
+    return caravaggioUrl + "/" + options + "?image=" + imageUrl;
 };
 
+var useCaravaggioImage = function (imageUrl, opt) {
+    var url = useCaravaggio();
+    return urlBuilder(url, imageUrl, opt);
+};
+
 var Image = function (_a) {
@@ -129,2 +133,20 @@ var opt = _a.opt, src = _a.src, otherProps = __rest(_a, ["opt", "src"]);
 
-export { CaravaggioProvider, Image$1 as Image, useCaravaggioImage };
+var ImageSet = function (_a) {
+    var sets = _a.sets, otherProps = __rest(_a, ["sets"]);
+    var caravaggioUrl = useCaravaggio();
+    var sources = sets.map(function (set) {
+        var srcSet = Object.entries(set.rules)
+            .map(function (_a) {
+            var rule = _a[0], _b = _a[1], opt = _b.opt, url = _b.url;
+            console.log('->', opt);
+            return urlBuilder(caravaggioUrl, url || otherProps.src, opt) + " " + rule;
+        })
+            .join(',');
+        return React.createElement("source", { type: set.type, srcSet: srcSet });
+    });
+    return (React.createElement("picture", null,
+        sources,
+        React.createElement("img", __assign({}, otherProps))));
+};
+
+export { CaravaggioProvider, Image$1 as Image, ImageSet, useCaravaggioImage };

dist/useCaravaggioImage.d.ts

@@ -1,81 +0,3 @@
-export declare enum GRAVITY {
-    c = "center",
-    n = "north",
-    ne = "northeast",
-    nw = "northwest",
-    e = "east",
-    w = "west",
-    s = "south",
-    se = "southeast",
-    sw = "southwest",
-    center = "center",
-    centre = "centre",
-    north = "north",
-    northeast = "northeast",
-    northwest = "northwest",
-    east = "east",
-    west = "west",
-    south = "south",
-    southeast = "southeast",
-    southwest = "southwest",
-    auto = "attention",
-    gc = "center",
-    gn = "north",
-    gne = "northeast",
-    gnw = "northwest",
-    ge = "east",
-    gw = "west",
-    gs = "south",
-    gse = "southeast",
-    gsw = "southwest",
-    gcenter = "center",
-    gcentre = "centre",
-    gnorth = "north",
-    gnortheast = "northeast",
-    gnorthwest = "northwest",
-    geast = "east",
-    gwest = "west",
-    gsouth = "south",
-    gsoutheast = "southeast",
-    gsouthwest = "southwest",
-    gauto = "attention"
-}
-declare type GRAVITY_KEYS = keyof typeof GRAVITY;
-export interface CaravaggioOptions {
-    o?: 'auto' | 'original' | 'jpg' | 'jpeg' | 'png' | 'tiff' | 'webp';
-    progressive?: boolean;
-    rs?: {
-        s: string;
-        m?: 'scale' | 'fit' | 'downfit' | 'upfit' | 'fill' | 'downfill' | 'embed';
-        iar?: boolean;
-        b?: string;
-        g?: GRAVITY_KEYS;
-    };
-    ex?: {
-        x: number;
-        y: number;
-        w: number;
-        h: number;
-    };
-    overlay?: {
-        url: string;
-        g?: GRAVITY_KEYS;
-        x?: number;
-        y?: number;
-        watermark?: boolean;
-    };
-    q?: number;
-    rotate?: {
-        v: number;
-        b?: string;
-    };
-    flip?: 'x' | 'y';
-    blur?: number;
-    duotone?: {
-        h: string;
-        s: string;
-        o?: number;
-    };
-}
+import { CaravaggioOptions } from './urlBuilder';
 declare const useCaravaggioImage: (imageUrl: string, opt: CaravaggioOptions) => string;
 export default useCaravaggioImage;

package.json

 {
   "name": "caravaggio-react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Caravaggio react library",
@@ -28,3 +28,2 @@ "main": "dist/index.cjs.js",
     "prettier": "^2.0.5",
-    "react": "^16.13.1",
     "rimraf": "^3.0.2",
@@ -39,4 +38,4 @@ "rollup": "^2.21.0",
   "peerDependencies": {
-    "react": ">16"
+    "react": "16.x"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16951

increased by16.25%

Dev dependency count

11

decreased by-8.33%

Number of package files

11

increased by22.22%

Lines of code

403

increased by17.49%

No dependency changes