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

Commit

Permalink
fix(vue 3): pass renderToString to findResultsState instead of create…
Browse files Browse the repository at this point in the history 
…ServerRootMixin (#1044)

* fix(vue 3): pass renderToString to findResultsState instead of createServerRootMixin

* fix: change findResultsState to accept an object as props
  • Loading branch information
Eunjae Lee authored Aug 20, 2021
1 parent 58675f0 commit 43aed4f
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 60 deletions.
107 changes: 64 additions & 43 deletions src/util/__tests__/createServerRootMixin.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ describe('createServerRootMixin', () => {
createSSRApp({
mixins: [
createServerRootMixin({
renderToString,
searchClient: undefined,
indexName: 'lol',
}),
Expand All @@ -68,7 +67,6 @@ describe('createServerRootMixin', () => {
createSSRApp({
mixins: [
createServerRootMixin({
renderToString,
searchClient: createFakeClient(),
indexName: undefined,
}),
Expand All @@ -79,26 +77,10 @@ describe('createServerRootMixin', () => {
);
});

it('requires renderToString', () => {
expect(() =>
createSSRApp({
mixins: [
createServerRootMixin({
searchClient: createFakeClient(),
indexName: 'yup',
}),
],
})
).toThrowErrorMatchingInlineSnapshot(
`"createServerRootMixin requires \`renderToString: (app) => Promise<string>\` in the first argument"`
);
});

it('creates an instantsearch instance on "data"', () => {
const App = {
mixins: [
createServerRootMixin({
renderToString,
searchClient: createFakeClient(),
indexName: 'lol',
}),
Expand All @@ -118,7 +100,6 @@ describe('createServerRootMixin', () => {
const App = {
mixins: [
createServerRootMixin({
renderToString,
searchClient: createFakeClient(),
indexName: 'myIndexName',
}),
Expand Down Expand Up @@ -164,7 +145,6 @@ describe('createServerRootMixin', () => {
mixins: [
forceIsServerMixin,
createServerRootMixin({
renderToString,
searchClient: createFakeClient(),
indexName: 'hello',
}),
Expand All @@ -179,6 +159,44 @@ describe('createServerRootMixin', () => {
await renderToString(app);
});

it('requires renderToString', async () => {
const searchClient = createFakeClient();

const app = {
mixins: [
forceIsServerMixin,
createServerRootMixin({
searchClient,
indexName: 'hello',
}),
],
render: renderCompat(h =>
h(InstantSearchSsr, {}, [
h(Configure, {
attrs: {
hitsPerPage: 100,
},
}),
h(SearchBox),
])
),
serverPrefetch() {
expect(() =>
this.instantsearch.findResultsState({ component: this })
).toThrowErrorMatchingInlineSnapshot(
`"findResultsState requires \`renderToString: (component) => Promise<string>\` in the first argument."`
);
},
};

const wrapper = createSSRApp({
mixins: [forceIsServerMixin],
render: renderCompat(h => h(app)),
});

await renderToString(wrapper);
});

it('detects child widgets', async () => {
const searchClient = createFakeClient();
let mainIndex;
Expand All @@ -187,7 +205,6 @@ describe('createServerRootMixin', () => {
mixins: [
forceIsServerMixin,
createServerRootMixin({
renderToString,
searchClient,
indexName: 'hello',
}),
Expand All @@ -214,7 +231,10 @@ describe('createServerRootMixin', () => {
])
),
serverPrefetch() {
return this.instantsearch.findResultsState(this);
return this.instantsearch.findResultsState({
component: this,
renderToString,
});
},
created() {
mainIndex = this.instantsearch.mainIndex;
Expand Down Expand Up @@ -261,7 +281,6 @@ Array [
mixins: [
forceIsServerMixin,
createServerRootMixin({
renderToString,
searchClient,
indexName: 'hello',
}),
Expand All @@ -277,7 +296,10 @@ Array [
])
),
async serverPrefetch() {
const state = await this.instantsearch.findResultsState(this);
const state = await this.instantsearch.findResultsState({
component: this,
renderToString,
});
expect(state).toEqual({
__identifier: 'stringified',
hello: {
Expand Down Expand Up @@ -339,7 +361,6 @@ Array [
mixins: [
forceIsServerMixin,
createServerRootMixin({
renderToString,
searchClient,
indexName: 'hello',
}),
Expand All @@ -359,7 +380,10 @@ Array [
])
),
serverPrefetch() {
return this.instantsearch.findResultsState(this);
return this.instantsearch.findResultsState({
component: this,
renderToString,
});
},
};

Expand Down Expand Up @@ -390,7 +414,6 @@ Array [
mixins: [
forceIsServerMixin,
createServerRootMixin({
renderToString,
searchClient,
indexName: 'hello',
}),
Expand All @@ -410,7 +433,10 @@ Array [
])
),
serverPrefetch() {
return this.instantsearch.findResultsState(this);
return this.instantsearch.findResultsState({
component: this,
renderToString,
});
},
};

Expand Down Expand Up @@ -440,7 +466,6 @@ Array [
mixins: [
forceIsServerMixin,
createServerRootMixin({
renderToString,
searchClient,
indexName: 'hello',
}),
Expand All @@ -466,7 +491,10 @@ Array [
])
),
serverPrefetch() {
return this.instantsearch.findResultsState(this);
return this.instantsearch.findResultsState({
component: this,
renderToString,
});
},
};

Expand All @@ -487,7 +515,6 @@ Array [
mixins: [
forceIsServerMixin,
createServerRootMixin({
renderToString,
searchClient,
indexName: 'hello',
}),
Expand All @@ -501,7 +528,7 @@ Array [
serverPrefetch() {
return (
this.instantsearch
.findResultsState(this)
.findResultsState({ component: this, renderToString })
.then(res => {
expect(
this.instantsearch.mainIndex.getWidgets().map(w => w.$$type)
Expand Down Expand Up @@ -541,7 +568,6 @@ Array [
mixins: [
forceIsServerMixin,
createServerRootMixin({
renderToString,
searchClient,
indexName: 'hello',
}),
Expand All @@ -552,7 +578,7 @@ Array [
serverPrefetch() {
return (
this.instantsearch
.findResultsState(this)
.findResultsState({ component: this, renderToString })
.then(res => {
expect(
this.instantsearch.mainIndex.getWidgets().map(w => w.$$type)
Expand Down Expand Up @@ -600,7 +626,6 @@ Array [
mixins: [
forceIsServerMixin,
createServerRootMixin({
renderToString,
searchClient,
indexName: 'hello',
}),
Expand All @@ -617,7 +642,10 @@ Array [
]);
}),
serverPrefetch() {
return this.instantsearch.findResultsState(this);
return this.instantsearch.findResultsState({
component: this,
renderToString,
});
},
};

Expand All @@ -638,7 +666,6 @@ Array [
const app = {
mixins: [
createServerRootMixin({
renderToString,
searchClient: createFakeClient(),
indexName: 'hello',
}),
Expand Down Expand Up @@ -685,7 +712,6 @@ Array [
const app = {
mixins: [
createServerRootMixin({
renderToString,
searchClient: createFakeClient(),
indexName: 'movies',
}),
Expand Down Expand Up @@ -724,7 +750,6 @@ Array [
const app = {
mixins: [
createServerRootMixin({
renderToString,
searchClient: createFakeClient(),
indexName: 'hello',
}),
Expand Down Expand Up @@ -763,7 +788,6 @@ Array [
const app = {
mixins: [
createServerRootMixin({
renderToString,
searchClient: createFakeClient(),
indexName: 'hello',
}),
Expand Down Expand Up @@ -803,7 +827,6 @@ Array [
mount({
mixins: [
createServerRootMixin({
renderToString,
searchClient: createFakeClient(),
indexName: 'lol',
}),
Expand Down Expand Up @@ -875,7 +898,6 @@ Object {
mount({
mixins: [
createServerRootMixin({
renderToString,
searchClient: createFakeClient(),
indexName: 'lol',
}),
Expand Down Expand Up @@ -909,7 +931,6 @@ Object {
mount({
mixins: [
createServerRootMixin({
renderToString,
searchClient: createFakeClient(),
indexName: 'lol',
}),
Expand Down
33 changes: 16 additions & 17 deletions src/util/createServerRootMixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,7 @@ function augmentInstantSearch(
instantSearchOptions,
searchClient,
indexName,
cloneComponent,
renderToString
cloneComponent
) {
/* eslint-disable no-param-reassign */

Expand All @@ -92,21 +91,29 @@ function augmentInstantSearch(

/**
* main API for SSR, called in serverPrefetch of a root component which contains instantsearch
* @param {object} componentInstance the calling component's `this`
* @param {Object} props the object including `component` and `renderToString`
* @param {Object} props.component the calling component's `this`
* @param {Function} props.renderToString the function to render componentInstance to string
* @returns {Promise} result of the search, to save for .hydrate
*/
search.findResultsState = function(componentInstance) {
search.findResultsState = function({ component, renderToString }) {
if (!renderToString) {
throw new Error(
'findResultsState requires `renderToString: (component) => Promise<string>` in the first argument.'
);
}

let app;
let renderedComponentInstance;
let renderedComponent;

return Promise.resolve()
.then(() => {
app = cloneComponent(componentInstance, {
app = cloneComponent(component, {
mixins: [
{
created() {
// eslint-disable-next-line consistent-this
renderedComponentInstance = this;
renderedComponent = this;
this.instantsearch.helper = helper;
this.instantsearch.mainHelper = helper;

Expand All @@ -124,7 +131,7 @@ function augmentInstantSearch(
.then(() => searchOnlyWithDerivedHelpers(helper))
.then(() => {
const results = {};
walkIndex(renderedComponentInstance.instantsearch.mainIndex, widget => {
walkIndex(renderedComponent.instantsearch.mainIndex, widget => {
results[widget.getIndexId()] = widget.getResults();
});

Expand Down Expand Up @@ -258,7 +265,6 @@ export function createServerRootMixin(instantSearchOptions = {}) {
const {
searchClient,
indexName,
renderToString,
$cloneComponent = defaultCloneComponent,
} = instantSearchOptions;

Expand All @@ -268,18 +274,11 @@ export function createServerRootMixin(instantSearchOptions = {}) {
);
}

if (!renderToString) {
throw new Error(
'createServerRootMixin requires `renderToString: (app) => Promise<string>` in the first argument'
);
}

const search = augmentInstantSearch(
instantSearchOptions,
searchClient,
indexName,
$cloneComponent,
renderToString
$cloneComponent
);

// put this in the user's root Vue instance
Expand Down

0 comments on commit 43aed4f

Please sign in to comment.