meilisearch · meili-bors · Jan 29, 2025 · Jan 27, 2025 · Jan 27, 2025 · Jan 27, 2025
diff --git a/.gitignore b/.gitignore
@@ -132,3 +132,4 @@ package
 .idea
 dist_default_export_in_index
 no_default_export_in_index
+playgrounds/javascript/yarn.lock
diff --git a/README.md b/README.md
@@ -132,6 +132,8 @@ const client = new MeiliSearch({
 
 ## 🚀 Getting started
 
+Take a look at the [playground](./playgrounds/javascript/src/meilisearch.ts) for a concrete example.
+
 ### Add documents <!-- omit in toc -->
 
 ```js

diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "url": "https://github.com/meilisearch/meilisearch-js"
   },
   "scripts": {
-    "playground:javascript": "yarn --cwd ./playgrounds/javascript && yarn --cwd ./playgrounds/javascript dev",
+    "playground:javascript": "vite serve playgrounds/javascript --open",
     "build:docs": "typedoc",
     "build": "vite build && tsc -p tsconfig.build.json && vite --mode production-umd build",
     "postbuild": "node scripts/build.js",

diff --git a/playgrounds/javascript/.gitignore b/playgrounds/javascript/.gitignore
diff --git a/playgrounds/javascript/README.md b/playgrounds/javascript/README.md
@@ -1,6 +1,7 @@
 # Meilisearch JavaScript playground
 
-This is an example vanilla JavaScript project using [Vite](https://vite.dev) and the [Yarn](https://classic.yarnpkg.com/en/docs/install) package manager.
+This is an example vanilla JavaScript project using [Vite](https://vite.dev) and
+the [Yarn](https://classic.yarnpkg.com/en/docs/install) package manager.
 
 ## Development
 

diff --git a/playgrounds/javascript/index.html b/playgrounds/javascript/index.html
@@ -1,24 +1,12 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#000000" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Meilisearch + Vite</title>
   </head>
   <body>
-    <h1>Meilisearch + Vite</h1>
-    <h2 class="errors_title">Errors:</h2>
-    <div class="errors"></div>
-
-    <h2>Movies index:</h2>
-    <div class="indexes"></div>
-    <h2>Search response:</h2>
-    <div class="hits"></div>
-    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
-    <script type="module" src="/src/app.js"></script>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/playgrounds/javascript/package.json b/playgrounds/javascript/package.json
@@ -1,14 +1,14 @@
 {
   "name": "meilisearch-js-playground",
-  "version": "0.2.0",
-  "description": "Meilisearch playground written with Vite",
+  "private": true,
+  "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^6.0.9"
+    "vite": "^6.0.11"
   }
 }
diff --git a/playgrounds/javascript/src/app.css b/playgrounds/javascript/src/app.css
diff --git a/playgrounds/javascript/src/app.js b/playgrounds/javascript/src/app.js
diff --git a/playgrounds/javascript/src/main.ts b/playgrounds/javascript/src/main.ts
@@ -0,0 +1,41 @@
+import "./style.css";
+import { addDocuments, getAllHits, getSearchResponse } from "./meilisearch.js";
+
+document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
+  <div>
+    <h1>Meilisearch + Vite</h1>
+
+    <h2>Documents:</h2>
+    <div id="hits" style="white-space: break-spaces"> - </div>
+
+    <h2>Search response:</h2>
+    <div id="response" style="white-space: break-spaces"> - </div>
+
+    <h2>Errors:</h2>
+    <div id="errors">None</div>
+  </div>
+`;
+
+function getErrorMessage(error: unknown): string {
+  if (!(error instanceof Error)) {
+    return JSON.stringify(error);
+  }
+
+  const message = String(error);
+
+  if (error.cause === undefined) {
+    return message;
+  }
+
+  return `${message}\nCaused by ${getErrorMessage(error.cause)}`;
+}
+
+try {
+  await addDocuments();
+  await getAllHits(document.querySelector<HTMLDivElement>("#hits")!);
+  await getSearchResponse(document.querySelector<HTMLDivElement>("#response")!);
+} catch (error) {
+  console.error(error);
+  document.querySelector<HTMLDivElement>("#errors")!.innerText =
+    getErrorMessage(error);
+}
diff --git a/playgrounds/javascript/src/meilisearch.ts b/playgrounds/javascript/src/meilisearch.ts
@@ -0,0 +1,51 @@
+import { Index, Meilisearch } from "../../../src/index.js";
+
+const client = new Meilisearch({
+  host: "http://127.0.0.1:7700",
+  apiKey: "masterKey",
+});
+const indexUid = "movies";
+const index = client.index<{ id: number; title: string; genres: string[] }>(
+  indexUid,
+);
+
+export async function addDocuments(): Promise<void> {
+  await client.deleteIndexIfExists(indexUid);
+
+  const task1 = await client.createIndex(indexUid);
+  await client.waitForTask(task1.taskUid);
+
+  const task2 = await index.addDocuments([
+    { id: 1, title: "Carol", genres: ["Romance", "Drama"] },
+    { id: 2, title: "Wonder Woman", genres: ["Action", "Adventure"] },
+    { id: 3, title: "Life of Pi", genres: ["Adventure", "Drama"] },
+    {
+      id: 4,
+      title: "Mad Max: Fury Road",
+      genres: ["Adventure", "Science Fiction"],
+    },
+    { id: 5, title: "Moana", genres: ["Fantasy", "Action"] },
+    { id: 6, title: "Philadelphia", genres: ["Drama"] },
+  ]);
+
+  await client.index(indexUid).waitForTask(task2.taskUid);
+}
+
+export async function getAllHits(element: HTMLDivElement): Promise<void> {
+  const documents = await index.getDocuments();
+
+  element.innerText = JSON.stringify(documents, null, 4);
+}
+
+export async function getSearchResponse(element: HTMLDivElement) {
+  const params: Parameters<Index["search"]> = [
+    "philoudelphia",
+    { attributesToHighlight: ["title"] },
+  ];
+
+  const response = await client.index(indexUid).search(...params);
+
+  element.innerText =
+    `PARAMETERS: ${JSON.stringify(params, null, 4)}` +
+    `\nRESPONSE: ${JSON.stringify(response, null, 4)}`;
+}
diff --git a/playgrounds/javascript/src/index.css → playgrounds/javascript/src/style.css b/playgrounds/javascript/src/index.css → playgrounds/javascript/src/style.css
@@ -1,9 +1,3 @@
-body,
-h1 {
-  margin: 0;
-  padding: 0;
-}
-
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

diff --git a/playgrounds/javascript/src/vite-env.d.ts b/playgrounds/javascript/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
-Original file line number
+Diff line change
@@ Expand Up / @@ -132,6 +132,8 @@ const client = new MeiliSearch({ @@
     ## 🚀 Getting started
+    Take a look at the [playground](./playgrounds/javascript/src/meilisearch.ts) for a concrete example.
     ### Add documents <!-- omit in toc -->
     ```js
@@ Expand Down @@