refactor: move to vite + ts + swc

src/App.css

@@ -1,10 +1,10 @@
-@font-face {
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
+
+/* @font-face {
 	font-family: 'Classic Console Neue';
 	src: local('Classic Console Neue'),
 		url('https://fonts.srizan.dev/clacon2.ttf') format('truetype');
-}
-
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
+} */
 
 .titleHeader {
 	color: #4af626;

src/FunctionalityCard.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
@@ -6,7 +5,7 @@ import Typography from '@mui/material/Typography';
 import InitModal from './InitModal.js';
 import PluginsModal from './PluginsModal.js';
 
-function cardChooser(command) {
+function cardChooser(command: string) {
   switch (command) {
     case 'init':
       return <InitModal />
@@ -17,7 +16,8 @@ function cardChooser(command) {
   }
 }
 
-export default function FunctionalityCard({ command, description }) {
+export default function FunctionalityCard(props: Props) {
+  const { command, description } = props
   return (
     <Card sx={{ width: window.innerWidth / 2 }} variant='outlined'>
       <CardContent>
@@ -34,4 +34,9 @@ export default function FunctionalityCard({ command, description }) {
       </CardActions>
     </Card>
   );
+}
+
+interface Props {
+  command: string
+  description: string
 }

src/InitModal.tsx

@@ -6,16 +6,16 @@ import Modal from '@mui/material/Modal';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
 import TextField from '@mui/material/TextField';
 import Checkbox from '@mui/material/Checkbox';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import type { IpcRendererEvent } from 'electron'
 import './InitModal.css';
 const { ipcRenderer } = window.require('electron');
 
-// eslint-disable-next-line no-unused-vars
-const style = {
+/* const style = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -26,7 +26,7 @@ const style = {
   boxShadow: 24,
   padding: '20px',
   color: 'white',
-};
+}; */
 
 export default function InitModal() {
   const [open, setOpen] = React.useState(false);
@@ -34,21 +34,21 @@ export default function InitModal() {
   const handleClose = () => setOpen(false);
 
   const [chosenTemplate, setChosenTemplate] = React.useState('');
-  const handleTemplateChange = (event) => {
+  const handleTemplateChange = (event: SelectChangeEvent) => {
     setChosenTemplate(event.target.value);
   };
 
   const [installPackages, setInstallPackages] = React.useState(true);
-  const handlePackagesChange = (event) => {
+  const handlePackagesChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInstallPackages(event.target.checked);
   };
 
   const [chosenPackageManager, setChosenPackageManager] = React.useState('');
-  const handlePackageManagerChange = (event) => {
+  const handlePackageManagerChange = (event: SelectChangeEvent<string>) => {
     setChosenPackageManager(event.target.value);
   };
 
-  const [templates, setTemplates] = React.useState([]);
+  const [templates, setTemplates] = React.useState<Array<TemplateList>>([]);
   React.useEffect(() => {
     fetch('https://raw.githubusercontent.com/sern-handler/create-bot/main/metadata/templateChoices.json')
       .then((res) => res.json())
@@ -71,7 +71,7 @@ export default function InitModal() {
   };
 
   const [projectName, setProjectName] = React.useState('');
-  const handleProjectNameChange = (event) => {
+  const handleProjectNameChange = (event: any) => {
     setProjectName(event.target.value);
   };
 
@@ -83,7 +83,7 @@ export default function InitModal() {
     };
   }, []);
 
-  const handleFolderData = (event, paths) => {
+  const handleFolderData = (_event: IpcRendererEvent, paths: string[]) => {
     const selectedPath = paths && paths.length > 0 ? paths[0] : '';
     setSelectedPath(selectedPath);
   };
@@ -169,7 +169,6 @@ export default function InitModal() {
                     onChange={handlePackagesChange}
                   />
                 }
-                fullWidth
                 label="Install packages while you're at it"
               />
             </FormGroup>
@@ -240,3 +239,8 @@ export default function InitModal() {
     </div>
   );
 }
+
+interface TemplateList {
+  title: string
+  value: string
+}

src/main.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import './main.css';
 import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root')!);
 root.render(
   <React.StrictMode>
     <App />

src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />