[#2176] Move from Vue CLI to Vite (#2178)

Move from Vue CLI to Vite Vue CLI has been put on maintenance mode and its dependencies have security issues that have not been fixed for a while. Switching to Vite also allows us to introduce Vitest for our unit testing. Let's install Vite and remove Vue CLI.
reposense · May 12, 2024 · 20526f4 · 20526f4
1 parent 4735dcf
commit 20526f4
Show file tree

Hide file tree

Showing 12 changed files with 4,992 additions and 12,202 deletions.
diff --git a/.gitignore b/.gitignore
@@ -19,6 +19,8 @@ node_modules
 /frontend/public/
 !/frontend/public/favicon.ico
 !/frontend/public/index.html
+/frontend/.eslintcache
+/frontend/.stylelintcache
 
 reposense-report/
 docs/_site/

diff --git a/docs/dg/learningBasics.md b/docs/dg/learningBasics.md
@@ -263,7 +263,7 @@ It is necessary for you to learn the basics of Vue.js, Pug, and SCSS before work
 <box type="info" seamless>
 
 Vue.js uses JavaScript as its programming language. Before learning **Vue.js**, you may need to first get yourself familiar with JavaScript syntax first.
-You can refer to the [Javascript documentation](https://devdocs.io/javascript/) to learn the basic syntax. There are plenty of other resources available and please feel free to find the resource most suitable for you.
+You can refer to the [Javascript documentation](https://devdocs.io/javascript/) to learn the basic syntax. There are plenty of other resources available and please feel free to find the resource most suitable for you. Do note that RepoSense uses ES6 over CommonJS.
 </box>
 
 RepoSense uses **Vue.js** (Vue3) in its front-end implementation. In particular, major user interface components, such as [summary view](report.html#summary-view-v-summary-js), [authorship view](report.html#authorship-view-v-authorship-js), and [zoom view](report.html#zoom-view-v-zoom-js), are implemented as Vue components. The corresponding source files are in `frontend/src`.

diff --git a/docs/ug/troubleshooting.md b/docs/ug/troubleshooting.md
@@ -40,3 +40,9 @@ Possibly, you may have some file names with [special characters](https://docs.mi
 ### Some file types are not shown in the file type filter even if I have included them in the file formats when generating the report
 
 The files of these types may be [binary files](https://en.wikipedia.org/wiki/Binary_file). *RepoSense* will group binary files under one single file type `binary`. Common binary files include images (`.jpg`, `.png`), applications (`.exe`), zip files (`.zip`, `.rar`) and certain document types (`.docx`, `.pptx`).
+
+<!-- ------------------------------------------------------------------------------------------------------ -->
+
+### RepoSense doesn't work on the browser
+
+RepoSense uses ES6, a version of JavaScript widely supported by [most browsers](https://caniuse.com/?search=es6). Please use RepoSense with a browser that supports ES6.
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -1,6 +1,8 @@
 {
   "env": {
-    "browser": true
+    "browser": true,
+    "node": true,
+    "es2022": true
   },
   "extends": [
     "airbnb-base",

diff --git a/frontend/babel.config.js b/frontend/babel.config.js
diff --git a/frontend/cypress/cypress.config.js b/frontend/cypress/cypress.config.js
@@ -8,6 +8,7 @@ module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {},
     baseUrl: 'http://localhost:9000',
+    chromeWebSecurity: false,
     specPattern: 'tests/**/*.cy.{js,jsx,ts,tsx}',
     supportFile: 'support.js',
   },

diff --git a/frontend/public/index.html → frontend/index.html b/frontend/public/index.html → frontend/index.html
@@ -4,12 +4,13 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="icon" href="/favicon.ico">
+    <title>RepoSense Report</title>
+    <script type="module" src="/src/main.ts"></script>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but RepoSense Report doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->