meilisearch · flevi29 · Feb 7, 2025 · Feb 8, 2025 · Feb 8, 2025
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "test:watch": "yarn build && vitest",
     "instant-meilisearch:test:watch": "vitest --project \"@meilisearch/instant-meilisearch\"",
     "autocomplete:test:watch": "vitest --project \"@meilisearch/autocomplete-client\"",
-    "test:types": "yarn build && tsc --noEmit",
+    "test:types": "turbo test:types",
     "version-packages": "changeset version && turbo version",
     "release": "yarn build && changeset publish"
   },

diff --git a/packages/autocomplete-client/package.json b/packages/autocomplete-client/package.json
@@ -8,7 +8,8 @@
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.json",
-    "version": "node scripts/update_version.cjs"
+    "version": "node scripts/update_version.cjs",
+    "test:types": "tsc --noEmit"
   },
   "type": "module",
   "types": "./dist/types/index.d.ts",
@@ -44,8 +45,7 @@
     "@meilisearch/instant-meilisearch": "*"
   },
   "devDependencies": {
-    "@algolia/autocomplete-js": "^1.7.4",
-    "cssnano": "^4.1.10",
-    "instantsearch.js": "^4.56.2"
+    "@algolia/autocomplete-js": "^1.18.0",
+    "instantsearch.js": "^4.77.3"
   }
 }
diff --git a/packages/instant-meilisearch/package.json b/packages/instant-meilisearch/package.json
@@ -25,7 +25,8 @@
   ],
   "scripts": {
     "build": "vite build && tsc -p tsconfig.json",
-    "version": "node scripts/update_version.cjs"
+    "version": "node scripts/update_version.cjs",
+    "test:types": "tsc --noEmit"
   },
   "type": "module",
   "types": "./dist/types/index.d.ts",
@@ -47,7 +48,6 @@
     "meilisearch": "^0.48.2"
   },
   "devDependencies": {
-    "cssnano": "^4.1.10",
-    "instantsearch.js": "^4.56.2"
+    "instantsearch.js": "^4.77.3"
   }
 }
diff --git a/packages/instant-meilisearch/src/client/instant-meilisearch-client.ts b/packages/instant-meilisearch/src/client/instant-meilisearch-client.ts
@@ -12,6 +12,7 @@ import type {
   InstantMeiliSearchObject,
   ApiKeyCallback,
 } from '../types/index.js'
+import type { UiState } from 'instantsearch.js/es/types/ui-state.js'
 import {
   getApiKey,
   getInstantMeilisearchConfig,
@@ -43,11 +44,14 @@ import { constructClientAgents } from './agents.js'
  *   `{}`
  * @returns {InstantMeiliSearchObject}
  */
-export function instantMeiliSearch(
+export function instantMeiliSearch<
+  TUiState extends UiState = UiState,
+  TRouteState = TUiState,
+>(
   hostUrl: string,
   apiKey: string | ApiKeyCallback = '',
   instantMeiliSearchOptions: InstantMeiliSearchOptions = {}
-): InstantMeiliSearchObject {
+): InstantMeiliSearchObject<TUiState, TRouteState> {
   // Validate parameters
   validateInstantMeiliSearchParams(hostUrl, apiKey, instantMeiliSearchOptions)
 

diff --git a/packages/instant-meilisearch/src/types/types.ts b/packages/instant-meilisearch/src/types/types.ts
@@ -1,4 +1,5 @@
-import type SearchClient from 'instantsearch.js'
+import type InstantSearch from 'instantsearch.js/es/lib/InstantSearch.js'
+import type { UiState } from 'instantsearch.js/es/types/ui-state.js'
 import type {
   MultipleQueriesQuery as AlgoliaMultipleQueriesQuery,
   multipleSearchForFacetValues,
@@ -127,14 +128,20 @@ export type InstantSearchGeoParams = {
   insidePolygon?: ReadonlyArray<readonly number[]>
 }
 
-export type InstantMeiliSearchInstance = ReturnType<typeof SearchClient> & {
+export type InstantMeiliSearchInstance<
+  TUiState extends UiState = UiState,
+  TRouteState = TUiState,
+> = InstantSearch<TUiState, TRouteState> & {
   clearCache: () => void
 }
 
-export type InstantMeiliSearchObject = {
+export type InstantMeiliSearchObject<
+  TUiState extends UiState = UiState,
+  TRouteState = TUiState,
+> = {
   meiliSearchInstance: MeiliSearch
   setMeiliSearchParams: (params: OverridableMeiliSearchSearchParameters) => void
-  searchClient: InstantMeiliSearchInstance
+  searchClient: InstantMeiliSearchInstance<TUiState, TRouteState>
 }
 
 export type MultiSearchResolver = {

diff --git a/playgrounds/autocomplete/index.html b/playgrounds/autocomplete/index.html
@@ -1,16 +1,13 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Demo of Meilisearch + autocomplete.js</title>
-    <div id="autocomplete"></div>
   </head>
-
   <body>
     <div id="app"></div>
-    <script type="module" src="./main.js"></script>
-    <script type="module" src="./src/app.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/playgrounds/autocomplete/main.js b/playgrounds/autocomplete/main.js
diff --git a/playgrounds/autocomplete/package.json b/playgrounds/autocomplete/package.json
@@ -3,12 +3,14 @@
   "version": "0.0.0",
   "private": true,
   "description": "Javascript playground for autocomplete",
+  "type": "module",
   "scripts": {
-    "predev": "node setup.mjs",
+    "predev": "node setup.js",
     "dev": "vite",
     "setup": "node setup.mjs",
     "test:e2e": "concurrently --kill-others -s first \"yarn dev\" \"cypress run --env playground=local\"",
-    "test:e2e:watch": "concurrently --kill-others -s first \"yarn dev\" \"cypress open  --env playground=local\""
+    "test:e2e:watch": "concurrently --kill-others -s first \"yarn dev\" \"cypress open  --env playground=local\"",
+    "test:types": "tsc"
   },
   "keywords": [
     "autocomplete"
@@ -19,10 +21,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@algolia/autocomplete-core": "1.17.9",
-    "@algolia/autocomplete-plugin-query-suggestions": "^1.17.9",
-    "@algolia/autocomplete-plugin-tags": "^1.17.9",
-    "@algolia/autocomplete-theme-classic": "^1.17.9",
+    "@algolia/autocomplete-core": "^1.18.0",
+    "@algolia/autocomplete-plugin-query-suggestions": "^1.18.0",
+    "@algolia/autocomplete-plugin-tags": "^1.18.0",
+    "@algolia/autocomplete-theme-classic": "^1.18.0",
     "@meilisearch/autocomplete-client": "*"
   }
 }
diff --git a/playgrounds/autocomplete/setup.mjs → playgrounds/autocomplete/setup.js b/playgrounds/autocomplete/setup.mjs → playgrounds/autocomplete/setup.js
diff --git a/playgrounds/autocomplete/src/app.js b/playgrounds/autocomplete/src/app.js
diff --git a/playgrounds/autocomplete/src/app.ts b/playgrounds/autocomplete/src/app.ts
@@ -0,0 +1,95 @@
+import { autocomplete } from '@algolia/autocomplete-js'
+import {
+  meilisearchAutocompleteClient,
+  getMeilisearchResults,
+} from '@meilisearch/autocomplete-client'
+// @ts-expect-error it doesn't have type declarations...
+import '@algolia/autocomplete-theme-classic'
+
+const client = meilisearchAutocompleteClient({
+  url: 'http://localhost:7700',
+  apiKey: 'masterKey',
+})
+
+export function setupAutocomplete(element: HTMLElement): void {
+  autocomplete({
+    container: element,
+    placeholder: 'Search for games',
+    openOnFocus: true,
+    debug: true,
+    getSources({ query }) {
+      return [
+        {
+          sourceId: 'steam-video-games',
+          getItems() {
+            const description = getMeilisearchResults({
+              searchClient: client,
+              queries: [
+                {
+                  indexName: 'steam-video-games',
+                  query,
+                  params: {
+                    hitsPerPage: 10,
+                    attributesToSnippet: ['name:10', 'description:5'],
+                    snippetEllipsisText: '..',
+                  },
+                },
+              ],
+            })
+
+            return description
+          },
+          templates: {
+            item({ item, components, html }) {
+              return html`<div class="aa-ItemWrapper">
+                <div class="aa-ItemContent">
+                  <div class="aa-ItemIcon aa-ItemIcon--alignTop">
+                    <img
+                      src="${item.image}"
+                      alt="${item.name}"
+                      width="40"
+                      height="40"
+                    />
+                  </div>
+                  <div class="aa-ItemContentBody">
+                    <div class="aa-ItemContentTitle">
+                      ${components.Highlight({
+                        hit: item,
+                        attribute: 'name',
+                        tagName: 'test',
+                      })}
+                    </div>
+                    <div class="aa-ItemContentDescription">
+                      ${components.Snippet({
+                        hit: item,
+                        attribute: 'description',
+                      })}
+                    </div>
+                  </div>
+                  <div class="aa-ItemActions">
+                    <button
+                      class="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
+                      type="button"
+                      title="Select"
+                    >
+                      <svg
+                        viewBox="0 0 24 24"
+                        width="20"
+                        height="20"
+                        fill="currentColor"
+                      >
+                        <path
+                          d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>`
+            },
+          },
+        },
+      ]
+    },
+  })
+}
diff --git a/playgrounds/autocomplete/src/main.ts b/playgrounds/autocomplete/src/main.ts
@@ -0,0 +1,10 @@
+import './style.css'
+import { setupAutocomplete } from './app.js'
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+  <div>
+    <div id="autocomplete"></div>
+  </div>
+`
+
+setupAutocomplete(document.querySelector<HTMLButtonElement>('#autocomplete')!)
diff --git a/playgrounds/autocomplete/style.css → playgrounds/autocomplete/src/style.css b/playgrounds/autocomplete/style.css → playgrounds/autocomplete/src/style.css
diff --git a/playgrounds/autocomplete/src/vite-env.d.ts b/playgrounds/autocomplete/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/playgrounds/autocomplete/tsconfig.json b/playgrounds/autocomplete/tsconfig.json
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["src"]
+}