v-lazy-image - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

dist/v-lazy-image.cjs.js

 /**
- * v-lazy-image v1.2.2
- * (c) 2018 Alex Jover Morales <[e-mail]>
+ * v-lazy-image v1.3.0
+ * (c) 2019 Alex Jover Morales <[e-mail]>
  * @license MIT
@@ -27,4 +27,9 @@ */
       default: function () { return ({}); }
+    },
+    usePicture: {
+      type: Boolean,
+      default: false
     }
   },
+  inheritAttrs: false,
   data: function () { return ({ observer: null, intersected: false, loaded: false }); },
@@ -39,10 +44,32 @@ computed: {
   },
+  methods: {
+    load: function load() {
+      if (this.$el.getAttribute("src") !== this.srcPlaceholder) {
+        this.loaded = true;
+        this.$emit("load");
+      }
+    }
+  },
   render: function render(h) {
-    return h("img", {
-      attrs: { src: this.srcImage, srcset: this.srcsetImage },
+    var img = h("img", {
+      attrs: {
+        src: this.srcImage,
+        srcset: this.srcsetImage
+      },
+      domProps: this.$attrs,
       class: {
         "v-lazy-image": true,
         "v-lazy-image-loaded": this.loaded
-      }
+      },
+      on: { load: this.load }
     });
+
+    if (this.usePicture) {
+      return h("picture", { on: { load: this.load } }, [
+        this.$slots.default,
+        img
+      ]);
+    } else {
+      return img;
+    }
   },
@@ -52,9 +79,2 @@ mounted: function mounted() {
 
-    this.$el.addEventListener("load", function (ev) {
-      if (this$1.$el.getAttribute('src') !== this$1.srcPlaceholder) {
-        this$1.loaded = true;
-        this$1.$emit("load");
-      }
-    });
-
     this.observer = new IntersectionObserver(function (entries) {
@@ -68,3 +88,2 @@ var image = entries[0];
     }, this.intersectionOptions);
-
     this.observer.observe(this.$el);
@@ -71,0 +90,0 @@ },

dist/v-lazy-image.es.js

 /**
- * v-lazy-image v1.2.2
- * (c) 2018 Alex Jover Morales <[e-mail]>
+ * v-lazy-image v1.3.0
+ * (c) 2019 Alex Jover Morales <[e-mail]>
  * @license MIT
@@ -23,4 +23,9 @@ */
       default: function () { return ({}); }
+    },
+    usePicture: {
+      type: Boolean,
+      default: false
     }
   },
+  inheritAttrs: false,
   data: function () { return ({ observer: null, intersected: false, loaded: false }); },
@@ -35,10 +40,32 @@ computed: {
   },
+  methods: {
+    load: function load() {
+      if (this.$el.getAttribute("src") !== this.srcPlaceholder) {
+        this.loaded = true;
+        this.$emit("load");
+      }
+    }
+  },
   render: function render(h) {
-    return h("img", {
-      attrs: { src: this.srcImage, srcset: this.srcsetImage },
+    var img = h("img", {
+      attrs: {
+        src: this.srcImage,
+        srcset: this.srcsetImage
+      },
+      domProps: this.$attrs,
       class: {
         "v-lazy-image": true,
         "v-lazy-image-loaded": this.loaded
-      }
+      },
+      on: { load: this.load }
     });
+
+    if (this.usePicture) {
+      return h("picture", { on: { load: this.load } }, [
+        this.$slots.default,
+        img
+      ]);
+    } else {
+      return img;
+    }
   },
@@ -48,9 +75,2 @@ mounted: function mounted() {
 
-    this.$el.addEventListener("load", function (ev) {
-      if (this$1.$el.getAttribute('src') !== this$1.srcPlaceholder) {
-        this$1.loaded = true;
-        this$1.$emit("load");
-      }
-    });
-
     this.observer = new IntersectionObserver(function (entries) {
@@ -64,3 +84,2 @@ var image = entries[0];
     }, this.intersectionOptions);
-
     this.observer.observe(this.$el);
@@ -67,0 +86,0 @@ },

dist/v-lazy-image.js

 /**
- * v-lazy-image v1.2.2
- * (c) 2018 Alex Jover Morales <[e-mail]>
+ * v-lazy-image v1.3.0
+ * (c) 2019 Alex Jover Morales <[e-mail]>
  * @license MIT
@@ -29,4 +29,9 @@ */
       default: function () { return ({}); }
+    },
+    usePicture: {
+      type: Boolean,
+      default: false
     }
   },
+  inheritAttrs: false,
   data: function () { return ({ observer: null, intersected: false, loaded: false }); },
@@ -41,10 +46,32 @@ computed: {
   },
+  methods: {
+    load: function load() {
+      if (this.$el.getAttribute("src") !== this.srcPlaceholder) {
+        this.loaded = true;
+        this.$emit("load");
+      }
+    }
+  },
   render: function render(h) {
-    return h("img", {
-      attrs: { src: this.srcImage, srcset: this.srcsetImage },
+    var img = h("img", {
+      attrs: {
+        src: this.srcImage,
+        srcset: this.srcsetImage
+      },
+      domProps: this.$attrs,
       class: {
         "v-lazy-image": true,
         "v-lazy-image-loaded": this.loaded
-      }
+      },
+      on: { load: this.load }
     });
+
+    if (this.usePicture) {
+      return h("picture", { on: { load: this.load } }, [
+        this.$slots.default,
+        img
+      ]);
+    } else {
+      return img;
+    }
   },
@@ -54,9 +81,2 @@ mounted: function mounted() {
 
-    this.$el.addEventListener("load", function (ev) {
-      if (this$1.$el.getAttribute('src') !== this$1.srcPlaceholder) {
-        this$1.loaded = true;
-        this$1.$emit("load");
-      }
-    });
-
     this.observer = new IntersectionObserver(function (entries) {
@@ -70,3 +90,2 @@ var image = entries[0];
     }, this.intersectionOptions);
-
     this.observer.observe(this.$el);
@@ -73,0 +92,0 @@ },

dist/v-lazy-image.min.js

 /**
- * v-lazy-image v1.2.2
- * (c) 2018 Alex Jover Morales <[e-mail]>
+ * v-lazy-image v1.3.0
+ * (c) 2019 Alex Jover Morales <[e-mail]>
  * @license MIT
  */
 
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.VLazyImage={})}(this,function(e){"use strict";var t={props:{src:{type:String,required:!0},srcPlaceholder:{type:String,default:""},srcset:{type:String},intersectionOptions:{type:Object,default:function(){return{}}}},data:function(){return{observer:null,intersected:!1,loaded:!1}},computed:{srcImage:function(){return this.intersected?this.src:this.srcPlaceholder},srcsetImage:function(){return!(!this.intersected||!this.srcset)&&this.srcset}},render:function(e){return e("img",{attrs:{src:this.srcImage,srcset:this.srcsetImage},class:{"v-lazy-image":!0,"v-lazy-image-loaded":this.loaded}})},mounted:function(){var e=this;this.$el.addEventListener("load",function(t){e.$el.getAttribute("src")!==e.srcPlaceholder&&(e.loaded=!0,e.$emit("load"))}),this.observer=new IntersectionObserver(function(t){t[0].isIntersecting&&(e.intersected=!0,e.observer.disconnect(),e.$emit("intersect"))},this.intersectionOptions),this.observer.observe(this.$el)},destroyed:function(){this.observer.disconnect()}},s={install:function(e,s){e.component("VLazyImage",t)}};e.default=t,e.VLazyImagePlugin=s,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.VLazyImage={})}(this,function(e){"use strict";var t={props:{src:{type:String,required:!0},srcPlaceholder:{type:String,default:""},srcset:{type:String},intersectionOptions:{type:Object,default:function(){return{}}},usePicture:{type:Boolean,default:!1}},inheritAttrs:!1,data:function(){return{observer:null,intersected:!1,loaded:!1}},computed:{srcImage:function(){return this.intersected?this.src:this.srcPlaceholder},srcsetImage:function(){return!(!this.intersected||!this.srcset)&&this.srcset}},methods:{load:function(){this.$el.getAttribute("src")!==this.srcPlaceholder&&(this.loaded=!0,this.$emit("load"))}},render:function(e){var t=e("img",{attrs:{src:this.srcImage,srcset:this.srcsetImage},domProps:this.$attrs,class:{"v-lazy-image":!0,"v-lazy-image-loaded":this.loaded},on:{load:this.load}});return this.usePicture?e("picture",{on:{load:this.load}},[this.$slots.default,t]):t},mounted:function(){var e=this;this.observer=new IntersectionObserver(function(t){t[0].isIntersecting&&(e.intersected=!0,e.observer.disconnect(),e.$emit("intersect"))},this.intersectionOptions),this.observer.observe(this.$el)},destroyed:function(){this.observer.disconnect()}},s={install:function(e,s){e.component("VLazyImage",t)}};e.default=t,e.VLazyImagePlugin=s,Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "v-lazy-image",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "A Vue.js component to lazy load images using the Intersection Observer",
@@ -15,3 +15,4 @@ "main": "dist/v-lazy-image.cjs.js",
     "build": "rollit",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test": "jest"
   },
@@ -37,2 +38,9 @@ "repository": {
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.28",
+    "babel-core": "^6.26.3",
+    "babel-jest": "^23.6.0",
+    "babel-preset-env": "^1.7.0",
+    "intersection-observer": "^0.5.1",
+    "jest": "^23.6.0",
+    "jest-serializer-vue": "^2.0.2",
     "rollit": "0.0.7"
@@ -42,3 +50,11 @@ },
     "vue": "^2.0.0"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js"
+    ],
+    "snapshotSerializers": [
+      "jest-serializer-vue"
+    ]
   }
 }

README.md

@@ -109,3 +109,3 @@ # v-lazy-image
 
-When using the `srcset` attribute is recommended to use also `src` as a fallback for browsers that doesn't support the `srcset` and `sizes` attributes:
+When using the `srcset` attribute is recommended to use also `src` as a fallback for browsers that don't support the `srcset` and `sizes` attributes:
 
@@ -124,2 +124,28 @@ ```html
 
+## Picture
+
+If you want to wrap the `img` in a `picture` tag, use the prop `usePicture`. You can then use slots to add additional elements above the `img` element`.
+
+```html
+<v-lazy-image
+  srcset="image-320w.jpg 320w, image-480w.jpg 480w"
+  alt="Fallback"
+  use-picture
+>
+  <source srcset="image-320w.jpg 320w, image-480w.jpg 480w" />
+</v-lazy-image>
+
+```
+
+Renders as:
+
+```html
+<picture>
+  <source srcset="image-320w.jpg 320w, image-480w.jpg 480w" />
+  <img srcset="image-320w.jpg 320w, image-480w.jpg 480w" alt="Fallback"/>
+</picture>
+```
+
+Note you can use the [picture polyfill](https://github.com/scottjehl/picturefill).
+
 ## API
@@ -126,0 +152,0 @@

src/index.js

@@ -17,4 +17,9 @@ const VLazyImageComponent = {
       default: () => ({})
+    },
+    usePicture: {
+      type: Boolean,
+      default: false
     }
   },
+  inheritAttrs: false,
   data: () => ({ observer: null, intersected: false, loaded: false }),
@@ -29,19 +34,34 @@ computed: {
   },
+  methods: {
+    load() {
+      if (this.$el.getAttribute("src") !== this.srcPlaceholder) {
+        this.loaded = true;
+        this.$emit("load");
+      }
+    }
+  },
   render(h) {
-    return h("img", {
-      attrs: { src: this.srcImage, srcset: this.srcsetImage },
+    let img = h("img", {
+      attrs: {
+        src: this.srcImage,
+        srcset: this.srcsetImage
+      },
+      domProps: this.$attrs,
       class: {
         "v-lazy-image": true,
         "v-lazy-image-loaded": this.loaded
-      }
+      },
+      on: { load: this.load }
     });
+
+    if (this.usePicture) {
+      return h("picture", { on: { load: this.load } }, [
+        this.$slots.default,
+        img
+      ]);
+    } else {
+      return img;
+    }
   },
   mounted() {
-    this.$el.addEventListener("load", ev => {
-      if (this.$el.getAttribute('src') !== this.srcPlaceholder) {
-        this.loaded = true;
-        this.$emit("load");
-      }
-    });
-
     this.observer = new IntersectionObserver(entries => {
@@ -55,3 +75,2 @@ const image = entries[0];
     }, this.intersectionOptions);
-
     this.observer.observe(this.$el);
@@ -58,0 +77,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

20300

increased by26.15%

Number of package files

11

increased by37.5%

Lines of code

421

increased by46.69%

Number of lines in readme file

170

increased by18.06%

Worsened metrics

Dev dependency count

8

increased by700%

No dependency changes