vue-lazy-hydration - npm Package Compare versions

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

dist/LazyHydrate.esm.js

@@ -33,27 +33,9 @@ var observers = new Map();
 var isServer = typeof window === "undefined";
-
-function isAsyncComponentFactory(componentOrFactory) {
-  return typeof componentOrFactory === "function";
-}
-
-function resolveComponent(componentOrFactory) {
-  if (isAsyncComponentFactory(componentOrFactory)) {
-    return componentOrFactory().then(function (componentModule) {
-      return componentModule.default;
-    });
-  }
-
-  return componentOrFactory;
-}
-
 function makeNonce(_ref) {
   var component = _ref.component,
-      hydrate = _ref.hydrate,
       hydrationPromise = _ref.hydrationPromise;
+  if (isServer) return component;
   return function () {
-    return new Promise(function (resolve) {
-      if (isServer) hydrate();
-      hydrationPromise.then(function () {
-        return resolve(resolveComponent(component));
-      });
+    return hydrationPromise.then(function () {
+      return component;
     });
@@ -75,3 +57,2 @@ };
           component: component,
-          hydrate: hydrate,
           hydrationPromise: hydrationPromise
@@ -98,3 +79,3 @@ });
           var observerOptions = this.whenVisible !== true ? this.whenVisible : undefined;
-          var observer = makeHydrationObserver(observerOptions);
+          var observer = makeHydrationObserver(observerOptions); // If Intersection Observer API is not supported, hydrate immediately.
 
@@ -167,3 +148,4 @@ if (!observer) {
         return h(this.Nonce, {
-          props: this.$attrs
+          attrs: this.$attrs,
+          scopedSlots: this.$scopedSlots
         }, this.$slots.default);
@@ -170,0 +152,0 @@ }

dist/LazyHydrate.esm.min.js

@@ -1,1 +0,1 @@
-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};
+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 makeNonce(e){var t=e.component,n=e.hydrationPromise;return isServer?t:function(){return n.then(function(){return 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,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,{attrs:this.$attrs,scopedSlots:this.$scopedSlots},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

@@ -39,27 +39,9 @@ (function (global, factory) {
   var isServer = typeof window === "undefined";
-
-  function isAsyncComponentFactory(componentOrFactory) {
-    return typeof componentOrFactory === "function";
-  }
-
-  function resolveComponent(componentOrFactory) {
-    if (isAsyncComponentFactory(componentOrFactory)) {
-      return componentOrFactory().then(function (componentModule) {
-        return componentModule.default;
-      });
-    }
-
-    return componentOrFactory;
-  }
-
   function makeNonce(_ref) {
     var component = _ref.component,
-        hydrate = _ref.hydrate,
         hydrationPromise = _ref.hydrationPromise;
+    if (isServer) return component;
     return function () {
-      return new Promise(function (resolve) {
-        if (isServer) hydrate();
-        hydrationPromise.then(function () {
-          return resolve(resolveComponent(component));
-        });
+      return hydrationPromise.then(function () {
+        return component;
       });
@@ -81,3 +63,2 @@ };
             component: component,
-            hydrate: hydrate,
             hydrationPromise: hydrationPromise
@@ -104,3 +85,3 @@ });
             var observerOptions = this.whenVisible !== true ? this.whenVisible : undefined;
-            var observer = makeHydrationObserver(observerOptions);
+            var observer = makeHydrationObserver(observerOptions); // If Intersection Observer API is not supported, hydrate immediately.
 
@@ -173,3 +154,4 @@ if (!observer) {
           return h(this.Nonce, {
-            props: this.$attrs
+            attrs: this.$attrs,
+            scopedSlots: this.$scopedSlots
           }, this.$slots.default);
@@ -176,0 +158,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";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})});
+!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.hydrationPromise;return n?t:function(){return i.then(function(){return t})}}({component:e,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 s={capture:!0,once:!0,passive:!0};this.interactionEvents.forEach(function(t){e.$el.addEventListener(t,e.hydrate,s);e.cleanupHandlers.push(function(){e.$el.removeEventListener(t,e.hydrate,s)})})}}}else this.hydrate()},methods:{cleanup:function(){this.cleanupHandlers.forEach(function(e){return e()})}},render:function(e){return e(this.Nonce,{attrs:this.$attrs,scopedSlots:this.$scopedSlots},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.1",
+  "version": "2.0.0-beta.2",
   "description": "Lazy hydration of server-side rendered Vue.js components",
   "keywords": [
+    "gridsome",
     "hydration",
@@ -37,19 +38,19 @@ "nuxt",
     "@avalanche/eslint-config": "^4.0.0",
-    "@babel/core": "^7.11.6",
-    "@babel/preset-env": "^7.11.5",
-    "@vue/cli-service": "^4.5.6",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
+    "@vue/cli-service": "^4.5.9",
     "babel-eslint": "^10.1.0",
     "cli-table3": "^0.6.0",
     "concurrently": "^5.3.0",
-    "eslint": "^7.10.0",
+    "eslint": "^7.13.0",
     "eslint-plugin-compat": "^3.8.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-markdown": "^1.0.2",
-    "eslint-plugin-vue": "^7.0.0",
-    "jest": "^26.4.2",
+    "eslint-plugin-vue": "^7.1.0",
+    "jest": "^26.6.3",
     "jest-puppeteer": "^4.4.0",
     "lighthouse": "^6.4.1",
-    "marked": "^1.2.0",
-    "puppeteer": "^5.3.1",
-    "rollup": "^2.28.2",
+    "marked": "^1.2.4",
+    "puppeteer": "^5.5.0",
+    "rollup": "^2.33.3",
     "rollup-plugin-babel": "^4.4.0",
@@ -56,0 +57,0 @@ "serve": "^11.3.2",

src/utils/hydration-blocker.js

@@ -11,3 +11,3 @@ import { makeHydrationObserver } from './hydration-observer';
         const { hydrate, hydrationPromise } = makeHydrationPromise();
-        this.Nonce = makeNonce({ component, hydrate, hydrationPromise });
+        this.Nonce = makeNonce({ component, hydrationPromise });
         this.hydrate = hydrate;
@@ -32,2 +32,3 @@ this.hydrationPromise = hydrationPromise;
 
+          // If Intersection Observer API is not supported, hydrate immediately.
           if (!observer) {
@@ -86,3 +87,6 @@ this.hydrate();
       render(h) {
-        return h(this.Nonce, { props: this.$attrs }, this.$slots.default);
+        return h(this.Nonce, {
+          attrs: this.$attrs,
+          scopedSlots: this.$scopedSlots,
+        }, this.$slots.default);
       },
@@ -89,0 +93,0 @@ }],

src/utils/nonce.js

 const isServer = typeof window === `undefined`;
 
-function isAsyncComponentFactory(componentOrFactory) {
-  return typeof componentOrFactory === `function`;
-}
+export function makeNonce({ component, hydrationPromise }) {
+  if (isServer) return component;
 
-function resolveComponent(componentOrFactory) {
-  if (isAsyncComponentFactory(componentOrFactory)) {
-    return componentOrFactory().then(componentModule => componentModule.default);
-  }
-  return componentOrFactory;
+  return () => hydrationPromise.then(() => component);
 }
-
-export function makeNonce({ component, hydrate, hydrationPromise }) {
-  return () => new Promise((resolve) => {
-    if (isServer) hydrate();
-
-    hydrationPromise.then(() => resolve(resolveComponent(component)));
-  });
-}

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

Worsened metrics

Total package byte prevSize

42024

decreased by-3.13%

Lines of code

633

decreased by-5.24%

No dependency changes