algolia · shortcuts · Dec 4, 2024 · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024
@@ -224,6 +224,9 @@ jobs:
       - name: Build the playground
         run: yarn cli build playground javascript ${{ fromJSON(needs.setup.outputs.JAVASCRIPT_DATA).toRun }}
 
+      - name: Build the browser playground
+        run: yarn workspace javascript-playground-browser build
+
       - name: Run common and requester tests
         run: cd clients/algoliasearch-client-javascript && yarn test ${{ !contains(fromJSON(needs.setup.outputs.JAVASCRIPT_DATA).toRun, 'algoliasearch') && '--ignore algoliasearch' || '' }}
 

@@ -6,6 +6,7 @@
   "workspaces": [
     "scripts/",
     "playground/javascript/node/",
+    "playground/javascript/browser/",
     "docs/snippets/javascript/",
     "docs/guides/javascript/",
     "eslint"

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
@@ -1,22 +1,13 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-
-    <link rel="shortcut icon" href="favicon.png" />
-
-    <title>React InstantSearch — Getting started</title>
+    <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 + React + TS</title>
   </head>
-
   <body>
-    <noscript> You need to enable JavaScript to run this app. </noscript>
-
     <div id="root"></div>
-
-    <script type="module" src="src/index.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
@@ -1,33 +1,33 @@
 {
-  "name": "javascript-browser-playground",
-  "version": "0.0.0",
+  "name": "javascript-playground-browser",
   "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "build": "yarn clean && BABEL_ENV=parcel parcel build index.html products.html",
-    "clean": "rm -rf .parcel-cache node_modules dist || true && yarn",
-    "start": "yarn clean && BABEL_ENV=parcel parcel index.html products.html --port 3001"
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
   },
   "dependencies": {
     "algoliasearch": "link:../../../clients/algoliasearch-client-javascript/packages/algoliasearch",
-    "instantsearch.css": "8.5.1",
-    "instantsearch.js": "4.75.5",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-instantsearch": "7.13.8"
+    "instantsearch.css": "^8.5.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-instantsearch": "^7.13.8"
   },
   "devDependencies": {
-    "@parcel/core": "2.13.2",
-    "@parcel/packager-raw-url": "2.13.2",
-    "@parcel/transformer-webmanifest": "2.13.2",
-    "@types/react": "^18.0.9",
-    "https-browserify": "^1.0.0",
-    "parcel": "2.13.2",
-    "stream-http": "^3.1.0",
+    "@eslint/js": "9.15.0",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@vitejs/plugin-react-swc": "3.5.0",
+    "eslint": "9.15.0",
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-refresh": "0.4.14",
+    "globals": "15.12.0",
     "typescript": "5.7.2",
-    "url": "^0.11.0"
-  },
-  "@parcel/resolver-default": {
-    "packageExports": true
+    "typescript-eslint": "8.15.0",
+    "vite": "6.0.1"
   },
   "packageManager": "[email protected]"
 }
@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import {App} from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -1,8 +1,26 @@
 {
-  "extends": "../../../config/base.tsconfig.json",
   "compilerOptions": {
-    "outDir": "dist",
-    "lib": ["dom"]
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": false,
+
+    /* 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": ["*.ts"]
+  "include": ["src"]
 }
@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/panel.tsx","./src/product.tsx","./src/index.tsx","./src/main.tsx","./src/products.tsx","./src/vite-env.d.ts"],"version":"5.7.2"}
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"root":["./src/app.tsx","./src/panel.tsx","./src/product.tsx","./src/index.tsx","./src/main.tsx","./src/products.tsx","./src/vite-env.d.ts"],"version":"5.7.2"}