Merge #1839

meili-bors[bot] · flevi29 · web-flow · commit 792ce677e3ab · 2025-01-29T08:59:14.000Z
1839: Improve playgrounds r=Strift a=flevi29 # Pull Request ## What does this PR do? - refactor playgrounds, so that it uses the base `package.json` Vite dependency, modernize it according to https://vite.new/vanilla ## PR checklist Please check if your PR fulfills the following requirements: - [x] Does this PR fix an existing issue, or have you listed the changes applied in the PR description (and why they are needed)? - [x] Have you read the contributing guidelines? - [x] Have you made sure that the title is accurate and descriptive of the changes? Thank you so much for contributing to Meilisearch! Co-authored-by: F. Levi <55688616+flevi29@users.noreply.github.com>
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/style.css b/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" />
diff --git a/playgrounds/javascript/yarn.lock b/playgrounds/javascript/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,14 +1,14 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "meilisearch-js-playground",`
`3`		`- "version": "0.2.0",`
`4`		`- "description": "Meilisearch playground written with Vite",`
	`3`	`+ "private": true,`
	`4`	`+ "version": "0.0.0",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"dev": "vite",`
`8`	`8`	`"build": "vite build",`
`9`	`9`	`"preview": "vite preview"`
`10`	`10`	`},`
`11`	`11`	`"devDependencies": {`
`12`		`- "vite": "^6.0.9"`
	`12`	`+ "vite": "^6.0.11"`
`13`	`13`	`}`
`14`	`14`	`}`