Skip to content

Commit fc76681

Browse files
maoberlehnermaoberlehner
committed
Merge branch 'dev'
2 parents b97a51f + 5d27af8 commit fc76681

File tree

8 files changed

+433
-24
lines changed

8 files changed

+433
-24
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-lazy-hydration",
3-
"version": "2.0.0-beta.3",
4-
"description": "Lazy hydration of server-side rendered Vue.js components",
3+
"version": "2.0.0-beta.4",
4+
"description": "Lazy Hydration of Server-Side Rendered Vue.js Components",
55
"keywords": [
66
"gridsome",
77
"hydration",

‎src/utils/hydration-blocker.js

+1
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export function makeHydrationBlocker(component, options) {
8484
render(h) {
8585
return h(this.Nonce, {
8686
attrs: this.$attrs,
87+
on: this.$listeners,
8788
scopedSlots: this.$scopedSlots,
8889
}, this.$slots.default);
8990
},

‎test/integration/components/DummyInteraction.vue

+8
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,21 @@
88
>
99
Click me
1010
</button>
11+
<button
12+
class="button-some-event"
13+
@click="$emit(`some-event`)"
14+
>
15+
Fire some event
16+
</button>
1117
<br>
1218
<div
1319
v-if="more"
1420
class="more"
1521
>
1622
Just more.
1723
</div>
24+
<slot/>
25+
<slot name="named"/>
1826
</div>
1927
</template>
2028

‎test/integration/components/IntegrationAsync.vue

+224
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
<template>
2+
<div id="app-async">
3+
<LazyHydrate when-idle>
4+
<DummyIdle/>
5+
</LazyHydrate>
6+
<DummyIdleWrapper class="wrapper"/>
7+
<LazyHydrate on-interaction>
8+
<DummyInteraction @some-event="event1Triggered = true">
9+
<div class="default-slot">
10+
<div
11+
v-if="event1Triggered"
12+
class="show-when-event"
13+
/>
14+
</div>
15+
<div
16+
slot="named"
17+
class="named-slot"
18+
/>
19+
</DummyInteraction>
20+
</LazyHydrate>
21+
<DummyInteractionWrapper
22+
class="wrapper"
23+
@some-event="event2Triggered = true"
24+
>
25+
<div class="default-slot">
26+
<div
27+
v-if="event2Triggered"
28+
class="show-when-event"
29+
/>
30+
</div>
31+
<div
32+
slot="named"
33+
class="named-slot"
34+
/>
35+
</DummyInteractionWrapper>
36+
<LazyHydrate never>
37+
<DummySsr/>
38+
</LazyHydrate>
39+
<DummySsrWrapper class="wrapper"/>
40+
<br>
41+
<br>
42+
<br>
43+
<br>
44+
<br>
45+
<br>
46+
<br>
47+
<br>
48+
<br>
49+
<br>
50+
<br>
51+
<br>
52+
<br>
53+
<br>
54+
<br>
55+
<br>
56+
<br>
57+
<br>
58+
<br>
59+
<br>
60+
<br>
61+
<br>
62+
<br>
63+
<br>
64+
<br>
65+
<br>
66+
<br>
67+
<br>
68+
<br>
69+
<br>
70+
<br>
71+
<br>
72+
<br>
73+
<br>
74+
<br>
75+
<br>
76+
<br>
77+
<br>
78+
<br>
79+
<br>
80+
<br>
81+
<br>
82+
<br>
83+
<br>
84+
<br>
85+
<br>
86+
<br>
87+
<br>
88+
<br>
89+
<br>
90+
<br>
91+
<br>
92+
<br>
93+
<br>
94+
<br>
95+
<br>
96+
<br>
97+
<br>
98+
<br>
99+
<br>
100+
<br>
101+
<br>
102+
<br>
103+
<br>
104+
<br>
105+
<br>
106+
<br>
107+
<br>
108+
<br>
109+
<br>
110+
<br>
111+
<br>
112+
<LazyHydrate when-visible>
113+
<DummyVisible/>
114+
</LazyHydrate>
115+
<br>
116+
<br>
117+
<br>
118+
<br>
119+
<br>
120+
<br>
121+
<br>
122+
<br>
123+
<br>
124+
<br>
125+
<br>
126+
<br>
127+
<br>
128+
<br>
129+
<br>
130+
<br>
131+
<br>
132+
<br>
133+
<br>
134+
<br>
135+
<br>
136+
<br>
137+
<br>
138+
<br>
139+
<br>
140+
<br>
141+
<br>
142+
<br>
143+
<br>
144+
<br>
145+
<br>
146+
<br>
147+
<br>
148+
<br>
149+
<br>
150+
<br>
151+
<br>
152+
<br>
153+
<br>
154+
<br>
155+
<br>
156+
<br>
157+
<br>
158+
<br>
159+
<br>
160+
<br>
161+
<br>
162+
<br>
163+
<br>
164+
<br>
165+
<br>
166+
<br>
167+
<br>
168+
<br>
169+
<br>
170+
<br>
171+
<br>
172+
<br>
173+
<br>
174+
<br>
175+
<br>
176+
<br>
177+
<br>
178+
<br>
179+
<br>
180+
<br>
181+
<br>
182+
<br>
183+
<br>
184+
<br>
185+
<br>
186+
<br>
187+
<DummyVisibleWrapper class="wrapper"/>
188+
</div>
189+
</template>
190+
191+
<script>
192+
import LazyHydrate, {
193+
hydrateNever,
194+
hydrateOnInteraction,
195+
hydrateWhenIdle,
196+
hydrateWhenVisible,
197+
} from '../../../src/LazyHydrate';
198+
199+
const DummyIdle = () => import('./DummyIdle.vue');
200+
const DummyInteraction = () => import('./DummyInteraction.vue');
201+
const DummySsr = () => import('./DummySsr.vue');
202+
const DummyVisible = () => import('./DummyVisible.vue');
203+
204+
export default {
205+
name: `Integration`,
206+
components: {
207+
DummyIdle,
208+
DummyIdleWrapper: hydrateWhenIdle(DummyIdle),
209+
DummyInteraction,
210+
DummyInteractionWrapper: hydrateOnInteraction(DummyInteraction),
211+
DummySsr,
212+
DummySsrWrapper: hydrateNever(DummySsr),
213+
DummyVisible,
214+
DummyVisibleWrapper: hydrateWhenVisible(DummyVisible),
215+
LazyHydrate,
216+
},
217+
data() {
218+
return {
219+
event1Triggered: false,
220+
event2Triggered: false,
221+
};
222+
},
223+
};
224+
</script>

‎test/integration/components/Integration.vue renamed to ‎test/integration/components/IntegrationSync.vue

+106-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,38 @@
11
<template>
2-
<div id="app">
2+
<div id="app-sync">
33
<LazyHydrate when-idle>
44
<DummyIdle/>
55
</LazyHydrate>
66
<DummyIdleWrapper class="wrapper"/>
77
<LazyHydrate on-interaction>
8-
<DummyInteraction/>
8+
<DummyInteraction @some-event="event1Triggered = true">
9+
<div class="default-slot">
10+
<div
11+
v-if="event1Triggered"
12+
class="show-when-event"
13+
/>
14+
</div>
15+
<div
16+
slot="named"
17+
class="named-slot"
18+
/>
19+
</DummyInteraction>
920
</LazyHydrate>
10-
<DummyInteractionWrapper class="wrapper"/>
21+
<DummyInteractionWrapper
22+
class="wrapper"
23+
@some-event="event2Triggered = true"
24+
>
25+
<div class="default-slot">
26+
<div
27+
v-if="event2Triggered"
28+
class="show-when-event"
29+
/>
30+
</div>
31+
<div
32+
slot="named"
33+
class="named-slot"
34+
/>
35+
</DummyInteractionWrapper>
1136
<LazyHydrate never>
1237
<DummySsr/>
1338
</LazyHydrate>
@@ -87,6 +112,78 @@
87112
<LazyHydrate when-visible>
88113
<DummyVisible/>
89114
</LazyHydrate>
115+
<br>
116+
<br>
117+
<br>
118+
<br>
119+
<br>
120+
<br>
121+
<br>
122+
<br>
123+
<br>
124+
<br>
125+
<br>
126+
<br>
127+
<br>
128+
<br>
129+
<br>
130+
<br>
131+
<br>
132+
<br>
133+
<br>
134+
<br>
135+
<br>
136+
<br>
137+
<br>
138+
<br>
139+
<br>
140+
<br>
141+
<br>
142+
<br>
143+
<br>
144+
<br>
145+
<br>
146+
<br>
147+
<br>
148+
<br>
149+
<br>
150+
<br>
151+
<br>
152+
<br>
153+
<br>
154+
<br>
155+
<br>
156+
<br>
157+
<br>
158+
<br>
159+
<br>
160+
<br>
161+
<br>
162+
<br>
163+
<br>
164+
<br>
165+
<br>
166+
<br>
167+
<br>
168+
<br>
169+
<br>
170+
<br>
171+
<br>
172+
<br>
173+
<br>
174+
<br>
175+
<br>
176+
<br>
177+
<br>
178+
<br>
179+
<br>
180+
<br>
181+
<br>
182+
<br>
183+
<br>
184+
<br>
185+
<br>
186+
<br>
90187
<DummyVisibleWrapper class="wrapper"/>
91188
</div>
92189
</template>
@@ -117,5 +214,11 @@ export default {
117214
DummyVisibleWrapper: hydrateWhenVisible(DummyVisible),
118215
LazyHydrate,
119216
},
217+
data() {
218+
return {
219+
event1Triggered: false,
220+
event2Triggered: false,
221+
};
222+
},
120223
};
121224
</script>

0 commit comments

Comments
 (0)