Skip to content

Commit 562f032

Browse files
maoberlehnermaoberlehner
committed
Merge branch 'dev'
2 parents 2dbc334 + 372e6d7 commit 562f032

File tree

6 files changed

+1241
-1153
lines changed

6 files changed

+1241
-1153
lines changed

‎package.json

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
22
"name": "vue-lazy-hydration",
3-
"version": "2.0.0-beta.1",
3+
"version": "2.0.0-beta.2",
44
"description": "Lazy hydration of server-side rendered Vue.js components",
55
"keywords": [
6+
"gridsome",
67
"hydration",
78
"nuxt",
89
"ssr",
@@ -34,23 +35,23 @@
3435
},
3536
"devDependencies": {
3637
"@avalanche/eslint-config": "^4.0.0",
37-
"@babel/core": "^7.11.6",
38-
"@babel/preset-env": "^7.11.5",
39-
"@vue/cli-service": "^4.5.6",
38+
"@babel/core": "^7.12.3",
39+
"@babel/preset-env": "^7.12.1",
40+
"@vue/cli-service": "^4.5.9",
4041
"babel-eslint": "^10.1.0",
4142
"cli-table3": "^0.6.0",
4243
"concurrently": "^5.3.0",
43-
"eslint": "^7.10.0",
44+
"eslint": "^7.13.0",
4445
"eslint-plugin-compat": "^3.8.0",
4546
"eslint-plugin-import": "^2.22.1",
4647
"eslint-plugin-markdown": "^1.0.2",
47-
"eslint-plugin-vue": "^7.0.0",
48-
"jest": "^26.4.2",
48+
"eslint-plugin-vue": "^7.1.0",
49+
"jest": "^26.6.3",
4950
"jest-puppeteer": "^4.4.0",
5051
"lighthouse": "^6.4.1",
51-
"marked": "^1.2.0",
52-
"puppeteer": "^5.3.1",
53-
"rollup": "^2.28.2",
52+
"marked": "^1.2.4",
53+
"puppeteer": "^5.5.0",
54+
"rollup": "^2.33.3",
5455
"rollup-plugin-babel": "^4.4.0",
5556
"serve": "^11.3.2",
5657
"uglify-es": "^3.3.9",

‎src/utils/hydration-blocker.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function makeHydrationBlocker(component, options) {
88
beforeCreate() {
99
this.cleanupHandlers = [];
1010
const { hydrate, hydrationPromise } = makeHydrationPromise();
11-
this.Nonce = makeNonce({ component, hydrate, hydrationPromise });
11+
this.Nonce = makeNonce({ component, hydrationPromise });
1212
this.hydrate = hydrate;
1313
this.hydrationPromise = hydrationPromise;
1414
},
@@ -28,6 +28,7 @@ export function makeHydrationBlocker(component, options) {
2828
const observerOptions = this.whenVisible !== true ? this.whenVisible : undefined;
2929
const observer = makeHydrationObserver(observerOptions);
3030

31+
// If Intersection Observer API is not supported, hydrate immediately.
3132
if (!observer) {
3233
this.hydrate();
3334
return;
@@ -81,7 +82,10 @@ export function makeHydrationBlocker(component, options) {
8182
},
8283
},
8384
render(h) {
84-
return h(this.Nonce, { props: this.$attrs }, this.$slots.default);
85+
return h(this.Nonce, {
86+
attrs: this.$attrs,
87+
scopedSlots: this.$scopedSlots,
88+
}, this.$slots.default);
8589
},
8690
}],
8791
}, options);

‎src/utils/nonce.js

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,7 @@
11
const isServer = typeof window === `undefined`;
22

3-
function isAsyncComponentFactory(componentOrFactory) {
4-
return typeof componentOrFactory === `function`;
5-
}
6-
7-
function resolveComponent(componentOrFactory) {
8-
if (isAsyncComponentFactory(componentOrFactory)) {
9-
return componentOrFactory().then(componentModule => componentModule.default);
10-
}
11-
return componentOrFactory;
12-
}
13-
14-
export function makeNonce({ component, hydrate, hydrationPromise }) {
15-
return () => new Promise((resolve) => {
16-
if (isServer) hydrate();
3+
export function makeNonce({ component, hydrationPromise }) {
4+
if (isServer) return component;
175

18-
hydrationPromise.then(() => resolve(resolveComponent(component)));
19-
});
6+
return () => hydrationPromise.then(() => component);
207
}

‎test/integration/components/Integration.vue

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@
33
<LazyHydrate when-idle>
44
<DummyIdle/>
55
</LazyHydrate>
6+
<DummyIdleWrapper class="wrapper"/>
67
<LazyHydrate on-interaction>
78
<DummyInteraction/>
89
</LazyHydrate>
10+
<DummyInteractionWrapper class="wrapper"/>
911
<LazyHydrate never>
1012
<DummySsr/>
1113
</LazyHydrate>
14+
<DummySsrWrapper class="wrapper"/>
1215
<br>
1316
<br>
1417
<br>
@@ -84,6 +87,7 @@
8487
<LazyHydrate when-visible>
8588
<DummyVisible/>
8689
</LazyHydrate>
90+
<DummyVisibleWrapper class="wrapper"/>
8791
</div>
8892
</template>
8993

@@ -93,15 +97,24 @@ import DummyInteraction from './DummyInteraction.vue';
9397
import DummySsr from './DummySsr.vue';
9498
import DummyVisible from './DummyVisible.vue';
9599
96-
import LazyHydrate from '../../../src/LazyHydrate';
100+
import LazyHydrate, {
101+
hydrateNever,
102+
hydrateOnInteraction,
103+
hydrateWhenIdle,
104+
hydrateWhenVisible,
105+
} from '../../../src/LazyHydrate';
97106
98107
export default {
99108
name: `Integration`,
100109
components: {
101110
DummyIdle,
111+
DummyIdleWrapper: hydrateWhenIdle(DummyIdle),
102112
DummyInteraction,
113+
DummyInteractionWrapper: hydrateOnInteraction(DummyInteraction),
103114
DummySsr,
115+
DummySsrWrapper: hydrateNever(DummySsr),
104116
DummyVisible,
117+
DummyVisibleWrapper: hydrateWhenVisible(DummyVisible),
105118
LazyHydrate,
106119
},
107120
};

‎test/integration/integration.test.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,18 @@ describe(`integration`, () => {
2222
});
2323
});
2424

25+
describe(`hydrateWhenIdle()`, () => {
26+
test(`It should hydrate the component when the browser is idle.`, async () => {
27+
await open(`/integration.html`, {});
28+
29+
let moreText = await page.$(`.DummyIdle.wrapper .more`);
30+
expect(moreText).toBe(null);
31+
32+
moreText = await find(`.DummyIdle.wrapper .more`);
33+
expect(moreText).not.toBe(null);
34+
});
35+
});
36+
2537
describe(`<LazyHydrate when-visible>`, () => {
2638
test(`It should hydrate the component when it becomes visible.`, async () => {
2739
await open(`/integration.html`);
@@ -38,6 +50,22 @@ describe(`integration`, () => {
3850
});
3951
});
4052

53+
describe(`hydrateWhenVisible()`, () => {
54+
test(`It should hydrate the component when it becomes visible.`, async () => {
55+
await open(`/integration.html`);
56+
57+
let moreText = await page.$(`.DummyVisible.wrapper .more`);
58+
expect(moreText).toBe(null);
59+
60+
await page.evaluate(() => {
61+
document.querySelector(`.DummyVisible.wrapper`).scrollIntoView();
62+
});
63+
64+
moreText = await find(`.DummyVisible.wrapper .more`);
65+
expect(moreText).not.toBe(null);
66+
});
67+
});
68+
4169
describe(`<LazyHydrate on-interaction>`, () => {
4270
test(`It should hydrate the component when an interaction happens.`, async () => {
4371
await open(`/integration.html`);
@@ -55,6 +83,23 @@ describe(`integration`, () => {
5583
});
5684
});
5785

86+
describe(`hydrateOnInteraction()`, () => {
87+
test(`It should hydrate the component when an interaction happens.`, async () => {
88+
await open(`/integration.html`);
89+
90+
let moreText = await page.$(`.DummyInteraction.wrapper .more`);
91+
expect(moreText).toBe(null);
92+
93+
let button = await find(`.DummyInteraction.wrapper button`);
94+
await button.click();
95+
button = await find(`.DummyInteraction.wrapper button`);
96+
await button.click();
97+
98+
moreText = await find(`.DummyInteraction.wrapper .more`);
99+
expect(moreText).not.toBe(null);
100+
});
101+
});
102+
58103
describe(`<LazyHydrate never>`, () => {
59104
test(`It should not hydrate the component.`, async () => {
60105
await open(`/integration.html`);
@@ -66,4 +111,16 @@ describe(`integration`, () => {
66111
expect(moreText).toBe(null);
67112
});
68113
});
114+
115+
describe(`hydrateNever()`, () => {
116+
test(`It should not hydrate the component.`, async () => {
117+
await open(`/integration.html`);
118+
119+
const component = await find(`.DummySsr.wrapper`);
120+
expect(component).not.toBe(null);
121+
122+
const moreText = await page.$(`.DummySsr.wrapper .more`);
123+
expect(moreText).toBe(null);
124+
});
125+
});
69126
});

0 commit comments

Comments
 (0)