vue-lazy-hydration - npm Package Compare versions

Comparing version 1.0.0-beta.2 to 1.0.0-beta.3

dist/LazyHydrate.esm.js

 var isServer = typeof window === "undefined";
 var isBrowser = !isServer;
-var observer = null;
+var observers = new Map();
 
-if (typeof IntersectionObserver !== "undefined") {
-  observer = new IntersectionObserver(function (entries) {
+function createObserver(options) {
+  if (typeof IntersectionObserver === "undefined") return null;
+  var optionKey = JSON.stringify(options);
+  if (observers.has(optionKey)) return observers.get(optionKey);
+  var observer = new IntersectionObserver(function (entries) {
     entries.forEach(function (entry) {
@@ -15,3 +18,5 @@ // Use `intersectionRatio` because of Edge 15's
     });
-  });
+  }, options);
+  observers.set(optionKey, observer);
+  return observer;
 }
@@ -39,3 +44,3 @@
     whenVisible: {
-      type: Boolean
+      type: [Boolean, Object]
     }
@@ -110,3 +115,5 @@ },
     if (this.whenVisible) {
-      // If Intersection Observer API is not supported, hydrate immediately.
+      var options = this.whenVisible === true ? {} : this.whenVisible;
+      var observer = createObserver(options); // If Intersection Observer API is not supported, hydrate immediately.
+
       if (!observer) {
@@ -149,6 +156,6 @@ this.hydrate();
     var tag = this.$el ? this.$el.tagName : "div";
-    var children = this.$scopedSlots.default ? this.$scopedSlots.default({
+    var child = this.$scopedSlots.default ? this.$scopedSlots.default({
       hydrated: this.hydrated
     }) : this.$slots.default[0];
-    var vnode = this.hydrated ? children : h(tag); // Special thanks to Rahul Kadyan for the following lines of code.
+    var vnode = this.hydrated ? child : h(tag); // Special thanks to Rahul Kadyan for the following lines of code.
     // https://github.com/znck
@@ -155,0 +162,0 @@

dist/LazyHydrate.esm.min.js

@@ -1,1 +0,1 @@
-var isServer="undefined"==typeof window,isBrowser=!isServer,observer=null;"undefined"!=typeof IntersectionObserver&&(observer=new IntersectionObserver(function(e){e.forEach(function(e){(e.isIntersecting||e.intersectionRatio>0)&&e.target.parentElement.hydrate&&e.target.parentElement.hydrate()})}));var LazyHydrate={props:{idleTimeout:{default:2e3,type:Number},onInteraction:{type:[Array,Boolean,String]},ssrOnly:{type:Boolean},triggerHydration:{default:!1,type:Boolean},whenIdle:{type:Boolean},whenVisible:{type:Boolean}},data:function(){return{hydrated:isServer}},watch:{triggerHydration:{immediate:!0,handler:function(e){e&&this.hydrate()}}},computed:{interactionEvents:function(){return this.onInteraction?!0===this.onInteraction?["focus"]:Array.isArray(this.onInteraction)?this.onInteraction:[this.onInteraction]:[]}},mounted:function(){var e=this;if(0!==this.$el.childElementCount){if(!this.ssrOnly){if(this.interactionEvents.forEach(function(t){e.$el.addEventListener(t,e.hydrate,{capture:!0,once:!0})}),this.interactionEvents.length&&(this.interaction=function(){e.interactionEvents.forEach(function(t){return e.$el.removeEventListener(t,e.hydrate)})}),this.whenIdle){if(!("requestIdleCallback"in window&&"requestAnimationFrame"in window))return void this.hydrate();var t=requestIdleCallback(function(){requestAnimationFrame(function(){e.hydrate()})},{timeout:this.idleTimeout});this.idle=function(){return cancelIdleCallback(t)}}if(this.whenVisible){if(!observer)return void this.hydrate();this.$el.hydrate=this.hydrate,observer.observe(this.$el.children[0]),this.visible=function(){observer.unobserve(e.$el),delete e.$el.hydrate}}}}else this.hydrate()},beforeDestroy:function(){this.cleanup()},methods:{cleanup:function(){var e=this;["idle","interaction","visible"].forEach(function(t){t in e&&(e[t](),delete e[t])})},hydrate:function(){this.hydrated=!0,this.cleanup()}},render:function(e){var t=this.$el?this.$el.tagName:"div",n=this.$scopedSlots.default?this.$scopedSlots.default({hydrated:this.hydrated}):this.$slots.default[0],i=this.hydrated?n:e(t);return isBrowser&&(i.asyncFactory=this.hydrated?{resolved:!0}:{},i.isAsyncPlaceholder=!this.hydrated),i}};export default LazyHydrate;
+var isServer="undefined"==typeof window,isBrowser=!isServer,observers=new Map;function createObserver(e){if("undefined"==typeof IntersectionObserver)return null;var t=JSON.stringify(e);if(observers.has(t))return observers.get(t);var n=new IntersectionObserver(function(e){e.forEach(function(e){(e.isIntersecting||e.intersectionRatio>0)&&e.target.parentElement.hydrate&&e.target.parentElement.hydrate()})},e);return observers.set(t,n),n}var LazyHydrate={props:{idleTimeout:{default:2e3,type:Number},onInteraction:{type:[Array,Boolean,String]},ssrOnly:{type:Boolean},triggerHydration:{default:!1,type:Boolean},whenIdle:{type:Boolean},whenVisible:{type:[Boolean,Object]}},data:function(){return{hydrated:isServer}},watch:{triggerHydration:{immediate:!0,handler:function(e){e&&this.hydrate()}}},computed:{interactionEvents:function(){return this.onInteraction?!0===this.onInteraction?["focus"]:Array.isArray(this.onInteraction)?this.onInteraction:[this.onInteraction]:[]}},mounted:function(){var e=this;if(0!==this.$el.childElementCount){if(!this.ssrOnly){if(this.interactionEvents.forEach(function(t){e.$el.addEventListener(t,e.hydrate,{capture:!0,once:!0})}),this.interactionEvents.length&&(this.interaction=function(){e.interactionEvents.forEach(function(t){return e.$el.removeEventListener(t,e.hydrate)})}),this.whenIdle){if(!("requestIdleCallback"in window&&"requestAnimationFrame"in window))return void this.hydrate();var t=requestIdleCallback(function(){requestAnimationFrame(function(){e.hydrate()})},{timeout:this.idleTimeout});this.idle=function(){return cancelIdleCallback(t)}}if(this.whenVisible){var n=createObserver(!0===this.whenVisible?{}:this.whenVisible);if(!n)return void this.hydrate();this.$el.hydrate=this.hydrate,n.observe(this.$el.children[0]),this.visible=function(){n.unobserve(e.$el),delete e.$el.hydrate}}}}else this.hydrate()},beforeDestroy:function(){this.cleanup()},methods:{cleanup:function(){var e=this;["idle","interaction","visible"].forEach(function(t){t in e&&(e[t](),delete e[t])})},hydrate:function(){this.hydrated=!0,this.cleanup()}},render:function(e){var t=this.$el?this.$el.tagName:"div",n=this.$scopedSlots.default?this.$scopedSlots.default({hydrated:this.hydrated}):this.$slots.default[0],i=this.hydrated?n:e(t);return isBrowser&&(i.asyncFactory=this.hydrated?{resolved:!0}:{},i.isAsyncPlaceholder=!this.hydrated),i}};export default LazyHydrate;

dist/LazyHydrate.js

@@ -9,6 +9,9 @@ (function (global, factory) {
   var isBrowser = !isServer;
-  var observer = null;
+  var observers = new Map();
 
-  if (typeof IntersectionObserver !== "undefined") {
-    observer = new IntersectionObserver(function (entries) {
+  function createObserver(options) {
+    if (typeof IntersectionObserver === "undefined") return null;
+    var optionKey = JSON.stringify(options);
+    if (observers.has(optionKey)) return observers.get(optionKey);
+    var observer = new IntersectionObserver(function (entries) {
       entries.forEach(function (entry) {
@@ -22,3 +25,5 @@ // Use `intersectionRatio` because of Edge 15's
       });
-    });
+    }, options);
+    observers.set(optionKey, observer);
+    return observer;
   }
@@ -46,3 +51,3 @@
       whenVisible: {
-        type: Boolean
+        type: [Boolean, Object]
       }
@@ -117,3 +122,5 @@ },
       if (this.whenVisible) {
-        // If Intersection Observer API is not supported, hydrate immediately.
+        var options = this.whenVisible === true ? {} : this.whenVisible;
+        var observer = createObserver(options); // If Intersection Observer API is not supported, hydrate immediately.
+
         if (!observer) {
@@ -156,6 +163,6 @@ this.hydrate();
       var tag = this.$el ? this.$el.tagName : "div";
-      var children = this.$scopedSlots.default ? this.$scopedSlots.default({
+      var child = this.$scopedSlots.default ? this.$scopedSlots.default({
         hydrated: this.hydrated
       }) : this.$slots.default[0];
-      var vnode = this.hydrated ? children : h(tag); // Special thanks to Rahul Kadyan for the following lines of code.
+      var vnode = this.hydrated ? child : h(tag); // Special thanks to Rahul Kadyan for the following lines of code.
       // https://github.com/znck
@@ -162,0 +169,0 @@

dist/LazyHydrate.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self)["vue-lazy-hydration"]=t()}(this,function(){"use strict";var e="undefined"==typeof window,t=!e,n=null;return"undefined"!=typeof IntersectionObserver&&(n=new IntersectionObserver(function(e){e.forEach(function(e){(e.isIntersecting||e.intersectionRatio>0)&&e.target.parentElement.hydrate&&e.target.parentElement.hydrate()})})),{props:{idleTimeout:{default:2e3,type:Number},onInteraction:{type:[Array,Boolean,String]},ssrOnly:{type:Boolean},triggerHydration:{default:!1,type:Boolean},whenIdle:{type:Boolean},whenVisible:{type:Boolean}},data:function(){return{hydrated:e}},watch:{triggerHydration:{immediate:!0,handler:function(e){e&&this.hydrate()}}},computed:{interactionEvents:function(){return this.onInteraction?!0===this.onInteraction?["focus"]:Array.isArray(this.onInteraction)?this.onInteraction:[this.onInteraction]:[]}},mounted:function(){var e=this;if(0!==this.$el.childElementCount){if(!this.ssrOnly){if(this.interactionEvents.forEach(function(t){e.$el.addEventListener(t,e.hydrate,{capture:!0,once:!0})}),this.interactionEvents.length&&(this.interaction=function(){e.interactionEvents.forEach(function(t){return e.$el.removeEventListener(t,e.hydrate)})}),this.whenIdle){if(!("requestIdleCallback"in window&&"requestAnimationFrame"in window))return void this.hydrate();var t=requestIdleCallback(function(){requestAnimationFrame(function(){e.hydrate()})},{timeout:this.idleTimeout});this.idle=function(){return cancelIdleCallback(t)}}if(this.whenVisible){if(!n)return void this.hydrate();this.$el.hydrate=this.hydrate,n.observe(this.$el.children[0]),this.visible=function(){n.unobserve(e.$el),delete e.$el.hydrate}}}}else this.hydrate()},beforeDestroy:function(){this.cleanup()},methods:{cleanup:function(){var e=this;["idle","interaction","visible"].forEach(function(t){t in e&&(e[t](),delete e[t])})},hydrate:function(){this.hydrated=!0,this.cleanup()}},render:function(e){var n=this.$el?this.$el.tagName:"div",i=this.$scopedSlots.default?this.$scopedSlots.default({hydrated:this.hydrated}):this.$slots.default[0],r=this.hydrated?i:e(n);return t&&(r.asyncFactory=this.hydrated?{resolved:!0}:{},r.isAsyncPlaceholder=!this.hydrated),r}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self)["vue-lazy-hydration"]=t()}(this,function(){"use strict";var e="undefined"==typeof window,t=!e,n=new Map;return{props:{idleTimeout:{default:2e3,type:Number},onInteraction:{type:[Array,Boolean,String]},ssrOnly:{type:Boolean},triggerHydration:{default:!1,type:Boolean},whenIdle:{type:Boolean},whenVisible:{type:[Boolean,Object]}},data:function(){return{hydrated:e}},watch:{triggerHydration:{immediate:!0,handler:function(e){e&&this.hydrate()}}},computed:{interactionEvents:function(){return this.onInteraction?!0===this.onInteraction?["focus"]:Array.isArray(this.onInteraction)?this.onInteraction:[this.onInteraction]:[]}},mounted:function(){var e=this;if(0!==this.$el.childElementCount){if(!this.ssrOnly){if(this.interactionEvents.forEach(function(t){e.$el.addEventListener(t,e.hydrate,{capture:!0,once:!0})}),this.interactionEvents.length&&(this.interaction=function(){e.interactionEvents.forEach(function(t){return e.$el.removeEventListener(t,e.hydrate)})}),this.whenIdle){if(!("requestIdleCallback"in window&&"requestAnimationFrame"in window))return void this.hydrate();var t=requestIdleCallback(function(){requestAnimationFrame(function(){e.hydrate()})},{timeout:this.idleTimeout});this.idle=function(){return cancelIdleCallback(t)}}if(this.whenVisible){var i=function(e){if("undefined"==typeof IntersectionObserver)return null;var t=JSON.stringify(e);if(n.has(t))return n.get(t);var i=new IntersectionObserver(function(e){e.forEach(function(e){(e.isIntersecting||e.intersectionRatio>0)&&e.target.parentElement.hydrate&&e.target.parentElement.hydrate()})},e);return n.set(t,i),i}(!0===this.whenVisible?{}:this.whenVisible);if(!i)return void this.hydrate();this.$el.hydrate=this.hydrate,i.observe(this.$el.children[0]),this.visible=function(){i.unobserve(e.$el),delete e.$el.hydrate}}}}else this.hydrate()},beforeDestroy:function(){this.cleanup()},methods:{cleanup:function(){var e=this;["idle","interaction","visible"].forEach(function(t){t in e&&(e[t](),delete e[t])})},hydrate:function(){this.hydrated=!0,this.cleanup()}},render:function(e){var n=this.$el?this.$el.tagName:"div",i=this.$scopedSlots.default?this.$scopedSlots.default({hydrated:this.hydrated}):this.$slots.default[0],r=this.hydrated?i:e(n);return t&&(r.asyncFactory=this.hydrated?{resolved:!0}:{},r.isAsyncPlaceholder=!this.hydrated),r}}});

package.json

 {
   "name": "vue-lazy-hydration",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "Lazy hydration of server-side rendered Vue.js components",
@@ -29,5 +29,5 @@ "keywords": [
     "@babel/preset-env": "^7.3.1",
-    "eslint": "^5.12.1",
+    "eslint": "^5.13.0",
     "eslint-plugin-compat": "^2.6.3",
-    "eslint-plugin-import": "^2.15.0",
+    "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-markdown": "^1.0.0",
@@ -34,0 +34,0 @@ "rollup": "^1.1.2",

README.md

@@ -10,8 +10,2 @@ # vue-lazy-hydration
 
-## WARNING: Beta stage
-
-This plugin is currently in an early beta stage. Although everything seems to work fine in combination with the applications I tested it with, there might be certain cases I haven't considered. I'd be very happy if you test it with your own projects and report back if it works for you.
-
-**Use at your own risk.**
-
 ## Motivation
@@ -180,2 +174,18 @@
 
+#### Intersection Obersver options
+
+Internally the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver) is used to determine if a component is visible or not. You can provide Intersection Observer options to the `when-visible` property to configure the Intersection Observer.
+
+```html
+<template>
+  <div class="MyComponent">
+    <LazyHydrate when-visible="{ rootMargin: '100px' }">
+      <ArticleFooter/>
+    </LazyHydrate>
+  </div>
+</template>
+```
+
+For a list of possible options please [take a look at the Intersection Observer API documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver).
+
 ## Benchmarks
@@ -182,0 +192,0 @@

src/LazyHydrate.js

 const isServer = typeof window === `undefined`;
 const isBrowser = !isServer;
-let observer = null;
 
-if (typeof IntersectionObserver !== `undefined`) {
-  observer = new IntersectionObserver((entries) => {
+const observers = new Map();
+
+function createObserver(options) {
+  if (typeof IntersectionObserver === `undefined`) return null;
+
+  const optionKey = JSON.stringify(options);
+  if (observers.has(optionKey)) return observers.get(optionKey);
+
+  const observer = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
@@ -16,3 +22,6 @@ // Use `intersectionRatio` because of Edge 15's
     });
-  });
+  }, options);
+  observers.set(optionKey, observer);
+
+  return observer;
 }
@@ -40,3 +49,3 @@
     whenVisible: {
-      type: Boolean,
+      type: [Boolean, Object],
     },
@@ -106,2 +115,5 @@ },
     if (this.whenVisible) {
+      const options = this.whenVisible === true ? {} : this.whenVisible;
+      const observer = createObserver(options);
+
       // If Intersection Observer API is not supported, hydrate immediately.
@@ -143,7 +155,7 @@ if (!observer) {
     const tag = this.$el ? this.$el.tagName : `div`;
-    const children = this.$scopedSlots.default
+    const child = this.$scopedSlots.default
       ? this.$scopedSlots.default({ hydrated: this.hydrated })
       : this.$slots.default[0];
     const vnode = this.hydrated
-      ? children
+      ? child
       : h(tag);
@@ -150,0 +162,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

161295

increased by2.54%

Lines of code

769

increased by2.53%

Number of lines in readme file

225

increased by4.65%

No dependency changes