Adapt and fix one playground

Author: flevi29

package.json

@@ -46,7 +46,10 @@
     "turbo": "^2.3.3",
     "algoliasearch-helper": "^3.23.0",
     "@changesets/cli": "^2.26.1",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "@algolia/client-search": "^5.19.0",
+    "algoliasearch": "^5.19.0",
+    "search-insights": "^2.17.3"
   },
   "packageManager": "[email protected]"
 }

packages/autocomplete-client/package.json

@@ -49,7 +49,6 @@
     "@algolia/autocomplete-js": "^1.7.4",
     "cssnano": "^4.1.10",
     "eslint-config-meilisearch": "*",
-    "instantsearch.js": "^4.56.2",
-    "regenerator-runtime": "^0.13.7"
+    "instantsearch.js": "^4.56.2"
   }
 }

packages/instant-meilisearch/package.json

@@ -53,7 +53,6 @@
     "concurrently": "^7.1.0",
     "cssnano": "^4.1.10",
     "eslint-config-meilisearch": "*",
-    "instantsearch.js": "^4.56.2",
-    "regenerator-runtime": "^0.13.7"
+    "instantsearch.js": "^4.56.2"
   }
 }

playgrounds/local-react/.babelrc

@@ -1,5 +1,5 @@
 {
   "local": {
-    "host": "http://localhost:9999"
+    "host": "http://localhost:5173"
   }
 }

playgrounds/local-react/cypress.env.json

@@ -19,8 +19,8 @@ describe(`${playground} playground test`, () => {
     cy.contains('15 results')
   })
 
-  it('Contains filter clear', () => {
-    cy.contains('Clear all filters')
+  it('Contains refinements clear', () => {
+    cy.contains('Clear refinements')
   })
 
   it('Contains Genres', () => {

playgrounds/local-react/cypress/integration/search-ui.spec.js

@@ -4,13 +4,13 @@
   "private": true,
   "description": "React playground for instant-meilisearch",
   "scripts": {
-    "predev": "node setup.js",
-    "dev": "parcel serve index.html --open --port 9999",
-    "build": "parcel build index.html",
-    "setup": "node setup.js",
+    "predev": "node setup.mjs",
+    "dev": "vite",
+    "build": "vite build",
+    "setup": "node setup.mjs",
     "lint": "eslint --ext .jsx,.js .",
     "lint:fix": "eslint --ext .jsx,.js --fix .",
-    "test:e2e": "concurrently --kill-others -s first \"yarn dev\" \"cypress run --env playground=local\"",
+    "test:e2e": "concurrently --kill-others -s first \"yarn dev\" \"cypress run --env playground=local --headed --no-exit\"",
     "test:e2e:watch": "concurrently --kill-others -s first \"yarn dev\" \"cypress open  --env playground=local\""
   },
   "keywords": [
@@ -22,19 +22,14 @@
   ],
   "author": "",
   "license": "ISC",
-  "dependencies": {
-    "@meilisearch/instant-meilisearch": "0.23.0",
-    "instantsearch.css": "^8.0.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-instantsearch-dom": "^6.40.4",
-    "react-router-dom": "^6.14.2"
-  },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/plugin-syntax-jsx": "^7.22.5",
-    "@babel/plugin-transform-runtime": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
+    "@meilisearch/instant-meilisearch": "*",
+    "instantsearch.css": "^8.5.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react-instantsearch": "^7.15.0",
+    "react-router-dom": "^7.1.3",
     "eslint-config-meilisearch": "*"
   }
-}
+}

playgrounds/local-react/package.json

@@ -0,0 +1,31 @@
+import { MeiliSearch } from "meilisearch";
+import movies from "./assets/movies.json" with { type: "json" };
+import games from "./assets/games.json" with { type: "json" };
+
+const client = new MeiliSearch({
+  host: "http://127.0.0.1:7700",
+  apiKey: "masterKey",
+});
+
+const moviesIndex = client.index("movies");
+const gamesIndex = client.index("games");
+
+await moviesIndex.delete();
+await gamesIndex.delete();
+
+await moviesIndex.updateSettings({
+  filterableAttributes: ["genres", "color", "platforms"],
+});
+await gamesIndex.updateSettings({
+  filterableAttributes: ["genres", "color", "platforms", "misc", "players"],
+  searchableAttributes: ["name", "description"],
+  sortableAttributes: ["recommendationCount"],
+});
+
+const moviesRes = await moviesIndex.addDocuments(movies);
+const gamesRes = await gamesIndex.addDocuments(games);
+
+const moviesTask = await client.waitForTask(moviesRes.taskUid);
+const gamesTask = await client.waitForTask(gamesRes.taskUid);
+console.log(moviesTask);
+console.log(gamesTask);

playgrounds/local-react/setup.js

@@ -1,22 +1,18 @@
-import React from 'react'
-import { Routes, Route, Outlet } from 'react-router-dom'
-import SingleIndex from './components/SingleIndex'
-import MultiIndex from './components/MultiIndex'
-import SingleMovieIndex from './components/SingleMovieIndex'
+import { Routes, Route, Outlet } from "react-router-dom";
+import SingleIndex from "./components/SingleIndex";
+import MultiIndex from "./components/MultiIndex";
+import SingleMovieIndex from "./components/SingleMovieIndex";
+import "./App.css";
 
-import './App.css'
+const App = () => (
+  <div>
+    <Routes>
+      <Route path="/" element={<SingleIndex />} />
+      <Route path="multi-index" element={<MultiIndex />} />
+      <Route path="movie-index" element={<SingleMovieIndex />} />
+    </Routes>
+    <Outlet />
+  </div>
+);
 
-const App = () => {
-  return (
-    <div>
-      <Routes>
-        <Route path="/" element={<SingleIndex />} />
-        <Route path="multi-index" element={<MultiIndex />} />
-        <Route path="movie-index" element={<SingleMovieIndex />} />
-      </Routes>
-      <Outlet />
-    </div>
-  )
-}
-
-export default App
+export default App;