Switch to Vite

GrahamSH-LLK · GrahamSH-LLK · commit d2f9f611bba4 · 2025-02-11T04:08:00.000Z
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+__screenshots__
diff --git a/config-overrides.js b/config-overrides.js
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="manifest.json" />
+    <title>WPILib Blocks</title>
+  <script type="module" src="src/index.tsx"></script></head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,16 +17,15 @@
     "re-resizable": "^6.10.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-scripts": "5.0.1",
     "react-syntax-highlighter": "^15.6.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "node --stack-size=50000 node_modules/react-scripts/scripts/start.js",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "gen": "node src/Blockly/gen.js"
+    "start": "vite",
+    "build": "vite build",
+    "test": "vitest",
+    "gen": "node src/Blockly/gen.js",
+    "dev": "vite"
   },
   "eslintConfig": {
     "extends": [
@@ -48,13 +47,18 @@
   },
   "devDependencies": {
     "@shadcn/ui": "^0.0.4",
+    "@types/node": "^22.10.0",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
-    "customize-cra": "^1.0.0",
+    "playwright": "^1.50.1",
     "postcss": "^8.4.49",
-    "raw-loader": "^4.0.2",
     "react-app-rewired": "^2.2.1",
     "tailwindcss": "^3.4.15",
-    "typescript-strict-plugin": "^2.4.4"
+    "typescript-strict-plugin": "^2.4.4",
+    "vite": "^6.0.0",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^3.0.5",
+    "vitest-browser-react": "^0.1.0"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -258,7 +258,7 @@ const App: React.FC = () => {
   const [popconfirmLoading, setPopconfirmLoading] = useState(false);
 
   const ignoreEffect = () => {
-    if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
+    if (!import.meta.env.MODE || import.meta.env.MODE === 'development') {
       // Development mode.
       return (renderCounter.current < 2);
     }
diff --git a/src/setupTests.js b/src/setupTests.js
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tests/App.test.tsx b/tests/App.test.tsx
@@ -0,0 +1,9 @@
+import { render } from "vitest-browser-react";
+import App from "../src/App.tsx";
+import { expect, test } from "vitest";
+
+test("renders modal", async () => {
+  const { getByText } = render(<App />);
+
+  await expect.element(getByText("Welcome to WPILib Blocks!")).toBeVisible();
+});
diff --git a/tests/setupTests.ts b/tests/setupTests.ts
@@ -0,0 +1 @@
+import 'vitest-browser-react'
diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2015",
+    "useDefineForClassFields": true,
+    "lib": ["ES2015", "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,
+    "noImplicitAny": true
+  },
+  "include": ["src", "tests/App.test.tsx", "tests/setupTests.ts"]
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,11 +1,11 @@
-{
+/*{
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "baseUrl": "./",
     "outDir": "dist",
     "declaration": true,
     "declarationMap": true,
-    "module": "ES2015",
+    "module": "ESNext",
     "moduleResolution": "node",
     "target": "ES2015",
     "jsx": "react",
@@ -14,3 +14,11 @@
     "noImplicitAny": true
   }
 }
+*/
+{
+   "files": [],
+   "references": [
+     { "path": "./tsconfig.app.json" },
+     { "path": "./tsconfig.node.json" }
+   ]
+ }
diff --git a/tsconfig.node.json b/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/vite.config.ts b/vite.config.ts
@@ -0,0 +1,24 @@
+/// <reference types="vitest" />
+/// <reference types="@vitest/browser/matchers" />
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()],
+  server: {
+    allowedHosts: [
+      "5173-wpilibsuite-systemcoreb-r536zqlysb3.ws-us117.gitpod.io",
+    ],
+  },
+  test: {
+   setupFiles: ['./tests/setupTests.ts'],
+
+    browser: {
+      provider: "playwright",
+      enabled: true,
+      instances: [{ browser: "chromium" }],
+      headless: true,
+    },
+  },
+});

Original file line number	Diff line number	Diff line change
`@@ -258,7 +258,7 @@ const App: React.FC = () => {`
`258`	`258`	`const [popconfirmLoading, setPopconfirmLoading] = useState(false);`
`259`	`259`
`260`	`260`	`const ignoreEffect = () => {`
`261`		`- if (!process.env.NODE_ENV \|\| process.env.NODE_ENV === 'development') {`
	`261`	`+ if (!import.meta.env.MODE \|\| import.meta.env.MODE === 'development') {`
`262`	`262`	`// Development mode.`
`263`	`263`	`return (renderCounter.current < 2);`
`264`	`264`	`}`