Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue-lazy-hydration

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-lazy-hydration - npm Package Compare versions

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

3

dist/LazyHydrate.esm.js

@@ -145,6 +145,7 @@ var isServer = typeof window === "undefined";

render: function render(h) {
var tag = this.$el ? this.$el.tagName : "div";
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.
var vnode = this.hydrated ? children : h(tag); // Special thanks to Rahul Kadyan for the following lines of code.
// https://github.com/znck

@@ -151,0 +152,0 @@

2

dist/LazyHydrate.esm.min.js

@@ -1,1 +0,1 @@

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;
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.$el?this.$el.tagName:"div",n=this.$scopedSlots.default?this.$scopedSlots.default({hydrated:this.hydrated}):this.$slots.default[0],i=this.hydrated?n:e(t);return isBrowser&&(i.asyncFactory=this.hydrated?{resolved:!0}:{},i.isAsyncPlaceholder=!this.hydrated),i}};export default LazyHydrate;

3

dist/LazyHydrate.js

@@ -151,6 +151,7 @@ (function (global, factory) {

render: function render(h) {
var tag = this.$el ? this.$el.tagName : "div";
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.
var vnode = this.hydrated ? children : h(tag); // Special thanks to Rahul Kadyan for the following lines of code.
// https://github.com/znck

@@ -157,0 +158,0 @@

2

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=!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}}});
!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.$el?this.$el.tagName:"div",i=this.$scopedSlots.default?this.$scopedSlots.default({hydrated:this.hydrated}):this.$slots.default[0],r=this.hydrated?i:e(n);return t&&(r.asyncFactory=this.hydrated?{resolved:!0}:{},r.isAsyncPlaceholder=!this.hydrated),r}}});

12

package.json
{
"name": "vue-lazy-hydration",
"version": "1.0.0-beta.1",
"version": "1.0.0-beta.2",
"description": "Lazy hydration of server-side rendered Vue.js components",

@@ -28,9 +28,9 @@ "keywords": [

"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"eslint": "^5.12.0",
"@babel/preset-env": "^7.3.1",
"eslint": "^5.12.1",
"eslint-plugin-compat": "^2.6.3",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-import": "^2.15.0",
"eslint-plugin-markdown": "^1.0.0",
"rollup": "^1.1.0",
"rollup-plugin-babel": "^4.3.0",
"rollup": "^1.1.2",
"rollup-plugin-babel": "^4.3.2",
"uglify-es": "^3.3.9"

@@ -37,0 +37,0 @@ },

1

README.md

@@ -195,2 +195,3 @@ # vue-lazy-hydration

- [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/)
- [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/)

@@ -197,0 +198,0 @@

3

src/LazyHydrate.js

@@ -139,2 +139,3 @@ const isServer = typeof window === `undefined`;

render(h) {
const tag = this.$el ? this.$el.tagName : `div`;
const children = this.$scopedSlots.default

@@ -145,3 +146,3 @@ ? this.$scopedSlots.default({ hydrated: this.hydrated })

? children
: h(`div`);
: h(tag);

@@ -148,0 +149,0 @@ // Special thanks to Rahul Kadyan for the following lines of code.

yarn.lock

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc