chore: migrate to vite and vitest

BoostV · Nov 18, 2022 · 4944d27 · 4944d27
1 parent 540a750
commit 4944d27
Show file tree

Hide file tree

Showing 32 changed files with 2,263 additions and 3,479 deletions.
diff --git a/.env.development b/.env.development
@@ -1 +1 @@
-NEXT_PUBLIC_API_SERVER=http://localhost:9090/v1.0
+VITE_PUBLIC_API_SERVER=http://localhost:9090/v1.0
diff --git a/.env.production b/.env.production
@@ -1 +1 @@
-NEXT_PUBLIC_API_SERVER=http://localhost:9090/v1.0
+VITE_PUBLIC_API_SERVER=http://localhost:9090/v1.0
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,4 +1,4 @@
 {
   "plugins": ["react", "prettier"],
-  "extends": ["next/core-web-vitals", "prettier"]
+  "extends": ["prettier"]
 }
diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,4 @@ db
 /specification.yml
 .vscode
 tsconfig.tsbuildinfo
+dist
diff --git a/.prettierignore b/.prettierignore
@@ -3,6 +3,7 @@
 .github
 node_modules
 out
+dist
 public
 tmp
 openapi

diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Process Optimizer Frontend</title>
+    <script type="module" src="/src/jquery-shim.ts"></script>
+    <script type="module" src="/src/main.tsx"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/jest.config.js b/jest.config.js
diff --git a/next-env.d.ts b/next-env.d.ts
diff --git a/next.config.js b/next.config.js
diff --git a/package.json b/package.json
@@ -3,13 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "build-static": "next build && next export",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build-static": "tsc && vite build --outDir out",
+    "start": "vite preview",
     "lint": "eslint .",
     "formatAll": "prettier --write .",
-    "test": "jest",
+    "prettier": "prettier --check .",
+    "test": "vitest",
     "prepare": "husky install",
     "openapi": "openapi-generator-cli generate  -i https://raw.githubusercontent.com/BoostV/process-optimizer-api/v2.1.0/optimizerapi/openapi/specification.yml -g typescript-fetch -o ./openapi --additional-properties=nullSafeAdditionalProps && prettier --write ./openapi"
   },
@@ -30,7 +31,6 @@
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "4.1.0",
     "immer": "^9.0.15",
-    "next": "^12.1.6",
     "prettier": "2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -43,7 +43,6 @@
   },
   "devDependencies": {
     "@openapitools/openapi-generator-cli": "2.5.1",
-    "@swc/jest": "^0.2.21",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
@@ -57,13 +56,15 @@
     "git-revision-webpack-plugin": "^5.0.0",
     "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.1",
     "jest-dom": "^4.0.0",
     "jest-environment-jsdom": "^28.1.1",
     "lint-staged": "^13.0.3",
     "node-mocks-http": "^1.10.1",
     "react-devtools": "^4.24.7",
     "rimraf": "^3.0.2",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "vite": "^3.2.4",
+    "@vitejs/plugin-react": "^2.2.0",
+    "vitest": "^0.25.2"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
diff --git a/pages/_document.tsx b/pages/_document.tsx
diff --git a/pages/index.tsx b/pages/index.tsx
diff --git a/src/app.tsx b/src/app.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import CssBaseline from '@mui/material/CssBaseline'
+import { GlobalStateProvider } from '@/context/global'
+import ExperimentContainer from './experiment-container'
+import createEmotionCache from './createEmotionCache'
+import { CacheProvider } from '@emotion/react'
+import Home from '@/components/home/home'
+
+const emotionCache = createEmotionCache()
+
+export default function MyApp() {
+  return (
+    <CacheProvider value={emotionCache}>
+      <GlobalStateProvider>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        <Home />
+        <ExperimentContainer experimentId="4b1e207a-85e5-4800-b4f3-cfeb21338798" />
+      </GlobalStateProvider>
+    </CacheProvider>
+  )
+}
diff --git a/src/components/home/home.tsx b/src/components/home/home.tsx
@@ -15,11 +15,9 @@ import { MouseEvent, useCallback, useReducer, useState } from 'react'
 import { useDropzone } from 'react-dropzone'
 import Layout from '@/components/layout/layout'
 import useStyles from './home.style'
-import { NextRouter, useRouter } from 'next/router'
 import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 import DeleteIcon from '@mui/icons-material/Delete'
-import { buildPath, paths } from '../../../paths'
 import { ExperimentType } from '@/types/common'
 import { useGlobal } from '@/context/global'
 import { v4 as uuid } from 'uuid'
@@ -33,7 +31,6 @@ type UploadMessage = {
 
 export default function Home() {
   const { classes } = useStyles()
-  const router: NextRouter = useRouter()
   const { state, dispatch } = useGlobal()
   const [isSnackbarOpen, setSnackbarOpen] = useState(false)
   const [deletionState, dispatchDeletion] = useReducer(reducer, {
@@ -45,13 +42,10 @@ export default function Home() {
   })
   const [tempExperiment, setTempExperiment] = useState<ExperimentType>()
 
-  const saveExperimentLocally = useCallback(
-    (experiment: ExperimentType) => {
-      localStorage.setItem(experiment.id, JSON.stringify({ experiment }))
-      router.push(buildPath(paths.experiment, experiment.id))
-    },
-    [router]
-  )
+  const saveExperimentLocally = useCallback((experiment: ExperimentType) => {
+    localStorage.setItem(experiment.id, JSON.stringify({ experiment }))
+    // router.push(buildPath(paths.experiment, experiment.id))
+  }, [])
 
   const onDrop = useCallback(
     (acceptedFiles: Blob[]) => {
@@ -106,12 +100,13 @@ export default function Home() {
 
   const createNewExperiment = () => {
     deleteExperiments()
-    router.push(buildPath(paths.experiment, uuid()))
+    // router.push(buildPath(paths.experiment, uuid()))
   }
 
   const openSavedExperiment = (key: string) => {
     deleteExperiments()
-    router.push(buildPath(paths.experiment, key))
+    console.log('TODO route to ' + key)
+    // router.push(buildPath(paths.experiment, key))
   }
 
   const getExperimentName = (key: string) => {

diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
@@ -1,13 +1,12 @@
 import {
   AppBar,
   Box,
-  Button,
   Switch,
   Toolbar,
   Typography,
   FormControlLabel,
+  Button,
 } from '@mui/material'
-import Link from 'next/link'
 import useStyles from './layout.style'
 import { useGlobal } from '@/context/global'
 import { VersionInfo } from '@/components/version-info'
@@ -106,9 +105,7 @@ export default function Layout({ children }: Props) {
             Brownie Bee
           </Typography>
           <div className={classes.links}>
-            <Link href="/" passHref>
-              <Button className={classes.link}>Home</Button>
-            </Link>
+            <Button className={classes.link}>Home</Button>
           </div>
           <div
             onClick={() => {

diff --git a/src/components/plots/bokeh-plot/index.ts b/src/components/plots/bokeh-plot/index.ts
@@ -1,6 +1,3 @@
-import dynamic from 'next/dynamic'
+import React from 'react'
 
-// This is a workaround for Next.js to work with BokehJS
-export const BokehPlot = dynamic(() => import('./bokeh-plot'), {
-  ssr: false,
-})
+export const BokehPlot = React.lazy(() => import('./bokeh-plot'))
diff --git a/src/context/experiment/experiment-context.test.tsx b/src/context/experiment/experiment-context.test.tsx
@@ -16,7 +16,7 @@ const ExperimentWrapper: FC<{ children: React.ReactNode }> = ({ children }) => (
 
 describe('useExperiment', () => {
   it('fails if called outside provider', async () => {
-    console.error = jest.fn()
+    console.error = vi.fn()
     expect(() => renderHook(() => useExperiment())).toThrow(
       'useExperiment must be used within an ExperimentProvider'
     )