Prototype beta/prototype search for facet values (#1144)

* Add prototype beta changeset

* Add compatibility with searchable on facetRefinements

* Add changeset for searchable parameter

* Merge

* Add a facet search context

* Update changeset

* Update pre mode

* Update pre mode

* Update pre mode

* Version Packages (prototype-search-for-facet-values) (#1158)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* Update README.md

* Remove pre changeset mode

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: meili-bot <[email protected]>
Co-authored-by: meili-bors[bot] <89034592+meili-bors[bot]@users.noreply.github.com>

.changeset/config.json

@@ -13,6 +13,8 @@
     "@meilisearch/angular-playground",
     "@meilisearch/vue3-ts-playground",
     "@meilisearch/react-playground",
-    "@meilisearch/local-react-playground"
+    "@meilisearch/local-react-playground",
+    "@meilisearch/node-playground",
+    "@meilisearch/autocomplete-playground"
   ]
 }

.changeset/curly-elephants-juggle.md

@@ -0,0 +1,5 @@
+---
+"@meilisearch/instant-meilisearch": patch
+---
+
+Add compatibility with the `searchable` parameter of the [`RefinementList`](https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/) widget

README.md

@@ -38,7 +38,7 @@ For general information on how to use Meilisearch—such as our API reference, t
 
 ## ⚡ Supercharge your Meilisearch experience
 
-Say goodbye to server deployment and manual updates with [Meilisearch Cloud](https://www.meilisearch.com/pricing?utm_campaign=oss&utm_source=integration&utm_medium=meilisearch-js-plugins). No credit card required.
+Say goodbye to server deployment and manual updates with [Meilisearch Cloud](https://www.meilisearch.com/pricing?utm_campaign=oss&utm_source=integration&utm_medium=meilisearch-js-plugins). Get started with a 14-day free trial! No credit card required.
 
 ## 🐱 Plugins
 

packages/autocomplete-client/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @meilisearch/autocomplete-client
 
+## 0.2.2-prototype-search-for-facet-values.0
+
+### Patch Changes
+
+- Updated dependencies [458bbf3]
+  - @meilisearch/instant-meilisearch@0.13.3-prototype-search-for-facet-values.0
+
 ## 0.2.1
 
 ### Patch Changes

packages/autocomplete-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meilisearch/autocomplete-client",
-  "version": "0.2.1",
+  "version": "0.2.2-prototype-search-for-facet-values.0",
   "private": false,
   "description": "The search client to use Meilisearch with autocomplete.js.",
   "homepage": "https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/autocomplete-client",
@@ -47,7 +47,7 @@
     "url": "https://github.com/meilisearch/meilisearch-js-plugins.git"
   },
   "dependencies": {
-    "@meilisearch/instant-meilisearch": "*"
+    "@meilisearch/instant-meilisearch": "0.13.3-prototype-search-for-facet-values.0"
   },
   "devDependencies": {
     "@algolia/autocomplete-js": "^1.7.4",

packages/autocomplete-client/src/package-version.ts

@@ -1 +1 @@
-export const PACKAGE_VERSION = '0.2.1'
+export const PACKAGE_VERSION = '0.2.2-prototype-search-for-facet-values.0'

packages/instant-meilisearch/README.md

@@ -707,11 +707,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

@@ -50,7 +50,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,
+  AlgoliaSearchForFacetValuesRequests,
+  AlgoliaSearchForFacetValuesResponse,
 } from '../types'
 import {
   getApiKey,
@@ -19,7 +21,7 @@ import {
   adaptSearchParams,
   SearchResolver,
 } from '../adapter'
-import { createSearchContext } from '../contexts'
+import { createSearchContext, createFacetSearchContext } from '../contexts'
 import {
   SearchCache,
   initFacetDistribution,
@@ -132,13 +134,48 @@ 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')
+    searchForFacetValues: async function (
+      requests: AlgoliaSearchForFacetValuesRequests
+    ): Promise<AlgoliaSearchForFacetValuesResponse[]> {
+      console.log(requests)
+
+      const results = []
+      for (const request of requests) {
+        const searchContext: SearchContext = createFacetSearchContext(
+          request,
+          instantMeiliSearchOptions
         )
-        resolve([]) // added here to avoid compilation error
-      })
+
+        const meilisearchSearchQuery = adaptSearchParams(searchContext)
+
+        const index = request.indexName
+        const meilisearchRequest: any = {
+          ...meilisearchSearchQuery,
+          facetQuery: request.params.facetQuery,
+          facetName: request.params.facetName,
+        }
+
+        delete meilisearchRequest.indexUid
+
+        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/contexts/index.ts

@@ -1 +1 @@
-export { createSearchContext } from './search-context'
+export { createSearchContext, createFacetSearchContext } from './search-context'

packages/instant-meilisearch/src/contexts/search-context.ts

@@ -2,6 +2,7 @@ import {
   InstantMeiliSearchOptions,
   AlgoliaMultipleQueriesQuery,
   SearchContext,
+  AlgoliaSearchForFacetValuesRequest,
 } from '../types'
 import { splitSortString } from './sort-context'
 import { createPaginationState } from './pagination-context'
@@ -54,3 +55,37 @@ export function createSearchContext(
   }
   return searchContext
 }
+
+// TODO: avoid code duplication
+/**
+ * @param  {AlgoliaMultipleQueriesQuery} searchRequest
+ * @param  {Context} options
+ * @returns {SearchContext}
+ */
+export function createFacetSearchContext(
+  searchRequest: AlgoliaSearchForFacetValuesRequest,
+  options: InstantMeiliSearchOptions
+): SearchContext {
+  // Split index name and possible sorting rules
+  const [indexUid, ...sortByArray] = searchRequest.indexName.split(':')
+  const { params: instantSearchParams } = searchRequest
+
+  const paginationState = createPaginationState(
+    options.finitePagination,
+    instantSearchParams?.hitsPerPage,
+    instantSearchParams?.page
+  )
+
+  const sortState = createSortState(sortByArray.join(':'))
+
+  const searchContext: SearchContext = {
+    ...options,
+    ...instantSearchParams,
+    sort: sortState,
+    indexUid,
+    pagination: paginationState,
+    placeholderSearch: options.placeholderSearch !== false, // true by default
+    keepZeroFacets: !!options.keepZeroFacets, // false by default
+  }
+  return searchContext
+}

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

@@ -1,5 +1,8 @@
 import type { SearchClient } from 'instantsearch.js'
-import type { MultipleQueriesQuery as AlgoliaMultipleQueriesQuery } from '@algolia/client-search'
+import type {
+  MultipleQueriesQuery as AlgoliaMultipleQueriesQuery,
+  multipleSearchForFacetValues,
+} from '@algolia/client-search'
 import type {
   MultiSearchQuery as MeiliSearchMultiSearchParams,
   MultiSearchResult,
@@ -12,6 +15,13 @@ export type {
   SearchForFacetValuesResponse as AlgoliaSearchForFacetValuesResponse,
 } from '@algolia/client-search'
 
+export type AlgoliaSearchForFacetValuesRequests = Parameters<
+  ReturnType<typeof multipleSearchForFacetValues>
+>[0]
+
+export type AlgoliaSearchForFacetValuesRequest =
+  AlgoliaSearchForFacetValuesRequests[0]
+
 export type {
   Filter,
   FacetDistribution,

playgrounds/autocomplete/package.json

@@ -26,7 +26,7 @@
     "@algolia/autocomplete-plugin-query-suggestions": "^1.9.3",
     "@algolia/autocomplete-plugin-tags": "^1.9.2",
     "@algolia/autocomplete-theme-classic": "^1.7.4",
-    "@meilisearch/autocomplete-client": "*"
+    "@meilisearch/autocomplete-client": "0.2.2-prototype-search-for-facet-values.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

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>

playgrounds/node-env/package.json

@@ -15,6 +15,6 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@meilisearch/instant-meilisearch": "*"
+    "@meilisearch/instant-meilisearch": "0.13.3-prototype-search-for-facet-values.0"
   }
 }

yarn.lock

@@ -10269,10 +10269,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"