@lrnwebcomponents/simple-img - npm Package Compare versions

Comparing version 4.0.26 to 4.0.27

analysis.json

@@ -16,7 +16,7 @@ {
             "start": {
-              "line": 153,
+              "line": 160,
               "column": 2
             },
             "end": {
-              "line": 155,
+              "line": 162,
               "column": 3
@@ -34,7 +34,7 @@ }
             "start": {
-              "line": 161,
+              "line": 168,
               "column": 2
             },
             "end": {
-              "line": 163,
+              "line": 170,
               "column": 3
@@ -46,2 +46,36 @@ }
         {
+          "name": "watermark",
+          "type": "?",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 176,
+              "column": 2
+            },
+            "end": {
+              "line": 178,
+              "column": 3
+            }
+          },
+          "metadata": {}
+        },
+        {
+          "name": "wmspot",
+          "type": "?",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 184,
+              "column": 2
+            },
+            "end": {
+              "line": 186,
+              "column": 3
+            }
+          },
+          "metadata": {}
+        },
+        {
           "name": "format",
@@ -53,7 +87,7 @@ "type": "?",
             "start": {
-              "line": 169,
+              "line": 192,
               "column": 2
             },
             "end": {
-              "line": 171,
+              "line": 194,
               "column": 3
@@ -71,7 +105,7 @@ }
             "start": {
-              "line": 177,
+              "line": 200,
               "column": 2
             },
             "end": {
-              "line": 179,
+              "line": 202,
               "column": 3
@@ -89,7 +123,7 @@ }
             "start": {
-              "line": 185,
+              "line": 208,
               "column": 2
             },
             "end": {
-              "line": 187,
+              "line": 210,
               "column": 3
@@ -107,7 +141,7 @@ }
             "start": {
-              "line": 193,
+              "line": 216,
               "column": 2
             },
             "end": {
-              "line": 195,
+              "line": 218,
               "column": 3
@@ -125,7 +159,7 @@ }
             "start": {
-              "line": 205,
+              "line": 228,
               "column": 2
             },
             "end": {
-              "line": 207,
+              "line": 230,
               "column": 3
@@ -143,7 +177,7 @@ }
             "start": {
-              "line": 213,
+              "line": 236,
               "column": 2
             },
             "end": {
-              "line": 215,
+              "line": 238,
               "column": 3
@@ -161,7 +195,7 @@ }
             "start": {
-              "line": 221,
+              "line": 244,
               "column": 2
             },
             "end": {
-              "line": 223,
+              "line": 246,
               "column": 3
@@ -179,7 +213,7 @@ }
             "start": {
-              "line": 225,
+              "line": 248,
               "column": 2
             },
             "end": {
-              "line": 227,
+              "line": 250,
               "column": 3
@@ -197,7 +231,7 @@ }
             "start": {
-              "line": 233,
+              "line": 256,
               "column": 2
             },
             "end": {
-              "line": 235,
+              "line": 258,
               "column": 3
@@ -215,7 +249,7 @@ }
             "start": {
-              "line": 241,
+              "line": 264,
               "column": 2
             },
             "end": {
-              "line": 243,
+              "line": 266,
               "column": 3
@@ -233,7 +267,7 @@ }
             "start": {
-              "line": 249,
+              "line": 272,
               "column": 2
             },
             "end": {
-              "line": 251,
+              "line": 274,
               "column": 3
@@ -252,7 +286,7 @@ }
             "start": {
-              "line": 90,
+              "line": 93,
               "column": 2
             },
             "end": {
-              "line": 104,
+              "line": 109,
               "column": 3
@@ -273,7 +307,7 @@ }
             "start": {
-              "line": 107,
+              "line": 112,
               "column": 2
             },
             "end": {
-              "line": 128,
+              "line": 135,
               "column": 3
@@ -304,7 +338,7 @@ }
             "start": {
-              "line": 130,
+              "line": 137,
               "column": 2
             },
             "end": {
-              "line": 135,
+              "line": 142,
               "column": 3
@@ -321,11 +355,11 @@ }
           "name": "render",
-          "description": "",
+          "description": "render a given src as it will be calculated",
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 137,
+              "line": 144,
               "column": 2
             },
             "end": {
-              "line": 150,
+              "line": 157,
               "column": 3
@@ -335,3 +369,7 @@ }
           "metadata": {},
-          "params": [],
+          "params": [
+            {
+              "name": "src"
+            }
+          ],
           "return": {
@@ -351,3 +389,3 @@ "type": "void"
         "end": {
-          "line": 256,
+          "line": 279,
           "column": 1
@@ -354,0 +392,0 @@ }

package.json

@@ -23,3 +23,3 @@ {
   },
-  "version": "4.0.26",
+  "version": "4.0.27",
   "description": "simple image manipulation with a microservice",
@@ -48,3 +48,3 @@ "repository": {
   "dependencies": {
-    "@lrnwebcomponents/micro-frontend-registry": "^4.0.26"
+    "@lrnwebcomponents/micro-frontend-registry": "^4.0.27"
   },
@@ -74,3 +74,3 @@ "devDependencies": {
   ],
-  "gitHead": "3bbd2c3e61b733676cfc09959011f8ade1cd0ea0"
+  "gitHead": "740d4ce566c6629f95575c1da524c4cdea3b6f78"
 }

simple-img.js

@@ -27,7 +27,8 @@ import {
         fit: "how to crop if height and width are supplied (https://sharp.pixelplumbing.com/api-resize)",
+        watermark: "SRC for an image to watermark on the output",
+        wmspot: "nw,ne,se,sw for moving the location of the watermark",
         rotate: "https://sharp.pixelplumbing.com/api-operation#rotate",
         format: "png, jpg, gif, webp",
       },
-    });
-    MicroFrontendRegistry.define(mf);
+    }, true);
     this.rendering = false;
@@ -87,2 +88,4 @@ // progressive enhancement, tho less performant
       "fit",
+      "watermark",
+      "wmspot",
       "format",
@@ -103,2 +106,4 @@ ];
         fit: this.fit,
+        watermark: this.watermark,
+        wmspot: this.wmspot,
         format: this.format,
@@ -113,3 +118,3 @@ };
     if (
-      ["width", "height", "quality", "src", "rotate", "fit", "format"].includes(
+      ["width", "height", "quality", "src", "rotate", "fit", "format", "watermark", "wmspot"].includes(
         attr
@@ -124,8 +129,10 @@ )
       // loads the image in the background in-case of quality change
+      // also then supports failure events
       let i = new Image();
       i.onload = () => {
-        this.render();
+        this.render(this.srcconverted);
       };
+      // try loading just the normal one if this bombed
       i.onerror = () => {
-        this.rendering = false;
+        this.render(this.src);
       };
@@ -142,8 +149,8 @@ i.src = this.srcconverted;
   }
-
-  render() {
+  // render a given src as it will be calculated
+  render(src) {
     this.innerHTML = null;
     this.innerHTML = `
     <img 
-      src="${this.srcconverted}" 
+      src="${src}" 
       height="${this.height}" 
@@ -176,2 +183,18 @@ width="${this.width}"
 
+  get watermark() {
+    return this.getAttribute("watermark");
+  }
+
+  set watermark(val) {
+    this.setAttribute("watermark", val);
+  }
+
+  get wmspot() {
+    return this.getAttribute("wmspot");
+  }
+
+  set wmspot(val) {
+    this.setAttribute("wmspot", val);
+  }
+
   get format() {
@@ -178,0 +201,0 @@ return this.getAttribute("format");

src/simple-img.js

@@ -27,7 +27,8 @@ import {
         fit: "how to crop if height and width are supplied (https://sharp.pixelplumbing.com/api-resize)",
+        watermark: "SRC for an image to watermark on the output",
+        wmspot: "nw,ne,se,sw for moving the location of the watermark",
         rotate: "https://sharp.pixelplumbing.com/api-operation#rotate",
         format: "png, jpg, gif, webp",
       },
-    });
-    MicroFrontendRegistry.define(mf);
+    }, true);
     this.rendering = false;
@@ -87,2 +88,4 @@ // progressive enhancement, tho less performant
       "fit",
+      "watermark",
+      "wmspot",
       "format",
@@ -103,2 +106,4 @@ ];
         fit: this.fit,
+        watermark: this.watermark,
+        wmspot: this.wmspot,
         format: this.format,
@@ -113,3 +118,3 @@ };
     if (
-      ["width", "height", "quality", "src", "rotate", "fit", "format"].includes(
+      ["width", "height", "quality", "src", "rotate", "fit", "format", "watermark", "wmspot"].includes(
         attr
@@ -124,8 +129,10 @@ )
       // loads the image in the background in-case of quality change
+      // also then supports failure events
       let i = new Image();
       i.onload = () => {
-        this.render();
+        this.render(this.srcconverted);
       };
+      // try loading just the normal one if this bombed
       i.onerror = () => {
-        this.rendering = false;
+        this.render(this.src);
       };
@@ -142,8 +149,8 @@ i.src = this.srcconverted;
   }
-
-  render() {
+  // render a given src as it will be calculated
+  render(src) {
     this.innerHTML = null;
     this.innerHTML = `
     <img 
-      src="${this.srcconverted}" 
+      src="${src}" 
       height="${this.height}" 
@@ -176,2 +183,18 @@ width="${this.width}"
 
+  get watermark() {
+    return this.getAttribute("watermark");
+  }
+
+  set watermark(val) {
+    this.setAttribute("watermark", val);
+  }
+
+  get wmspot() {
+    return this.getAttribute("wmspot");
+  }
+
+  set wmspot(val) {
+    this.setAttribute("wmspot", val);
+  }
+
   get format() {
@@ -178,0 +201,0 @@ return this.getAttribute("format");

No alert changes

Improved metrics

Total package byte prevSize

65023

increased by4.37%

Lines of code

1503

increased by5.47%

Dependency changes

• Updated@lrnwebcomponents/micro-frontend-registry@^4.0.27