vue-lazy-hydration - npm Package Compare versions

Comparing version 2.0.0-beta.0 to 2.0.0-beta.1

dist/LazyHydrate.esm.js

@@ -1,50 +0,1 @@
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-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] : {};
-
-    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));
-      });
-    }
-  }
-
-  return target;
-}
-
 var observers = new Map();
@@ -112,3 +63,3 @@ function makeHydrationObserver(options) {
 function makeHydrationBlocker(component, options) {
-  return _objectSpread2(_objectSpread2({}, options), {}, {
+  return Object.assign({
     mixins: [{
@@ -159,2 +110,3 @@ beforeCreate: function beforeCreate() {
 
+          this.cleanupHandlers.push(cleanup);
           this.hydrationPromise.then(cleanup);
@@ -169,3 +121,2 @@ observer.observe(this.$el);
           if (!("requestIdleCallback" in window) || !("requestAnimationFrame" in window)) {
-            // eslint-disable-next-line no-underscore-dangle
             this.hydrate();
@@ -177,3 +128,2 @@ return;
           var id = requestIdleCallback(function () {
-            // eslint-disable-next-line no-underscore-dangle
             requestAnimationFrame(_this.hydrate);
@@ -188,6 +138,7 @@ }, {
 
+          this.cleanupHandlers.push(_cleanup);
           this.hydrationPromise.then(_cleanup);
         }
 
-        if (this.interactionEvents.length) {
+        if (this.interactionEvents && this.interactionEvents.length) {
           var eventListenerOptions = {
@@ -199,13 +150,9 @@ capture: true,
           this.interactionEvents.forEach(function (eventName) {
-            var _this$$el;
+            _this.$el.addEventListener(eventName, _this.hydrate, eventListenerOptions);
 
-            var eventListenerParams = [eventName, _this.hydrate, eventListenerOptions];
+            var cleanup = function cleanup() {
+              _this.$el.removeEventListener(eventName, _this.hydrate, eventListenerOptions);
+            };
 
-            (_this$$el = _this.$el).addEventListener.apply(_this$$el, eventListenerParams);
-
-            _this.cleanupHandlers.push(function () {
-              var _this$$el2;
-
-              return (_this$$el2 = _this.$el).removeEventListener.apply(_this$$el2, eventListenerParams);
-            });
+            _this.cleanupHandlers.push(cleanup);
           });
@@ -227,3 +174,3 @@ }
     }]
-  });
+  }, options);
 }
@@ -230,0 +177,0 @@

dist/LazyHydrate.esm.min.js

@@ -1,1 +0,1 @@
-function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function ownKeys(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function _objectSpread2(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(r),!0).forEach(function(t){_defineProperty(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var observers=new Map;function makeHydrationObserver(e){if("undefined"==typeof IntersectionObserver)return null;var t=JSON.stringify(e);if(observers.has(t))return observers.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 observers.set(t,r),r}function makeHydrationPromise(){var e=function(){},t=new Promise(function(t){e=t});return{hydrate:e,hydrationPromise:t}}var isServer="undefined"==typeof window;function isAsyncComponentFactory(e){return"function"==typeof e}function resolveComponent(e){return isAsyncComponentFactory(e)?e().then(function(e){return e.default}):e}function makeNonce(e){var t=e.component,r=e.hydrate,n=e.hydrationPromise;return function(){return new Promise(function(e){isServer&&r(),n.then(function(){return e(resolveComponent(t))})})}}function makeHydrationBlocker(e,t){return _objectSpread2(_objectSpread2({},t),{},{mixins:[{beforeCreate:function(){this.cleanupHandlers=[];var t=makeHydrationPromise(),r=t.hydrate,n=t.hydrationPromise;this.Nonce=makeNonce({component:e,hydrate:r,hydrationPromise:n}),this.hydrate=r,this.hydrationPromise=n},beforeDestroy:function(){this.cleanup()},mounted:function(){var e=this;if(this.$el.nodeType!==Node.COMMENT_NODE){if(!this.never){if(this.whenVisible){var t=makeHydrationObserver(!0!==this.whenVisible?this.whenVisible:void 0);if(!t)return void this.hydrate();this.$el.hydrate=this.hydrate;return this.hydrationPromise.then(function(){return t.unobserve(e.$el)}),void t.observe(this.$el)}if(this.whenIdle){if(!("requestIdleCallback"in window&&"requestAnimationFrame"in window))return void this.hydrate();var r=requestIdleCallback(function(){requestAnimationFrame(e.hydrate)},{timeout:this.idleTimeout});this.hydrationPromise.then(function(){return cancelIdleCallback(r)})}if(this.interactionEvents.length){var n={capture:!0,once:!0,passive:!0};this.interactionEvents.forEach(function(t){var r,i=[t,e.hydrate,n];(r=e.$el).addEventListener.apply(r,i),e.cleanupHandlers.push(function(){var t;return(t=e.$el).removeEventListener.apply(t,i)})})}}}else this.hydrate()},methods:{cleanup:function(){this.cleanupHandlers.forEach(function(e){return e()})}},render:function(e){return e(this.Nonce,{props:this.$attrs},this.$slots.default)}}]})}function hydrateWhenIdle(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).timeout,r=void 0===t?2e3:t;return makeHydrationBlocker(e,{beforeCreate:function(){this.whenIdle=!0,this.idleTimeout=r}})}function hydrateWhenVisible(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).observerOptions,r=void 0===t?void 0:t;return makeHydrationBlocker(e,{beforeCreate:function(){this.whenVisible=r||!0}})}function hydrateNever(e){return makeHydrationBlocker(e,{beforeCreate:function(){this.never=!0}})}function hydrateOnInteraction(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).event,r=void 0===t?"focus":t,n=Array.isArray(r)?r:[r];return makeHydrationBlocker(e,{beforeCreate:function(){this.interactionEvents=n}})}var Placeholder={render:function(){return this.$slots.default}},LazyHydrate=makeHydrationBlocker(Placeholder,{props:{idleTimeout:{default:2e3,type:Number},never:{type:Boolean},onInteraction:{type:[Array,Boolean,String]},triggerHydration:{default:!1,type:Boolean},whenIdle:{type:Boolean},whenVisible:{type:[Boolean,Object]}},computed:{interactionEvents:function(){return this.onInteraction?!0===this.onInteraction?["focus"]:Array.isArray(this.onInteraction)?this.onInteraction:[this.onInteraction]:[]}},watch:{triggerHydration:{immediate:!0,handler:function(e){e&&this.hydrate()}}}});export default LazyHydrate;export{hydrateNever,hydrateOnInteraction,hydrateWhenIdle,hydrateWhenVisible};
+var observers=new Map;function makeHydrationObserver(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 makeHydrationPromise(){var e=function(){},t=new Promise(function(t){e=t});return{hydrate:e,hydrationPromise:t}}var isServer="undefined"==typeof window;function isAsyncComponentFactory(e){return"function"==typeof e}function resolveComponent(e){return isAsyncComponentFactory(e)?e().then(function(e){return e.default}):e}function makeNonce(e){var t=e.component,n=e.hydrate,r=e.hydrationPromise;return function(){return new Promise(function(e){isServer&&n(),r.then(function(){return e(resolveComponent(t))})})}}function makeHydrationBlocker(e,t){return Object.assign({mixins:[{beforeCreate:function(){this.cleanupHandlers=[];var t=makeHydrationPromise(),n=t.hydrate,r=t.hydrationPromise;this.Nonce=makeNonce({component:e,hydrate:n,hydrationPromise:r}),this.hydrate=n,this.hydrationPromise=r},beforeDestroy:function(){this.cleanup()},mounted:function(){var e=this;if(this.$el.nodeType!==Node.COMMENT_NODE){if(!this.never){if(this.whenVisible){var t=makeHydrationObserver(!0!==this.whenVisible?this.whenVisible:void 0);if(!t)return void this.hydrate();this.$el.hydrate=this.hydrate;var n=function(){return t.unobserve(e.$el)};return this.cleanupHandlers.push(n),this.hydrationPromise.then(n),void t.observe(this.$el)}if(this.whenIdle){if(!("requestIdleCallback"in window&&"requestAnimationFrame"in window))return void this.hydrate();var r=requestIdleCallback(function(){requestAnimationFrame(e.hydrate)},{timeout:this.idleTimeout}),i=function(){return cancelIdleCallback(r)};this.cleanupHandlers.push(i),this.hydrationPromise.then(i)}if(this.interactionEvents&&this.interactionEvents.length){var o={capture:!0,once:!0,passive:!0};this.interactionEvents.forEach(function(t){e.$el.addEventListener(t,e.hydrate,o);e.cleanupHandlers.push(function(){e.$el.removeEventListener(t,e.hydrate,o)})})}}}else this.hydrate()},methods:{cleanup:function(){this.cleanupHandlers.forEach(function(e){return e()})}},render:function(e){return e(this.Nonce,{props:this.$attrs},this.$slots.default)}}]},t)}function hydrateWhenIdle(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).timeout,n=void 0===t?2e3:t;return makeHydrationBlocker(e,{beforeCreate:function(){this.whenIdle=!0,this.idleTimeout=n}})}function hydrateWhenVisible(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).observerOptions,n=void 0===t?void 0:t;return makeHydrationBlocker(e,{beforeCreate:function(){this.whenVisible=n||!0}})}function hydrateNever(e){return makeHydrationBlocker(e,{beforeCreate:function(){this.never=!0}})}function hydrateOnInteraction(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).event,n=void 0===t?"focus":t,r=Array.isArray(n)?n:[n];return makeHydrationBlocker(e,{beforeCreate:function(){this.interactionEvents=r}})}var Placeholder={render:function(){return this.$slots.default}},LazyHydrate=makeHydrationBlocker(Placeholder,{props:{idleTimeout:{default:2e3,type:Number},never:{type:Boolean},onInteraction:{type:[Array,Boolean,String]},triggerHydration:{default:!1,type:Boolean},whenIdle:{type:Boolean},whenVisible:{type:[Boolean,Object]}},computed:{interactionEvents:function(){return this.onInteraction?!0===this.onInteraction?["focus"]:Array.isArray(this.onInteraction)?this.onInteraction:[this.onInteraction]:[]}},watch:{triggerHydration:{immediate:!0,handler:function(e){e&&this.hydrate()}}}});export default LazyHydrate;export{hydrateNever,hydrateOnInteraction,hydrateWhenIdle,hydrateWhenVisible};

dist/LazyHydrate.js

@@ -7,51 +7,2 @@ (function (global, factory) {
 
-  function _defineProperty(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-
-    return obj;
-  }
-
-  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] : {};
-
-      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));
-        });
-      }
-    }
-
-    return target;
-  }
-
   var observers = new Map();
@@ -119,3 +70,3 @@ function makeHydrationObserver(options) {
   function makeHydrationBlocker(component, options) {
-    return _objectSpread2(_objectSpread2({}, options), {}, {
+    return Object.assign({
       mixins: [{
@@ -166,2 +117,3 @@ beforeCreate: function beforeCreate() {
 
+            this.cleanupHandlers.push(cleanup);
             this.hydrationPromise.then(cleanup);
@@ -176,3 +128,2 @@ observer.observe(this.$el);
             if (!("requestIdleCallback" in window) || !("requestAnimationFrame" in window)) {
-              // eslint-disable-next-line no-underscore-dangle
               this.hydrate();
@@ -184,3 +135,2 @@ return;
             var id = requestIdleCallback(function () {
-              // eslint-disable-next-line no-underscore-dangle
               requestAnimationFrame(_this.hydrate);
@@ -195,6 +145,7 @@ }, {
 
+            this.cleanupHandlers.push(_cleanup);
             this.hydrationPromise.then(_cleanup);
           }
 
-          if (this.interactionEvents.length) {
+          if (this.interactionEvents && this.interactionEvents.length) {
             var eventListenerOptions = {
@@ -206,13 +157,9 @@ capture: true,
             this.interactionEvents.forEach(function (eventName) {
-              var _this$$el;
+              _this.$el.addEventListener(eventName, _this.hydrate, eventListenerOptions);
 
-              var eventListenerParams = [eventName, _this.hydrate, eventListenerOptions];
+              var cleanup = function cleanup() {
+                _this.$el.removeEventListener(eventName, _this.hydrate, eventListenerOptions);
+              };
 
-              (_this$$el = _this.$el).addEventListener.apply(_this$$el, eventListenerParams);
-
-              _this.cleanupHandlers.push(function () {
-                var _this$$el2;
-
-                return (_this$$el2 = _this.$el).removeEventListener.apply(_this$$el2, eventListenerParams);
-              });
+              _this.cleanupHandlers.push(cleanup);
             });
@@ -234,3 +181,3 @@ }
       }]
-    });
+    }, options);
   }
@@ -237,0 +184,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="undefined"!=typeof globalThis?globalThis: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}function r(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}var i=new Map;var o="undefined"==typeof window;function a(e,t){return r(r({},t),{},{mixins:[{beforeCreate:function(){this.cleanupHandlers=[];var t=function(){var e=function(){},t=new Promise(function(t){e=t});return{hydrate:e,hydrationPromise:t}}(),n=t.hydrate,r=t.hydrationPromise;this.Nonce=function(e){var t=e.component,n=e.hydrate,r=e.hydrationPromise;return function(){return new Promise(function(e){o&&n(),r.then(function(){return e(function(e){return"function"==typeof e}(n=t)?n().then(function(e){return e.default}):n);var n})})}}({component:e,hydrate:n,hydrationPromise:r}),this.hydrate=n,this.hydrationPromise=r},beforeDestroy:function(){this.cleanup()},mounted:function(){var e=this;if(this.$el.nodeType!==Node.COMMENT_NODE){if(!this.never){if(this.whenVisible){var t=function(e){if("undefined"==typeof IntersectionObserver)return null;var t=JSON.stringify(e);if(i.has(t))return i.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 i.set(t,n),n}(!0!==this.whenVisible?this.whenVisible:void 0);if(!t)return void this.hydrate();this.$el.hydrate=this.hydrate;return this.hydrationPromise.then(function(){return t.unobserve(e.$el)}),void t.observe(this.$el)}if(this.whenIdle){if(!("requestIdleCallback"in window&&"requestAnimationFrame"in window))return void this.hydrate();var n=requestIdleCallback(function(){requestAnimationFrame(e.hydrate)},{timeout:this.idleTimeout});this.hydrationPromise.then(function(){return cancelIdleCallback(n)})}if(this.interactionEvents.length){var r={capture:!0,once:!0,passive:!0};this.interactionEvents.forEach(function(t){var n,i=[t,e.hydrate,r];(n=e.$el).addEventListener.apply(n,i),e.cleanupHandlers.push(function(){var t;return(t=e.$el).removeEventListener.apply(t,i)})})}}}else this.hydrate()},methods:{cleanup:function(){this.cleanupHandlers.forEach(function(e){return e()})}},render:function(e){return e(this.Nonce,{props:this.$attrs},this.$slots.default)}}]})}var s=a({render:function(){return this.$slots.default}},{props:{idleTimeout:{default:2e3,type:Number},never:{type:Boolean},onInteraction:{type:[Array,Boolean,String]},triggerHydration:{default:!1,type:Boolean},whenIdle:{type:Boolean},whenVisible:{type:[Boolean,Object]}},computed:{interactionEvents:function(){return this.onInteraction?!0===this.onInteraction?["focus"]:Array.isArray(this.onInteraction)?this.onInteraction:[this.onInteraction]:[]}},watch:{triggerHydration:{immediate:!0,handler:function(e){e&&this.hydrate()}}}});e.default=s,e.hydrateNever=function(e){return a(e,{beforeCreate:function(){this.never=!0}})},e.hydrateOnInteraction=function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).event,n=void 0===t?"focus":t,r=Array.isArray(n)?n:[n];return a(e,{beforeCreate:function(){this.interactionEvents=r}})},e.hydrateWhenIdle=function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).timeout,n=void 0===t?2e3:t;return a(e,{beforeCreate:function(){this.whenIdle=!0,this.idleTimeout=n}})},e.hydrateWhenVisible=function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).observerOptions,n=void 0===t?void 0:t;return a(e,{beforeCreate:function(){this.whenVisible=n||!0}})},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="undefined"!=typeof globalThis?globalThis:e||self)["vue-lazy-hydration"]={})}(this,function(e){"use strict";var t=new Map;var n="undefined"==typeof window;function i(e,i){return Object.assign({mixins:[{beforeCreate:function(){this.cleanupHandlers=[];var t=function(){var e=function(){},t=new Promise(function(t){e=t});return{hydrate:e,hydrationPromise:t}}(),i=t.hydrate,r=t.hydrationPromise;this.Nonce=function(e){var t=e.component,i=e.hydrate,r=e.hydrationPromise;return function(){return new Promise(function(e){n&&i(),r.then(function(){return e(function(e){return"function"==typeof e}(n=t)?n().then(function(e){return e.default}):n);var n})})}}({component:e,hydrate:i,hydrationPromise:r}),this.hydrate=i,this.hydrationPromise=r},beforeDestroy:function(){this.cleanup()},mounted:function(){var e=this;if(this.$el.nodeType!==Node.COMMENT_NODE){if(!this.never){if(this.whenVisible){var n=function(e){if("undefined"==typeof IntersectionObserver)return null;var n=JSON.stringify(e);if(t.has(n))return t.get(n);var i=new IntersectionObserver(function(e){e.forEach(function(e){(e.isIntersecting||e.intersectionRatio>0)&&e.target.hydrate&&e.target.hydrate()})},e);return t.set(n,i),i}(!0!==this.whenVisible?this.whenVisible:void 0);if(!n)return void this.hydrate();this.$el.hydrate=this.hydrate;var i=function(){return n.unobserve(e.$el)};return this.cleanupHandlers.push(i),this.hydrationPromise.then(i),void n.observe(this.$el)}if(this.whenIdle){if(!("requestIdleCallback"in window&&"requestAnimationFrame"in window))return void this.hydrate();var r=requestIdleCallback(function(){requestAnimationFrame(e.hydrate)},{timeout:this.idleTimeout}),o=function(){return cancelIdleCallback(r)};this.cleanupHandlers.push(o),this.hydrationPromise.then(o)}if(this.interactionEvents&&this.interactionEvents.length){var a={capture:!0,once:!0,passive:!0};this.interactionEvents.forEach(function(t){e.$el.addEventListener(t,e.hydrate,a);e.cleanupHandlers.push(function(){e.$el.removeEventListener(t,e.hydrate,a)})})}}}else this.hydrate()},methods:{cleanup:function(){this.cleanupHandlers.forEach(function(e){return e()})}},render:function(e){return e(this.Nonce,{props:this.$attrs},this.$slots.default)}}]},i)}var r=i({render:function(){return this.$slots.default}},{props:{idleTimeout:{default:2e3,type:Number},never:{type:Boolean},onInteraction:{type:[Array,Boolean,String]},triggerHydration:{default:!1,type:Boolean},whenIdle:{type:Boolean},whenVisible:{type:[Boolean,Object]}},computed:{interactionEvents:function(){return this.onInteraction?!0===this.onInteraction?["focus"]:Array.isArray(this.onInteraction)?this.onInteraction:[this.onInteraction]:[]}},watch:{triggerHydration:{immediate:!0,handler:function(e){e&&this.hydrate()}}}});e.default=r,e.hydrateNever=function(e){return i(e,{beforeCreate:function(){this.never=!0}})},e.hydrateOnInteraction=function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).event,n=void 0===t?"focus":t,r=Array.isArray(n)?n:[n];return i(e,{beforeCreate:function(){this.interactionEvents=r}})},e.hydrateWhenIdle=function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).timeout,n=void 0===t?2e3:t;return i(e,{beforeCreate:function(){this.whenIdle=!0,this.idleTimeout=n}})},e.hydrateWhenVisible=function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).observerOptions,n=void 0===t?void 0:t;return i(e,{beforeCreate:function(){this.whenVisible=n||!0}})},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "vue-lazy-hydration",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "description": "Lazy hydration of server-side rendered Vue.js components",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -240,2 +240,3 @@ # vue-lazy-hydration
 
+- [Partial Hydration Concepts: Lazy and Active](https://markus.oberlehner.net/blog/partial-hydration-concepts-lazy-and-active/)
 - [abomination: a Concept for a Static HTML / Dynamic JavaScript Hybrid Application](https://markus.oberlehner.net/blog/abomination-a-concept-for-a-static-html-dynamic-javascript-hybrid-application/)
@@ -246,3 +247,3 @@ - [How to Drastically Reduce Estimated Input Latency and Time to Interactive of SSR Vue.js Applications](https://markus.oberlehner.net/blog/how-to-drastically-reduce-estimated-input-latency-and-time-to-interactive-of-ssr-vue-applications/)
 
-The code of the current implementation of this package is based on a [similar package created by **Rahul Kadyan**](https://github.com/znck/lazy-hydration). Thanks to his code I'm finally able to build a clean solution for what I dreamed of when I created the [abomination](https://markus.oberlehner.net/blog/abomination-a-concept-for-a-static-html-dynamic-javascript-hybrid-application/).
+The code of the v1 version of this package was based on a [similar package created by **Rahul Kadyan**](https://github.com/znck/lazy-hydration).
 
@@ -249,0 +250,0 @@ ## Testing

src/utils/hydration-blocker.js

@@ -6,4 +6,3 @@ import { makeHydrationObserver } from './hydration-observer';
 export function makeHydrationBlocker(component, options) {
-  return {
-    ...options,
+  return Object.assign({
     mixins: [{
@@ -40,2 +39,3 @@ beforeCreate() {
           const cleanup = () => observer.unobserve(this.$el);
+          this.cleanupHandlers.push(cleanup);
           this.hydrationPromise.then(cleanup);
@@ -50,3 +50,2 @@ observer.observe(this.$el);
           if (!(`requestIdleCallback` in window) || !(`requestAnimationFrame` in window)) {
-            // eslint-disable-next-line no-underscore-dangle
             this.hydrate();
@@ -58,3 +57,2 @@ return;
           const id = requestIdleCallback(() => {
-            // eslint-disable-next-line no-underscore-dangle
             requestAnimationFrame(this.hydrate);
@@ -64,6 +62,7 @@ }, { timeout: this.idleTimeout });
           const cleanup = () => cancelIdleCallback(id);
+          this.cleanupHandlers.push(cleanup);
           this.hydrationPromise.then(cleanup);
         }
 
-        if (this.interactionEvents.length) {
+        if (this.interactionEvents && this.interactionEvents.length) {
           const eventListenerOptions = {
@@ -76,5 +75,7 @@ capture: true,
           this.interactionEvents.forEach((eventName) => {
-            const eventListenerParams = [eventName, this.hydrate, eventListenerOptions];
-            this.$el.addEventListener(...eventListenerParams);
-            this.cleanupHandlers.push(() => this.$el.removeEventListener(...eventListenerParams));
+            this.$el.addEventListener(eventName, this.hydrate, eventListenerOptions);
+            const cleanup = () => {
+              this.$el.removeEventListener(eventName, this.hydrate, eventListenerOptions);
+            };
+            this.cleanupHandlers.push(cleanup);
           });
@@ -92,3 +93,3 @@ }
     }],
-  };
+  }, options);
 }

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

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

Improved metrics

Number of package files

13

increased by8.33%

Number of lines in readme file

283

increased by0.35%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

43384

decreased by-8.72%

Lines of code

668

decreased by-11.29%

No dependency changes