vue-inline-svg - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

CHANGELOG.md

@@ -0,1 +1,5 @@
+## 1.3.0 - 2020-03-23
+- Fix: `@loaded` event fired to early (it was fired on SVG load, not on component render)
+- Add: pass SVG element as argument to the `@loaded` callback
+
 ## 1.2.0 - 2019-11-26
@@ -2,0 +6,0 @@ - Add: `transformSource` prop [#9](https://github.com/shrpne/vue-inline-svg/pull/9)

demo/index.js

@@ -23,3 +23,8 @@ // eslint-disable-next-line import/extensions
         },
+        logLoaded(el, id) {
+            console.log(id)
+            console.log(el)
+            console.log(document.querySelector(`#${id}`));
+        },
     },
 });

dist/vue-inline-svg.js

@@ -34,5 +34,5 @@ (function (global, factory) {
           on: this.$listeners,
-          attrs: Object.assign(this.initialAttrs, filterAttrs(this.$attrs)),
+          attrs: Object.assign(this.svgAttrs, filterAttrs(this.$attrs)),
           domProps: {
-            innerHTML: this.initialContent
+            innerHTML: this.svgContent
           }
@@ -56,4 +56,4 @@ });
           isLoaded: false,
-          initialAttrs: {},
-          initialContent: ''
+          svgAttrs: {},
+          svgContent: ''
         };
@@ -94,15 +94,18 @@ },
             // copy attrs
-            _this.initialAttrs = {};
+            _this.svgAttrs = {};
             var attrs = svg.attributes;
 
             for (var i = attrs.length - 1; i >= 0; i--) {
-              _this.initialAttrs[attrs[i].name] = attrs[i].value;
+              _this.svgAttrs[attrs[i].name] = attrs[i].value;
             } // copy inner html
 
 
-            _this.initialContent = svg.innerHTML; // render svg element
+            _this.svgContent = svg.innerHTML; // render svg element
 
-            _this.isLoaded = true; // notify
+            _this.isLoaded = true; // wait to render
 
-            _this.$emit('loaded');
+            _this.$nextTick(function () {
+              // notify
+              _this.$emit('loaded', _this.$el);
+            });
           })["catch"](function (err) {
@@ -109,0 +112,0 @@ // remove cached rejected promise so next image can try load again

dist/vue-inline-svg.min.js

@@ -1,1 +0,1 @@
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t=t||self).VueInlineSvg={})}(this,(function(t){"use strict";var n={};var e={inheritAttrs:!1,render:function(t){return this.isLoaded?t("svg",{on:this.$listeners,attrs:Object.assign(this.initialAttrs,(n=this.$attrs,Object.keys(n).reduce((function(t,e){return!1!==n[e]&&null!==n[e]&&void 0!==n[e]&&(t[e]=n[e]),t}),{}))),domProps:{innerHTML:this.initialContent}}):null;var n},props:{src:{type:String,required:!0},transformSource:{type:Function,default:function(t){return t}}},data:function(){return{isLoaded:!1,initialAttrs:{},initialContent:""}},watch:{src:function(t){this.inline(t)}},mounted:function(){this.inline(this.src)},methods:{inline:function(t){var e=this;n[t]||(this.isLoaded&&(this.isLoaded=!1,this.$emit("unloaded")),n[t]=this.download(t)),n[t].then((function(t){e.initialAttrs={};for(var n=t.attributes,i=n.length-1;i>=0;i--)e.initialAttrs[n[i].name]=n[i].value;e.initialContent=t.innerHTML,e.isLoaded=!0,e.$emit("loaded")})).catch((function(i){delete n[t],e.$emit("error",i)}))},download:function(t){var n=this;return new Promise((function(e,i){var r=new XMLHttpRequest;r.open("GET",t,!0),r.onload=function(){if(r.status>=200&&r.status<400)try{var t=(new DOMParser).parseFromString(r.responseText,"text/xml").getElementsByTagName("svg")[0];t?(t=n.transformSource(t),e(t)):i(new Error('Loaded file is not valid SVG"'))}catch(t){i(t)}else i(new Error("Error loading SVG"))},r.onerror=i,r.send()}))}}},i={install:function(t){t.component("inline-svg",e)}};t.InlineSvgComponent=e,t.InlineSvgPlugin=i,t.default=e,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).VueInlineSvg={})}(this,(function(t){"use strict";var e={};var n={inheritAttrs:!1,render:function(t){return this.isLoaded?t("svg",{on:this.$listeners,attrs:Object.assign(this.svgAttrs,(e=this.$attrs,Object.keys(e).reduce((function(t,n){return!1!==e[n]&&null!==e[n]&&void 0!==e[n]&&(t[n]=e[n]),t}),{}))),domProps:{innerHTML:this.svgContent}}):null;var e},props:{src:{type:String,required:!0},transformSource:{type:Function,default:function(t){return t}}},data:function(){return{isLoaded:!1,svgAttrs:{},svgContent:""}},watch:{src:function(t){this.inline(t)}},mounted:function(){this.inline(this.src)},methods:{inline:function(t){var n=this;e[t]||(this.isLoaded&&(this.isLoaded=!1,this.$emit("unloaded")),e[t]=this.download(t)),e[t].then((function(t){n.svgAttrs={};for(var e=t.attributes,i=e.length-1;i>=0;i--)n.svgAttrs[e[i].name]=e[i].value;n.svgContent=t.innerHTML,n.isLoaded=!0,n.$nextTick((function(){n.$emit("loaded",n.$el)}))})).catch((function(i){delete e[t],n.$emit("error",i)}))},download:function(t){var e=this;return new Promise((function(n,i){var r=new XMLHttpRequest;r.open("GET",t,!0),r.onload=function(){if(r.status>=200&&r.status<400)try{var t=(new DOMParser).parseFromString(r.responseText,"text/xml").getElementsByTagName("svg")[0];t?(t=e.transformSource(t),n(t)):i(new Error('Loaded file is not valid SVG"'))}catch(t){i(t)}else i(new Error("Error loading SVG"))},r.onerror=i,r.send()}))}}},i={install:function(t){t.component("inline-svg",n)}};t.InlineSvgComponent=n,t.InlineSvgPlugin=i,t.default=n,Object.defineProperty(t,"__esModule",{value:!0})}));

package.json

 {
   "name": "vue-inline-svg",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Replace SVG images with inline SVG element",
@@ -36,12 +36,12 @@ "main": "dist/vue-inline-svg.js",
   "devDependencies": {
-    "@babel/core": "^7.7.4",
-    "@babel/preset-env": "^7.7.4",
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
     "eslint": "^6",
-    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-config-airbnb-base": "^14.1.0",
+    "eslint-plugin-import": "^2.20.1",
     "pre-commit": "^1.2.2",
-    "rollup": "^1.27.5",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-terser": "^5.1.2"
+    "rollup": "^2.1.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-terser": "^5.3.0"
   }
 }

README.md

@@ -74,5 +74,5 @@ # Vue Inline SVG
     transformSource="transformSvg"
-    @loaded="svgLoaded()"
+    @loaded="svgLoaded($event)"
     @unloaded="svgUnloaded()"
-    @error="svgLoadError()"
+    @error="svgLoadError($event)"
     width="150" 
@@ -124,9 +124,20 @@ height="150"
 #### - `loaded`
-called when <svg> image is loaded and inlined
+Called when SVG image is loaded and inlined.
+Inlined SVG element passed as argument into the listener’s callback function.
+```html
+<inline-svg @loaded="myInlinedSvg = $event"/>
+```
 
 #### - `unloaded`
-called when `src` prop was changed and another svg start loading
+Called when `src` prop was changed and another SVG start loading.
+```html
+<inline-svg @unloaded="handleUnloaded()"/>
+```
 
 #### - `error`
-called when svg failed to load
+Called when SVG failed to load.
+Error object passed as argument into the listener’s callback function.
+```html
+<inline-svg @error="log($event)"/>
+```
 
@@ -136,3 +147,4 @@ ## Comparison
 - This module: [![Minified Size](https://img.shields.io/bundlephobia/min/vue-inline-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=vue-inline-svg)
-- [`vue-simple-svg`](https://github.com/seiyable/vue-simple-svg): [![Minified Size](https://img.shields.io/bundlephobia/min/vue-simple-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=vue-simple-svg), does not cache network requests, has wrapper around svg, attrs passed to `<svg>` are limited, converts `<style>` tag into `style=""` attr
+- [vue-simple-svg](https://github.com/seiyable/vue-simple-svg): [![Minified Size](https://img.shields.io/bundlephobia/min/vue-simple-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=vue-simple-svg), does not cache network requests, has wrapper around svg, attrs passed to `<svg>` are limited, converts `<style>` tag into `style=""` attr
+- [svg-loader](https://github.com/visualfanatic/vue-svg-loader) uses different approach, it inlines SVG during compilation. It has pros that SVG is prerendered and no http request needed. But also it has cons that markup size grows, especially if you have same image repeated several times. (Discussed in [#11](https://github.com/shrpne/vue-inline-svg/issues/11))
 
@@ -139,0 +151,0 @@

src/index.js

@@ -29,5 +29,5 @@ /** @type Object{string: Promise<Element>} */
                 on: this.$listeners,
-                attrs: Object.assign(this.initialAttrs, filterAttrs(this.$attrs)),
+                attrs: Object.assign(this.svgAttrs, filterAttrs(this.$attrs)),
                 domProps: {
-                    innerHTML: this.initialContent,
+                    innerHTML: this.svgContent,
                 },
@@ -50,4 +50,4 @@ },
             isLoaded: false,
-            initialAttrs: {},
-            initialContent: '',
+            svgAttrs: {},
+            svgContent: '',
         };
@@ -86,13 +86,16 @@ },
                     // copy attrs
-                    this.initialAttrs = {};
+                    this.svgAttrs = {};
                     const attrs = svg.attributes;
                     for (let i = attrs.length - 1; i >= 0; i--) {
-                        this.initialAttrs[attrs[i].name] = attrs[i].value;
+                        this.svgAttrs[attrs[i].name] = attrs[i].value;
                     }
                     // copy inner html
-                    this.initialContent = svg.innerHTML;
+                    this.svgContent = svg.innerHTML;
                     // render svg element
                     this.isLoaded = true;
-                    // notify
-                    this.$emit('loaded');
+                    // wait to render
+                    this.$nextTick(() => {
+                        // notify
+                        this.$emit('loaded', this.$el);
+                    });
                 })
@@ -99,0 +102,0 @@ .catch((err) => {

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

49770

increased by2.65%

Lines of code

451

increased by2.5%

Number of lines in readme file

152

increased by8.57%

No dependency changes