-
Notifications
You must be signed in to change notification settings - Fork 7
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
Migration to Vue 3 and Vuex 4 (supported by TypeScript-Demo-SPA) #54
Comments
So like you alluded to, some of the breaking changes include the removal of typings for So here are all the things relevant to polykey: Vue 3:
Vuex 4:
Note: We will need to get rid of the few libraries we were using that aren't yet supporting vue 3 (we were mostly using these to get typing within vue components of the store and that now looks possible in pure vue and vuex now). |
For @gideonairex, the first thing to do after you have setup the https://github.com/MatrixAI/Typescript-Demo-Spa and a usable Vue playground, is to start on this issue. This issue is about migrating the current repo's code to be based on the Typescript-Demo-Spa and also integrate vue3 and vuex4. This means the current UI can be just ported over. In addition to this, we also need to update the current codebase to depend on the latest So we need a PR fixing this issue. So therefore:
|
To clarify 4. The node process seems unnecessary because all side-effects are occurring in the js-polykey agent. However if we cannot connect via GRPC from the chrome browser process, then we have to rely on the node process as an intermediary to do this. This is not ideal, but if that's the case, then we just have to do this way. @robert-cronin did you find out if it was possible to eliminate the intermediate node process and just have the chrome browser process in the electron application? |
@robert-cronin can you explain the 4 branches: If @gideonairex starts on this, should he be working off the |
Few things I've discovered:
Very important to understand is that we want to use the minimal set of dependencies possible. All other dotfiles can just be removed and replaced with what is coming from the demo spa. |
yeah you're right, that name isn't all that descriptive but yeah the mvp branch is the branch @gideonairex should be working from 👍 |
Currently PolyKey is using vue 2, but a... couple of weeks ago, vue 3 was released and there's a few changes that need to be made.
I'm not sure how much of the frontend work I've done with vue 3 will translate to the electron based work that is PolyKey, so I'll just cover the differences I can see as of right now. Also, it seems like you're using
vuex-class
which doesn't seem to support vue 3, so there's a lot of differences.The typescript-demo-spa should be using the composition API which provides reactive states within components and helpful hooks. https://v3.vuejs.org/api/composition-api.html#setup introduces the idea.
Vuex 4 also brings some changes to the table, and I'm still figuring out some parts but I'll go over what I know.
Mutations, Actions, Getters and State are all now strongly typed in typescript, and it doesn't seem like vuex-module-decorators is supporting Vuex 4 yet. https://dev.to/3vilarthas/vuex-typescript-m4j and vuejs/vuex#994 explains the reasoning behind this, and why the
$store
is now manually declared. It also has an example of how to set it all up. As expected the store can be called from thevue
components using auseStore
hook. The article shows this more in depth.The idea behind Mutations, Actions, Getters seems to remain the same but they are just defined in a much more verbose way without the decorators, so all the functionality should be able to remain. That said, I haven't yet looked into how to get namespaced modules in Vuex 4 though it seems like there is a way.
I can also see that you're using webpack but it seems to be an electron thing and I can't see any similarities to the webpack I've been using so there isn't much to to say there.
Vue dependencies that have been updated:
"vue": "^2.6.11"
->"vue": 3.0.0
"vuex": "^3.4.0"
->"vuex": 4.0.0-beta.4
Not yet updated for vue 3:
vuex-class
vuex-module-decorators
vue-property-decorator
Though support is planned for this Vue 3.0 support kaorun343/vue-property-decorator#294vue-class-component
vue-styled-components
@CMCDragonkai @robert-cronin
The text was updated successfully, but these errors were encountered: