Add server.d.ts to react-instantsearch

This commit is contained in:
Gordon 2018-11-05 10:16:12 -06:00
parent e31b168ef1
commit e3e00a62c2
No known key found for this signature in database
GPG Key ID: D6396E7DEADE3F44
3 changed files with 74 additions and 9 deletions

View File

@ -204,12 +204,62 @@ import { Hit, connectRefinementList, connectMenu } from 'react-instantsearch-cor
<RefinementList attribute="products" searchable />;
// https://community.algolia.com/react-instantsearch/guide/Search_parameters.html
<InstantSearch
appId="appId"
apiKey="apiKey"
indexName="indexName"
>
<Configure distinct={1}/>
// widgets
</InstantSearch>;
() => {
// https://community.algolia.com/react-instantsearch/guide/Search_parameters.html
<InstantSearch
appId="appId"
apiKey="apiKey"
indexName="indexName"
>
<Configure distinct={1}/>
// widgets
</InstantSearch>;
};
import { createInstantSearch } from 'react-instantsearch-dom/server';
// import { createServer } from 'http';
declare function createServer(handler: (req: any, res: any) => any): any;
import { renderToString } from 'react-dom/server';
() => {
// https://community.algolia.com/react-instantsearch/guide/Server-side_rendering.html
// Now we create a dedicated `InstantSearch` component
const { InstantSearch, findResultsState } = createInstantSearch();
class App extends React.Component<any> {
render() {
return (
<InstantSearch
appId="appId"
apiKey="apiKey"
indexName="indexName"
searchState={this.props.searchState}
resultsState={this.props.resultsState}
>
<SearchBox />
<Hits />
</InstantSearch>
);
}
}
const server = createServer(async (req, res) => {
const searchState = {query: 'chair'};
const resultsState = await findResultsState(App, {searchState});
const appInitialState = {searchState, resultsState};
const appAsString = renderToString(<App {...appInitialState} />);
res.send(
`
<!doctype html>
<html>
<body>
<h1>Awesome server-side rendered search</h1>
<did id="root">${appAsString}</div>
<script>window.__APP_INITIAL_STATE__ = ${JSON.stringify(appInitialState)}</script>
<script src="bundle.js"></script> <!-- this is the build of browser.js -->
</body>
</html>`
);
});
};

View File

@ -0,0 +1,14 @@
import * as React from 'react';
/**
* Creates a specialized root InstantSearch component. It accepts
* an algolia client and a specification of the root Element.
* @param defaultAlgoliaClient - a function that builds an Algolia client
* @returns an InstantSearch root
*/
export function createInstantSearch(
defaultAlgoliaClient?: (appId: string, apiKey: string, options: { _useRequestCache: boolean }) => object
): {
InstantSearch: React.ComponentClass<any>;
findResultsState(App: React.ComponentType<any>, props: any): Promise<any>
};

1
types/react-instantsearch/server.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export { createInstantSearch } from 'react-instantsearch-dom/server';