@lrnwebcomponents/simple-icon - npm Package Compare versions

Comparing version 2.7.6 to 2.7.7

analysis.json

@@ -12,11 +12,11 @@ {
           "name": "registerIconset",
-          "description": "Iconsets are to register a namespace like so.\n{\n  icon: iconLocation,\n  icon2: iconLocation2\n}",
+          "description": "Iconsets are to register a namespace in either manner:\nobject notation: key name of the icon with a specific path to the file\n{\n  icon: iconLocation,\n  icon2: iconLocation2\n}\nstring notation: assumes icon name can be found at ${iconLocationBasePath}${iconname}.svg\niconLocationBasePath",
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 18,
+              "line": 22,
               "column": 2
             },
             "end": {
-              "line": 20,
+              "line": 43,
               "column": 3
@@ -41,11 +41,11 @@ }
           "name": "getIcon",
-          "description": "return the icon based on splitting the string on : for position in the object",
+          "description": "return the icon location on splitting the string on : for position in the object\nif the icon doesn't exist, it sets a value for future updates in the event\nthat the library for the icon registers AFTER the request to visualize is made",
           "privacy": "public",
           "sourceRange": {
             "start": {
-              "line": 24,
+              "line": 49,
               "column": 2
             },
             "end": {
-              "line": 30,
+              "line": 67,
               "column": 3
@@ -57,3 +57,6 @@ }
             {
-              "name": "value"
+              "name": "val"
+            },
+            {
+              "name": "context"
             }
@@ -72,3 +75,3 @@ ]
         "end": {
-          "line": 31,
+          "line": 68,
           "column": 1
@@ -93,7 +96,7 @@ }
             "start": {
-              "line": 48,
+              "line": 44,
               "column": 2
             },
             "end": {
-              "line": 63,
+              "line": 66,
               "column": 3
@@ -111,7 +114,7 @@ }
             "start": {
-              "line": 77,
+              "line": 80,
               "column": 2
             },
             "end": {
-              "line": 84,
+              "line": 91,
               "column": 3
@@ -131,2 +134,23 @@ }
         {
+          "name": "setSrcByIcon",
+          "description": "Set the src by the icon property",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 95,
+              "column": 2
+            },
+            "end": {
+              "line": 101,
+              "column": 3
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "context"
+            }
+          ]
+        },
+        {
           "name": "updated",
@@ -137,7 +161,7 @@ "description": "",
             "start": {
-              "line": 85,
+              "line": 102,
               "column": 2
             },
             "end": {
-              "line": 108,
+              "line": 123,
               "column": 3
@@ -175,3 +199,3 @@ }
         "end": {
-          "line": 109,
+          "line": 124,
           "column": 1
@@ -178,0 +202,0 @@ }

lib/simple-iconset.js

@@ -11,5 +11,7 @@ /**
     this.iconsets = {};
+    this.needsHydrated = [];
   }
   /**
-   * Iconsets are to register a namespace like so.
+   * Iconsets are to register a namespace in either manner:
+   * object notation: key name of the icon with a specific path to the file
    * {
@@ -19,14 +21,49 @@ *   icon: iconLocation,
    * }
+   * string notation: assumes icon name can be found at ${iconLocationBasePath}${iconname}.svg
+   * iconLocationBasePath
    */
   registerIconset(name, icons = {}) {
-    this.iconsets[name] = { ...icons };
+    if (typeof icons === "object") {
+      this.iconsets[name] = { ...icons };
+    } else if (typeof icons === "string") {
+      this.iconsets[name] = icons;
+    }
+    // try processing anything that might have missed previously
+    if (this.needsHydrated.length > 0) {
+      let list = [];
+      this.needsHydrated.forEach((item, index) => {
+        // set the src from interns of the icon, returns if it matched
+        // which will then push it into the list to be removed from processing
+        if (item.setSrcByIcon(this)) {
+          list.push(index);
+        }
+      });
+      // process in reverse order to avoid key splicing issues
+      list.reverse().forEach(val => {
+        this.needsHydrated.splice(val, 1);
+      });
+    }
   }
   /**
-   * return the icon based on splitting the string on : for position in the object
+   * return the icon location on splitting the string on : for position in the object
+   * if the icon doesn't exist, it sets a value for future updates in the event
+   * that the library for the icon registers AFTER the request to visualize is made
    */
-  getIcon(val) {
+  getIcon(val, context) {
     let ary = val.split(":");
     if (ary.length == 2 && this.iconsets[ary[0]]) {
-      return this.iconsets[ary[0]][ary[1]];
+      if (this.iconsets[ary[0]][ary[1]]) {
+        return this.iconsets[ary[0]][ary[1]];
+      } else {
+        return `${this.iconsets[ary[0]]}${ary[1]}.svg`;
+      }
     }
+    // if we get here we just missed on the icon hydrating which means
+    // either it's an invalid icon OR the library to register the icons
+    // location will import AFTER (possible microtiming early on)
+    // also weird looking by context is either the element asking about
+    // itself OR the the iconset state manager checking for hydration
+    if (context != this) {
+      this.needsHydrated.push(context);
+    }
     return null;
@@ -60,3 +97,3 @@ }
 };
-// self request
+// self request so that when this file is referenced it exists in the dom
 window.SimpleIconset.requestAvailability();

package.json

@@ -17,3 +17,3 @@ {
   },
-  "version": "2.7.6",
+  "version": "2.7.7",
   "description": "Render an SVG based icon",
@@ -41,7 +41,7 @@ "repository": {
   "dependencies": {
-    "@lrnwebcomponents/simple-colors": "^2.7.6",
+    "@lrnwebcomponents/simple-colors": "^2.7.7",
     "lit-element": "2.4.0"
   },
   "devDependencies": {
-    "@lrnwebcomponents/deduping-fix": "2.6.16",
+    "@lrnwebcomponents/deduping-fix": "^2.7.7",
     "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
@@ -67,3 +67,3 @@ "@polymer/iron-demo-helpers": "3.1.0",
   ],
-  "gitHead": "2e650285ee64811514d2c8178404683f96ef0800"
+  "gitHead": "5b346a23a41445900c73e9b8748be86b6f7db550"
 }

simple-icon.js

@@ -19,6 +19,2 @@ /**
 class SimpleIcon extends SimpleColors {
-  constructor() {
-    super();
-    window.SimpleIconset.requestAvailability();
-  }
   /**
@@ -98,2 +94,12 @@ * This is a convention, not the standard
   }
+  /**
+   * Set the src by the icon property
+   */
+  setSrcByIcon(context) {
+    this.src = window.SimpleIconset.requestAvailability().getIcon(
+      this.icon,
+      context
+    );
+    return this.src;
+  }
   updated(changedProperties) {
@@ -106,5 +112,3 @@ if (super.updated) {
         if (this[propName]) {
-          this.src = window.SimpleIconset.requestAvailability().getIcon(
-            this[propName]
-          );
+          this.setSrcByIcon(this);
         } else {
@@ -120,4 +124,2 @@ this.src = null;
             .setAttribute("xlink:href", this[propName]);
-        } else {
-          this.shadowRoot.querySelector("image").removeAttribute("xlink:href");
         }
@@ -124,0 +126,0 @@ }

src/simple-icon.js

@@ -19,6 +19,2 @@ /**
 class SimpleIcon extends SimpleColors {
-  constructor() {
-    super();
-    window.SimpleIconset.requestAvailability();
-  }
   /**
@@ -98,2 +94,12 @@ * This is a convention, not the standard
   }
+  /**
+   * Set the src by the icon property
+   */
+  setSrcByIcon(context) {
+    this.src = window.SimpleIconset.requestAvailability().getIcon(
+      this.icon,
+      context
+    );
+    return this.src;
+  }
   updated(changedProperties) {
@@ -106,5 +112,3 @@ if (super.updated) {
         if (this[propName]) {
-          this.src = window.SimpleIconset.requestAvailability().getIcon(
-            this[propName]
-          );
+          this.setSrcByIcon(this);
         } else {
@@ -120,4 +124,2 @@ this.src = null;
             .setAttribute("xlink:href", this[propName]);
-        } else {
-          this.shadowRoot.querySelector("image").removeAttribute("xlink:href");
         }
@@ -124,0 +126,0 @@ }

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

41749

increased by4.66%

Lines of code

792

increased by5.18%

Number of medium supply chain risk alerts

1

decreased by-50%

Dependency changes

• Updated@lrnwebcomponents/simple-colors@^2.7.7