vue-lazy-hydration - npm Package Compare versions

Comparing version 1.0.0-beta.7 to 1.0.0-beta.8

dist/index.js

@@ -6,3 +6,3 @@ (function (global, factory) {
 }(this, function (exports) { 'use strict';
-
+  console.log('TESTTEST');
   function _defineProperty(obj, key, value) {
@@ -9,0 +9,0 @@ if (key in obj) {

dist/LazyHydrate.esm.js

@@ -148,4 +148,6 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
 var isBrowser = !isServer;
-function hydrateWhenIdle(component, _ref) {
-  var ignoredProps = _ref.ignoredProps;
+function hydrateWhenIdle(component) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      ignoredProps = _ref.ignoredProps;
+
   if (isServer) return component;
@@ -187,5 +189,7 @@ var resolvableComponent = resolvableComponentFactory(component);
 }
-function hydrateWhenVisible(component, _ref2) {
-  var ignoredProps = _ref2.ignoredProps,
+function hydrateWhenVisible(component) {
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      ignoredProps = _ref2.ignoredProps,
       observerOptions = _ref2.observerOptions;
+
   if (isServer) return component;
@@ -238,6 +242,8 @@ var resolvableComponent = resolvableComponentFactory(component);
 }
-function hydrateOnInteraction(component, _ref3) {
-  var _ref3$event = _ref3.event,
+function hydrateOnInteraction(component) {
+  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref3$event = _ref3.event,
       event = _ref3$event === void 0 ? "focus" : _ref3$event,
       ignoredProps = _ref3.ignoredProps;
+
   if (isServer) return component;
@@ -416,2 +422,2 @@ var resolvableComponent = resolvableComponentFactory(component);
 export default LazyHydrate;
-export { hydrateWhenIdle, hydrateWhenVisible, hydrateSsrOnly, hydrateOnInteraction };
+export { hydrateOnInteraction, hydrateSsrOnly, hydrateWhenIdle, hydrateWhenVisible };

dist/LazyHydrate.esm.min.js

@@ -1,1 +0,1 @@
-function asyncGeneratorStep(e,t,n,r,o,i,a){try{var s=e[i](a),c=s.value}catch(e){return void n(e)}s.done?t(c):Promise.resolve(c).then(r,o)}function _asyncToGenerator(e){return function(){var t=this,n=arguments;return new Promise(function(r,o){var i=e.apply(t,n);function a(e){asyncGeneratorStep(i,r,o,a,s,"next",e)}function s(e){asyncGeneratorStep(i,r,o,a,s,"throw",e)}a(void 0)})}}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=_asyncToGenerator(regeneratorRuntime.mark(function n(){return regeneratorRuntime.wrap(function(n){for(;;)switch(n.prev=n.next){case 0:if(n.t0=t,"function"!=typeof e){n.next=7;break}return n.next=4,e();case 4:n.t1=n.sent,n.next=8;break;case 7:n.t1=e;case 8:n.t2=n.t1,(0,n.t0)(n.t2);case 10:case"end":return n.stop()}},n)})),n}var isServer="undefined"==typeof window,isBrowser=!isServer;function hydrateWhenIdle(e,t){var n=t.ignoredProps;if(isServer)return e;var r=resolvableComponentFactory(e),o=loadingComponentFactory(r,{props:n,mounted:function(){if("requestIdleCallback"in window&&"requestAnimationFrame"in window){var e=requestIdleCallback(function(){requestAnimationFrame(r._resolve)},{timeout:this.idleTimeout});r.then(function(){return cancelIdleCallback(e)})}else r._resolve()}});return function(){return{component:r,delay:0,loading:o}}}function hydrateWhenVisible(e,t){var 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,t){var 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){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{hydrateWhenIdle,hydrateWhenVisible,hydrateSsrOnly,hydrateOnInteraction};
+function asyncGeneratorStep(e,t,n,r,o,i,a){try{var s=e[i](a),c=s.value}catch(e){return void n(e)}s.done?t(c):Promise.resolve(c).then(r,o)}function _asyncToGenerator(e){return function(){var t=this,n=arguments;return new Promise(function(r,o){var i=e.apply(t,n);function a(e){asyncGeneratorStep(i,r,o,a,s,"next",e)}function s(e){asyncGeneratorStep(i,r,o,a,s,"throw",e)}a(void 0)})}}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=_asyncToGenerator(regeneratorRuntime.mark(function n(){return regeneratorRuntime.wrap(function(n){for(;;)switch(n.prev=n.next){case 0:if(n.t0=t,"function"!=typeof e){n.next=7;break}return n.next=4,e();case 4:n.t1=n.sent,n.next=8;break;case 7:n.t1=e;case 8:n.t2=n.t1,(0,n.t0)(n.t2);case 10:case"end":return n.stop()}},n)})),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 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){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};

dist/LazyHydrate.js

@@ -154,4 +154,6 @@ (function (global, factory) {
   var isBrowser = !isServer;
-  function hydrateWhenIdle(component, _ref) {
-    var ignoredProps = _ref.ignoredProps;
+  function hydrateWhenIdle(component) {
+    var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        ignoredProps = _ref.ignoredProps;
+
     if (isServer) return component;
@@ -193,5 +195,7 @@ var resolvableComponent = resolvableComponentFactory(component);
   }
-  function hydrateWhenVisible(component, _ref2) {
-    var ignoredProps = _ref2.ignoredProps,
+  function hydrateWhenVisible(component) {
+    var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        ignoredProps = _ref2.ignoredProps,
         observerOptions = _ref2.observerOptions;
+
     if (isServer) return component;
@@ -244,6 +248,8 @@ var resolvableComponent = resolvableComponentFactory(component);
   }
-  function hydrateOnInteraction(component, _ref3) {
-    var _ref3$event = _ref3.event,
+  function hydrateOnInteraction(component) {
+    var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        _ref3$event = _ref3.event,
         event = _ref3$event === void 0 ? "focus" : _ref3$event,
         ignoredProps = _ref3.ignoredProps;
+
     if (isServer) return component;
@@ -421,7 +427,7 @@ var resolvableComponent = resolvableComponentFactory(component);
 
+  exports.default = LazyHydrate;
+  exports.hydrateOnInteraction = hydrateOnInteraction;
+  exports.hydrateSsrOnly = hydrateSsrOnly;
   exports.hydrateWhenIdle = hydrateWhenIdle;
   exports.hydrateWhenVisible = hydrateWhenVisible;
-  exports.hydrateSsrOnly = hydrateSsrOnly;
-  exports.hydrateOnInteraction = hydrateOnInteraction;
-  exports.default = LazyHydrate;
 
@@ -428,0 +434,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

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,r,i,o,a){try{var s=e[o](a),u=s.value}catch(e){return void n(e)}s.done?t(u):Promise.resolve(u).then(r,i)}function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}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,t){return function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},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(t){n(e,t,r[t])})}return e}({render:function(t){var n=this.$el?this.$el.tagName:"div";return this.$el||e._resolve(),t(n)}},t)}function a(e){var n,r=new Promise(function(e){n=e});return r._resolve=function(e){return function(){var n=this,r=arguments;return new Promise(function(i,o){var a=e.apply(n,r);function s(e){t(a,i,o,s,u,"next",e)}function u(e){t(a,i,o,s,u,"throw",e)}s(void 0)})}}(regeneratorRuntime.mark(function t(){return regeneratorRuntime.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:if(t.t0=n,"function"!=typeof e){t.next=7;break}return t.next=4,e();case 4:t.t1=t.sent,t.next=8;break;case 7:t.t1=e;case 8:t.t2=t.t1,(0,t.t0)(t.t2);case 10:case"end":return t.stop()}},t)})),r}var s="undefined"==typeof window,u=!s;var c={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){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 u&&(r.asyncFactory=this.hydrated?{resolved:!0}:{},r.isAsyncPlaceholder=!this.hydrated),r}};e.hydrateWhenIdle=function(e,t){var n=t.ignoredProps;if(s)return e;var r=a(e),i=o(r,{props:n,mounted:function(){if("requestIdleCallback"in window&&"requestAnimationFrame"in window){var e=requestIdleCallback(function(){requestAnimationFrame(r._resolve)},{timeout:this.idleTimeout});r.then(function(){return cancelIdleCallback(e)})}else r._resolve()}});return function(){return{component:r,delay:0,loading:i}}},e.hydrateWhenVisible=function(e,t){var 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}}},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.hydrateOnInteraction=function(e,t){var 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.default=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,r,i,o,a){try{var s=e[o](a),u=s.value}catch(e){return void n(e)}s.done?t(u):Promise.resolve(u).then(r,i)}function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}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,t){return function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},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(t){n(e,t,r[t])})}return e}({render:function(t){var n=this.$el?this.$el.tagName:"div";return this.$el||e._resolve(),t(n)}},t)}function a(e){var n,r=new Promise(function(e){n=e});return r._resolve=function(e){return function(){var n=this,r=arguments;return new Promise(function(i,o){var a=e.apply(n,r);function s(e){t(a,i,o,s,u,"next",e)}function u(e){t(a,i,o,s,u,"throw",e)}s(void 0)})}}(regeneratorRuntime.mark(function t(){return regeneratorRuntime.wrap(function(t){for(;;)switch(t.prev=t.next){case 0:if(t.t0=n,"function"!=typeof e){t.next=7;break}return t.next=4,e();case 4:t.t1=t.sent,t.next=8;break;case 7:t.t1=e;case 8:t.t2=t.t1,(0,t.t0)(t.t2);case 10:case"end":return t.stop()}},t)})),r}var s="undefined"==typeof window,u=!s;var c={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){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 u&&(r.asyncFactory=this.hydrated?{resolved:!0}:{},r.isAsyncPlaceholder=!this.hydrated),r}};e.default=c,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.7",
+  "version": "1.0.0-beta.8",
   "description": "Lazy hydration of server-side rendered Vue.js components",
@@ -27,9 +27,9 @@ "keywords": [
     "@avalanche/eslint-config": "^3.0.0",
-    "@babel/core": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
-    "eslint": "^5.14.1",
-    "eslint-plugin-compat": "^2.7.0",
-    "eslint-plugin-import": "^2.16.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.3.3",
+    "rollup": "^1.11.3",
     "rollup-plugin-babel": "^4.3.2",
@@ -36,0 +36,0 @@ "uglify-es": "^3.3.9"

README.md

@@ -95,2 +95,6 @@ # vue-lazy-hydration
 
+> **Attention:** If your setup depends on the [Vue.js template-renderer](https://github.com/vuejs/vue/tree/dev/src/server/template-renderer) for server side rendering (which is the case for Nuxt.js and Gridsome), this technique currently doesn't work and JavaScript bundles are immediately loaded. See [vuejs/vue#9847](https://github.com/vuejs/vue/issues/9847) for the progress on this.
+
+> **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
@@ -186,3 +190,3 @@ <template>
 
-### Intersection Obersver options
+### Intersection Observer options
 
@@ -189,0 +193,0 @@ 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.

src/LazyHydrate.js

@@ -10,3 +10,3 @@ import {
 
-export function hydrateWhenIdle(component, { ignoredProps }) {
+export function hydrateWhenIdle(component, { ignoredProps } = {}) {
   if (isServer) return component;
@@ -42,3 +42,3 @@
 
-export function hydrateWhenVisible(component, { ignoredProps, observerOptions }) {
+export function hydrateWhenVisible(component, { ignoredProps, observerOptions } = {}) {
   if (isServer) return component;
@@ -87,3 +87,3 @@
 
-export function hydrateOnInteraction(component, { event = `focus`, ignoredProps }) {
+export function hydrateOnInteraction(component, { event = `focus`, ignoredProps } = {}) {
   if (isServer) return component;
@@ -90,0 +90,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

70630

increased by2.1%

Lines of code

1318

increased by0.53%

Number of lines in readme file

294

increased by1.38%

No dependency changes