Merge branch 'dev'

Author: maoberlehner

package.json

@@ -1,8 +1,9 @@
 {
   "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",
     "nuxt",
     "ssr",
@@ -34,23 +35,23 @@
   },
   "devDependencies": {
     "@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",
     "serve": "^11.3.2",
     "uglify-es": "^3.3.9",

src/utils/hydration-blocker.js

@@ -8,7 +8,7 @@ export function makeHydrationBlocker(component, options) {
       beforeCreate() {
         this.cleanupHandlers = [];
         const { hydrate, hydrationPromise } = makeHydrationPromise();
-        this.Nonce = makeNonce({ component, hydrate, hydrationPromise });
+        this.Nonce = makeNonce({ component, hydrationPromise });
         this.hydrate = hydrate;
         this.hydrationPromise = hydrationPromise;
       },
@@ -28,6 +28,7 @@ export function makeHydrationBlocker(component, options) {
           const observerOptions = this.whenVisible !== true ? this.whenVisible : undefined;
           const observer = makeHydrationObserver(observerOptions);
 
+          // If Intersection Observer API is not supported, hydrate immediately.
           if (!observer) {
             this.hydrate();
             return;
@@ -81,7 +82,10 @@ export function makeHydrationBlocker(component, options) {
         },
       },
       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);
       },
     }],
   }, options);

src/utils/nonce.js

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

test/integration/components/Integration.vue

@@ -3,12 +3,15 @@
     <LazyHydrate when-idle>
       <DummyIdle/>
     </LazyHydrate>
+    <DummyIdleWrapper class="wrapper"/>
     <LazyHydrate on-interaction>
       <DummyInteraction/>
     </LazyHydrate>
+    <DummyInteractionWrapper class="wrapper"/>
     <LazyHydrate never>
       <DummySsr/>
     </LazyHydrate>
+    <DummySsrWrapper class="wrapper"/>
     <br>
     <br>
     <br>
@@ -84,6 +87,7 @@
     <LazyHydrate when-visible>
       <DummyVisible/>
     </LazyHydrate>
+    <DummyVisibleWrapper class="wrapper"/>
   </div>
 </template>
 
@@ -93,15 +97,24 @@ import DummyInteraction from './DummyInteraction.vue';
 import DummySsr from './DummySsr.vue';
 import DummyVisible from './DummyVisible.vue';
 
-import LazyHydrate from '../../../src/LazyHydrate';
+import LazyHydrate, {
+  hydrateNever,
+  hydrateOnInteraction,
+  hydrateWhenIdle,
+  hydrateWhenVisible,
+} from '../../../src/LazyHydrate';
 
 export default {
   name: `Integration`,
   components: {
     DummyIdle,
+    DummyIdleWrapper: hydrateWhenIdle(DummyIdle),
     DummyInteraction,
+    DummyInteractionWrapper: hydrateOnInteraction(DummyInteraction),
     DummySsr,
+    DummySsrWrapper: hydrateNever(DummySsr),
     DummyVisible,
+    DummyVisibleWrapper: hydrateWhenVisible(DummyVisible),
     LazyHydrate,
   },
 };

test/integration/integration.test.js

@@ -22,6 +22,18 @@ describe(`integration`, () => {
     });
   });
 
+  describe(`hydrateWhenIdle()`, () => {
+    test(`It should hydrate the component when the browser is idle.`, async () => {
+      await open(`/integration.html`, {});
+
+      let moreText = await page.$(`.DummyIdle.wrapper .more`);
+      expect(moreText).toBe(null);
+
+      moreText = await find(`.DummyIdle.wrapper .more`);
+      expect(moreText).not.toBe(null);
+    });
+  });
+
   describe(`<LazyHydrate when-visible>`, () => {
     test(`It should hydrate the component when it becomes visible.`, async () => {
       await open(`/integration.html`);
@@ -38,6 +50,22 @@ describe(`integration`, () => {
     });
   });
 
+  describe(`hydrateWhenVisible()`, () => {
+    test(`It should hydrate the component when it becomes visible.`, async () => {
+      await open(`/integration.html`);
+
+      let moreText = await page.$(`.DummyVisible.wrapper .more`);
+      expect(moreText).toBe(null);
+
+      await page.evaluate(() => {
+        document.querySelector(`.DummyVisible.wrapper`).scrollIntoView();
+      });
+
+      moreText = await find(`.DummyVisible.wrapper .more`);
+      expect(moreText).not.toBe(null);
+    });
+  });
+
   describe(`<LazyHydrate on-interaction>`, () => {
     test(`It should hydrate the component when an interaction happens.`, async () => {
       await open(`/integration.html`);
@@ -55,6 +83,23 @@ describe(`integration`, () => {
     });
   });
 
+  describe(`hydrateOnInteraction()`, () => {
+    test(`It should hydrate the component when an interaction happens.`, async () => {
+      await open(`/integration.html`);
+
+      let moreText = await page.$(`.DummyInteraction.wrapper .more`);
+      expect(moreText).toBe(null);
+
+      let button = await find(`.DummyInteraction.wrapper button`);
+      await button.click();
+      button = await find(`.DummyInteraction.wrapper button`);
+      await button.click();
+
+      moreText = await find(`.DummyInteraction.wrapper .more`);
+      expect(moreText).not.toBe(null);
+    });
+  });
+
   describe(`<LazyHydrate never>`, () => {
     test(`It should not hydrate the component.`, async () => {
       await open(`/integration.html`);
@@ -66,4 +111,16 @@ describe(`integration`, () => {
       expect(moreText).toBe(null);
     });
   });
+
+  describe(`hydrateNever()`, () => {
+    test(`It should not hydrate the component.`, async () => {
+      await open(`/integration.html`);
+
+      const component = await find(`.DummySsr.wrapper`);
+      expect(component).not.toBe(null);
+
+      const moreText = await page.$(`.DummySsr.wrapper .more`);
+      expect(moreText).toBe(null);
+    });
+  });
 });