convert most playgrounds to TypeScript

flevi29 · flevi29 · commit 6f98286e6d1f · 2025-02-08T14:54:50.000+02:00
diff --git a/packages/autocomplete-client/package.json b/packages/autocomplete-client/package.json
@@ -45,8 +45,7 @@
     "@meilisearch/instant-meilisearch": "*"
   },
   "devDependencies": {
-    "@algolia/autocomplete-js": "^1.7.4",
-    "cssnano": "^4.1.10",
-    "instantsearch.js": "^4.56.2"
+    "@algolia/autocomplete-js": "^1.18.0",
+    "instantsearch.js": "^4.77.3"
   }
 }
diff --git a/packages/instant-meilisearch/package.json b/packages/instant-meilisearch/package.json
@@ -48,7 +48,6 @@
     "meilisearch": "^0.48.2"
   },
   "devDependencies": {
-    "cssnano": "^4.1.10",
-    "instantsearch.js": "^4.56.2"
+    "instantsearch.js": "^4.77.3"
   }
 }
diff --git a/playgrounds/autocomplete/package.json b/playgrounds/autocomplete/package.json
@@ -21,10 +21,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@algolia/autocomplete-core": "1.17.9",
-    "@algolia/autocomplete-plugin-query-suggestions": "^1.17.9",
-    "@algolia/autocomplete-plugin-tags": "^1.17.9",
-    "@algolia/autocomplete-theme-classic": "^1.17.9",
+    "@algolia/autocomplete-core": "^1.18.0",
+    "@algolia/autocomplete-plugin-query-suggestions": "^1.18.0",
+    "@algolia/autocomplete-plugin-tags": "^1.18.0",
+    "@algolia/autocomplete-theme-classic": "^1.18.0",
     "@meilisearch/autocomplete-client": "*"
   }
 }
diff --git a/playgrounds/autocomplete/src/app.ts b/playgrounds/autocomplete/src/app.ts
@@ -3,6 +3,7 @@ import {
   meilisearchAutocompleteClient,
   getMeilisearchResults,
 } from '@meilisearch/autocomplete-client'
+// @ts-expect-error it doesn't have type declarations...
 import '@algolia/autocomplete-theme-classic'
 
 const client = meilisearchAutocompleteClient({
diff --git a/playgrounds/javascript/index.html b/playgrounds/javascript/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -47,7 +47,6 @@ <h2>Misc</h2>
       </div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
-    <script type="module" src="./src/app.js"></script>
+    <script type="module" src="./src/app.ts"></script>
   </body>
 </html>
diff --git a/playgrounds/javascript/package.json b/playgrounds/javascript/package.json
@@ -5,13 +5,15 @@
   "description": "Instant-meilisearch playground written with vanilla javascript",
   "type": "module",
   "scripts": {
-    "dev": "vite"
+    "dev": "vite",
+    "test:types": "tsc"
   },
   "browserslist": [
     "defaults"
   ],
   "license": "MIT",
   "dependencies": {
-    "@meilisearch/instant-meilisearch": "0.24.0"
+    "@meilisearch/instant-meilisearch": "0.24.0",
+    "instantsearch.js": "^4.77.3"
   }
 }
diff --git a/playgrounds/javascript/src/app.ts b/playgrounds/javascript/src/app.ts
@@ -1,5 +1,14 @@
-/* eslint-disable no-undef */
 import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
+import { default as instantsearch } from 'instantsearch.js'
+import {
+  clearRefinements,
+  configure,
+  hits,
+  pagination,
+  refinementList,
+  searchBox,
+  sortBy,
+} from 'instantsearch.js/es/widgets'
 
 const search = instantsearch({
   indexName: 'steam-video-games',
@@ -13,7 +22,7 @@ const search = instantsearch({
 })
 
 search.addWidgets([
-  instantsearch.widgets.sortBy({
+  sortBy({
     container: '#sort-by',
     items: [
       { value: 'steam-video-games', label: 'Relevant' },
@@ -27,33 +36,33 @@ search.addWidgets([
       },
     ],
   }),
-  instantsearch.widgets.searchBox({
+  searchBox({
     container: '#searchbox',
   }),
-  instantsearch.widgets.clearRefinements({
+  clearRefinements({
     container: '#clear-refinements',
   }),
-  instantsearch.widgets.refinementList({
+  refinementList({
     container: '#genres-list',
     attribute: 'genres',
   }),
-  instantsearch.widgets.refinementList({
+  refinementList({
     container: '#players-list',
     attribute: 'players',
   }),
-  instantsearch.widgets.refinementList({
+  refinementList({
     container: '#platforms-list',
     attribute: 'platforms',
   }),
-  instantsearch.widgets.configure({
+  configure({
     hitsPerPage: 6,
     attributesToSnippet: ['description:150'],
   }),
-  instantsearch.widgets.refinementList({
+  refinementList({
     container: '#misc-list',
     attribute: 'misc',
   }),
-  instantsearch.widgets.hits({
+  hits({
     container: '#hits',
     templates: {
       item: `
@@ -72,7 +81,7 @@ search.addWidgets([
       `,
     },
   }),
-  instantsearch.widgets.pagination({
+  pagination({
     container: '#pagination',
   }),
 ])
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/tsconfig.json b/playgrounds/javascript/tsconfig.json
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["src"]
+}
diff --git a/playgrounds/local-react/index.html b/playgrounds/local-react/index.html
@@ -9,6 +9,6 @@
 
   <body>
     <div id="app"></div>
-    <script type="module" src="src/index.jsx"></script>
+    <script type="module" src="src/index.tsx"></script>
   </body>
 </html>
diff --git a/playgrounds/react/index.html b/playgrounds/react/index.html
@@ -9,6 +9,6 @@
 
   <body>
     <div id="app"></div>
-    <script type="module" src="src/index.jsx"></script>
+    <script type="module" src="src/index.tsx"></script>
   </body>
 </html>
diff --git a/playgrounds/react/package.json b/playgrounds/react/package.json
@@ -5,7 +5,8 @@
   "description": "React playground for instant-meilisearch",
   "type": "module",
   "scripts": {
-    "dev": "vite"
+    "dev": "vite",
+    "test:types": "tsc -b"
   },
   "keywords": [
     "react",
@@ -17,9 +18,12 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-instantsearch": "^7.15.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react-instantsearch": "^7.15.3",
     "@meilisearch/instant-meilisearch": "*"
   }
-}
+}
diff --git a/playgrounds/react/src/App.tsx b/playgrounds/react/src/App.tsx
@@ -11,6 +11,7 @@ import {
   SortBy,
   Snippet,
 } from 'react-instantsearch'
+import type { Hit } from 'algoliasearch'
 
 import './App.css'
 import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
@@ -40,6 +41,7 @@ const App = () => (
       <Stats />
       <div className="left-panel">
         <ClearRefinements />
+        {/* TODO: https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/react/#replace-defaultrefinement-with-initialuistate-on-instantsearch */}
         <SortBy
           defaultRefinement="steam-video-games"
           items={[
@@ -76,7 +78,7 @@ const App = () => (
   </div>
 )
 
-const Hit = ({ hit }) => {
+const Hit = ({ hit }: { hit: Hit<any> }) => {
   return (
     <div key={hit.id}>
       <div className="hit-name">
@@ -85,7 +87,7 @@ const Hit = ({ hit }) => {
       <div className="hit-name">
         <Highlight attribute="genres" hit={hit} />
       </div>
-      <img src={hit.image} align="left" alt={hit.name} />
+      <img src={hit.image} alt={hit.name} style={{verticalAlign: "left"}} />
       <div className="hit-name">
         <Snippet attribute="description" hit={hit} />
       </div>
diff --git a/playgrounds/react/src/index.tsx b/playgrounds/react/src/index.tsx
@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App'
 
-createRoot(document.getElementById('app')).render(
+createRoot(document.getElementById('app')!).render(
   <StrictMode>
     <App />
   </StrictMode>
diff --git a/playgrounds/react/src/vite-env.d.ts b/playgrounds/react/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/playgrounds/react/tsconfig.app.json b/playgrounds/react/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "jsx": "react-jsx",
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["src"]
+}
diff --git a/playgrounds/react/tsconfig.json b/playgrounds/react/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/playgrounds/react/tsconfig.node.json b/playgrounds/react/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+        "target": "ES2022",
+        "lib": ["ES2023"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["vite.config.ts"]
+}
diff --git a/playgrounds/vue3/index.html b/playgrounds/vue3/index.html
@@ -2,12 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/playgrounds/vue3/package.json b/playgrounds/vue3/package.json
@@ -5,13 +5,16 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test:types": "vue-tsc -b"
   },
   "devDependencies": {
-    "vue-instantsearch": "^4.10.8",
+    "vue-instantsearch": "^4.20.4",
     "@meilisearch/instant-meilisearch": "*",
     "vue": "^3.5.13",
+    "@vue/tsconfig": "^0.7.0",
     "instantsearch.css": "^8.5.1",
-    "@vitejs/plugin-vue": "^5.2.1"
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vue-tsc": "^2.2.0"
   }
 }
diff --git a/playgrounds/vue3/src/App.vue b/playgrounds/vue3/src/App.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
+
+const searchClient = instantMeiliSearch(
+  'https://ms-adf78ae33284-106.lon.meilisearch.io',
+  'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303',
+  { finitePagination: true }
+).searchClient
+</script>
+
 <template>
   <div>
     <header class="header">
@@ -51,23 +61,6 @@
   </div>
 </template>
 
-<script>
-import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
-
-export default {
-  data() {
-    return {
-      searchClient: instantMeiliSearch(
-        'https://ms-adf78ae33284-106.lon.meilisearch.io',
-        'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303',
-        {
-          finitePagination: true,
-        }
-      ).searchClient,
-    }
-  },
-}
-</script>
 <style>
 body,
 h1 {
diff --git a/playgrounds/vue3/src/main.ts b/playgrounds/vue3/src/main.ts
diff --git a/playgrounds/vue3/src/vite-env.d.ts b/playgrounds/vue3/src/vite-env.d.ts
diff --git a/playgrounds/vue3/tsconfig.app.json b/playgrounds/vue3/tsconfig.app.json
diff --git a/playgrounds/vue3/tsconfig.json b/playgrounds/vue3/tsconfig.json
diff --git a/playgrounds/vue3/tsconfig.node.json b/playgrounds/vue3/tsconfig.node.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -45,8 +45,7 @@`
`45`	`45`	`"@meilisearch/instant-meilisearch": "*"`
`46`	`46`	`},`
`47`	`47`	`"devDependencies": {`
`48`		`- "@algolia/autocomplete-js": "^1.7.4",`
`49`		`- "cssnano": "^4.1.10",`
`50`		`- "instantsearch.js": "^4.56.2"`
	`48`	`+ "@algolia/autocomplete-js": "^1.18.0",`
	`49`	`+ "instantsearch.js": "^4.77.3"`
`51`	`50`	`}`
`52`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,6 @@`
`48`	`48`	`"meilisearch": "^0.48.2"`
`49`	`49`	`},`
`50`	`50`	`"devDependencies": {`
`51`		`- "cssnano": "^4.1.10",`
`52`		`- "instantsearch.js": "^4.56.2"`
	`51`	`+ "instantsearch.js": "^4.77.3"`
`53`	`52`	`}`
`54`	`53`	`}`