WD-11520 - refactor: migrate to Vite and Vitest (#1757)

* refactor: migrate to Vite and Vitest
canonical · May 27, 2024 · fcb7517 · fcb7517
1 parent a012d17
commit fcb7517
Show file tree

Hide file tree

Showing 153 changed files with 8,560 additions and 15,389 deletions.
diff --git a/.env b/.env
@@ -1,5 +1 @@
 PORT=8036
-# Sass path to allow Sass to reference NPM packages directly
-REACT_APP_SASS_PATH=node_modules:src
-# Extend Eslint config
-EXTEND_ESLINT=true
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc b/.eslintrc
@@ -1,17 +1,30 @@
 {
   "extends": [
-    "react-app",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
     "plugin:prettier/recommended",
-    "plugin:jest/recommended",
     "plugin:import/typescript",
-    "plugin:promise/recommended"
+    "plugin:promise/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "parser": "@typescript-eslint/parser",
-    "project": "./tsconfig.json"
+    "project": "./tsconfig.json",
+    "ecmaFeatures": {
+      "jsx": true,
+    },
   },
-  "plugins": ["prettier", "jest", "promise"],
+  "plugins": [
+    "prettier",
+    "vitest",
+    "promise",
+    "react-refresh",
+    "react",
+    "import",
+  ],
   "root": true,
   "rules": {
     "@typescript-eslint/consistent-type-imports": "error",
@@ -22,8 +35,8 @@
     "react/jsx-filename-extension": [
       1,
       {
-        "extensions": [".js", ".tsx"]
-      }
+        "extensions": [".js", ".tsx"],
+      },
     ],
     "import/prefer-default-export": 0,
     "import/imports-first": ["error", "absolute-first"],
@@ -33,41 +46,57 @@
       {
         "newlines-between": "always",
         "alphabetize": {
-          "order": "asc"
+          "order": "asc",
         },
         "groups": [
           "builtin",
           "external",
           "internal",
           "parent",
           "sibling",
-          "index"
-        ]
-      }
+          "index",
+        ],
+      },
     ],
-    "jest/prefer-expect-assertions": 0,
-    "jest/prefer-inline-snapshots": 0,
-    "jest/lowercase-name": 0,
-    "jest/no-hooks": 0,
+    "vitest/prefer-expect-assertions": 0,
+    "vitest/no-hooks": 0,
     "default-case": 0,
     "no-param-reassign": 0,
     "no-case-declarations": 0,
     "prefer-destructuring": 0,
-    "promise/catch-or-return": ["error", { "allowFinally": true }]
+    "react/no-unescaped-entities": 0,
+    "react/display-name": 0,
+    "@typescript-eslint/no-duplicate-enum-values": 0,
+    "promise/catch-or-return": ["error", { "allowFinally": true }],
+    "react-refresh/only-export-components": [
+      "warn",
+      { "allowConstantExport": true },
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+      },
+    ],
   },
   "settings": {
     "import/resolver": {
       "node": {
-        "paths": ["src"]
-      }
-    }
+        "paths": ["src"],
+      },
+    },
+    "react": {
+      "version": "detect",
+    },
   },
   "globals": {
     "window": true,
     "document": true,
     "localStorage": true,
     "windowLocation": true,
     "jujuDashboardConfig": true,
-    "lightningjs": true
-  }
+    "lightningjs": true,
+  },
 }
diff --git a/HACKING.md b/HACKING.md
@@ -202,7 +202,7 @@ should be used.
 
 ### Testing
 
-The dashboard is unit tested and interaction tested using [Jest](https://jestjs.io/) and [React
+The dashboard is unit tested and interaction tested using [Vitest](https://vitest.dev/) and [React
 Testing Library](https://testing-library.com/).
 
 [Codecov](https://codecov.io/) is used to monitor test coverage on PRs and is

diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#E9531F" />
+
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" href="/app-icon.png" />
+    <script src="/config.js"></script>
+    <title>Juju Dashboard</title>
+    <%- injectScript %>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -9,25 +9,26 @@
     "type": "git",
     "url": "git+https://github.com/canonical/juju-dashboard.git"
   },
+  "type": "module",
   "license": "LGPL-3.0",
   "author": {
     "name": "Canonical Webteam",
     "email": "[email protected]"
   },
   "main": "index.js",
   "scripts": {
-    "build": "react-scripts build && yarn run generate-version-file",
+    "build": "vite build && yarn run generate-version-file",
     "clean": "./scripts/clean-files",
     "eslint-check": "eslint src/",
     "generate-release-tarball": "yarn run build && ./scripts/generate-release-tarball",
     "generate-version-file": "./scripts/generate-version-file",
     "lint": "npmPkgJsonLint . && yarn run eslint-check && yarn run prettier-check && yarn run stylelint-check",
     "prettier-check": "prettier --check 'src/**/*'",
     "serve": "yarn run start",
-    "start": "react-scripts start",
+    "start": "vite",
     "stylelint-check": "stylelint 'src/**/*.scss'",
     "stylelint-fix": "stylelint --fix 'src/**/*.scss'",
-    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!@canonical)/jujulib/dist'",
+    "test": "vitest",
     "typescript-build": "tsc -b"
   },
   "browserslist": {
@@ -42,12 +43,6 @@
       "last 1 safari version"
     ]
   },
-  "jest": {
-    "resetMocks": true,
-    "transformIgnorePatterns": [
-      "node_modules/(?!(@canonical/react-components)/)"
-    ]
-  },
   "dependencies": {
     "@canonical/jujulib": "6.0.0",
     "@canonical/macaroon-bakery": "1.3.2",
@@ -68,15 +63,13 @@
     "lodash.mergewith": "4.6.2",
     "prism-react-renderer": "2.3.1",
     "prismjs": "1.29.0",
-    "process": "0.11.10",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-ga": "3.3.1",
     "react-hot-toast": "2.4.1",
     "react-json-tree": "0.19.0",
     "react-redux": "9.1.2",
     "react-router-dom": "6.23.0",
-    "react-scripts": "5.0.1",
     "react-useportal": "1.0.19",
     "redux": "5.0.1",
     "vanilla-framework": "4.11.0",
@@ -91,7 +84,6 @@
     "@types/clone-deep": "4.0.4",
     "@types/d3": "7.4.3",
     "@types/dompurify": "3.0.5",
-    "@types/jest": "29.5.12",
     "@types/lodash.isequal": "4.5.8",
     "@types/lodash.mergewith": "4.6.9",
     "@types/node": "18.19.33",
@@ -102,15 +94,20 @@
     "@types/redux-mock-store": "1.0.6",
     "@typescript-eslint/eslint-plugin": "7.8.0",
     "@typescript-eslint/parser": "7.8.0",
+    "@vitejs/plugin-react": "4.2.1",
+    "@vitest/coverage-v8": "1.6.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jest": "28.5.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react-refresh": "0.4.6",
+    "eslint-plugin-vitest": "0.5.4",
     "fishery": "2.2.2",
+    "happy-dom": "14.11.0",
     "jest-websocket-mock": "2.5.0",
     "npm-package-json-lint": "7.1.0",
     "postcss": "8.4.38",
@@ -123,8 +120,12 @@
     "stylelint": "16.5.0",
     "stylelint-config-standard-scss": "13.1.0",
     "stylelint-order": "6.0.4",
-    "ts-jest": "29.1.2",
-    "typescript": "5.4.5"
+    "typescript": "5.4.5",
+    "vite": "5.2.0",
+    "vite-plugin-html": "3.2.2",
+    "vite-plugin-node-polyfills": "0.22.0",
+    "vite-tsconfig-paths": "4.3.2",
+    "vitest": "1.6.0"
   },
   "npmpackagejsonlint": {
     "rules": {

diff --git a/public/index.html b/public/index.html