Migrate to Vue 3 #442
Merged
Migrate to Vue 3 #442
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
kfdm
reviewed
Nov 2, 2023
|
Changes done. Needs rebasing to:
|
kfdm
approved these changes
Nov 2, 2023
When running in debug mode, it is necessary to have the INTERNAL_IPS variable properly set in order to have some functionality. Before we were assuming that it was only necessary for the Django toolbar, however, according the documentation [1] it is also necessary for exposing some variables in the template context, which is something we are going to need in the future. 1: https://docs.djangoproject.com/en/3.2/ref/settings/#internal-ips
In order to have better control of the version we are using, we have placed the Vue import into a dedicated folder that includes the version on its name. In Vue 3, the devtools are not enabled through 'Vue.config'. They are always enabled in the development build of Vue 3, and disabled in the production one. From now on, when running Promgen in debug mode we will use the development build of Vue 3. When running Promgen in production mode we will use the production build of Vue 3, as recommended [1]. In Vue 3, variables that are meant to be reactive (Vue tracks them and updates the DOM whenever their value changes) need to be created making use of the 'ref' or 'reactive' functions. In Vue 3, apps are created with 'Vue.createApp' instead of 'new Vue'. In Vue 3, 'Vue.set' does not exist, so all the code making use of that has been rewritten appropriately. In Vue 3, whitespace characters between elements that contain newlines are removed by default. Because of that, we need to use the 'whitespace' compiler option to change that behaviour, otherwise our UI elements such as buttons will be rendered next to each other without any space in between. In Vue 3, components are not created using 'Vue.component'. Instead, the application instance provides a 'component' method for registering app-scoped components. We have moved the instruction for mounting the Vue app at the end of the 'base.html' file to ensure all the necessary DOM elements are ready. The 'exporter-test-result' component was being mounted on demand using a 'target' property, and also made visible by changing CSS properties from JavaScript. That has been replaced by directly placing the component element in the right location and controlling its visibility with a 'show' property. 1: https://vuejs.org/guide/best-practices/production-deployment.html
vincent-olivert-riera
force-pushed
the
vue-3-migration
branch
from
b628c9d to
f364cbd
Compare
Done 👍🏻 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I have explained all the changes and their reasons in the commit message.
I couldn't split this into different commits without breaking anything.