vue-lazy-hydration - npm Package Compare versions

Comparing version 1.0.0-beta.14 to 2.0.0-alpha.0

dist/LazyHydrate.esm.js

@@ -172,3 +172,3 @@ function _defineProperty(obj, key, value) {
 }
-function hydrateSsrOnly(component) {
+function hydrateNever(component) {
   if (isServer) return component;
@@ -217,2 +217,13 @@ var resolvableComponent = resolvableComponentFactory(component);
 }
+
+var Nonce = function Nonce() {
+  return new Promise(function () {});
+};
+
+var LazyHydrateBlocker = {
+  functional: true,
+  render: function render(h, context) {
+    return context.props.isHydrated ? context.props.content : h(Nonce);
+  }
+};
 var LazyHydrate = {
@@ -227,3 +238,3 @@ props: {
     },
-    ssrOnly: {
+    never: {
       type: Boolean
@@ -244,3 +255,3 @@ },
     return {
-      hydrated: isServer
+      isHydrated: isServer
     };
@@ -272,3 +283,3 @@ },
 
-    if (this.ssrOnly) return;
+    if (this.never) return;
     this.interactionEvents.forEach(function (eventName) {
@@ -346,3 +357,3 @@ _this3.$el.addEventListener(eventName, _this3.hydrate, {
     hydrate: function hydrate() {
-      this.hydrated = true;
+      this.isHydrated = true;
       this.cleanup();
@@ -352,14 +363,8 @@ }
   render: function render(h) {
-    if (!this.$scopedSlots.default && !this.$slots.default) return null;
-    var child = this.$scopedSlots.default ? this.$scopedSlots.default({
-      hydrated: this.hydrated
-    }) : this.$slots.default[0];
-    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
-
-    vnode.asyncFactory = {};
-    vnode.isComment = true;
-    return vnode;
+    return h(LazyHydrateBlocker, {
+      props: {
+        content: this.$slots.default,
+        isHydrated: this.isHydrated
+      }
+    });
   }
@@ -369,2 +374,2 @@ };
 export default LazyHydrate;
-export { hydrateOnInteraction, hydrateSsrOnly, hydrateWhenIdle, hydrateWhenVisible };
+export { hydrateNever, hydrateOnInteraction, hydrateWhenIdle, hydrateWhenVisible };

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 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};
+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 hydrateNever(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 Nonce=function(){return new Promise(function(){})},LazyHydrateBlocker={functional:!0,render:function(e,t){return t.props.isHydrated?t.props.content:e(Nonce)}},LazyHydrate={props:{idleTimeout:{default:2e3,type:Number},onInteraction:{type:[Array,Boolean,String]},never:{type:Boolean},triggerHydration:{default:!1,type:Boolean},whenIdle:{type:Boolean},whenVisible:{type:[Boolean,Object]}},data:function(){return{isHydrated: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.never){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.isHydrated=!0,this.cleanup()}},render:function(e){return e(LazyHydrateBlocker,{props:{content:this.$slots.default,isHydrated:this.isHydrated}})}};export default LazyHydrate;export{hydrateNever,hydrateOnInteraction,hydrateWhenIdle,hydrateWhenVisible};

dist/LazyHydrate.js

 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = global || self, factory(global['vue-lazy-hydration'] = {}));
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['vue-lazy-hydration'] = {}));
 }(this, (function (exports) { 'use strict';
@@ -178,3 +178,3 @@
   }
-  function hydrateSsrOnly(component) {
+  function hydrateNever(component) {
     if (isServer) return component;
@@ -223,2 +223,13 @@ var resolvableComponent = resolvableComponentFactory(component);
   }
+
+  var Nonce = function Nonce() {
+    return new Promise(function () {});
+  };
+
+  var LazyHydrateBlocker = {
+    functional: true,
+    render: function render(h, context) {
+      return context.props.isHydrated ? context.props.content : h(Nonce);
+    }
+  };
   var LazyHydrate = {
@@ -233,3 +244,3 @@ props: {
       },
-      ssrOnly: {
+      never: {
         type: Boolean
@@ -250,3 +261,3 @@ },
       return {
-        hydrated: isServer
+        isHydrated: isServer
       };
@@ -278,3 +289,3 @@ },
 
-      if (this.ssrOnly) return;
+      if (this.never) return;
       this.interactionEvents.forEach(function (eventName) {
@@ -352,3 +363,3 @@ _this3.$el.addEventListener(eventName, _this3.hydrate, {
       hydrate: function hydrate() {
-        this.hydrated = true;
+        this.isHydrated = true;
         this.cleanup();
@@ -358,14 +369,8 @@ }
     render: function render(h) {
-      if (!this.$scopedSlots.default && !this.$slots.default) return null;
-      var child = this.$scopedSlots.default ? this.$scopedSlots.default({
-        hydrated: this.hydrated
-      }) : this.$slots.default[0];
-      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
-
-      vnode.asyncFactory = {};
-      vnode.isComment = true;
-      return vnode;
+      return h(LazyHydrateBlocker, {
+        props: {
+          content: this.$slots.default,
+          isHydrated: this.isHydrated
+        }
+      });
     }
@@ -375,4 +380,4 @@ };
   exports.default = LazyHydrate;
+  exports.hydrateNever = hydrateNever;
   exports.hydrateOnInteraction = hydrateOnInteraction;
-  exports.hydrateSsrOnly = hydrateSsrOnly;
   exports.hydrateWhenIdle = hydrateWhenIdle;
@@ -379,0 +384,0 @@ exports.hydrateWhenVisible = hydrateWhenVisible;

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,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})});
+!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}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=function(){return new Promise(function(){})},c={functional:!0,render:function(e,t){return t.props.isHydrated?t.props.content:e(u)}},l={props:{idleTimeout:{default:2e3,type:Number},onInteraction:{type:[Array,Boolean,String]},never:{type:Boolean},triggerHydration:{default:!1,type:Boolean},whenIdle:{type:Boolean},whenVisible:{type:[Boolean,Object]}},data:function(){return{isHydrated: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.never){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.isHydrated=!0,this.cleanup()}},render:function(e){return e(c,{props:{content:this.$slots.default,isHydrated:this.isHydrated}})}};e.default=l,e.hydrateNever=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){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.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.14",
+  "version": "2.0.0-alpha.0",
   "description": "Lazy hydration of server-side rendered Vue.js components",
@@ -23,3 +23,3 @@ "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: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-hydrate-never' test/performance/entry-hydrate-never.js",
     "test:perf:render": "node test/performance/render.js",
@@ -38,25 +38,25 @@ "test:perf:build": "npm run build && npm run test:perf:compile && npm run test:perf:render",
     "@avalanche/eslint-config": "^4.0.0",
-    "@babel/core": "^7.10.5",
-    "@babel/preset-env": "^7.10.4",
-    "@vue/cli-service": "^4.4.6",
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "@vue/cli-service": "^4.5.6",
     "babel-eslint": "^10.1.0",
     "cli-table3": "^0.6.0",
-    "concurrently": "^5.2.0",
-    "eslint": "^7.4.0",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.10.0",
     "eslint-plugin-compat": "^3.8.0",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-markdown": "^1.0.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "jest": "^26.1.0",
+    "eslint-plugin-vue": "^7.0.0",
+    "jest": "^26.4.2",
     "jest-puppeteer": "^4.4.0",
-    "lighthouse": "^6.1.1",
-    "marked": "^1.1.1",
-    "puppeteer": "^5.1.0",
-    "rollup": "^2.21.0",
+    "lighthouse": "^6.4.1",
+    "marked": "^1.2.0",
+    "puppeteer": "^5.3.1",
+    "rollup": "^2.28.2",
     "rollup-plugin-babel": "^4.4.0",
     "serve": "^11.3.2",
     "uglify-es": "^3.3.9",
-    "vue": "^2.6.11",
-    "vue-server-renderer": "^2.6.11",
-    "vue-template-compiler": "^2.6.11"
+    "vue": "^2.6.12",
+    "vue-server-renderer": "^2.6.12",
+    "vue-template-compiler": "^2.6.12"
   },
@@ -63,0 +63,0 @@ "main": "dist/LazyHydrate.js",

README.md

@@ -47,3 +47,3 @@ # vue-lazy-hydration
 
-    <LazyHydrate ssr-only>
+    <LazyHydrate never>
       <ArticleContent :content="article.content"/>
@@ -88,3 +88,3 @@ </LazyHydrate>
 1. Because it is at the very top of the page, the `ImageSlider` should be hydrated eventually, but we can wait until the browser is idle.
-2. The `ArticleContent` component is only loaded in SSR mode, which means it never gets hydrated in the browser, which also means it will never be interactive (static content only).
+2. The `ArticleContent` component is never hydrated on the client, which also means it will never be interactive (static content only).
 3. Next we can see the `AdSlider` beneath the article content, this component will most likely not be visible initially so we can delay hydration until the point it becomes visible.
@@ -95,55 +95,2 @@ 4. At the very bottom of the page we want to render a `CommentForm` but because most people only read the article and don't leave a comment, we can save resources by only hydrating the component whenever it actually receives focus.
 
-### Prevent JavaScript bundle loading
-
-> **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.
-
-```html
-<template>
-  <div class="ArticlePage">
-    <LazyHydrate on-interaction>
-      <CommentForm
-        slot-scope="{ hydrated }"
-        v-if="hydrated"
-        :article-id="article.id"
-      />
-    </LazyHydrate>
-    <!-- Or using new Vue.js 2.6.x v-slot syntax -->
-    <LazyHydrate
-      v-slot="{ hydrated }"
-      on-interaction
-    >
-      <CommentForm
-        v-if="hydrated"
-        :article-id="article.id"
-      />
-    </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>
-</template>
-
-<script>
-import LazyHydrate from 'vue-lazy-hydration';
-
-export default {
-  components: {
-    LazyHydrate,
-    // The `CommentForm` is only imported if `hydrated` is true.
-    CommentForm: () => import('./CommentForm.vue'),
-  },
-  // ...
-};
-</script>
-```
-
 ### Manually trigger hydration
@@ -159,3 +106,3 @@
     </button>
-    <LazyHydrate ssr-only :trigger-hydration="editModeActive">
+    <LazyHydrate never :trigger-hydration="editModeActive">
       <UserSettingsForm/>
@@ -191,3 +138,3 @@ </LazyHydrate>
   <div class="MyComponent">
-    <LazyHydrate ssr-only>
+    <LazyHydrate never>
       <div>
@@ -222,4 +169,2 @@ <ArticleHeader/>
 
-> **Attention:** because of [a bug in Vue.js <= v2.6.7](https://github.com/vuejs/vue/pull/9572) Import Wrappers require that you have at least version **v2.6.8** of Vue.js installed otherwise they will not work correctly in certain situations (especially in combination with Vue Router).
-
 Additionally to the `<LazyHydrate>` wrapper component you can also use Import Wrappers to lazy load and hydrate certain components.
@@ -240,3 +185,3 @@
   hydrateOnInteraction,
-  hydrateSsrOnly,
+  hydrateNever,
   hydrateWhenIdle,
@@ -253,3 +198,3 @@ hydrateWhenVisible,
     ),
-    ArticleContent: hydrateSsrOnly(
+    ArticleContent: hydrateNever(
       () => import('./ArticleContent.vue'),
@@ -256,0 +201,0 @@ { ignoredProps: ['content'] },

src/LazyHydrate.js

@@ -71,3 +71,3 @@ import {
 
-export function hydrateSsrOnly(component) {
+export function hydrateNever(component) {
   if (isServer) return component;
@@ -112,2 +112,9 @@
 
+const Nonce = () => new Promise(() => {});
+
+const LazyHydrateBlocker = {
+  functional: true,
+  render: (h, context) => (context.props.isHydrated ? context.props.content : h(Nonce)),
+};
+
 export default {
@@ -122,3 +129,3 @@ props: {
     },
-    ssrOnly: {
+    never: {
       type: Boolean,
@@ -139,3 +146,3 @@ },
     return {
-      hydrated: isServer,
+      isHydrated: isServer,
     };
@@ -168,3 +175,3 @@ },
 
-    if (this.ssrOnly) return;
+    if (this.never) return;
 
@@ -236,3 +243,3 @@ this.interactionEvents.forEach((eventName) => {
     hydrate() {
-      this.hydrated = true;
+      this.isHydrated = true;
       this.cleanup();
@@ -242,19 +249,9 @@ },
   render(h) {
-    if (!this.$scopedSlots.default && !this.$slots.default) return null;
-
-    const child = this.$scopedSlots.default
-      ? this.$scopedSlots.default({ hydrated: this.hydrated })
-      : this.$slots.default[0];
-
-    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
-    vnode.asyncFactory = {};
-    vnode.isComment = true;
-
-    return vnode;
+    return h(LazyHydrateBlocker, {
+      props: {
+        content: this.$slots.default,
+        isHydrated: this.isHydrated,
+      },
+    });
   },
 };

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

Lines of code

922

increased by0.77%

Worsened metrics

Total package byte prevSize

52488

decreased by-3.99%

Number of lines in readme file

271

decreased by-16.87%

No dependency changes