Move from Webpack to Vite

systemli · Jan 7, 2024 · 928e50e · 928e50e
1 parent e4ad8e1
commit 928e50e
Show file tree

Hide file tree

Showing 70 changed files with 1,217 additions and 5,827 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.env.test b/.env.test
@@ -0,0 +1 @@
+TICKER_API_URL="http://localhost:8080/v1"
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -15,9 +15,14 @@ updates:
         patterns:
           - "@tanstack/*"
           - "@types/react"
-          - "@types/react-helmet"
           - "react"
           - "react-*"
+      leaflet:
+        patterns:
+          - "leaflet"
+          - "leaflet-*"
+          - "react-leaflet"
+          - "react-leaflet-*"
       mui:
         patterns:
           - "@emotion/*"
@@ -26,33 +31,24 @@ updates:
           - "@mui/*"
       development:
         patterns:
-          - "@babel/*"
           - "@testing-library/*"
-          - "@types/*"
+          - "@types/jest"
+          - "@types/jwt-decode"
+          - "@types/node"
+          - "@types/react-dom"
+          - "@types/react-router-dom"
           - "@typescript-eslint/*"
-          - "babel-*"
-          - "css-loader"
+          - "@vitejs/plugin-react"
+          - "@vitest/coverage-v8"
           - "cssnano"
-          - "dotenv"
-          - "dotenv-*"
           - "eslint"
           - "eslint-*"
-          - "file-loader"
-          - "html-webpack-plugin"
-          - "identity-obj-proxy"
-          - "jest"
-          - "jest-*"
+          - "jsdom"
+          - "jwt-encode"
           - "postcss"
           - "postcss-*"
           - "prettier"
-          - "prettier-*"
-          - "resolve"
-          - "resolove-url-loader"
-          - "style-loader"
-          - "terser-webpack-plugin"
-          - "ts-*"
           - "typescript"
-          - "typescript-*"
-          - "url-loader"
-          - "webpack"
-          - "webpack-*"
+          - "vite"
+          - "vitest"
+          - "vitest-*"
diff --git a/.github/workflows/integration.yml b/.github/workflows/integration.yml
@@ -17,14 +17,14 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
-          cache: "yarn"
+          node-version: '18'
+          cache: 'yarn'
 
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
 
       - name: Test
-        run: yarn run test --coverage
+        run: yarn run coverage
 
       - name: Codecov
         uses: codecov/codecov-action@v3
@@ -37,7 +37,7 @@ jobs:
     needs: [test]
     strategy:
       matrix:
-        node-version: ["18", "20", "current"]
+        node-version: ['18', '20', 'current']
 
     steps:
       - name: Checkout
@@ -47,7 +47,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "yarn"
+          cache: 'yarn'
 
       - name: Install Dependencies
         run: yarn install --frozen-lockfile

diff --git a/README.md b/README.md
@@ -2,9 +2,9 @@
 
 ## Development
 
-**Requirement:** Running instance of [ticker](https://github.com/systemli/ticker), default: http://localhost:8080/v1
+**Requirement:** Running instance of [ticker](https://github.com/systemli/ticker), default: <http://localhost:8080/v1>
 
-```
+```shell
 # Install dependencies
 yarn
 
@@ -16,6 +16,6 @@ yarn start
 
 Place configuration in `.env` file and restart/rebuild the ticker-admin
 
-```
-REACT_APP_API_URL=http://localhost:8080/v1
+```shell
+TICKER_API_URL=http://localhost:8080/v1
 ```
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="icon" href="/favicon.ico" type="image/x-icon">
+    <title>Ticker Admin</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>
diff --git a/jest-setup.ts b/jest-setup.ts
diff --git a/jest.config.ts b/jest.config.ts
diff --git a/package.json b/package.json
@@ -1,9 +1,13 @@
 {
   "name": "ticker-admin",
+  "type": "module",
   "scripts": {
-    "start": "webpack serve --config webpack.dev.config.ts",
-    "test": "jest --silent --maxWorkers 2",
-    "build": "webpack --config webpack.prod.config.ts"
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
     "@emotion/react": "^11.11.0",
@@ -17,11 +21,12 @@
     "@mui/material": "^5.14.11",
     "@tanstack/react-query": "^4.10.3",
     "@tanstack/react-query-devtools": "^4.11.0",
+    "@types/react": "^18.2.0",
+    "dayjs": "^1.11.10",
     "jwt-decode": "^4.0.0",
     "leaflet": "^1.9.2",
     "leaflet-draw": "^1.0.4",
     "lodash": "^4.17.21",
-    "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.1",
@@ -34,12 +39,8 @@
     "react-router-dom": "^6.21.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/plugin-transform-runtime": "^7.23.7",
-    "@babel/preset-env": "^7.23.7",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@testing-library/jest-dom": "^6.1.6",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "6.1.6",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.11",
@@ -51,52 +52,21 @@
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",
-    "@webpack-cli/serve": "^1.7.0",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^9.1.3",
-    "css-loader": "^6.8.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.1.3",
     "cssnano": "^6.0.2",
-    "dotenv": "^16.3.1",
-    "dotenv-expand": "^10.0.0",
-    "dotenv-webpack": "^8.0.1",
     "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^6.2.0",
-    "eslint-webpack-plugin": "^4.0.1",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.6.0",
-    "jest": "^29.7.0",
-    "jest-dom": "^4.0.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-fetch-mock": "^3.0.3",
-    "jest-transform-stub": "^2.0.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^23.2.0",
     "jwt-encode": "^1.0.1",
     "postcss": "^8.4.32",
-    "postcss-loader": "^7.3.4",
     "postcss-remove-google-fonts": "^1.2.3",
     "prettier": "^3.1.1",
-    "react-dev-utils": "^12.0.1",
-    "resolve": "^1.22.1",
-    "resolve-url-loader": "^5.0.0",
-    "style-loader": "^3.3.3",
-    "terser-webpack-plugin": "^5.3.10",
-    "ts-jest": "^29.1.1",
-    "ts-loader": "^9.5.1",
-    "ts-node": "^10.9.2",
     "typescript": "^5.3.3",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
-    "webpack-manifest-plugin": "^5.0.0",
-    "webpack-merge": "^5.10.0"
+    "vite": "^5.0.11",
+    "vitest": "^1.1.3",
+    "vitest-fetch-mock": "^0.2.2"
   }
 }
diff --git a/postcss.config.js → postcss.config.cjs b/postcss.config.js → postcss.config.cjs
diff --git a/public/index.html b/public/index.html
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'

diff --git a/src/api/Api.ts b/src/api/Api.ts
@@ -1,4 +1,4 @@
-export const ApiUrl = process.env.REACT_APP_API_URL || 'http://localhost:8080/v1'
+export const ApiUrl = import.meta.env.TICKER_API_URL
 
 type StatusSuccess = 'success'
 type StatusError = 'error'

diff --git a/src/api/Auth.test.ts b/src/api/Auth.test.ts
@@ -2,12 +2,12 @@ import { login } from './Auth'
 
 describe('Auth', function () {
   beforeEach(() => {
-    fetchMock.resetMocks()
-    fetchMock.doMock()
+    fetch.resetMocks()
+    fetch.doMock()
   })
 
   test('login failed', function () {
-    fetchMock.mockResponse(
+    fetch.mockResponse(
       JSON.stringify({
         data: {},
         status: 'error',
@@ -20,7 +20,7 @@ describe('Auth', function () {
   })
 
   test('server error', function () {
-    fetchMock.mockReject()
+    fetch.mockReject()
 
     expect(login('[email protected]', 'password')).rejects.toThrow('Login failed')
   })
@@ -31,7 +31,7 @@ describe('Auth', function () {
       expire: '2022-10-01T18:22:37+02:00',
       token: 'token',
     }
-    fetchMock.mockResponse(JSON.stringify(response), { status: 200 })
+    fetch.mockResponse(JSON.stringify(response), { status: 200 })
 
     expect(login('[email protected]', 'password')).resolves.toEqual(response)
   })

diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
@@ -1,5 +1,5 @@
 import { CircularProgress, Stack, Typography } from '@mui/material'
-import React, { FC } from 'react'
+import { FC } from 'react'
 
 const Loader: FC = () => {
   return (

diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import { Navigate, RouteProps } from 'react-router'
 import useAuth, { Roles } from './useAuth'
 

diff --git a/src/components/common/NamedListItem.tsx b/src/components/common/NamedListItem.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import { Box, Typography } from '@mui/material'
 
 interface Props {

diff --git a/src/components/common/TabPanel.tsx b/src/components/common/TabPanel.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import React, { FC } from 'react'
+import { FC } from 'react'
 
 interface Props {
   children?: React.ReactNode

diff --git a/src/components/message/AttachmentPreview.tsx b/src/components/message/AttachmentPreview.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconButton, ImageListItem } from '@mui/material'
 import { Upload } from '../../api/Upload'

diff --git a/src/components/message/AttachmentsPreview.tsx b/src/components/message/AttachmentsPreview.tsx
@@ -1,5 +1,5 @@
 import { ImageList } from '@mui/material'
-import React, { FC } from 'react'
+import { FC } from 'react'
 import { Upload } from '../../api/Upload'
 import AttachmentPreview from './AttachmentPreview'