Migration to Vue 3 and Vuex 4 (supported by TypeScript-Demo-SPA)

[DrFacepalm]

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 the vue components using a useStore 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#294
• vue-class-component
• vue-styled-components

@CMCDragonkai @robert-cronin

[robert-cronin]

So like you alluded to, some of the breaking changes include the removal of typings for $store, the packages yet to be upgraded (there are a few new features that could replace these packages anyway) and general syntax changes

So here are all the things relevant to polykey:

Vue 3:
https://v3.vuejs.org/guide/migration

1. new global API: https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp
2. new v-model syntax: https://v3.vuejs.org/guide/migration/v-model.html#_3-x-syntax
3. new conditionals syntax: https://v3.vuejs.org/guide/migration/key-attribute.html#on-conditional-branches
4. new v-bind: https://v3.vuejs.org/guide/migration/v-bind.html#introduction
5. new render imports: https://v3.vuejs.org/guide/migration/render-function-api.html#overview

Vuex 4:
https://blog.logrocket.com/whats-new-in-vuex-4/

1. It looks like we can create typed interfaces for exposing a typed state now
2. You can now set typed getters/setters/actions/mutations and have them typed and available in the $store object

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).

[CMCDragonkai]

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 js-polykey library. The currently released version is: 0.0.18 as shown here: https://www.npmjs.com/package/@matrixai/polykey

So we need a PR fixing this issue. So therefore:

1. Base this repo of TypeScript-Demo-SPA
2. Port over current UI to vue3 and vuex4
3. Update the current client to use 0.0.18 of js-polykey
4. Figure out the separation of responsibilities between the Chrome Browser process and the Node process. To do this, you must read the CLI code in js-polykey, as that uses GRPC to contact the agent. The GUI pretty much does the same stuff as what the CLI, but in a visual way. https://github.com/MatrixAI/js-polykey/blob/master/src/bin/index.ts

[CMCDragonkai]

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?

[CMCDragonkai]

@robert-cronin can you explain the 4 branches:

If @gideonairex starts on this, should he be working off the mvp branch since it was last updated 14 days ago?

[CMCDragonkai]

Few things I've discovered:

1. In the package.json, remove pretty much everything, push back the typescript-demo-spa stuff, and then add in dependencies as you need them. There's a lot of stuff that's no longer being used or necessary.

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.

[robert-cronin]

yeah you're right, that name isn't all that descriptive but yeah the mvp branch is the branch @gideonairex should be working from 👍