fix: use vite instead of parcel in the examples (#2329)

Parcel would delete some random file like identity because it though it was not used, vite is smarter. Also remove unused imports
algolia · Oct 31, 2024 · d360855 · d360855
1 parent 93578a4
commit d360855
Show file tree

Hide file tree

Showing 27 changed files with 2,641 additions and 5,118 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -59,7 +59,7 @@ Some examples of valid commit messages (used as first lines):
 
 To run this project, you will need:
 
-- Node.js ≥ 16 – [nvm](https://github.com/creationix/nvm#install-script) is recommended
+- Node.js ≥ 18 – [nvm](https://github.com/nvm-sh/nvm#install-script) is recommended
 - [Yarn](https://yarnpkg.com)
 
 ## Release

diff --git a/examples/demo/index.html b/examples/demo/index.html
@@ -1,18 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+<head>
+  <meta charset="UTF-8" />
+  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DocSearch v3 - React</title>
+</head>
 
-    <title>DocSearch v3 - React</title>
-  </head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
 
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-
-    <script type="module" src="src/index.js"></script>
-  </body>
 </html>
diff --git a/examples/demo/package.json b/examples/demo/package.json
@@ -4,17 +4,18 @@
   "version": "3.6.2",
   "private": true,
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "build": "parcel build index.html",
-    "start": "parcel index.html"
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@docsearch/css": "3.6.2",
-    "@docsearch/react": "3.6.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "@docsearch/react": "3.6.2"
   },
   "devDependencies": {
-    "parcel": "2.7.0"
+    "@vitejs/plugin-react": "^4.3.3",
+    "vite": "^5.4.10"
   }
 }
diff --git a/examples/demo/favicon.ico → examples/demo/public/favicon.ico b/examples/demo/favicon.ico → examples/demo/public/favicon.ico
diff --git a/examples/demo/src/app.css → examples/demo/src/App.css b/examples/demo/src/app.css → examples/demo/src/App.css
diff --git a/examples/demo/src/App.js → examples/demo/src/App.tsx b/examples/demo/src/App.js → examples/demo/src/App.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { DocSearch } from '@docsearch/react';
 
-import './app.css';
-import '@docsearch/css';
+import './App.css';
+import '@docsearch/css/dist/style.css';
 
 function App() {
   return (
@@ -12,7 +11,7 @@ function App() {
         indexName="vuejs"
         appId="ML0LEBN7FQ"
         apiKey="21cf9df0734770a2448a9da64a700c22"
-        insights
+        insights={true}
       />
     </div>
   );

diff --git a/examples/demo/src/index.js b/examples/demo/src/index.js
diff --git a/examples/demo/src/main.tsx b/examples/demo/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App.js';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
diff --git a/examples/demo/src/vite-env.d.ts b/examples/demo/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/demo/tsconfig.json b/examples/demo/tsconfig.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/examples/demo/vite.config.ts b/examples/demo/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/examples/js-demo/README.md b/examples/js-demo/README.md
diff --git a/examples/js-demo/index.html b/examples/js-demo/index.html
@@ -1,20 +1,21 @@
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+<head>
+  <meta charset="UTF-8" />
+  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DocSearch v3 - Vanilla JavaScript</title>
+</head>
 
-    <title>DocSearch v3 - Vanilla JavaScript</title>
-  </head>
+<body>
+  <div class="container">
+    <h1>DocSearch v3 - Vanilla JavaScript</h1>
 
-  <body>
-    <div class="container">
-      <h1>DocSearch v3 - Vanilla JavaScript</h1>
+    <div id="docsearch"></div>
+  </div>
 
-      <div id="docsearch"></div>
-    </div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
 
-    <script type="module" src="app.js"></script>
-  </body>
 </html>
diff --git a/examples/js-demo/package.json b/examples/js-demo/package.json
@@ -5,14 +5,15 @@
   "private": true,
   "license": "MIT",
   "scripts": {
-    "build": "parcel build index.html",
-    "start": "parcel index.html"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@docsearch/css": "3.6.2",
     "@docsearch/js": "3.6.2"
   },
   "devDependencies": {
-    "parcel": "2.7.0"
+    "vite": "^5.4.10"
   }
 }
diff --git a/examples/js-demo/favicon.ico → examples/js-demo/public/favicon.ico b/examples/js-demo/favicon.ico → examples/js-demo/public/favicon.ico
diff --git a/examples/js-demo/app.css → examples/js-demo/src/app.css b/examples/js-demo/app.css → examples/js-demo/src/app.css
diff --git a/examples/js-demo/app.js → examples/js-demo/src/main.ts b/examples/js-demo/app.js → examples/js-demo/src/main.ts
@@ -1,7 +1,7 @@
-import docsearch from '@docsearch/js/dist/umd';
+import docsearch from '@docsearch/js';
 
 import './app.css';
-import '@docsearch/css';
+import '@docsearch/css/dist/style.css';
 
 docsearch({
   container: '#docsearch',

diff --git a/examples/js-demo/src/vite-env.d.ts b/examples/js-demo/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/js-demo/tsconfig.json b/examples/js-demo/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/lerna.json b/lerna.json
@@ -1,6 +1,10 @@
 {
-  "packages": ["packages/*", "examples/*"],
+  "packages": [
+    "packages/docsearch-css",
+    "packages/docsearch-js",
+    "packages/docsearch-react",
+    "examples/*"
+  ],
   "version": "3.6.2",
-  "npmClient": "yarn",
-  "useWorkspaces": true
+  "npmClient": "yarn"
 }
diff --git a/package.json b/package.json
@@ -28,8 +28,8 @@
     "lint:css": "stylelint **/src/**/*.css",
     "lint": "eslint --ext .js,.ts,.tsx .",
     "playground:build": "yarn workspace @docsearch/react-example build",
-    "playground:start": "yarn workspace @docsearch/react-example start",
-    "playground-js:start": "yarn workspace @docsearch/js-example start",
+    "playground:start": "yarn workspace @docsearch/react-example dev",
+    "playground-js:start": "yarn workspace @docsearch/js-example dev",
     "release": "shipjs prepare",
     "start": "yarn run watch",
     "test:size": "bundlesize",
@@ -41,7 +41,6 @@
     "website:test": "cd packages/website && yarn install && yarn start --no-open"
   },
   "devDependencies": {
-    "@babel/cli": "7.23.4",
     "@babel/plugin-transform-react-jsx": "7.23.4",
     "@babel/preset-env": "7.23.5",
     "@babel/preset-typescript": "7.23.3",
@@ -52,22 +51,16 @@
     "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.1.2",
-    "@testing-library/user-event": "13.5.0",
     "@types/jest": "^29.0.0",
-    "@types/jest-diff": "^24.3.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "5.41.0",
     "@typescript-eslint/parser": "5.41.0",
-    "algoliasearch": "5.11.0",
-    "babel-eslint": "10.1.0",
-    "babel-loader": "9.1.3",
     "babel-plugin-inline-replace-variables": "1.3.1",
     "babel-plugin-module-resolver": "4.0.0",
     "bundlesize2": "0.0.31",
     "cssnano": "4.1.10",
     "cypress": "9.6.1",
-    "dotenv": "16.3.1",
     "eslint": "8.55.0",
     "eslint-config-algolia": "20.0.0",
     "eslint-config-prettier": "8.10.0",
@@ -82,31 +75,26 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "jest": "29.6.1",
     "jest-environment-jsdom": "29.6.1",
-    "jest-watch-typeahead": "1.1.0",
-    "lerna": "4.0.0",
+    "lerna": "8.1.9",
     "postcss": "8.4.25",
     "prettier": "2.7.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rollup": "1.32.1",
-    "rollup-plugin-commonjs": "10.1.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-filesize": "9.1.2",
-    "rollup-plugin-license": "3.2.0",
     "rollup-plugin-terser": "7.0.2",
-    "shipjs": "0.24.4",
+    "shipjs": "0.26.4",
     "start-server-and-test": "1.15.5",
     "stylelint": "14.16.1",
     "stylelint-a11y": "1.2.3",
-    "stylelint-config-prettier": "9.0.3",
     "stylelint-config-sass-guidelines": "9.0.1",
     "stylelint-config-standard": "28.0.0",
     "stylelint-no-unsupported-browser-features": "5.0.4",
     "stylelint-order": "5.0.0",
     "stylelint-prettier": "3.0.0",
     "ts-jest": "28.0.8",
     "typescript": "5.6.3",
-    "watch": "1.0.2",
-    "webpack": "4.44.1"
+    "watch": "1.0.2"
   }
 }
diff --git a/packages/docsearch-react/package.json b/packages/docsearch-react/package.json
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@algolia/autocomplete-core": "1.9.3",
-    "@algolia/autocomplete-preset-algolia": "1.9.3",
+    "@algolia/autocomplete-preset-algolia": "1.17.6",
     "@docsearch/css": "3.6.2",
     "algoliasearch": "^5.11.0"
   },

diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx
@@ -62,7 +62,8 @@ export function DocSearch(props: DocSearchProps) {
 
   const onClose = React.useCallback(() => {
     setIsOpen(false);
-  }, [setIsOpen]);
+    setInitialQuery(props?.initialQuery);
+  }, [setIsOpen, props.initialQuery]);
 
   const onInput = React.useCallback(
     (event: KeyboardEvent) => {

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@algolia/ui-library": "4.0.0-beta.71",
-    "@docsearch/react": "link:../docsearch-react",
+    "@docsearch/react": "3.6.2",
     "@docusaurus/core": "3.5.2",
     "@docusaurus/preset-classic": "3.5.2",
     "@mdx-js/react": "^3.1.0",
@@ -48,5 +48,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "resolutions": {
+    "@docsearch/react": "link:../docsearch-react"
   }
 }