chore: switch base tsconfig to github.com/tsconfig/bases (#4325)

https://coveord.atlassian.net/browse/KIT-2614 Ran into this while trying to do [KIT-2611](https://coveord.atlassian.net/browse/KIT-2611). - Update the tsconfig extend to a more recent one - Update the two headless react proejcts to use vite (react scripts is outdated and abandoned, it was causing me problems) [KIT-2611]: https://coveord.atlassian.net/browse/KIT-2611?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --------- Co-authored-by: Louis Bompart <lbompart@coveo.com>
coveo · Aug 30, 2024 · efdc2b2 · efdc2b2
1 parent f3c4c6f
commit efdc2b2
Show file tree

Hide file tree

Showing 21 changed files with 3,778 additions and 10,845 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -10,6 +10,7 @@ module.exports = {
     'www',
     '!.storybook',
     'scripts/deploy/execute-deployment-pipeline.mjs',
+    'build',
   ],
   env: {
     jest: true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "@swc/core": "~1.7.0",
     "@swc/helpers": "~0.5.2",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
+    "@tsconfig/node20": "20.1.4",
     "@types/execa": "^2.0.0",
     "@types/jest": "29.5.12",
     "@types/node": "20.14.12",

diff --git a/packages/samples/headless-commerce-react/.eslintrc.json b/packages/samples/headless-commerce-react/.eslintrc.json
@@ -2,5 +2,6 @@
   "extends": ["plugin:@typescript-eslint/recommended"],
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint"],
-  "root": true
+  "root": true,
+  "ignorePatterns": ["dist"]
 }
diff --git a/packages/samples/headless-commerce-react/index.html b/packages/samples/headless-commerce-react/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Coveo Headless Commerce React Samples</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- Vite uses ES module imports, so we reference the main entry file directly -->
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/samples/headless-commerce-react/package.json b/packages/samples/headless-commerce-react/package.json
@@ -2,20 +2,18 @@
   "name": "@coveo/headless-commerce-react-samples",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@coveo/headless": "2.80.0",
-    "@testing-library/jest-dom": "6.4.8",
-    "@testing-library/react": "16.0.0",
-    "@testing-library/user-event": "14.5.2",
     "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-scripts": "5.0.1"
+    "react-dom": "18.3.1"
   },
   "scripts": {
-    "dev": "react-scripts start",
+    "dev": "vite",
     "build": "nx build",
-    "build:client": "tsc --noEmit && tsc --module commonjs --noEmit",
-    "test": "react-scripts test"
+    "build:client": "vite build",
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "browserslist": {
     "production": [
@@ -28,5 +26,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/react": "16.0.0",
+    "@vitejs/plugin-react": "4.3.1",
+    "vite": "5.4.2",
+    "vitest": "2.0.5"
   }
 }
diff --git a/packages/samples/headless-commerce-react/src/App.test.tsx b/packages/samples/headless-commerce-react/src/App.test.tsx
@@ -1,10 +1,14 @@
 import {render} from '@testing-library/react';
+import {vi, MockInstance} from 'vitest';
 import App from './App';
 
-let errorSpy: jest.SpyInstance;
+let errorSpy: MockInstance<{
+  (...data: unknown[]): void;
+  (message?: unknown, ...optionalParams: unknown[]): void;
+}>;
 
 beforeEach(() => {
-  errorSpy = jest.spyOn(global.console, 'error');
+  errorSpy = vi.spyOn(global.console, 'error');
 });
 
 test('renders without error', async () => {

diff --git a/packages/samples/headless-commerce-react/tsconfig.json b/packages/samples/headless-commerce-react/tsconfig.json
@@ -6,7 +6,6 @@
     "esModuleInterop": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",
     "moduleResolution": "node",
     "noEmit": true,

diff --git a/packages/samples/headless-commerce-react/vite.config.js b/packages/samples/headless-commerce-react/vite.config.js
@@ -0,0 +1,15 @@
+import react from '@vitejs/plugin-react';
+import {defineConfig} from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    open: true,
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/setupTests.ts',
+  },
+});
diff --git a/packages/samples/headless-react/.eslintrc.js b/packages/samples/headless-react/.eslintrc.js
diff --git a/packages/samples/headless-react/.eslintrc.mjs b/packages/samples/headless-react/.eslintrc.mjs
@@ -0,0 +1,16 @@
+import {resolve} from 'path';
+import {fileURLToPath} from 'url';
+
+// Resolve the path to the gts package.json
+const gtsPkgJsonPath = fileURLToPath(
+  new URL('gts/package.json', import.meta.url)
+);
+const gtsPath = resolve(gtsPkgJsonPath, '..');
+
+export default {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'react'],
+  extends: [gtsPath],
+  ignorePatterns: ['build/**', '**/build/**', '**/*.js'],
+};
diff --git a/packages/samples/headless-react/index.html b/packages/samples/headless-react/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Coveo Headless React Samples</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- Vite uses ES module imports, so we reference the main entry file directly -->
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/samples/headless-react/package.json b/packages/samples/headless-react/package.json
@@ -3,6 +3,7 @@
   "description": "Samples with @coveo/headless & React",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@coveo/auth": "1.11.22",
     "@coveo/headless": "2.80.0",
@@ -19,20 +20,18 @@
     "escape-html": "1.0.3",
     "express": "4.19.2",
     "filesize": "10.1.4",
-    "jest-watch-typeahead": "2.2.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "6.26.0",
-    "react-scripts": "5.0.1",
     "typescript": "5.4.5",
     "web-vitals": "3.5.2"
   },
   "scripts": {
-    "dev": "react-scripts start",
+    "dev": "vite",
     "build": "nx build",
-    "build:client": "tsc --noEmit && tsc --module commonjs --noEmit",
-    "build:server": "tsc --project ./tsconfig.server.json",
-    "test": "react-scripts test",
+    "build:client": "vite build",
+    "serve": "vite preview",
+    "test": "vitest run",
     "prod:ssr": "node ./build/server/server/server.js"
   },
   "browserslist": {
@@ -49,11 +48,12 @@
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@vitejs/plugin-react": "3.1.0",
     "cypress": "13.13.1",
     "cypress-repeat": "2.3.5",
     "gts": "5.3.1",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "patch-package": "6.4.7"
+    "patch-package": "6.4.7",
+    "vite": "4.5.3",
+    "vitest": "0.30.1"
   }
 }
diff --git a/packages/samples/headless-react/project.json b/packages/samples/headless-react/project.json
@@ -5,7 +5,7 @@
     "cached:build": {
       "executor": "nx:run-commands",
       "options": {
-        "commands": ["npm run build:client", "npm run build:server"],
+        "commands": ["npm run build:client"],
         "parallel": true,
         "cwd": "packages/samples/headless-react"
       }

diff --git a/packages/samples/headless-react/server/server.tsx b/packages/samples/headless-react/server/server.tsx
@@ -8,6 +8,7 @@ import escape from 'escape-html';
 import express from 'express';
 import fs from 'fs';
 import path from 'path';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import App from '../src/App';

diff --git a/packages/samples/headless-react/src/App.test.tsx b/packages/samples/headless-react/src/App.test.tsx
@@ -3,12 +3,16 @@ import {
   getSampleSearchEngineConfiguration,
 } from '@coveo/headless';
 import {render} from '@testing-library/react';
+import {vi, SpyInstance} from 'vitest';
 import App from './App';
 
-let errorSpy: jest.SpyInstance;
+let errorSpy: SpyInstance<
+  [message?: unknown, ...optionalParams: unknown[]],
+  void
+>;
 
 beforeEach(() => {
-  errorSpy = jest.spyOn(global.console, 'error');
+  errorSpy = vi.spyOn(global.console, 'error');
 });
 
 test('renders without error', async () => {

diff --git a/packages/samples/headless-react/src/App.tsx b/packages/samples/headless-react/src/App.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import {BrowserRouter, NavLink, Routes, Route} from 'react-router-dom';
 import {AboutPage} from './pages/AboutPage';
 import {AnalyticsHook} from './pages/AnalyticsHook';

diff --git a/packages/samples/headless-react/tsconfig.json b/packages/samples/headless-react/tsconfig.json
@@ -1,16 +1,13 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
+    "jsx": "react",
     "esModuleInterop": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",
     "moduleResolution": "node",
     "noEmit": true,
     "resolveJsonModule": true
   },
-  "include": ["src"]
+  "include": ["src", "server"]
 }
diff --git a/packages/samples/headless-react/tsconfig.server.json b/packages/samples/headless-react/tsconfig.server.json
diff --git a/packages/samples/headless-react/vite.config.js b/packages/samples/headless-react/vite.config.js
@@ -0,0 +1,17 @@
+import react from '@vitejs/plugin-react';
+import {defineConfig} from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'build',
+  },
+  server: {
+    open: true,
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/setupTests.ts',
+  },
+});
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "./node_modules/gts/tsconfig-google.json",
+  "extends": "@tsconfig/node20/tsconfig.json",
   "compilerOptions": {
     "skipLibCheck": true
   },