Migrate from CRA to vite (#58)

* Migrate to vite * Remove ip from .env
acmerobotics · Mar 16, 2021 · 29f78cb · 29f78cb
1 parent fc113cf
commit 29f78cb
Show file tree

Hide file tree

Showing 20 changed files with 253 additions and 180 deletions.
diff --git a/FtcDashboard/dash/.env b/FtcDashboard/dash/.env
@@ -1,2 +1,2 @@
-REACT_APP_HOST=
-REACT_APP_PORT=8000
+VITE_REACT_APP_HOST=
+VITE_REACT_APP_PORT=8000
diff --git a/FtcDashboard/dash/.eslintrc.json b/FtcDashboard/dash/.eslintrc.json
@@ -27,7 +27,6 @@
   "rules": {
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "react/react-in-jsx-scope": "off",
     "react/jsx-filename-extension": [
       1,
       {

diff --git a/FtcDashboard/dash/craco.config.js b/FtcDashboard/dash/craco.config.js
diff --git a/FtcDashboard/dash/public/index.html → FtcDashboard/dash/index.html b/FtcDashboard/dash/public/index.html → FtcDashboard/dash/index.html
@@ -9,5 +9,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>
diff --git a/FtcDashboard/dash/package.json b/FtcDashboard/dash/package.json
@@ -3,14 +3,12 @@
   "version": "0.4.1",
   "private": true,
   "dependencies": {
-    "@craco/craco": "^6.0.0",
     "@headlessui/react": "^0.3.1",
     "@tailwindcss/forms": "^0.2.1",
-    "@tailwindcss/postcss7-compat": "npm:@tailwindcss/postcss7-compat@^2.0.2",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.2.5",
     "husky": "^4.3.5",
     "lint-staged": "^10.5.3",
-    "postcss": "^7.0.35",
+    "postcss": "^8.2.8",
     "react": "17.0.1",
     "react-dom": "^16.9.0",
     "react-draggable": "^4.4.3",
@@ -23,15 +21,13 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
     "styled-components": "^5.2.1",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
-    "typescript": "^4.2.3",
+    "tailwindcss": "^2.0.3",
     "uuid": "^8.3.2"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx,json}' --fix",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'"
   },
@@ -52,6 +48,7 @@
     ]
   },
   "devDependencies": {
+    "@tailwindcss/jit": "^0.1.1",
     "@types/lodash": "^4.14.165",
     "@types/node": "^14.14.12",
     "@types/react": "^17.0.0",
@@ -68,12 +65,16 @@
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.9.1",
     "@typescript-eslint/parser": "^4.9.1",
+    "@vitejs/plugin-react-refresh": "^1.3.1",
     "eslint-config-airbnb-typescript-prettier": "^4.1.0",
     "eslint-config-prettier": "^7.0.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.2.0",
     "eslint-plugin-react": "^7.21.5",
-    "prettier": "^2.2.1"
+    "prettier": "^2.2.1",
+    "typescript": "^4.2.3",
+    "vite": "^2.1.0",
+    "vite-plugin-svgr": "^0.2.0"
   },
   "husky": {
     "hooks": {

diff --git a/FtcDashboard/dash/postcss.config.js b/FtcDashboard/dash/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/jit': {},
+    autoprefixer: {},
+  },
+};
diff --git a/FtcDashboard/dash/public/robots.txt b/FtcDashboard/dash/public/robots.txt
diff --git a/FtcDashboard/dash/src/components/RadialFab/RadialFabChild.tsx b/FtcDashboard/dash/src/components/RadialFab/RadialFabChild.tsx
@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
 
 import { WithChildren } from '../../typeHelpers';

diff --git a/FtcDashboard/dash/src/components/ToolTip.tsx b/FtcDashboard/dash/src/components/ToolTip.tsx
@@ -1,4 +1,4 @@
-import { useRef, FunctionComponent, RefObject, ReactNode } from 'react';
+import React, { useRef, FunctionComponent, RefObject, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
 import styled from 'styled-components';

diff --git a/FtcDashboard/dash/src/containers/ConfigView.tsx b/FtcDashboard/dash/src/containers/ConfigView.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import CustomVariable from './CustomVariable';

diff --git a/FtcDashboard/dash/src/containers/Dashboard.jsx b/FtcDashboard/dash/src/containers/Dashboard.jsx
@@ -13,8 +13,8 @@ class Dashboard extends Component {
   componentDidMount() {
     this.props.dispatch(
       connect(
-        process.env.REACT_APP_HOST || window.location.hostname,
-        process.env.REACT_APP_PORT,
+        import.meta.env['VITE_REACT_APP_HOST'] || window.location.hostname,
+        import.meta.env['VITE_REACT_APP_PORT'],
       ),
     );
     this.props.dispatch(getLayoutPreset());

diff --git a/FtcDashboard/dash/src/containers/LoggingView/CustomVirtualGrid.tsx b/FtcDashboard/dash/src/containers/LoggingView/CustomVirtualGrid.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 
 import {
   GridChildComponentProps,

diff --git a/FtcDashboard/dash/src/containers/LoggingView/LoggingView.tsx b/FtcDashboard/dash/src/containers/LoggingView/LoggingView.tsx
@@ -1,4 +1,4 @@
-import {
+import React, {
   useState,
   useEffect,
   useReducer,

diff --git a/FtcDashboard/dash/src/containers/OpModeView.tsx b/FtcDashboard/dash/src/containers/OpModeView.tsx
@@ -1,4 +1,4 @@
-import { Component, ChangeEvent } from 'react';
+import React, { Component, ChangeEvent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import styled from 'styled-components';

diff --git a/FtcDashboard/dash/src/containers/TelemetryView.tsx b/FtcDashboard/dash/src/containers/TelemetryView.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useSelector } from 'react-redux';
 
 import BaseView, {

diff --git a/FtcDashboard/dash/src/enums/LayoutPreset.tsx b/FtcDashboard/dash/src/enums/LayoutPreset.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { Values } from '../typeHelpers';
 
 import TileGrid from '../components/TileGrid';

diff --git a/FtcDashboard/dash/src/index.jsx b/FtcDashboard/dash/src/index.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import Dashboard from './containers/Dashboard';

diff --git a/FtcDashboard/dash/tsconfig.json b/FtcDashboard/dash/tsconfig.json
@@ -1,11 +1,8 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["vite/client"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +17,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }
diff --git a/FtcDashboard/dash/vite.config.ts b/FtcDashboard/dash/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import reactRefresh from '@vitejs/plugin-react-refresh';
+import svgr from 'vite-plugin-svgr';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [reactRefresh(), svgr()],
+});