vue-lazy-hydration - npm Package Compare versions

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

dist/LazyHydrate.esm.js

 var isServer = typeof window === "undefined";
-var blockRenderHydration = true;
+var isBrowser = !isServer;
 var observer = null;
@@ -24,8 +24,4 @@
     },
-    initialRenderTimeout: {
-      default: 800,
-      type: Number
-    },
     onInteraction: {
-      type: [Boolean, String]
+      type: [Array, Boolean, String]
     },
@@ -60,39 +56,11 @@ ssrOnly: {
   computed: {
-    interactionEvent: function interactionEvent() {
-      return this.onInteraction === true ? "focus" : this.onInteraction;
+    interactionEvents: function interactionEvents() {
+      if (!this.onInteraction) return [];
+      if (this.onInteraction === true) return ["focus"];
+      return Array.isArray(this.onInteraction) ? this.onInteraction : [this.onInteraction];
     }
   },
-  beforeCreate: function beforeCreate() {
+  mounted: function mounted() {
     var _this = this;
 
-    if (isServer) return;
-    var render = this.$options.render;
-
-    this.$options.render = function () {
-      // Hydrate the component if it is going to be re-rendered after
-      // the initial render. A re-render is triggered if a property of
-      // the child component changes for example.
-      if (!blockRenderHydration) {
-        _this.hydrate();
-
-        blockRenderHydration = true;
-      } // Special thanks to Rahul Kadyan for the following lines of code.
-      // https://github.com/znck
-
-
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      var vnode = render.apply(_this, args);
-      vnode.asyncFactory = _this.hydrated ? {
-        resolved: true
-      } : {};
-      vnode.isAsyncPlaceholder = !_this.hydrated;
-      return vnode;
-    };
-  },
-  mounted: function mounted() {
-    var _this2 = this;
-
     if (this.$el.childElementCount === 0) {
@@ -104,15 +72,15 @@ // No SSR rendered content, hydrate immediately.
 
-    setTimeout(function () {
-      blockRenderHydration = false;
-    }, this.initialRenderTimeout);
     if (this.ssrOnly) return;
-
-    if (this.interactionEvent) {
-      this.$el.addEventListener(this.interactionEvent, this.hydrate, {
+    this.interactionEvents.forEach(function (eventName) {
+      _this.$el.addEventListener(eventName, _this.hydrate, {
         capture: true,
         once: true
       });
+    });
 
+    if (this.interactionEvents.length) {
       this.interaction = function () {
-        return _this2.$el.removeEventListener(_this2.interactionEvent, _this2.hydrate);
+        _this.interactionEvents.forEach(function (eventName) {
+          return _this.$el.removeEventListener(eventName, _this.hydrate);
+        });
       };
@@ -131,3 +99,3 @@ }
         requestAnimationFrame(function () {
-          _this2.hydrate();
+          _this.hydrate();
         });
@@ -154,4 +122,4 @@ }, {
       this.visible = function () {
-        observer.unobserve(_this2.$el);
-        delete _this2.$el.hydrate;
+        observer.unobserve(_this.$el);
+        delete _this.$el.hydrate;
       };
@@ -165,10 +133,10 @@ }
     cleanup: function cleanup() {
-      var _this3 = this;
+      var _this2 = this;
 
       var handlers = ["idle", "interaction", "visible"];
       handlers.forEach(function (handler) {
-        if (handler in _this3) {
-          _this3[handler]();
+        if (handler in _this2) {
+          _this2[handler]();
 
-          delete _this3[handler];
+          delete _this2[handler];
         }
@@ -183,8 +151,16 @@ });
   render: function render(h) {
-    if (!this.hydrated) return h("div");
-    return this.$slots.default.length > 1 ? h("div", {
-      style: {
-        display: "contents"
-      }
-    }, this.$slots.default) : this.$slots.default[0];
+    var children = this.$scopedSlots.default ? this.$scopedSlots.default({
+      hydrated: this.hydrated
+    }) : this.$slots.default[0];
+    var vnode = this.hydrated ? children : h("div"); // Special thanks to Rahul Kadyan for the following lines of code.
+    // https://github.com/znck
+
+    if (isBrowser) {
+      vnode.asyncFactory = this.hydrated ? {
+        resolved: true
+      } : {};
+      vnode.isAsyncPlaceholder = !this.hydrated;
+    }
+
+    return vnode;
   }
@@ -191,0 +167,0 @@ };

dist/LazyHydrate.esm.min.js

@@ -1,1 +0,1 @@
-var isServer="undefined"==typeof window,blockRenderHydration=!0,observer=null;"undefined"!=typeof IntersectionObserver&&(observer=new IntersectionObserver(function(e){e.forEach(function(e){(e.isIntersecting||e.intersectionRatio>0)&&e.target.parentElement.hydrate&&e.target.parentElement.hydrate()})}));var LazyHydrate={props:{idleTimeout:{default:2e3,type:Number},initialRenderTimeout:{default:800,type:Number},onInteraction:{type:[Boolean,String]},ssrOnly:{type:Boolean},triggerHydration:{default:!1,type:Boolean},whenIdle:{type:Boolean},whenVisible:{type:Boolean}},data:function(){return{hydrated:isServer}},watch:{triggerHydration:{immediate:!0,handler:function(e){e&&this.hydrate()}}},computed:{interactionEvent:function(){return!0===this.onInteraction?"focus":this.onInteraction}},beforeCreate:function(){var e=this;if(!isServer){var t=this.$options.render;this.$options.render=function(){blockRenderHydration||(e.hydrate(),blockRenderHydration=!0);for(var n=arguments.length,i=new Array(n),r=0;r<n;r++)i[r]=arguments[r];var o=t.apply(e,i);return o.asyncFactory=e.hydrated?{resolved:!0}:{},o.isAsyncPlaceholder=!e.hydrated,o}}},mounted:function(){var e=this;if(0!==this.$el.childElementCount){if(setTimeout(function(){blockRenderHydration=!1},this.initialRenderTimeout),!this.ssrOnly){if(this.interactionEvent&&(this.$el.addEventListener(this.interactionEvent,this.hydrate,{capture:!0,once:!0}),this.interaction=function(){return e.$el.removeEventListener(e.interactionEvent,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){if(!observer)return void this.hydrate();this.$el.hydrate=this.hydrate,observer.observe(this.$el.children[0]),this.visible=function(){observer.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){return this.hydrated?this.$slots.default.length>1?e("div",{style:{display:"contents"}},this.$slots.default):this.$slots.default[0]:e("div")}};export default LazyHydrate;
+var isServer="undefined"==typeof window,isBrowser=!isServer,observer=null;"undefined"!=typeof IntersectionObserver&&(observer=new IntersectionObserver(function(e){e.forEach(function(e){(e.isIntersecting||e.intersectionRatio>0)&&e.target.parentElement.hydrate&&e.target.parentElement.hydrate()})}));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}},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){if(!observer)return void this.hydrate();this.$el.hydrate=this.hydrate,observer.observe(this.$el.children[0]),this.visible=function(){observer.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.$scopedSlots.default?this.$scopedSlots.default({hydrated:this.hydrated}):this.$slots.default[0],n=this.hydrated?t:e("div");return isBrowser&&(n.asyncFactory=this.hydrated?{resolved:!0}:{},n.isAsyncPlaceholder=!this.hydrated),n}};export default LazyHydrate;

dist/LazyHydrate.js

@@ -8,3 +8,3 @@ (function (global, factory) {
   var isServer = typeof window === "undefined";
-  var blockRenderHydration = true;
+  var isBrowser = !isServer;
   var observer = null;
@@ -31,8 +31,4 @@
       },
-      initialRenderTimeout: {
-        default: 800,
-        type: Number
-      },
       onInteraction: {
-        type: [Boolean, String]
+        type: [Array, Boolean, String]
       },
@@ -67,39 +63,11 @@ ssrOnly: {
     computed: {
-      interactionEvent: function interactionEvent() {
-        return this.onInteraction === true ? "focus" : this.onInteraction;
+      interactionEvents: function interactionEvents() {
+        if (!this.onInteraction) return [];
+        if (this.onInteraction === true) return ["focus"];
+        return Array.isArray(this.onInteraction) ? this.onInteraction : [this.onInteraction];
       }
     },
-    beforeCreate: function beforeCreate() {
+    mounted: function mounted() {
       var _this = this;
 
-      if (isServer) return;
-      var render = this.$options.render;
-
-      this.$options.render = function () {
-        // Hydrate the component if it is going to be re-rendered after
-        // the initial render. A re-render is triggered if a property of
-        // the child component changes for example.
-        if (!blockRenderHydration) {
-          _this.hydrate();
-
-          blockRenderHydration = true;
-        } // Special thanks to Rahul Kadyan for the following lines of code.
-        // https://github.com/znck
-
-
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        var vnode = render.apply(_this, args);
-        vnode.asyncFactory = _this.hydrated ? {
-          resolved: true
-        } : {};
-        vnode.isAsyncPlaceholder = !_this.hydrated;
-        return vnode;
-      };
-    },
-    mounted: function mounted() {
-      var _this2 = this;
-
       if (this.$el.childElementCount === 0) {
@@ -111,15 +79,15 @@ // No SSR rendered content, hydrate immediately.
 
-      setTimeout(function () {
-        blockRenderHydration = false;
-      }, this.initialRenderTimeout);
       if (this.ssrOnly) return;
-
-      if (this.interactionEvent) {
-        this.$el.addEventListener(this.interactionEvent, this.hydrate, {
+      this.interactionEvents.forEach(function (eventName) {
+        _this.$el.addEventListener(eventName, _this.hydrate, {
           capture: true,
           once: true
         });
+      });
 
+      if (this.interactionEvents.length) {
         this.interaction = function () {
-          return _this2.$el.removeEventListener(_this2.interactionEvent, _this2.hydrate);
+          _this.interactionEvents.forEach(function (eventName) {
+            return _this.$el.removeEventListener(eventName, _this.hydrate);
+          });
         };
@@ -138,3 +106,3 @@ }
           requestAnimationFrame(function () {
-            _this2.hydrate();
+            _this.hydrate();
           });
@@ -161,4 +129,4 @@ }, {
         this.visible = function () {
-          observer.unobserve(_this2.$el);
-          delete _this2.$el.hydrate;
+          observer.unobserve(_this.$el);
+          delete _this.$el.hydrate;
         };
@@ -172,10 +140,10 @@ }
       cleanup: function cleanup() {
-        var _this3 = this;
+        var _this2 = this;
 
         var handlers = ["idle", "interaction", "visible"];
         handlers.forEach(function (handler) {
-          if (handler in _this3) {
-            _this3[handler]();
+          if (handler in _this2) {
+            _this2[handler]();
 
-            delete _this3[handler];
+            delete _this2[handler];
           }
@@ -190,8 +158,16 @@ });
     render: function render(h) {
-      if (!this.hydrated) return h("div");
-      return this.$slots.default.length > 1 ? h("div", {
-        style: {
-          display: "contents"
-        }
-      }, this.$slots.default) : this.$slots.default[0];
+      var children = this.$scopedSlots.default ? this.$scopedSlots.default({
+        hydrated: this.hydrated
+      }) : this.$slots.default[0];
+      var vnode = this.hydrated ? children : h("div"); // Special thanks to Rahul Kadyan for the following lines of code.
+      // https://github.com/znck
+
+      if (isBrowser) {
+        vnode.asyncFactory = this.hydrated ? {
+          resolved: true
+        } : {};
+        vnode.isAsyncPlaceholder = !this.hydrated;
+      }
+
+      return vnode;
     }
@@ -198,0 +174,0 @@ };

dist/LazyHydrate.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self)["vue-lazy-hydration"]=t()}(this,function(){"use strict";var e="undefined"==typeof window,t=!0,n=null;return"undefined"!=typeof IntersectionObserver&&(n=new IntersectionObserver(function(e){e.forEach(function(e){(e.isIntersecting||e.intersectionRatio>0)&&e.target.parentElement.hydrate&&e.target.parentElement.hydrate()})})),{props:{idleTimeout:{default:2e3,type:Number},initialRenderTimeout:{default:800,type:Number},onInteraction:{type:[Boolean,String]},ssrOnly:{type:Boolean},triggerHydration:{default:!1,type:Boolean},whenIdle:{type:Boolean},whenVisible:{type:Boolean}},data:function(){return{hydrated:e}},watch:{triggerHydration:{immediate:!0,handler:function(e){e&&this.hydrate()}}},computed:{interactionEvent:function(){return!0===this.onInteraction?"focus":this.onInteraction}},beforeCreate:function(){var n=this;if(!e){var i=this.$options.render;this.$options.render=function(){t||(n.hydrate(),t=!0);for(var e=arguments.length,r=new Array(e),o=0;o<e;o++)r[o]=arguments[o];var a=i.apply(n,r);return a.asyncFactory=n.hydrated?{resolved:!0}:{},a.isAsyncPlaceholder=!n.hydrated,a}}},mounted:function(){var e=this;if(0!==this.$el.childElementCount){if(setTimeout(function(){t=!1},this.initialRenderTimeout),!this.ssrOnly){if(this.interactionEvent&&(this.$el.addEventListener(this.interactionEvent,this.hydrate,{capture:!0,once:!0}),this.interaction=function(){return e.$el.removeEventListener(e.interactionEvent,e.hydrate)}),this.whenIdle){if(!("requestIdleCallback"in window&&"requestAnimationFrame"in window))return void this.hydrate();var i=requestIdleCallback(function(){requestAnimationFrame(function(){e.hydrate()})},{timeout:this.idleTimeout});this.idle=function(){return cancelIdleCallback(i)}}if(this.whenVisible){if(!n)return void this.hydrate();this.$el.hydrate=this.hydrate,n.observe(this.$el.children[0]),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){return this.hydrated?this.$slots.default.length>1?e("div",{style:{display:"contents"}},this.$slots.default):this.$slots.default[0]:e("div")}}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self)["vue-lazy-hydration"]=t()}(this,function(){"use strict";var e="undefined"==typeof window,t=!e,n=null;return"undefined"!=typeof IntersectionObserver&&(n=new IntersectionObserver(function(e){e.forEach(function(e){(e.isIntersecting||e.intersectionRatio>0)&&e.target.parentElement.hydrate&&e.target.parentElement.hydrate()})})),{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}},data:function(){return{hydrated:e}},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){if(!n)return void this.hydrate();this.$el.hydrate=this.hydrate,n.observe(this.$el.children[0]),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 n=this.$scopedSlots.default?this.$scopedSlots.default({hydrated:this.hydrated}):this.$slots.default[0],i=this.hydrated?n:e("div");return t&&(i.asyncFactory=this.hydrated?{resolved:!0}:{},i.isAsyncPlaceholder=!this.hydrated),i}}});

package.json

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

README.md

@@ -63,12 +63,9 @@ # vue-lazy-hydration
     </LazyHydrate>
-    <!-- ... but you can listen for any event you want. -->
+    <!-- ... but you can listen for any event you want ... -->
     <LazyHydrate on-interaction="click">
       <CommentForm :article-id="article.id"/>
     </LazyHydrate>
-    
-    <!-- You can also wrap multiple components if you don't mind a wrapper `<div>` -->
-    <LazyHydrate when-visible>
-      <ImageSlider/>
-      <ArticleContent :content="article.content"/>
-      <AdSlider/>
+    <!-- ... or even multiple events. -->
+    <LazyHydrate :on-interaction="['click', 'touchstart']">
+      <CommentForm :article-id="article.id"/>
     </LazyHydrate>
@@ -99,10 +96,35 @@ </div>
 
-#### Multiple root nodes
+### Advanced
 
-Usually `vue-lazy-hydration` does not render a DOM element itself if only a single component is nested inside `<LazyHydrate>`. If you decide to render multiple components inside of a single `<LazyHydrate>` tag, a wrapper `<div>` with `style="display: contents"` is added. Adding `display: contents` makes that the wrapper `<div>` doesn't generate any box.
+#### Prevent JavaScript bundle loading
 
-### Advanced
+```html
+<template>
+  <div class="ArticlePage">
+    <LazyHydrate on-interaction>
+      <CommentForm
+        slot-scope="{ hydrated }"
+        v-if="hydrated"
+        :article-id="article.id"
+      />
+    </LazyHydrate>
+  </div>
+</template>
 
-#### Manualy trigger hydration
+<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
+
 Sometimes you might want to prevent a component from loading initially but you want to activate it on demand if a certain action is triggered. You can do this by manually triggering the component to hydrate like you can see in the following example.
@@ -117,3 +139,3 @@
     <LazyHydrate ssr-only :trigger-hydration="editModeActive">
-      <UserSettingsForm :editable="editModeActive"/>
+      <UserSettingsForm/>
     </LazyHydrate>
@@ -141,2 +163,21 @@ </div>
 
+#### Multiple root nodes
+
+Because of how this package works, it is not possible to nest multiple root nodes inside of a single `<LazyHydrate>`. But you can wrap multiple components with a `<div>`.
+
+```html
+<template>
+  <div class="MyComponent">
+    <LazyHydrate ssr-only>
+      <div>
+        <ArticleHeader/>
+        <ArticleContent/>
+        <ArticleMetaInfo/>
+        <ArticleFooter/>
+      </div>
+    </LazyHydrate>
+  </div>
+</template>
+```
+
 ## Benchmarks
@@ -143,0 +184,0 @@

src/LazyHydrate.js

 const isServer = typeof window === `undefined`;
-let blockRenderHydration = true;
+const isBrowser = !isServer;
 let observer = null;
@@ -25,8 +25,4 @@
     },
-    initialRenderTimeout: {
-      default: 800,
-      type: Number,
-    },
     onInteraction: {
-      type: [Boolean, String],
+      type: [Array, Boolean, String],
     },
@@ -61,30 +57,11 @@ ssrOnly: {
   computed: {
-    interactionEvent() {
-      return this.onInteraction === true ? `focus` : this.onInteraction;
+    interactionEvents() {
+      if (!this.onInteraction) return [];
+      if (this.onInteraction === true) return [`focus`];
+
+      return Array.isArray(this.onInteraction)
+        ? this.onInteraction
+        : [this.onInteraction];
     },
   },
-  beforeCreate() {
-    if (isServer) return;
-
-    const { render } = this.$options;
-
-    this.$options.render = (...args) => {
-      // Hydrate the component if it is going to be re-rendered after
-      // the initial render. A re-render is triggered if a property of
-      // the child component changes for example.
-      if (!blockRenderHydration) {
-        this.hydrate();
-        blockRenderHydration = true;
-      }
-
-      // Special thanks to Rahul Kadyan for the following lines of code.
-      // https://github.com/znck
-      const vnode = render.apply(this, args);
-
-      vnode.asyncFactory = this.hydrated ? { resolved: true } : {};
-      vnode.isAsyncPlaceholder = !this.hydrated;
-
-      return vnode;
-    };
-  },
   mounted() {
@@ -97,15 +74,15 @@ if (this.$el.childElementCount === 0) {
 
-    setTimeout(() => {
-      blockRenderHydration = false;
-    }, this.initialRenderTimeout);
-
     if (this.ssrOnly) return;
 
-    if (this.interactionEvent) {
-      this.$el.addEventListener(this.interactionEvent, this.hydrate, {
+    this.interactionEvents.forEach((eventName) => {
+      this.$el.addEventListener(eventName, this.hydrate, {
         capture: true,
         once: true,
       });
-      this.interaction = () =>
-        this.$el.removeEventListener(this.interactionEvent, this.hydrate);
+    });
+    if (this.interactionEvents.length) {
+      this.interaction = () => {
+        this.interactionEvents.forEach(eventName =>
+          this.$el.removeEventListener(eventName, this.hydrate));
+      };
     }
@@ -165,8 +142,18 @@
   render(h) {
-    if (!this.hydrated) return h(`div`);
+    const children = this.$scopedSlots.default
+      ? this.$scopedSlots.default({ hydrated: this.hydrated })
+      : this.$slots.default[0];
+    const vnode = this.hydrated
+      ? children
+      : h(`div`);
 
-    return this.$slots.default.length > 1
-      ? h(`div`, { style: { display: `contents` } }, this.$slots.default)
-      : this.$slots.default[0];
+    // Special thanks to Rahul Kadyan for the following lines of code.
+    // https://github.com/znck
+    if (isBrowser) {
+      vnode.asyncFactory = this.hydrated ? { resolved: true } : {};
+      vnode.isAsyncPlaceholder = !this.hydrated;
+    }
+
+    return vnode;
   },
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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 lines in readme file

214

increased by23.7%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

148100

decreased by-0.99%

Lines of code

747

decreased by-5.92%

No dependency changes