Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 17 commits into from
May 12, 2024
Merged

Conversation

sopa301
Copy link
Contributor

@sopa301 sopa301 commented Mar 29, 2024

Fixes #2176

Proposed commit message

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.

Other information

A few things worthy of discussion:

  • The Vite migration guide suggests removing Babel (which supports older browsers), which has been done so. If we decide to retain support for them, we can do so with a plugin.
  • The Vite changes remove the ability to configure the title and source folder for the html file from the config file. However, now that the html file has been moved out of the public folder (by design of Vite), this may not be a big concern. We can use a .env file if we want to be able to edit the title and root folder from another file.
  • The Cypress tests on CI did not work initially and had to be hotfixed by adding "chromeWebSecurity": false into the Cypress config file. Since this is not very extensible to other browsers, we should also find another way to get the tests to work.

@sopa301 sopa301 requested a review from a team March 30, 2024 18:55
@sopa301 sopa301 marked this pull request as ready for review March 30, 2024 18:56
@sopa301 sopa301 removed the request for review from a team April 5, 2024 16:16
@sopa301 sopa301 marked this pull request as draft April 5, 2024 16:16
@sopa301 sopa301 requested a review from a team April 7, 2024 13:20
Copy link
Contributor

@georgetayqy georgetayqy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@georgetayqy georgetayqy requested a review from a team April 8, 2024 04:19
@sopa301 sopa301 marked this pull request as ready for review April 11, 2024 15:24
@@ -19,6 +19,8 @@ node_modules
/frontend/public/
!/frontend/public/favicon.ico
!/frontend/public/index.html
/frontend/.eslintcache
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New files generated when linting.

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { ObserveVisibility } from 'vue-observe-visibility';
import hljs from 'highlight.js';
import router from './router/index';
import './styles/highlight-js-style.css';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Required as the move to Vite somehow broke the existing highlighting mechanism.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the code syntax highlighting is working for me even without this import statement. Could you please check again?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

File added to linting as it was imported into main.ts

Copy link
Member

@MarcusTXK MarcusTXK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, this seems to work locally, and all test cases are passing.

Regarding browser support, it might be good if we could document it somewhere that we support most mobile and desktop evergreen browsers, as they have near full support for all ES6 features (Mainly just looks like Internet Explorer 11 that isn't supported). Perhaps we can add this in either the User Guide Appendix: Troubleshooting or a little footnote somewhere in the Developer guide for easy reference in the future.

@MarcusTXK MarcusTXK requested a review from a team May 2, 2024 03:37
@@ -4,13 +4,13 @@
"description": "[![Build Status](https://travis-ci.org/reposense/RepoSense.svg?branch=master)](https://travis-ci.org/reposense/RepoSense) [![Build status](https://ci.appveyor.com/api/projects/status/gsbkj5qby3pjd6nw/branch/master?svg=true)](https://ci.appveyor.com/project/eugenepeh/reposense/branch/master)",
"author": "",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"serve": "vite preview",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The vite preview command is used to locally preview the production build. It misses various essential functions such as hot reload, so it may not be the best option to choose for our serve script. Let's use the simpler vite command instead to start the dev server.

Copy link
Contributor Author

@sopa301 sopa301 May 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I've updated the command!

I've also removed the import statement and reverted the CSS changes. I still have no idea what was causing it to break initially. Maybe it's the highlighting issue from #2184?

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { ObserveVisibility } from 'vue-observe-visibility';
import hljs from 'highlight.js';
import router from './router/index';
import './styles/highlight-js-style.css';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the code syntax highlighting is working for me even without this import statement. Could you please check again?

@sopa301 sopa301 requested a review from ckcherry23 May 7, 2024 04:15
Copy link
Member

@ckcherry23 ckcherry23 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks @sopa301 for suggesting and handling this migration to Vite! It's a great move that should boost performance and streamline our configuration.

Since it's a significant architectural shift, let's try to get one more approval before merging.

Copy link
Contributor

@vvidday vvidday left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, great job!

@ckcherry23 ckcherry23 merged commit 20526f4 into reposense:master May 12, 2024
8 checks passed
Copy link
Contributor

The following links are for previewing this pull request:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Replace Vue CLI with Vite
5 participants