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

13577 Package changes for Vue3 (PROTOTYPE) #444

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

severinbeauvais
Copy link
Collaborator

@severinbeauvais severinbeauvais commented Sep 14, 2022

Issue #: bcgov/entity#13577

Description of changes:

  • updated packages (WIP) for Vue3
  • app version = 5.0.0
  • DO NOT MERGE (and please do not delete, either)

Now, npm i succeeds in this project (and npm lint). However, it still does not build (and cannot be tested) because a lot of code needs to be refactored. Also, all common and shared imports have been removed since they are not compatible at the moment. So this Pull Request is to show what packages need to be updated.

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the bcrs-entities-create-ui license (Apache 2.0).

@severinbeauvais severinbeauvais self-assigned this Sep 14, 2022
- app version = 5.0.0
- DO NOT MERGE
'@vue/standard',
'@vue/typescript'
// '@vue/typescript/recommended'
Copy link
Collaborator Author

@severinbeauvais severinbeauvais Sep 14, 2022

Choose a reason for hiding this comment

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

I'm thinking lines 9 and 11 are worthy changes but I'm trying to limit the impact of the upgrade. We can use recommended lint rules -- and fix what it finds -- later.

@@ -1,3 +1,3 @@
> 1%
last 2 versions
not ie <= 10
not dead
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This should remove polyfills for IE11 and maybe other old browsers.

I saw somewhere that Vue3 is not compatible with IE11 anyway, so I think this is a good change.

"@bcrs-shared-components/nature-of-business": "1.0.3",
"@bcrs-shared-components/staff-comments": "1.2.0",
"@bcrs-shared-components/staff-payment": "2.0.1",
"@bcrs-shared-components/web-chat": "2.0.0",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I had to remove these dependencies (and sbc-common-components below) because they are not upgraded and they cause package conflicts.

"@bcrs-shared-components/staff-comments": "1.2.0",
"@bcrs-shared-components/staff-payment": "2.0.1",
"@bcrs-shared-components/web-chat": "2.0.0",
"@mdi/font": "^5.5.55",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I moved this to Dev Dependencies as per some examples I saw. It will be pretty obvious if this change doesn't work (once the project builds and runs).

"@sentry/browser": "^5.21.1",
"@sentry/integrations": "^5.21.1",
"@vue/compat": "^3.2.39",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

May not be needed if we don't need any Vue2 backward-compatibility features. See also compatConfig in vue.config.js.

If we go pure Vue3 then we probably don't need this package. To be determined later.

"vue-the-mask": "^0.11.1",
"vue2-filters": "^0.10.0",
"vuelidate": "^0.7.5",
"vuetify": "^2.3.9",
"vuex": "^3.5.1"
"vuetify": "3.0.0-beta.4",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

We really should postpone this upgrade until Vuetify is out of beta.

"typescript": "^3.9.7",
"vue-cli-plugin-vuetify": "^2.0.7",
"typescript": "^4.8.3",
"vue-class-component": "8.0.0-rc.1",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

We really should postpone this upgrade until this is released.

Possibly, if we refactor everything from Class API to the other option (not the same as Composition API) then we won't need this package or vue-property-decorator below.

"vue-plugin-helper-decorator": "^0.0.12",
"vue-property-decorator": "^8.5.1",
"vue-template-compiler": "2.6.12",
"vue-property-decorator": "10.0.0-rc.3",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This package depends on vue-class-component above.

"vuex-class": "^0.3.2",
"vuex-module-decorators": "^0.16.1"
"vuex-composition-helpers": "^1.1.2",
"vuex-module-decorators": "^2.0.0",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

There's a lot of discussion on whether the store decorators work in Vue3. (I think they do but I didn't get far enough to test them.)

Since Vuex is deprecated in Vue3, there's also discussion about using pinia instead.

"flush-promises": "^1.0.2",
"intersection-observer": "^0.12.0",
"s-vuex-class": "^0.4.1",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This may be a replacement or shim for the Vuex class decorators. See also vuex-module-decorators below.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Ideally, we shouldn't have any shims or compatibility packages or other temporary code in our project (since that's tech debt).

"vuex-module-decorators": "^0.16.1"
"vuex-composition-helpers": "^1.1.2",
"vuex-module-decorators": "^2.0.0",
"webpack-plugin-vuetify": "2.0.0-alpha.11"
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I believe this replaces vuetify-loader in the old code.

}
}
})
},
Copy link
Collaborator Author

@severinbeauvais severinbeauvais Sep 14, 2022

Choose a reason for hiding this comment

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

This config was recommended by the Vue3 migration site (see step 3).

If we go pure Vue3 then we probably don't need this config. To be determined later.

@severinbeauvais severinbeauvais changed the title 13577 Upgrade to Vue3 (WIP) 13577 Package changes for Vue3 (PROTOTYPE) Sep 14, 2022
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.

1 participant