vue-lazy-hydration - npm Package Compare versions

Comparing version 1.0.0-beta.13 to 1.0.0-beta.14

dist/LazyHydrate.esm.js

@@ -272,3 +272,4 @@ function _defineProperty(obj, key, value) {
         capture: true,
-        once: true
+        once: true,
+        passive: true
       });
@@ -275,0 +276,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 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,passive:!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};
+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 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,passive:!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,passive:!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

@@ -278,3 +278,4 @@ (function (global, factory) {
           capture: true,
-          once: true
+          once: true,
+          passive: true
         });
@@ -281,0 +282,0 @@ });

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}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,passive:!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})});
+!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,passive:!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,passive:!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.13",
+  "version": "1.0.0-beta.14",
   "description": "Lazy hydration of server-side rendered Vue.js components",
@@ -5,0 +5,0 @@ "keywords": [

src/LazyHydrate.js

@@ -170,2 +170,3 @@ import {
         once: true,
+        passive: true,
       });
@@ -172,0 +173,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

54671

increased by0.17%

Lines of code

915

increased by0.33%

No dependency changes