vue-lazy-hydration - npm Package Compare versions

Comparing version 1.0.0-beta.9 to 1.0.0-beta.10

dist/LazyHydrate.esm.js

@@ -16,16 +16,31 @@ function _defineProperty(obj, key, value) {
 
-function _objectSpread(target) {
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = arguments[i] != null ? arguments[i] : {};
-    var ownKeys = Object.keys(source);
 
-    if (typeof Object.getOwnPropertySymbols === 'function') {
-      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
     }
-
-    ownKeys.forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    });
   }
@@ -55,3 +70,3 @@
 function loadingComponentFactory(resolvableComponent, options) {
-  return _objectSpread({
+  return _objectSpread2({
     render: function render(h) {
@@ -79,3 +94,2 @@ var tag = this.$el ? this.$el.tagName : "div"; // eslint-disable-next-line no-underscore-dangle
 var isServer = typeof window === "undefined";
-var isBrowser = !isServer;
 function hydrateWhenIdle(component) {
@@ -333,16 +347,13 @@ var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
   render: function render(h) {
-    var tag = this.$el ? this.$el.tagName : "div";
+    if (!this.$scopedSlots.default && !this.$slots.default) return null;
     var child = this.$scopedSlots.default ? this.$scopedSlots.default({
       hydrated: this.hydrated
     }) : this.$slots.default[0];
-    var vnode = this.hydrated ? child : h(tag); // Special thanks to Rahul Kadyan for the following lines of code.
+    if (this.hydrated) return child;
+    var tag = this.$el ? this.$el.tagName : "div";
+    var vnode = h(tag); // Special thanks to Rahul Kadyan for the following lines of code.
     // https://github.com/znck
 
-    if (isBrowser) {
-      vnode.asyncFactory = this.hydrated ? {
-        resolved: true
-      } : {};
-      vnode.isAsyncPlaceholder = !this.hydrated;
-    }
-
+    vnode.asyncFactory = {};
+    vnode.isComment = true;
     return vnode;
@@ -349,0 +360,0 @@ }

dist/LazyHydrate.esm.min.js

@@ -1,1 +0,1 @@
-function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){_defineProperty(e,t,n[t])})}return e}var 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.hydrate&&e.target.hydrate()})},e);return observers.set(t,n),n}function loadingComponentFactory(e,t){return _objectSpread({render:function(t){var n=this.$el?this.$el.tagName:"div";return this.$el||e._resolve(),t(n)}},t)}function resolvableComponentFactory(e){var t,n=new Promise(function(e){t=e});return n._resolve=function(){t("function"==typeof e?e():e)},n}var isServer="undefined"==typeof window,isBrowser=!isServer;function hydrateWhenIdle(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).ignoredProps;if(isServer)return e;var n=resolvableComponentFactory(e),r=loadingComponentFactory(n,{props:t,mounted:function(){if("requestIdleCallback"in window&&"requestAnimationFrame"in window){var e=requestIdleCallback(function(){requestAnimationFrame(n._resolve)},{timeout:this.idleTimeout});n.then(function(){return cancelIdleCallback(e)})}else n._resolve()}});return function(){return{component:n,delay:0,loading:r}}}function hydrateWhenVisible(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.ignoredProps,r=t.observerOptions;if(isServer)return e;var i=resolvableComponentFactory(e),o=createObserver(r),a=loadingComponentFactory(i,{props:n,mounted:function(){var e=this;if(o){this.$el.hydrate=i._resolve;i.then(function(){return o.unobserve(e.$el)}),o.observe(this.$el)}else i._resolve()}});return function(){return{component:i,delay:0,loading:a}}}function hydrateSsrOnly(e){if(isServer)return e;var t=resolvableComponentFactory(e),n=loadingComponentFactory(t);return function(){return{component:t,delay:0,loading:n}}}function hydrateOnInteraction(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.event,r=void 0===n?"focus":n,i=t.ignoredProps;if(isServer)return e;var o=resolvableComponentFactory(e),a=Array.isArray(r)?r:[r],s=loadingComponentFactory(o,{props:i,mounted:function(){var e=this;a.forEach(function(t){e.$el.addEventListener(t,o._resolve,{capture:!0,once:!0})})}});return function(){return{component:o,delay:0,loading:s}}}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),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],r=this.hydrated?n:e(t);return isBrowser&&(r.asyncFactory=this.hydrated?{resolved:!0}:{},r.isAsyncPlaceholder=!this.hydrated),r}};export default LazyHydrate;export{hydrateOnInteraction,hydrateSsrOnly,hydrateWhenIdle,hydrateWhenVisible};
+function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function ownKeys(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function _objectSpread2(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(n),!0).forEach(function(t){_defineProperty(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}var 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.hydrate&&e.target.hydrate()})},e);return observers.set(t,n),n}function loadingComponentFactory(e,t){return _objectSpread2({render:function(t){var n=this.$el?this.$el.tagName:"div";return this.$el||e._resolve(),t(n)}},t)}function resolvableComponentFactory(e){var t,n=new Promise(function(e){t=e});return n._resolve=function(){t("function"==typeof e?e():e)},n}var isServer="undefined"==typeof window;function hydrateWhenIdle(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).ignoredProps;if(isServer)return e;var n=resolvableComponentFactory(e),r=loadingComponentFactory(n,{props:t,mounted:function(){if("requestIdleCallback"in window&&"requestAnimationFrame"in window){var e=requestIdleCallback(function(){requestAnimationFrame(n._resolve)},{timeout:this.idleTimeout});n.then(function(){return cancelIdleCallback(e)})}else n._resolve()}});return function(){return{component:n,delay:0,loading:r}}}function hydrateWhenVisible(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.ignoredProps,r=t.observerOptions;if(isServer)return e;var o=resolvableComponentFactory(e),i=createObserver(r),a=loadingComponentFactory(o,{props:n,mounted:function(){var e=this;if(i){this.$el.hydrate=o._resolve;o.then(function(){return i.unobserve(e.$el)}),i.observe(this.$el)}else o._resolve()}});return function(){return{component:o,delay:0,loading:a}}}function hydrateSsrOnly(e){if(isServer)return e;var t=resolvableComponentFactory(e),n=loadingComponentFactory(t);return function(){return{component:t,delay:0,loading:n}}}function hydrateOnInteraction(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.event,r=void 0===n?"focus":n,o=t.ignoredProps;if(isServer)return e;var i=resolvableComponentFactory(e),a=Array.isArray(r)?r:[r],s=loadingComponentFactory(i,{props:o,mounted:function(){var e=this;a.forEach(function(t){e.$el.addEventListener(t,i._resolve,{capture:!0,once:!0})})}});return function(){return{component:i,delay:0,loading:s}}}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),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){if(!this.$scopedSlots.default&&!this.$slots.default)return null;var t=this.$scopedSlots.default?this.$scopedSlots.default({hydrated:this.hydrated}):this.$slots.default[0];if(this.hydrated)return t;var n=e(this.$el?this.$el.tagName:"div");return n.asyncFactory={},n.isComment=!0,n}};export default LazyHydrate;export{hydrateOnInteraction,hydrateSsrOnly,hydrateWhenIdle,hydrateWhenVisible};

dist/LazyHydrate.js

@@ -5,3 +5,3 @@ (function (global, factory) {
   (global = global || self, factory(global['vue-lazy-hydration'] = {}));
-}(this, function (exports) { 'use strict';
+}(this, (function (exports) { 'use strict';
 
@@ -23,16 +23,31 @@ function _defineProperty(obj, key, value) {
 
-  function _objectSpread(target) {
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
+    }
+
+    return keys;
+  }
+
+  function _objectSpread2(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
-      var ownKeys = Object.keys(source);
 
-      if (typeof Object.getOwnPropertySymbols === 'function') {
-        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-        }));
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
       }
-
-      ownKeys.forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
     }
@@ -62,3 +77,3 @@
   function loadingComponentFactory(resolvableComponent, options) {
-    return _objectSpread({
+    return _objectSpread2({
       render: function render(h) {
@@ -86,3 +101,2 @@ var tag = this.$el ? this.$el.tagName : "div"; // eslint-disable-next-line no-underscore-dangle
   var isServer = typeof window === "undefined";
-  var isBrowser = !isServer;
   function hydrateWhenIdle(component) {
@@ -340,16 +354,13 @@ var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     render: function render(h) {
-      var tag = this.$el ? this.$el.tagName : "div";
+      if (!this.$scopedSlots.default && !this.$slots.default) return null;
       var child = this.$scopedSlots.default ? this.$scopedSlots.default({
         hydrated: this.hydrated
       }) : this.$slots.default[0];
-      var vnode = this.hydrated ? child : h(tag); // Special thanks to Rahul Kadyan for the following lines of code.
+      if (this.hydrated) return child;
+      var tag = this.$el ? this.$el.tagName : "div";
+      var vnode = h(tag); // Special thanks to Rahul Kadyan for the following lines of code.
       // https://github.com/znck
 
-      if (isBrowser) {
-        vnode.asyncFactory = this.hydrated ? {
-          resolved: true
-        } : {};
-        vnode.isAsyncPlaceholder = !this.hydrated;
-      }
-
+      vnode.asyncFactory = {};
+      vnode.isComment = true;
       return vnode;
@@ -367,2 +378,2 @@ }
 
-}));
+})));

dist/LazyHydrate.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self)["vue-lazy-hydration"]={})}(this,function(e){"use strict";function t(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var n=new Map;function r(e){if("undefined"==typeof IntersectionObserver)return null;var t=JSON.stringify(e);if(n.has(t))return n.get(t);var r=new IntersectionObserver(function(e){e.forEach(function(e){(e.isIntersecting||e.intersectionRatio>0)&&e.target.hydrate&&e.target.hydrate()})},e);return n.set(t,r),r}function i(e,n){return function(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},i=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),i.forEach(function(n){t(e,n,r[n])})}return e}({render:function(t){var n=this.$el?this.$el.tagName:"div";return this.$el||e._resolve(),t(n)}},n)}function o(e){var t,n=new Promise(function(e){t=e});return n._resolve=function(){t("function"==typeof e?e():e)},n}var a="undefined"==typeof window,s=!a;var u={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:a}},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=r(!0===this.whenVisible?{}:this.whenVisible);if(!n)return void this.hydrate();this.$el.hydrate=this.hydrate,n.observe(this.$el),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],r=this.hydrated?n:e(t);return s&&(r.asyncFactory=this.hydrated?{resolved:!0}:{},r.isAsyncPlaceholder=!this.hydrated),r}};e.default=u,e.hydrateOnInteraction=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.event,r=void 0===n?"focus":n,s=t.ignoredProps;if(a)return e;var u=o(e),l=Array.isArray(r)?r:[r],c=i(u,{props:s,mounted:function(){var e=this;l.forEach(function(t){e.$el.addEventListener(t,u._resolve,{capture:!0,once:!0})})}});return function(){return{component:u,delay:0,loading:c}}},e.hydrateSsrOnly=function(e){if(a)return e;var t=o(e),n=i(t);return function(){return{component:t,delay:0,loading:n}}},e.hydrateWhenIdle=function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).ignoredProps;if(a)return e;var n=o(e),r=i(n,{props:t,mounted:function(){if("requestIdleCallback"in window&&"requestAnimationFrame"in window){var e=requestIdleCallback(function(){requestAnimationFrame(n._resolve)},{timeout:this.idleTimeout});n.then(function(){return cancelIdleCallback(e)})}else n._resolve()}});return function(){return{component:n,delay:0,loading:r}}},e.hydrateWhenVisible=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.ignoredProps,s=t.observerOptions;if(a)return e;var u=o(e),l=r(s),c=i(u,{props:n,mounted:function(){var e=this;l?(this.$el.hydrate=u._resolve,u.then(function(){return l.unobserve(e.$el)}),l.observe(this.$el)):u._resolve()}});return function(){return{component:u,delay:0,loading:c}}},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=e||self)["vue-lazy-hydration"]={})}(this,function(e){"use strict";function t(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}var r=new Map;function i(e){if("undefined"==typeof IntersectionObserver)return null;var t=JSON.stringify(e);if(r.has(t))return r.get(t);var n=new IntersectionObserver(function(e){e.forEach(function(e){(e.isIntersecting||e.intersectionRatio>0)&&e.target.hydrate&&e.target.hydrate()})},e);return r.set(t,n),n}function o(e,r){return function(e){for(var r=1;r<arguments.length;r++){var i=null!=arguments[r]?arguments[r]:{};r%2?n(Object(i),!0).forEach(function(n){t(e,n,i[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):n(Object(i)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))})}return e}({render:function(t){var n=this.$el?this.$el.tagName:"div";return this.$el||e._resolve(),t(n)}},r)}function a(e){var t,n=new Promise(function(e){t=e});return n._resolve=function(){t("function"==typeof e?e():e)},n}var s="undefined"==typeof window;var u={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:s}},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=i(!0===this.whenVisible?{}:this.whenVisible);if(!n)return void this.hydrate();this.$el.hydrate=this.hydrate,n.observe(this.$el),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){if(!this.$scopedSlots.default&&!this.$slots.default)return null;var t=this.$scopedSlots.default?this.$scopedSlots.default({hydrated:this.hydrated}):this.$slots.default[0];if(this.hydrated)return t;var n=e(this.$el?this.$el.tagName:"div");return n.asyncFactory={},n.isComment=!0,n}};e.default=u,e.hydrateOnInteraction=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.event,r=void 0===n?"focus":n,i=t.ignoredProps;if(s)return e;var u=a(e),c=Array.isArray(r)?r:[r],l=o(u,{props:i,mounted:function(){var e=this;c.forEach(function(t){e.$el.addEventListener(t,u._resolve,{capture:!0,once:!0})})}});return function(){return{component:u,delay:0,loading:l}}},e.hydrateSsrOnly=function(e){if(s)return e;var t=a(e),n=o(t);return function(){return{component:t,delay:0,loading:n}}},e.hydrateWhenIdle=function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).ignoredProps;if(s)return e;var n=a(e),r=o(n,{props:t,mounted:function(){if("requestIdleCallback"in window&&"requestAnimationFrame"in window){var e=requestIdleCallback(function(){requestAnimationFrame(n._resolve)},{timeout:this.idleTimeout});n.then(function(){return cancelIdleCallback(e)})}else n._resolve()}});return function(){return{component:n,delay:0,loading:r}}},e.hydrateWhenVisible=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.ignoredProps,r=t.observerOptions;if(s)return e;var u=a(e),c=i(r),l=o(u,{props:n,mounted:function(){var e=this;c?(this.$el.hydrate=u._resolve,u.then(function(){return c.unobserve(e.$el)}),c.observe(this.$el)):u._resolve()}});return function(){return{component:u,delay:0,loading:l}}},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "vue-lazy-hydration",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0-beta.10",
   "description": "Lazy hydration of server-side rendered Vue.js components",
@@ -23,15 +23,39 @@ "keywords": [
     "lint": "yarn run lint:scripts && yarn run lint:scripts-md",
+    "test:perf:compile": "npx vue-cli-service build --target lib --no-clean --dest test/performance/dist --name 'entry-reference' test/performance/entry-reference.js && npx vue-cli-service build --target lib --no-clean --dest test/performance/dist --name 'entry-ssr-only' test/performance/entry-ssr-only.js",
+    "test:perf:render": "node test/performance/render.js",
+    "test:perf:build": "npm run build && npm run test:perf:compile && npm run test:perf:render",
+    "test:perf:serve": "serve test/performance/dist",
+    "test:perf": "concurrently 'npm:test:perf:serve' 'node test/performance/benchmark.js' --kill-others",
+    "test:integration:compile": "npx vue-cli-service build --target lib --no-clean --dest test/integration/dist --name 'entry-integration' test/integration/entry-integration.js",
+    "test:integration:render": "node test/integration/render.js",
+    "test:integration:build": "npm run build && npm run test:integration:compile && npm run test:integration:render",
+    "test:integration:serve": "serve test/integration/dist",
+    "test:integration": "concurrently 'npm:test:integration:serve' 'jest test/integration/integration.test.js' --kill-others",
     "prepublishOnly": "yarn run lint && yarn run build"
   },
   "devDependencies": {
-    "@avalanche/eslint-config": "^3.0.0",
-    "@babel/core": "^7.4.4",
-    "@babel/preset-env": "^7.4.4",
-    "eslint": "^5.16.0",
-    "eslint-plugin-compat": "^3.1.1",
-    "eslint-plugin-import": "^2.17.2",
-    "eslint-plugin-markdown": "^1.0.0",
-    "rollup": "^1.11.3",
-    "rollup-plugin-babel": "^4.3.2",
-    "uglify-es": "^3.3.9"
+    "@avalanche/eslint-config": "^4.0.0",
+    "@babel/core": "^7.7.7",
+    "@babel/preset-env": "^7.7.7",
+    "@vue/cli-service": "^4.1.1",
+    "babel-eslint": "^10.0.3",
+    "cli-table3": "^0.5.1",
+    "concurrently": "^5.0.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-compat": "^3.3.0",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-markdown": "^1.0.1",
+    "eslint-plugin-vue": "^6.1.1",
+    "jest": "^24.9.0",
+    "jest-puppeteer": "^4.4.0",
+    "lighthouse": "^5.6.0",
+    "marked": "^0.8.0",
+    "puppeteer": "^2.0.0",
+    "rollup": "^1.27.14",
+    "rollup-plugin-babel": "^4.3.3",
+    "serve": "^11.2.0",
+    "uglify-es": "^3.3.9",
+    "vue": "^2.6.11",
+    "vue-server-renderer": "^2.6.11",
+    "vue-template-compiler": "^2.6.11"
   },
@@ -38,0 +62,0 @@ "main": "dist/LazyHydrate.js",

README.md

@@ -97,4 +97,2 @@ # vue-lazy-hydration
 
-> **Attention:** There currently seems to be a problem with this approach in certain circumstances. See [#19](https://github.com/maoberlehner/vue-lazy-hydration/issues/19) for more information.
-
 ```html
@@ -120,2 +118,14 @@ <template>
     </LazyHydrate>
+    <!-- A wrapper is needed when using with `when-visible` -->
+    <LazyHydrate
+      v-slot="{ hydrated }"
+      when-visible
+    >
+      <div>
+        <CommentForm
+          v-if="hydrated"
+          :article-id="article.id"
+        />
+      </div>
+    </LazyHydrate>
   </div>
@@ -283,2 +293,24 @@ </template>
 
+## Testing
+
+Because the core functionality of `vue-lazy-hydration` heavily relies on browser APIs like `IntersectionObserver` and `requestIdleCallback()`, it is tough to write meaningful unit tests without having to write numerous mocks. Because of that, we mostly use integration tests and some performance benchmarks to test the functionality of this package.
+
+### Integration tests
+
+Execute the following commands to run the integration tests:
+
+```bash
+npm run test:integration:build
+npm run test:integration
+```
+
+### Performance tests
+
+Execute the following commands to run the performance benchmark:
+
+```bash
+npm run test:perf:build
+npm run test:perf
+```
+
 ## About
@@ -285,0 +317,0 @@

src/LazyHydrate.js

@@ -8,3 +8,2 @@ import {
 const isServer = typeof window === `undefined`;
-const isBrowser = !isServer;
 
@@ -175,4 +174,5 @@ export function hydrateWhenIdle(component, { ignoredProps } = {}) {
       this.interaction = () => {
-        this.interactionEvents.forEach(eventName =>
-          this.$el.removeEventListener(eventName, this.hydrate));
+        this.interactionEvents.forEach(
+          eventName => this.$el.removeEventListener(eventName, this.hydrate),
+        );
       };
@@ -236,16 +236,16 @@ }
   render(h) {
-    const tag = this.$el ? this.$el.tagName : `div`;
+    if (!this.$scopedSlots.default && !this.$slots.default) return null;
+
     const child = this.$scopedSlots.default
       ? this.$scopedSlots.default({ hydrated: this.hydrated })
       : this.$slots.default[0];
-    const vnode = this.hydrated
-      ? child
-      : h(tag);
 
+    if (this.hydrated) return child;
+
+    const tag = this.$el ? this.$el.tagName : `div`;
+    const vnode = h(tag);
     // Special thanks to Rahul Kadyan for the following lines of code.
     // https://github.com/znck
-    if (isBrowser) {
-      vnode.asyncFactory = this.hydrated ? { resolved: true } : {};
-      vnode.isAsyncPlaceholder = !this.hydrated;
-    }
+    vnode.asyncFactory = {};
+    vnode.isComment = true;
 
@@ -252,0 +252,0 @@ return vnode;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

2370718

increased by1180.57%

Number of package files

62

increased by520%

Lines of code

11259

increased by1163.64%

Number of lines in readme file

326

increased by10.88%

Worsened metrics

Dev dependency count

24

increased by140%

Number of low quality alerts

4

increased by300%

Number of low supply chain risk alerts

10

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes