Add compatibility with searchable on facetRefinements

Author: bidoubiwa

packages/instant-meilisearch/README.md

@@ -701,11 +701,11 @@ The `refinementList` widget is one of the most common widgets you can find in a
 - ✅ limit: How many facet values to retrieve.
 - ✅ showMore: Whether to display a button that expands the number of items.
 - ✅ showMoreLimit: The maximum number of displayed items. Does not work when showMoreLimit > limit.
-- ❌ searchable: Whether to add a search input to let the user search for more facet values. Not supported by Meilisearch. If you'd like to see it implemented [please vote](https://roadmap.meilisearch.com/c/64-search-for-facet-values?utm_medium=social&utm_source=portal_share).
-- ❌ searchablePlaceholder: The value of the search input’s placeholder. Not supported, see `searchable`.
-- ❌ searchableIsAlwaysActive: When false, disables the facet search input. Not supported, see `searchable`.
-- ❌ searchableEscapeFacetValues: When true, escapes the facet values. Not supported, see `searchable`.
-- ❌ sortBy: Not supported natively but can be implemented manually using `transformItems` options.
+- ✅ searchable: Whether to add a search input to let the user search for more facet values. Not supported by Meilisearch. If you'd like to see it implemented [please vote](https://roadmap.meilisearch.com/c/64-search-for-facet-values?utm_medium=social&utm_source=portal_share).
+- ✅ searchablePlaceholder: The value of the search input’s placeholder. Not supported, see `searchable`.
+- ✅ searchableIsAlwaysActive: When false, disables the facet search input. Not supported, see `searchable`.
+- ❌ searchableEscapeFacetValues: When true, escapes the facet values.
+- ❌ sortBy: Not supported but can be implemented manually using `transformItems` options.
 - ✅ transformItems: A function to transform the items passed to the templates.
 - ✅ templates: The templates to use for the widget.
 - ✅ cssClasses: The CSS classes to override.

packages/instant-meilisearch/package.json

@@ -47,7 +47,7 @@
     "templates"
   ],
   "dependencies": {
-    "meilisearch": "^0.33.0"
+    "meilisearch": "0.33.0-prototype-search-for-facet-values.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.0",

packages/instant-meilisearch/src/client/instant-meilisearch-client.ts

@@ -8,6 +8,8 @@ import {
   FacetDistribution,
   PaginationState,
   MeilisearchConfig,
+  AlgoliaSearchForFacetValuesRequest,
+  AlgoliaSearchForFacetValuesResponse,
 } from '../types'
 import {
   getApiKey,
@@ -132,13 +134,38 @@ export function instantMeiliSearch(
         throw new Error(e)
       }
     },
-    searchForFacetValues: async function (_: any) {
-      return await new Promise((resolve, reject) => {
-        reject(
-          new Error('SearchForFacetValues is not compatible with Meilisearch')
-        )
-        resolve([]) // added here to avoid compilation error
-      })
+    searchForFacetValues: async function (
+      requests: AlgoliaSearchForFacetValuesRequest
+    ): Promise<AlgoliaSearchForFacetValuesResponse[]> {
+      console.log(requests)
+
+      const results = []
+      for (const request of requests) {
+        const index = request.indexName
+        const meilisearchRequest = {
+          facetQuery: request.params.facetQuery,
+          facetName: request.params.facetName,
+        }
+
+        const meilisearchResponse = await meilisearchClient
+          .index(index)
+          .searchForFacetValues(meilisearchRequest)
+
+        const facetHits = meilisearchResponse.facetHits.map((facetHit) => ({
+          ...facetHit,
+          // not currently supported
+          highlighted: facetHit.value,
+        }))
+        const result = {
+          facetHits,
+          exhaustiveFacetsCount: false,
+          processingTimeMS: meilisearchResponse.processingTimeMs,
+        }
+
+        results.push(result)
+      }
+
+      return results
     },
   }
 }

packages/instant-meilisearch/src/types/types.ts

@@ -1,5 +1,9 @@
 import type { SearchClient } from 'instantsearch.js'
-import type { MultipleQueriesQuery as AlgoliaMultipleQueriesQuery } from '@algolia/client-search'
+import type {
+  MultipleQueriesQuery as AlgoliaMultipleQueriesQuery,
+  SearchForFacetValuesQueryParams as AlgoliaSearchForFacetValuesQueryParams,
+  SearchOptions as AlgoliaSearchOptions,
+} from '@algolia/client-search'
 import type {
   MultiSearchQuery as MeiliSearchMultiSearchParams,
   MultiSearchResult,
@@ -12,6 +16,11 @@ export type {
   SearchForFacetValuesResponse as AlgoliaSearchForFacetValuesResponse,
 } from '@algolia/client-search'
 
+export type AlgoliaSearchForFacetValuesRequest = Array<{
+  readonly indexName: string
+  readonly params: AlgoliaSearchForFacetValuesQueryParams & AlgoliaSearchOptions
+}>
+
 export type {
   Filter,
   FacetDistribution,

playgrounds/local-react/src/components/SingleIndex.jsx

@@ -50,9 +50,9 @@ const SingleIndex = () => (
           ]}
         />
         <h2>Genres</h2>
-        <RefinementList attribute="genres" />
+        <RefinementList attribute="genres" searchable={true} />
         <h2>Players</h2>
-        <RefinementList attribute="players" />
+        <RefinementList attribute="players" searchable={true} />
         <h2>Platforms</h2>
         <RefinementList attribute="platforms" />
         <h2>Misc</h2>

yarn.lock

@@ -10136,10 +10136,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
-meilisearch@^0.33.0:
-  version "0.33.0"
-  resolved "https://registry.yarnpkg.com/meilisearch/-/meilisearch-0.33.0.tgz#25982b193cdd22e9ec534a022dbde89c42951dc4"
-  integrity sha512-bYPb9WyITnJfzf92e7QFK8Rc50DmshFWxypXCs3ILlpNh8pT15A7KSu9Xgnnk/K3G/4vb3wkxxtFS4sxNkWB8w==
+[email protected]-prototype-search-for-facet-values.1:
+  version "0.33.0-prototype-search-for-facet-values.1"
+  resolved "https://registry.yarnpkg.com/meilisearch/-/meilisearch-0.33.0-prototype-search-for-facet-values.1.tgz#e8cfd380880dbf7c2c0de9e52ca581c05062a65f"
+  integrity sha512-tP2NHj4LIG/L7RQc8IdCOnn3u7MU5RDITf4vEjwToCREtoqadEGahypPfnjRMD7Iw/2j3ELk81SpbFArrSXpCg==
   dependencies:
     cross-fetch "^3.1.6"