Merge #1821

1821: [Playground] Replace Parcel by Vite r=flevi29 a=Strift # Pull Request ## Related issue Fixes #1820 ## What does this PR do? - Update the playground to use a modern bundler, Vite (which is also in line with upcoming changes in #1740) ## 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: Strift <[email protected]>
meilisearch · Jan 5, 2025 · 7032370 · 7032370
2 parents 35f9767 + 0b622da
commit 7032370
Show file tree

Hide file tree

Showing 6 changed files with 378 additions and 5,388 deletions.
diff --git a/playgrounds/javascript/.gitignore b/playgrounds/javascript/.gitignore
@@ -1,5 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-.DS_Store
 dist
 dist-ssr
-*.local
+*.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
@@ -1,16 +1,17 @@
-# Javascript Playground
+# Meilisearch JavaScript playground
 
-## Project setup
-```
-yarn install
-```
+This is an example vanilla JavaScript project using [Vite](https://vite.dev) and the [Yarn](https://classic.yarnpkg.com/en/docs/install) package manager.
 
-### Compiles and hot-reloads for development
-```
-yarn start
-```
+## Development
 
-### Compiles and minifies for production
+Install the dependencies:
+
+```bash
+yarn
 ```
-yarn build
+
+Run the app in development:
+
+```bash
+yarn dev
 ```
diff --git a/playgrounds/javascript/index.html b/playgrounds/javascript/index.html
@@ -1,24 +1,24 @@
-<!DOCTYPE html>
+<!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" />
+    <title>Meilisearch + Vite</title>
+  </head>
+  <body>
+    <h1>Meilisearch + Vite</h1>
+    <h2 class="errors_title">Errors:</h2>
+    <div class="errors"></div>
 
-<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" />
-</head>
-
-<body>
-
-
-  <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 src="/src/app.js"></script>
-</body>
-
+    <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>
+  </body>
 </html>
diff --git a/playgrounds/javascript/package.json b/playgrounds/javascript/package.json
@@ -1,26 +1,14 @@
 {
-  "name": "js-playground",
-  "version": "0.1.0",
-  "description": "Instant-meilisearch playground written with vanilla javascript",
-  "main": "index.js",
+  "name": "meilisearch-js-playground",
+  "version": "0.2.0",
+  "description": "Meilisearch playground written with Vite",
+  "type": "module",
   "scripts": {
-    "start": "parcel serve index.html --open --port 2222",
-    "build": "parcel build index.html"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.1",
-    "parcel-bundler": "^1.12.4"
-  },
-  "resolutions": {
-    "node-forge": "^0.10.0"
-  },
-  "browserslist": [
-    "last 3 and_chr versions",
-    "last 3 chrome versions",
-    "last 3 opera versions",
-    "last 3 ios_saf versions",
-    "last 3 safari versions"
-  ],
-  "license": "MIT",
-  "dependencies": {}
+    "vite": "^6.0.5"
+  }
 }
diff --git a/playgrounds/javascript/src/app.js b/playgrounds/javascript/src/app.js
@@ -1,11 +1,11 @@
-import { MeiliSearch } from "../../../src";
+import { Meilisearch } from "../../../src";
 
 const config = {
   host: "http://127.0.0.1:7700",
   apiKey: "masterKey",
 };
 
-const client = new MeiliSearch(config);
+const client = new Meilisearch(config);
 const indexUid = "movies";
 
 const addDataset = async () => {