From fd029475a0b9ebeba2a930fd154ee8bb446c2333 Mon Sep 17 00:00:00 2001
From: "F. Levi" <55688616+flevi29@users.noreply.github.com>
Date: Mon, 27 Jan 2025 10:14:50 +0200
Subject: [PATCH 1/6] Improve playgrounds
---
playgrounds/javascript/.gitignore | 24 --
playgrounds/javascript/README.md | 17 -
playgrounds/javascript/index.html | 20 +-
playgrounds/javascript/package.json | 14 -
playgrounds/javascript/src/app.css | 51 ---
playgrounds/javascript/src/app.js | 60 ----
playgrounds/javascript/src/main.ts | 41 +++
playgrounds/javascript/src/meilisearch.ts | 49 +++
.../javascript/src/{index.css => style.css} | 6 -
playgrounds/javascript/src/vite-env.d.ts | 1 +
playgrounds/javascript/yarn.lock | 327 ------------------
11 files changed, 95 insertions(+), 515 deletions(-)
delete mode 100644 playgrounds/javascript/.gitignore
delete mode 100644 playgrounds/javascript/README.md
delete mode 100644 playgrounds/javascript/package.json
delete mode 100644 playgrounds/javascript/src/app.css
delete mode 100644 playgrounds/javascript/src/app.js
create mode 100644 playgrounds/javascript/src/main.ts
create mode 100644 playgrounds/javascript/src/meilisearch.ts
rename playgrounds/javascript/src/{index.css => style.css} (80%)
create mode 100644 playgrounds/javascript/src/vite-env.d.ts
delete mode 100644 playgrounds/javascript/yarn.lock
diff --git a/playgrounds/javascript/.gitignore b/playgrounds/javascript/.gitignore
deleted file mode 100644
index a547bf36d..000000000
--- a/playgrounds/javascript/.gitignore
+++ /dev/null
@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
diff --git a/playgrounds/javascript/README.md b/playgrounds/javascript/README.md
deleted file mode 100644
index 0feaec030..000000000
--- a/playgrounds/javascript/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 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.
-
-## Development
-
-Install the dependencies:
-
-```bash
-yarn
-```
-
-Run the app in development:
-
-```bash
-yarn dev
-```
diff --git a/playgrounds/javascript/index.html b/playgrounds/javascript/index.html
index 268c0806e..edc95cb4a 100644
--- a/playgrounds/javascript/index.html
+++ b/playgrounds/javascript/index.html
@@ -1,24 +1,12 @@
-
-
-
+
+
Meilisearch + Vite
- Meilisearch + Vite
- Errors:
-
-
- Movies index:
-
- Search response:
-
-
-
+
+
diff --git a/playgrounds/javascript/package.json b/playgrounds/javascript/package.json
deleted file mode 100644
index f510020bb..000000000
--- a/playgrounds/javascript/package.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "name": "meilisearch-js-playground",
- "version": "0.2.0",
- "description": "Meilisearch playground written with Vite",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^6.0.9"
- }
-}
diff --git a/playgrounds/javascript/src/app.css b/playgrounds/javascript/src/app.css
deleted file mode 100644
index 544a84abc..000000000
--- a/playgrounds/javascript/src/app.css
+++ /dev/null
@@ -1,51 +0,0 @@
-body {
- font-family: sans-serif;
- padding: 1em;
-}
-
-.ais-ClearRefinements {
- margin: 1em 0;
-}
-
-.ais-SearchBox {
- margin: 1em 0;
-}
-
-.ais-Pagination {
- margin-top: 1em;
-}
-
-.left-panel {
- float: left;
- width: 200px;
-}
-
-.right-panel {
- margin-left: 210px;
-}
-
-.ais-InstantSearch {
- max-width: 960px;
- overflow: hidden;
- margin: 0 auto;
-}
-
-.ais-Hits-item {
- margin-bottom: 1em;
- width: calc(50% - 1rem);
-}
-
-.ais-Hits-item img {
- margin-right: 1em;
- width: 100%;
- height: 100%;
- margin-bottom: 0.5em;
-}
-
-.hit-name {
- margin-bottom: 0.5em;
-}
-
-.hit-info {
- font-size: 90%;
-}
diff --git a/playgrounds/javascript/src/app.js b/playgrounds/javascript/src/app.js
deleted file mode 100644
index d0fc2a205..000000000
--- a/playgrounds/javascript/src/app.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Meilisearch } from "../../../src";
-
-const config = {
- host: "http://127.0.0.1:7700",
- apiKey: "masterKey",
-};
-
-const client = new Meilisearch(config);
-const indexUid = "movies";
-
-const addDataset = async () => {
- await client.deleteIndex(indexUid);
- const { taskUid } = await client.createIndex(indexUid);
- await client.index(indexUid).waitForTask(taskUid);
-
- const documents = await client.index(indexUid).getDocuments();
-
- const dataset = [
- { 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"] },
- ];
- if (documents.results.length === 0) {
- const { taskUid } = await client.index(indexUid).addDocuments(dataset);
- await client.index(indexUid).waitForTask(taskUid);
- }
-};
-
-(async () => {
- try {
- await addDataset();
- const indexes = await client.getRawIndexes();
- document.querySelector(".indexes").innerText = JSON.stringify(
- indexes,
- null,
- 1,
- );
- const resp = await client.index(indexUid).search("", {
- attributesToHighlight: ["title"],
- });
- console.log({ resp });
- console.log({ hit: resp.hits[0] });
- document.querySelector(".hits").innerText = JSON.stringify(
- resp.hits.map((hit) => hit.title),
- null,
- 1,
- );
- document.querySelector(".errors_title").style.display = "none";
- } catch (e) {
- console.error(e);
- document.querySelector(".errors").innerText = JSON.stringify(e, null, 1);
- }
-})();
diff --git a/playgrounds/javascript/src/main.ts b/playgrounds/javascript/src/main.ts
new file mode 100644
index 000000000..4c24c0577
--- /dev/null
+++ b/playgrounds/javascript/src/main.ts
@@ -0,0 +1,41 @@
+import "./style.css";
+import { addDocuments, getAllHits, getSearchResponse } from "./meilisearch.js";
+
+document.querySelector("#app")!.innerHTML = `
+
+
Meilisearch + Vite
+
+
Documents:
+
-
+
+
Search response:
+
-
+
+
Errors:
+
None
+