Migrate Frontend stack to Vite/Vitest (streamlit#9165)

## Describe your changes

These changes does the following:
- Remove Create-React-App
- Migrates from Webpack to Vite
- Migrates Jest to Vitest

It's hard to separate these out because CRA provided a lot of the
infrastructure, so to separation it requires reconfiguration.

Generally, the changes to make the tests pass involve the following:
- Migrating some jest specific code to Vitest (I alias jest as vi in
order to make the rest of the code the same and will migrate away from
that in a future PR.
- Some updated matching including:
   - colors are represented as rgba in the end.
- Screenshots (which kinda doesn't make sense, but Playwright selects
the text on double click with Vite)
- We desire images to be relative and it's difficult to do in vite (open
to ideas) the best I got is moving the images for running man to the
public folder to be included and then reference the relative name for
the path.
 
### Stats

- Build time improved CPU performance by 27-41%
- 0 to Dev Server is ~50% less time

## Testing Plan

- Tests are all updated and should pass

---

**Contribution License Agreement**

By submitting this pull request you agree that all contributions to this
project are made under the Apache 2.0 license.

.gitignore

@@ -115,4 +115,6 @@ frontend/cypress/snapshots/linux/1x
 ########################################################################
 .vscode/*
 !.vscode/extensions.json
-!.vscode/launch.json
+!.vscode/launch.json
+
+.swc/

Makefile

@@ -262,7 +262,7 @@ protobuf: check-protoc
 		echo ; \
 		yarn --silent pbjs \
 			../proto/streamlit/proto/*.proto \
-			--path=proto -t static-module --wrap es6 \
+			--path ../proto -t static-module --wrap es6 \
 	) > ./lib/src/proto.js
 
 	@# Typescript type declarations for our generated protobufs

frontend/.eslintrc.js

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+const vitest = require("eslint-plugin-vitest")
+
 module.exports = {
   env: {
     // allow using browser-defined globals like `window` and `document`
@@ -34,8 +36,6 @@ module.exports = {
     // This will display prettier errors as ESLint errors.
     // Make sure this is always the last configuration in the extends array.
     "plugin:prettier/recommended",
-    // Recommended Jest configuration to enforce good testing practices
-    "plugin:jest/recommended",
     // Uses the recommended rules from React Testing Library:
     "plugin:testing-library/react",
     // Uses the recommended rules from lodash
@@ -62,10 +62,12 @@ module.exports = {
     "**/vendor/*",
     "**/node_modules/*",
   ],
-  plugins: ["no-relative-import-paths", "streamlit-custom"],
+  plugins: ["no-relative-import-paths", "streamlit-custom", "vitest"],
   // Place to specify ESLint rules.
   // Can be used to overwrite rules specified from the extended configs
   rules: {
+    // Recommended vitest configuration to enforce good testing practices
+    ...vitest.configs.recommended.rules,
     // Use `const` or `let` instead of `var`
     "no-var": "error",
     // We don't use PropTypes

frontend/app/public/index.html → frontend/app/index.html

@@ -22,18 +22,39 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
-    <link rel="preload" href="%PUBLIC_URL%/static/media/SourceSansPro-Regular.0d69e5ff5e92ac64a0c9.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="%PUBLIC_URL%/static/media/SourceSansPro-SemiBold.abed79cd0df1827e18cf.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="%PUBLIC_URL%/static/media/SourceSansPro-Bold.118dea98980e20a81ced.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="shortcut icon" href="/favicon.png" />
+    <link
+      rel="preload"
+      href="./static/media/SourceSansPro-Regular.DZLUzqI4.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="./static/media/SourceSansPro-SemiBold.sKQIyTMz.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="./static/media/SourceSansPro-Bold.-6c9oR8J.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
 
     <title>Streamlit</title>
 
     <!-- initialize window.prerenderReady to false and then set to true in React app when app is ready for indexing -->
-    <script> window.prerenderReady = false; </script>
+    <script>
+      window.prerenderReady = false
+    </script>
   </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>
   </body>
 </html>

frontend/app/package.json

@@ -3,25 +3,20 @@
   "version": "1.40.0",
   "license": "Apache-2.0",
   "private": true,
+  "type": "module",
   "homepage": "./",
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "env NODE_OPTIONS=--max_old_space_size=8192 ESLINT_NO_DEV_ERRORS=true craco start",
-    "build": "env NODE_OPTIONS=--max_old_space_size=8192 GENERATE_SOURCEMAP=false craco build",
-    "buildFast": "env NODE_OPTIONS=--max_old_space_size=8192 GENERATE_SOURCEMAP=false BUILD_AS_FAST_AS_POSSIBLE=true craco build",
-    "test": "env NODE_OPTIONS=\"--experimental-worker --max_old_space_size=8192\" craco test --watchAll=false --env=../jest/jsdom-polyfill-env.js --runTestsByPath ${TESTPATH}",
-    "testWatch": "env NODE_OPTIONS=\"--experimental-worker --max_old_space_size=8192\" craco test --env=../jest/jsdom-polyfill-env.js --runTestsByPath ${TESTPATH}",
+    "start": "vite",
+    "build": "env NODE_OPTIONS=--max_old_space_size=8192 vite build",
+    "buildFast": "env BUILD_AS_FAST_AS_POSSIBLE=1 vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "testWatch": "vitest",
     "test:coverage": "env NODE_OPTIONS=--max_old_space_size=8192 craco test --env=../jest/jsdom-polyfill-env.js --coverage --watchAll false --watch false ./",
     "typecheck": "tsc --noEmit",
     "lint": "eslint --ext .js --ext .jsx --ext .ts --ext .tsx --max-warnings 0 src"
   },
-  "jest": {
-    "resetMocks": false,
-    "coverageReporters": [
-      "text",
-      "html"
-    ]
-  },
   "dependencies": {
     "@emotion-icons/emotion-icon": "^4.1.0",
     "@emotion-icons/material-outlined": "^3.14.0",
@@ -31,6 +26,8 @@
     "@emotion/serialize": "^1.1.1",
     "@emotion/styled": "^11.10.5",
     "@streamlit/lib": "1.40.0",
+    "@swc/plugin-emotion": "^3.0.9",
+    "@vitejs/plugin-react-swc": "^3.6.0",
     "axios": "^1.7.4",
     "baseui": "12.2.0",
     "classnames": "^2.3.2",
@@ -53,21 +50,19 @@
     "styletron-engine-atomic": "^1.5.0",
     "styletron-react": "^6.1.0",
     "typed-signals": "^2.5.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "vite": "^5.1.5",
+    "vite-plugin-checker": "^0.6.4",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.7",
-    "@babel/plugin-proposal-private-property-in-object": "^7.20.5",
-    "@craco/craco": "^7.0.0",
-    "@emotion/babel-plugin": "^11.7.2",
-    "@emotion/jest": "^11.10.5",
     "@testing-library/dom": "^8.19.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/jest": "^27.4.3",
     "@types/lodash": "^4.14.191",
     "@types/node": "^18.11.17",
     "@types/react": "^18.2.0",
@@ -79,8 +74,8 @@
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
+    "@vitest/coverage-v8": "^2.1.2",
     "axios-mock-adapter": "^1.21.2",
-    "babel-plugin-emotion": "^11.0.0",
     "buffer": "^6.0.3",
     "eslint": "^8.33.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -93,22 +88,22 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-streamlit-custom": "file:../eslint-plugin-streamlit-custom",
+    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-vitest": "^0.5.4",
     "hard-source-webpack-plugin": "^0.13.1",
-    "jest": "^27.4.3",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-fetch-mock": "^3.0.3",
-    "jest-github-actions-reporter": "^1.0.3",
-    "jest-websocket-mock": "^2.4.0",
-    "mini-css-extract-plugin": "^2.4.5",
+    "jsdom": "24.0.0",
+    "polyfill-pseudoclass-has": "^1.0.0",
     "prettier": "^2.8.3",
     "prop-types": "^15.7.2",
-    "react-scripts": "5.0.1",
     "source-map-explorer": "^2.5.3",
     "start-server-and-test": "^1.15.3",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "typescript": "^4.9.5",
     "util": "^0.12.5",
-    "webpack": "5.94.0"
+    "vitest": "^2.1.2",
+    "vitest-canvas-mock": "^0.3.3",
+    "vitest-websocket-mock": "^0.3.0"
   },
   "resolutions": {
     "@types/html-minifier-terser": "^7.0.0",