Merge pull request #586 from systemli/Move-from-Webpack-to-Vite

⚡️Move from Webpack to Vite
systemli · Apr 26, 2024 · 44afda6 · 44afda6
2 parents 0a6c3e3 + 910cc45
commit 44afda6
Show file tree

Hide file tree

Showing 72 changed files with 1,433 additions and 6,266 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/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+  },
+}
diff --git a/.eslintrc.json b/.eslintrc.json
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: 'lts/*'
+          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@v4
@@ -35,19 +35,15 @@ jobs:
     name: Build
     runs-on: ubuntu-22.04
     needs: [test]
-    strategy:
-      matrix:
-        node-version: ["18", "20", "current"]
-
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Set up Node (${{ matrix.node-version }})
+      - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
-          cache: "yarn"
+          node-version: 'lts/*'
+          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": {
     "@emoji-mart/data": "^1.1.2",
@@ -20,11 +24,12 @@
     "@tanstack/react-query": "^4.10.3",
     "@tanstack/react-query-devtools": "^4.11.0",
     "emoji-mart": "^5.5.2",
+    "@types/react": "^18.2.0",
+    "dayjs": "^1.11.10",
     "jwt-decode": "^4.0.0",
     "leaflet": "^1.9.4",
     "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",
@@ -37,13 +42,9 @@
     "react-router-dom": "^6.21.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.3",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.3",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
+    "@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.12",
     "@types/jwt-decode": "^3.1.0",
@@ -52,55 +53,24 @@
     "@types/node": "^20.12.2",
     "@types/react-dom": "^18.2.23",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.4.0",
-    "@webpack-cli/serve": "^2.0.5",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^9.1.3",
-    "css-loader": "^6.10.0",
-    "cssnano": "^6.1.2",
-    "dotenv": "^16.4.5",
-    "dotenv-expand": "^11.0.6",
-    "dotenv-webpack": "^8.1.0",
-    "eslint": "^8.57.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.9.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.1.3",
+    "cssnano": "^6.0.2",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^6.2.0",
-    "eslint-webpack-plugin": "^4.1.0",
-    "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": "^24.0.0",
     "jwt-encode": "^1.0.1",
-    "postcss": "^8.4.38",
-    "postcss-loader": "^8.1.1",
-    "postcss-remove-google-fonts": "^1.2.4",
-    "prettier": "^3.2.5",
-    "react-dev-utils": "^12.0.1",
-    "resolve": "^1.22.1",
-    "resolve-url-loader": "^5.0.0",
-    "style-loader": "^3.3.4",
-    "terser-webpack-plugin": "^5.3.10",
-    "ts-jest": "^29.1.2",
-    "ts-loader": "^9.5.1",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.4.3",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.91.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4",
-    "webpack-manifest-plugin": "^5.0.0",
-    "webpack-merge": "^5.10.0"
+    "postcss": "^8.4.32",
+    "postcss-remove-google-fonts": "^1.2.3",
+    "prettier": "^3.1.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vitest": "^1.1.3",
+    "vitest-fetch-mock": "^0.2.2"
   },
   "packageManager": "yarn@1.22.19"
 }
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'