svg-use-it - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

package.json

 {
   "name": "svg-use-it",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "SVG use polyfill for IE10",
@@ -5,0 +5,0 @@ "main": "src/index.js",

readme.md

@@ -1,2 +0,2 @@
-# SVGuseIt
+# SVG<use>It
 
@@ -6,5 +6,5 @@ ## About
 In many web projects there are browser lists including IE10 and 11
-which sadly don't support fragment identifiers on external resources.
+which sadly don't support SVG fragment identifiers on external resources.
 
-This polyfill solves this problem by simply inlining the references shapes from
+This polyfill solves this problem by simply inlining the referenced shapes from
 the given file **without user agent sniffing**.
@@ -26,3 +26,4 @@
 
-Just import *SVGuseIt* into your script and execute it on `DOMContentLoaded`:
+Just import `svgUseIt` into your script (which gets included at the bottom of
+your HTML) or execute it on `DOMContentLoaded`:
 ```javascript
@@ -37,10 +38,30 @@ import svgUseIt from 'svg-use-it';
 ## Options
+`svgUseIt` takes two paramters:
 
 ### rootSelector
 Provide a root selector to search in `<string>`.
-Default: `body`
 
+* Default: `body`
+* Optional: true
+
 ### blacklist
 You can pass an array of direct children of [rootSelector](#rootSelector) to be
 ignored for replacement.
-Default: `[]`
+
+* Default: `[]`
+* Optional: true
+
+## Good to know
+
+### Feature detection
+Of course this polyfill should only do its job on browsers that don't support
+fragment identifiers from external resources.
+So I researched for a feature that could identify each IE except for MSEdge.
+Due to the fact, that `documentMode` is *just* supported in
+Internet Explorer <= 11, we can use it here to detect support for external
+fragments.
+
+```javascript
+// false on all browsers except for IE <= 11
+Boolean(document.documentMode);
+```

src/index.js

@@ -155,6 +155,8 @@ // anchor element as parser for URls as stated here: https://gist.github.com/jlong/2428561
 /**
- * @param {HTMLElement} testNode
+ * Due to the fact, that documentMode is *just* supported in
+ * Internet Explorer 5-11, we can use it here to detect support for external
+ * fragments.
  */
-function supportsExternalFragments (testNode) {
-	return testNode.getBoundingClientRect().width > 0;
+function notSupportsExternalFragments () {
+	return Boolean(document.documentMode);
 }
@@ -169,12 +171,4 @@
 	var query = 'use';
-	var testNode = document.querySelector(query);
-	var testNodeIsNode = testNode instanceof Node;
 
-	if (!testNodeIsNode) {
-		return;
-	}
-
-	var supportsExtFragments = supportsExternalFragments(testNode);
-
-	if (!supportsExtFragments) {
+	if (notSupportsExternalFragments()) {
 		// setting default values
@@ -181,0 +175,0 @@ rootSelector = rootSelector || 'body';

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

6574

increased by8.72%

Number of lines in readme file

65

increased by47.73%

Worsened metrics

Lines of code

152

decreased by-2.56%

No dependency changes