Adapt and fix playgrounds

Author: flevi29

package.json

@@ -34,7 +34,7 @@
     "release": "yarn build && changeset publish"
   },
   "dependencies": {
-    "instantsearch.css": "^8.0.0"
+    "instantsearch.css": "^8.5.1"
   },
   "devDependencies": {
     "prettier": "^3.4.2",

playgrounds/autocomplete/.babelrc

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+  server: { strictPort: true },
+});

playgrounds/autocomplete/vite.config.ts

@@ -4,8 +4,8 @@
   "private": true,
   "description": "Instant-meilisearch playground focussed on GeoSearch written with vanilla javascript",
   "scripts": {
-    "dev": "parcel serve index.html --open",
-    "build": "parcel build index.html",
+    "dev": "vite",
+    "build": "vite build",
     "lint": "eslint --ext .js .",
     "lint:fix": "eslint --ext .js --fix ."
   },

playgrounds/geo-javascript/package.json

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

playgrounds/local-react/cypress.env.json

@@ -10,7 +10,7 @@
     "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 --headed --no-exit\"",
+    "test:e2e": "concurrently --kill-others -s first \"yarn dev\" \"cypress run --env playground=local\"",
     "test:e2e:watch": "concurrently --kill-others -s first \"yarn dev\" \"cypress open  --env playground=local\""
   },
   "keywords": [

playgrounds/local-react/package.json

@@ -3,5 +3,6 @@ import react from '@vitejs/plugin-react';
 
 // https://vite.dev/config/
 export default defineConfig({
+  server: { port: 5174, strictPort: true },
   plugins: [react()],
 });

playgrounds/local-react/vite.config.ts

@@ -4,8 +4,8 @@
   "private": true,
   "description": "React playground for instant-meilisearch",
   "scripts": {
-    "dev": "parcel serve index.html --open --port 1111",
-    "build": "parcel build index.html",
+    "dev": "vite",
+    "build": "vite build",
     "lint": "eslint --ext .jsx,.js .",
     "lint:fix": "eslint --ext .jsx,.js --fix ."
   },

playgrounds/react/.babelrc

@@ -1,5 +1,4 @@
-import 'instantsearch.css/themes/algolia-min.css'
-import React from 'react'
+import "instantsearch.css/themes/algolia-min.css";
 import {
   InstantSearch,
   InfiniteHits,
@@ -11,24 +10,24 @@ import {
   Configure,
   SortBy,
   Snippet,
-} from 'react-instantsearch-dom'
+} from "react-instantsearch";
 
-import './App.css'
-import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
+import "./App.css";
+import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
 
 const { searchClient } = instantMeiliSearch(
-  'https://ms-adf78ae33284-106.lon.meilisearch.io',
-  'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303',
+  "https://ms-adf78ae33284-106.lon.meilisearch.io",
+  "a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303",
   {
-    primaryKey: 'id',
-  }
-)
+    primaryKey: "id",
+  },
+);
 
 const App = () => (
   <div className="ais-InstantSearch">
     <h1>Meilisearch + React InstantSearch</h1>
     <h2>
-      Search in Steam video games{' '}
+      Search in Steam video games{" "}
       <span role="img" aria-label="emoji">
         🎮
       </span>
@@ -44,14 +43,14 @@ const App = () => (
         <SortBy
           defaultRefinement="steam-video-games"
           items={[
-            { value: 'steam-video-games', label: 'Relevant' },
+            { value: "steam-video-games", label: "Relevant" },
             {
-              value: 'steam-video-games:recommendationCount:desc',
-              label: 'Most Recommended',
+              value: "steam-video-games:recommendationCount:desc",
+              label: "Most Recommended",
             },
             {
-              value: 'steam-video-games:recommendationCount:asc',
-              label: 'Least Recommended',
+              value: "steam-video-games:recommendationCount:asc",
+              label: "Least Recommended",
             },
           ]}
         />
@@ -65,8 +64,8 @@ const App = () => (
         <RefinementList attribute="misc" />
         <Configure
           hitsPerPage={6}
-          attributesToSnippet={['description:50']}
-          snippetEllipsisText={'...'}
+          attributesToSnippet={["description:50"]}
+          snippetEllipsisText={"..."}
         />
       </div>
       <div className="right-panel">
@@ -75,7 +74,7 @@ const App = () => (
       </div>
     </InstantSearch>
   </div>
-)
+);
 
 const Hit = ({ hit }) => {
   return (
@@ -100,7 +99,7 @@ const Hit = ({ hit }) => {
         <b>Recommended:</b> {hit.recommendationCount}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;