Skip to content
This repository was archived by the owner on Dec 30, 2022. It is now read-only.

Commit 43aed4f

Browse files
author
Eunjae Lee
authored
fix(vue 3): pass renderToString to findResultsState instead of createServerRootMixin (#1044)
* fix(vue 3): pass renderToString to findResultsState instead of createServerRootMixin * fix: change findResultsState to accept an object as props
1 parent 58675f0 commit 43aed4f

File tree

2 files changed

+80
-60
lines changed

2 files changed

+80
-60
lines changed

‎src/util/__tests__/createServerRootMixin.test.js‎

Lines changed: 64 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ describe('createServerRootMixin', () => {
5252
createSSRApp({
5353
mixins: [
5454
createServerRootMixin({
55-
renderToString,
5655
searchClient: undefined,
5756
indexName: 'lol',
5857
}),
@@ -68,7 +67,6 @@ describe('createServerRootMixin', () => {
6867
createSSRApp({
6968
mixins: [
7069
createServerRootMixin({
71-
renderToString,
7270
searchClient: createFakeClient(),
7371
indexName: undefined,
7472
}),
@@ -79,26 +77,10 @@ describe('createServerRootMixin', () => {
7977
);
8078
});
8179

82-
it('requires renderToString', () => {
83-
expect(() =>
84-
createSSRApp({
85-
mixins: [
86-
createServerRootMixin({
87-
searchClient: createFakeClient(),
88-
indexName: 'yup',
89-
}),
90-
],
91-
})
92-
).toThrowErrorMatchingInlineSnapshot(
93-
`"createServerRootMixin requires \`renderToString: (app) => Promise<string>\` in the first argument"`
94-
);
95-
});
96-
9780
it('creates an instantsearch instance on "data"', () => {
9881
const App = {
9982
mixins: [
10083
createServerRootMixin({
101-
renderToString,
10284
searchClient: createFakeClient(),
10385
indexName: 'lol',
10486
}),
@@ -118,7 +100,6 @@ describe('createServerRootMixin', () => {
118100
const App = {
119101
mixins: [
120102
createServerRootMixin({
121-
renderToString,
122103
searchClient: createFakeClient(),
123104
indexName: 'myIndexName',
124105
}),
@@ -164,7 +145,6 @@ describe('createServerRootMixin', () => {
164145
mixins: [
165146
forceIsServerMixin,
166147
createServerRootMixin({
167-
renderToString,
168148
searchClient: createFakeClient(),
169149
indexName: 'hello',
170150
}),
@@ -179,6 +159,44 @@ describe('createServerRootMixin', () => {
179159
await renderToString(app);
180160
});
181161

162+
it('requires renderToString', async () => {
163+
const searchClient = createFakeClient();
164+
165+
const app = {
166+
mixins: [
167+
forceIsServerMixin,
168+
createServerRootMixin({
169+
searchClient,
170+
indexName: 'hello',
171+
}),
172+
],
173+
render: renderCompat(h =>
174+
h(InstantSearchSsr, {}, [
175+
h(Configure, {
176+
attrs: {
177+
hitsPerPage: 100,
178+
},
179+
}),
180+
h(SearchBox),
181+
])
182+
),
183+
serverPrefetch() {
184+
expect(() =>
185+
this.instantsearch.findResultsState({ component: this })
186+
).toThrowErrorMatchingInlineSnapshot(
187+
`"findResultsState requires \`renderToString: (component) => Promise<string>\` in the first argument."`
188+
);
189+
},
190+
};
191+
192+
const wrapper = createSSRApp({
193+
mixins: [forceIsServerMixin],
194+
render: renderCompat(h => h(app)),
195+
});
196+
197+
await renderToString(wrapper);
198+
});
199+
182200
it('detects child widgets', async () => {
183201
const searchClient = createFakeClient();
184202
let mainIndex;
@@ -187,7 +205,6 @@ describe('createServerRootMixin', () => {
187205
mixins: [
188206
forceIsServerMixin,
189207
createServerRootMixin({
190-
renderToString,
191208
searchClient,
192209
indexName: 'hello',
193210
}),
@@ -214,7 +231,10 @@ describe('createServerRootMixin', () => {
214231
])
215232
),
216233
serverPrefetch() {
217-
return this.instantsearch.findResultsState(this);
234+
return this.instantsearch.findResultsState({
235+
component: this,
236+
renderToString,
237+
});
218238
},
219239
created() {
220240
mainIndex = this.instantsearch.mainIndex;
@@ -261,7 +281,6 @@ Array [
261281
mixins: [
262282
forceIsServerMixin,
263283
createServerRootMixin({
264-
renderToString,
265284
searchClient,
266285
indexName: 'hello',
267286
}),
@@ -277,7 +296,10 @@ Array [
277296
])
278297
),
279298
async serverPrefetch() {
280-
const state = await this.instantsearch.findResultsState(this);
299+
const state = await this.instantsearch.findResultsState({
300+
component: this,
301+
renderToString,
302+
});
281303
expect(state).toEqual({
282304
__identifier: 'stringified',
283305
hello: {
@@ -339,7 +361,6 @@ Array [
339361
mixins: [
340362
forceIsServerMixin,
341363
createServerRootMixin({
342-
renderToString,
343364
searchClient,
344365
indexName: 'hello',
345366
}),
@@ -359,7 +380,10 @@ Array [
359380
])
360381
),
361382
serverPrefetch() {
362-
return this.instantsearch.findResultsState(this);
383+
return this.instantsearch.findResultsState({
384+
component: this,
385+
renderToString,
386+
});
363387
},
364388
};
365389

@@ -390,7 +414,6 @@ Array [
390414
mixins: [
391415
forceIsServerMixin,
392416
createServerRootMixin({
393-
renderToString,
394417
searchClient,
395418
indexName: 'hello',
396419
}),
@@ -410,7 +433,10 @@ Array [
410433
])
411434
),
412435
serverPrefetch() {
413-
return this.instantsearch.findResultsState(this);
436+
return this.instantsearch.findResultsState({
437+
component: this,
438+
renderToString,
439+
});
414440
},
415441
};
416442

@@ -440,7 +466,6 @@ Array [
440466
mixins: [
441467
forceIsServerMixin,
442468
createServerRootMixin({
443-
renderToString,
444469
searchClient,
445470
indexName: 'hello',
446471
}),
@@ -466,7 +491,10 @@ Array [
466491
])
467492
),
468493
serverPrefetch() {
469-
return this.instantsearch.findResultsState(this);
494+
return this.instantsearch.findResultsState({
495+
component: this,
496+
renderToString,
497+
});
470498
},
471499
};
472500

@@ -487,7 +515,6 @@ Array [
487515
mixins: [
488516
forceIsServerMixin,
489517
createServerRootMixin({
490-
renderToString,
491518
searchClient,
492519
indexName: 'hello',
493520
}),
@@ -501,7 +528,7 @@ Array [
501528
serverPrefetch() {
502529
return (
503530
this.instantsearch
504-
.findResultsState(this)
531+
.findResultsState({ component: this, renderToString })
505532
.then(res => {
506533
expect(
507534
this.instantsearch.mainIndex.getWidgets().map(w => w.$$type)
@@ -541,7 +568,6 @@ Array [
541568
mixins: [
542569
forceIsServerMixin,
543570
createServerRootMixin({
544-
renderToString,
545571
searchClient,
546572
indexName: 'hello',
547573
}),
@@ -552,7 +578,7 @@ Array [
552578
serverPrefetch() {
553579
return (
554580
this.instantsearch
555-
.findResultsState(this)
581+
.findResultsState({ component: this, renderToString })
556582
.then(res => {
557583
expect(
558584
this.instantsearch.mainIndex.getWidgets().map(w => w.$$type)
@@ -600,7 +626,6 @@ Array [
600626
mixins: [
601627
forceIsServerMixin,
602628
createServerRootMixin({
603-
renderToString,
604629
searchClient,
605630
indexName: 'hello',
606631
}),
@@ -617,7 +642,10 @@ Array [
617642
]);
618643
}),
619644
serverPrefetch() {
620-
return this.instantsearch.findResultsState(this);
645+
return this.instantsearch.findResultsState({
646+
component: this,
647+
renderToString,
648+
});
621649
},
622650
};
623651

@@ -638,7 +666,6 @@ Array [
638666
const app = {
639667
mixins: [
640668
createServerRootMixin({
641-
renderToString,
642669
searchClient: createFakeClient(),
643670
indexName: 'hello',
644671
}),
@@ -685,7 +712,6 @@ Array [
685712
const app = {
686713
mixins: [
687714
createServerRootMixin({
688-
renderToString,
689715
searchClient: createFakeClient(),
690716
indexName: 'movies',
691717
}),
@@ -724,7 +750,6 @@ Array [
724750
const app = {
725751
mixins: [
726752
createServerRootMixin({
727-
renderToString,
728753
searchClient: createFakeClient(),
729754
indexName: 'hello',
730755
}),
@@ -763,7 +788,6 @@ Array [
763788
const app = {
764789
mixins: [
765790
createServerRootMixin({
766-
renderToString,
767791
searchClient: createFakeClient(),
768792
indexName: 'hello',
769793
}),
@@ -803,7 +827,6 @@ Array [
803827
mount({
804828
mixins: [
805829
createServerRootMixin({
806-
renderToString,
807830
searchClient: createFakeClient(),
808831
indexName: 'lol',
809832
}),
@@ -875,7 +898,6 @@ Object {
875898
mount({
876899
mixins: [
877900
createServerRootMixin({
878-
renderToString,
879901
searchClient: createFakeClient(),
880902
indexName: 'lol',
881903
}),
@@ -909,7 +931,6 @@ Object {
909931
mount({
910932
mixins: [
911933
createServerRootMixin({
912-
renderToString,
913934
searchClient: createFakeClient(),
914935
indexName: 'lol',
915936
}),

‎src/util/createServerRootMixin.js‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,7 @@ function augmentInstantSearch(
8080
instantSearchOptions,
8181
searchClient,
8282
indexName,
83-
cloneComponent,
84-
renderToString
83+
cloneComponent
8584
) {
8685
/* eslint-disable no-param-reassign */
8786

@@ -92,21 +91,29 @@ function augmentInstantSearch(
9291

9392
/**
9493
* main API for SSR, called in serverPrefetch of a root component which contains instantsearch
95-
* @param {object} componentInstance the calling component's `this`
94+
* @param {Object} props the object including `component` and `renderToString`
95+
* @param {Object} props.component the calling component's `this`
96+
* @param {Function} props.renderToString the function to render componentInstance to string
9697
* @returns {Promise} result of the search, to save for .hydrate
9798
*/
98-
search.findResultsState = function(componentInstance) {
99+
search.findResultsState = function({ component, renderToString }) {
100+
if (!renderToString) {
101+
throw new Error(
102+
'findResultsState requires `renderToString: (component) => Promise<string>` in the first argument.'
103+
);
104+
}
105+
99106
let app;
100-
let renderedComponentInstance;
107+
let renderedComponent;
101108

102109
return Promise.resolve()
103110
.then(() => {
104-
app = cloneComponent(componentInstance, {
111+
app = cloneComponent(component, {
105112
mixins: [
106113
{
107114
created() {
108115
// eslint-disable-next-line consistent-this
109-
renderedComponentInstance = this;
116+
renderedComponent = this;
110117
this.instantsearch.helper = helper;
111118
this.instantsearch.mainHelper = helper;
112119

@@ -124,7 +131,7 @@ function augmentInstantSearch(
124131
.then(() => searchOnlyWithDerivedHelpers(helper))
125132
.then(() => {
126133
const results = {};
127-
walkIndex(renderedComponentInstance.instantsearch.mainIndex, widget => {
134+
walkIndex(renderedComponent.instantsearch.mainIndex, widget => {
128135
results[widget.getIndexId()] = widget.getResults();
129136
});
130137

@@ -258,7 +265,6 @@ export function createServerRootMixin(instantSearchOptions = {}) {
258265
const {
259266
searchClient,
260267
indexName,
261-
renderToString,
262268
$cloneComponent = defaultCloneComponent,
263269
} = instantSearchOptions;
264270

@@ -268,18 +274,11 @@ export function createServerRootMixin(instantSearchOptions = {}) {
268274
);
269275
}
270276

271-
if (!renderToString) {
272-
throw new Error(
273-
'createServerRootMixin requires `renderToString: (app) => Promise<string>` in the first argument'
274-
);
275-
}
276-
277277
const search = augmentInstantSearch(
278278
instantSearchOptions,
279279
searchClient,
280280
indexName,
281-
$cloneComponent,
282-
renderToString
281+
$cloneComponent
283282
);
284283

285284
// put this in the user's root Vue instance

0 commit comments

Comments
 (0)