vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

wip: feature/vue3-support #678

Closed
dpschen wants to merge 0 commits from dpschen:feature/vue3-support into main
pull from: dpschen:feature/vue3-support
merge into: vikunja:main
Conversation 9 Commits - Files Changed - +2104 -1863
dpschen commented 2021-08-23 19:56:10 +00:00
Member
Copy Link

Here you go ;)

Here you go ;)
dpschen changed title from feature/vue3-support to wip: feature/vue3-support 2021-08-23 19:56:29 +00:00
dpschen force-pushed feature/vue3-support from f2f9deaff0 to 2b30683e71 2021-08-23 20:18:03 +00:00 Compare
konrad commented 2021-08-23 20:31:41 +00:00
Owner
Copy Link

Oh wow! Impressing!
I've mostly pushed this in the future because it seems like a big, daunting task. And the best excuse was a) lack of plugins and b) no vue migration build (yet).

I guess this will show whether I caught all use cases with the test suite or not. Feel free to add new testcases as you see fit.

You'll probably be interested in these notes from the backlog task for the vue 3 migration (F-270):

Used Vue plugins and their vue 3 status:

Blocking

  • verte - probably not supported, issue: https://github.com/baianat/verte/issues/65
  • vue-easymde - no support, but since it's only a thin wrapper around easymde itself this should not be an issue to rebuild
  • vue-shortkey - project's last commit was dec 2019 so I doubt they will get support for vue 3. Maybe time to rebuild?
  • vue-notification - no support yet, but people seem to be aware of it: https://github.com/euvl/vue-notification/issues/198. On the other hand, do we really need a library for that?

Working

What about linters?

Oh wow! Impressing! I've mostly pushed this in the future because it seems like a big, daunting task. And the best excuse was a) lack of plugins and b) no vue migration build (yet). I guess this will show whether I caught all use cases with the test suite or not. Feel free to add new testcases as you see fit. You'll probably be interested in these notes from [the backlog](https://my.vikunja.cloud/share/UrdhKPqumxDXUbYpEGJLSIyNTwAnbBzVlwdDpRbv/auth) task for the vue 3 migration (F-270): Used Vue plugins and their vue 3 status: ### Blocking * verte - probably not supported, issue: https://github.com/baianat/verte/issues/65 * vue-easymde - no support, but since it's only a thin wrapper around easymde itself this should not be an issue to rebuild * vue-shortkey - project's last commit was dec 2019 so I doubt they will get support for vue 3. Maybe time to rebuild? * vue-notification - no support yet, but people seem to be aware of it: https://github.com/euvl/vue-notification/issues/198. On the other hand, do we really need a library for that? ### Working * vue-advanced-cropper - has support * vue-smooth-dnd - since we'll replace that with sortable.js anyway, not a blocker. Sortable.js [has support for vue 3](https://github.com/SortableJS/vue.draggable.next) * vuex - has support since it's a core library * vue-flatpickr-component - has support * vue-router: https://github.com/vuejs/vue-router-next * vue-drag-resize - see: https://github.com/kirillmurashov/vue-drag-resize/issues/102 * vue-i18n - has support * vuedraggable - has support What about linters?
konrad reviewed 2021-08-23 22:15:35 +00:00
src/components/tasks/edit-task.vue Outdated
@ -103,3 +104,1 @@
component: import('../../components/input/editor'),
loading: LoadingComponent,
error: ErrorComponent,
editor: defineAsyncComponent({
konrad commented 2021-08-23 21:00:34 +00:00
Owner

Is this still required with vite's async definition of chunks?

Is this still required with vite's async definition of chunks?
dpschen commented 2021-08-24 12:14:51 +00:00
Author
Member

Since the editor is a quite large component I thought it might make sense to keep the splitting.
As far as I know every component using the editor will use the same chunk.
I did not check here but I guess this can be looked into at a state when analysing the chunks makes sense.

Since the editor is a quite large component I thought it might make sense to keep the splitting. As far as I know every component using the editor will use the same chunk. I did not check here but I guess this can be looked into at a state when analysing the chunks makes sense.
👍 1
dpschen marked this conversation as resolved
src/router/index.js Outdated
@ -65,3 +47,1 @@
error: ErrorComponent,
timeout: 60000,
})
const PasswordResetComponent = () => import('../views/user/PasswordReset')
konrad commented 2021-08-23 22:10:03 +00:00
Owner

How will error and loading states of async components be handled?

How will error and loading states of async components be handled?
dpschen commented 2021-08-24 12:34:56 +00:00
Author
Member

Good question. Maybe it makes sense to try out the new Suspense feature here.

Even better would be to reduce the size of the route chunks so much that there is not loading state. Maybe stuff like the editor is initially not interactive and will be loaded later, but the page navigation itself can be quick this way.

I think I read somewhere that vue-router preloads chunks from other linked routes on the current page.

Good question. Maybe it makes sense to try out the new [Suspense](https://v3.vuejs.org/guide/migration/suspense.html#combining-with-other-components) feature here. Even better would be to reduce the size of the route chunks so much that there is not loading state. Maybe stuff like the editor is initially not interactive and will be loaded later, but the page navigation itself can be quick this way. I think I read somewhere that vue-router preloads chunks from other linked routes on the current page.
dpschen commented 2021-08-24 12:09:32 +00:00
Author
Member
Copy Link

Yeah I guess now is the time for vue3. I really love it. The composition api is awesome and the new sugar syntax for the setup function makes everything super clean.

I guess this will show whether I caught all use cases with the test suite or not. Feel free to add new testcases as you see fit.

For now I ignored all the tests :D . The reason was that everything breakes either way when you change so much at once. I will look into this after the big things are working again.

Regarding the packages:

I chose the easiest way with the packages and searched for vue 3 ports. Sometimes I found forks that make the packages work. Replacing the packages with better onces can happen in an future steps =)

I split updating the packages in individual commits, so be sure to check the commits instead of the complete merge. That makes the diff much easier to read.

I realized also I included some fuck ups when I rebased to main. I know that I mismerged some packages. I will force-push to update that later. This is also why I didn't link the SHAs here since they might still change.

Not sure

vue-smooth-dnd
This is not in the packages.json anymore? Did you remove it already?

Seems to be working

vuex
upgraded to v4

vue-router
Upgraded to v4

vue-i18n
Upgraded to v9. The migration guide is quite long. Might be that I missed something.

vue-shortkey -> vue3-shortkey
For the future one could use the usemagickeys function of @vueuse. Generally vueuse is a crazy good library that can be useful for lots of stuff.

vue-notification -> @kyvg/vue3-notification
As you said: might make sense to remove that in the future

vue-advanced-cropper
Upgraded to 2.6

vue-flatpickr-component
Upgraded to 9

vue-drag-resize
EDIT: Upgraded to v2
Since the new version needs the composition api I didn't attack this yet. I think to remember that the old version work(ed)s with the compat build. So might be fine for now (needs check).

  • check compatability

verte -> replaced with native color picker
Instead of verte I used the native color picker. Might have some unsolved problems. I didn't test it on mobile.

For the future it might make sense to use some vanilla color picker library here. I tried initially huebee. Metafizzy the author behind writes really great vanilla libraries. This one sadly doesn't include an unmount function which makes it incompatible with modern js frameworks :/ .

I started implementing that but quickly gave up because I thought for the sake of porting to vue 3 the native color picker is fine enough. The reason I was looking at huebee instead of porting verte to vue 3 is that I thought that it might make sense to limit the color palette a bit so that contrast with text color etc. is always given. Huebee supports this really well.

If the user is allowed to choose any color there is no (easy) way to ensure this. Also it might look really colorful (nicely put).

vue-easymde
I copied the code and included it, but there seem still some issues.

Work needed

vuedraggable
This has support but the api changed a lot. There are still some problems here. I have the feeling the errors are related to vuex mutation violations. This was the original reason for the other pull-request (and what fucked up my rebasing).

Yeah I guess now is the time for vue3. I really love it. The composition api is awesome and the [new sugar syntax for the setup function](https://github.com/vuejs/rfcs/blob/script-setup/active-rfcs/0000-script-setup.md) makes everything super clean. > I guess this will show whether I caught all use cases with the test suite or not. Feel free to add new testcases as you see fit. For now I ignored all the tests :D . The reason was that everything breakes either way when you change so much at once. I will look into this after the big things are working again. ## Regarding the packages: I chose the easiest way with the packages and searched for vue 3 ports. Sometimes I found forks that make the packages work. Replacing the packages with better onces can happen in an future steps =) I split updating the packages in individual commits, so be sure to check the commits instead of the complete merge. That makes the diff much easier to read. I realized also I included some fuck ups when I rebased to main. I know that I mismerged some packages. I will force-push to update that later. This is also why I didn't link the SHAs here since they might still change. ## Not sure **vue-smooth-dnd** This is not in the packages.json anymore? Did you remove it already? ## Seems to be working **vuex** upgraded to v4 **vue-router** Upgraded to v4 **vue-i18n** Upgraded to v9. The [migration guide](https://vue-i18n.intlify.dev/guide/migration/breaking.html) is quite long. Might be that I missed something. **vue-shortkey -> vue3-shortkey** For the future one could use the [`usemagickeys` function of @vueuse](https://vueuse.org/core/usemagickeys/). Generally vueuse is a crazy good library that can be useful for lots of stuff. **vue-notification -> @kyvg/vue3-notification** As you said: might make sense to remove that in the future **vue-advanced-cropper** Upgraded to 2.6 **vue-flatpickr-component** Upgraded to 9 **vue-drag-resize** **EDIT:** Upgraded to v2 ~~Since the new version needs the composition api I didn't attack this yet. I think to remember that the old version work(ed)s with the compat build. So might be fine for now (needs check).~~ - [x] check compatability **verte -> replaced with native color picker** Instead of verte I [used the native color picker](https://kolaente.dev/vikunja/frontend/commit/e25bd0dc2d3cbbaba13e3feef4862020bcd6a8a1). Might have some unsolved problems. I didn't test it on mobile. For the future it might make sense to use some vanilla color picker library here. I tried initially [huebee](https://github.com/metafizzy/huebee). Metafizzy the author behind writes really great vanilla libraries. This one sadly [doesn't include an unmount function](https://github.com/metafizzy/huebee/issues/16) which makes it incompatible with modern js frameworks :/ . I started implementing that but quickly gave up because I thought for the sake of porting to vue 3 the native color picker is fine enough. The reason I was looking at huebee instead of porting verte to vue 3 is that I thought that it might make sense to limit the color palette a bit so that contrast with text color etc. is always given. Huebee supports this really well. If the user is allowed to choose any color there is no (easy) way to ensure this. Also it might look really colorful (nicely put). **vue-easymde** I copied the code and included it, ~~but there seem still some issues.~~ ## Work needed **vuedraggable** This has support but the api changed a lot. There are still some problems here. I have the feeling the errors are related to vuex mutation violations. This was the original reason for the other pull-request (and what fucked up my rebasing).
dpschen force-pushed feature/vue3-support from 2b30683e71 to 839248e6c2 2021-08-24 15:25:31 +00:00 Compare
dpschen force-pushed feature/vue3-support from 839248e6c2 to ae551fc310 2021-08-25 10:57:31 +00:00 Compare
dpschen force-pushed feature/vue3-support from ae551fc310 to a5a3bc3dae 2021-08-25 13:31:06 +00:00 Compare
konrad commented 2021-08-26 19:09:37 +00:00
Owner
Copy Link

I haven't really used vue 3 yet other than in the usual hello world stuff but I agree it is quite nice.

For now I ignored all the tests :D . The reason was that everything breakes either way when you change so much at once. I will look into this after the big things are working again.

Sure, I would do the same 🙂 As long as the tests pass in the end this is totally fine.

vue-smooth-dnd
This is not in the packages.json anymore? Did you remove it already?

Yes, that's already removed. It was used for the kanban board but we're now using sortableJS (vuedraggable) for that.

For the future one could use the usemagickeys function of @vueuse. Generally vueuse is a crazy good library that can be useful for lots of stuff.

I've never heard of vueuse but it looks really nice. I'm sure we can use some stuff of it.

verte -> replaced with native color picker

I liked the overview of verte so I'm not sure how I feel about the native color picker but using one instead of verte should be fine for now.

vue-easymde
I copied the code and included it, but there seem still some issues. I'm also not sure if this is the best approach since there other really good editors. Most of them seem to be more lightweight aswell

I have thought about replacing the editor in the past as well as I'm not quite happy with it either. I did not know tiptap but it looks really cool, a bit similar to slate but probably a better fit for a vue application if I understood it correctly since it is not react based. Will try to put something together some time.
It might make sense to migrate the editor before migrating to vue 3 given vue-easymde won't really work with vue 3?

As the next Vikunja release is just around the corner, I'd like to merge this PR after that was released to make sure we have some time to fix eventual bugs without having to issue a bugfix release every time. On the other hand, I think this will be open for some time so we're not in a hurry anyway 🙃

Btw you don't need to force push every time to keep the history clean, we'll squash merge at the end anyway.

I haven't really used vue 3 yet other than in the usual hello world stuff but I agree it is quite nice. > For now I ignored all the tests :D . The reason was that everything breakes either way when you change so much at once. I will look into this after the big things are working again. Sure, I would do the same 🙂 As long as the tests pass in the end this is totally fine. > vue-smooth-dnd This is not in the packages.json anymore? Did you remove it already? Yes, that's already removed. It was used for the kanban board but we're now using sortableJS (vuedraggable) for that. > For the future one could use the usemagickeys function of @vueuse. Generally vueuse is a crazy good library that can be useful for lots of stuff. I've never heard of vueuse but it looks really nice. I'm sure we can use some stuff of it. > verte -> replaced with native color picker I liked the overview of verte so I'm not sure how I feel about the native color picker but using one instead of verte should be fine for now. > vue-easymde I copied the code and included it, but there seem still some issues. I'm also not sure if this is the best approach since there other really good editors. Most of them seem to be more lightweight aswell I have thought about replacing the editor in the past as well as I'm not quite happy with it either. I did not know tiptap but it looks really cool, a bit similar to slate but probably a better fit for a vue application if I understood it correctly since it is not react based. Will try to put something together some time. It might make sense to migrate the editor before migrating to vue 3 given vue-easymde won't really work with vue 3? As the next Vikunja release is just around the corner, I'd like to merge this PR after that was released to make sure we have some time to fix eventual bugs without having to issue a bugfix release every time. On the other hand, I think this will be open for some time so we're not in a hurry anyway 🙃 Btw you don't need to force push every time to keep the history clean, we'll squash merge at the end anyway.
dpschen commented 2021-09-08 10:29:15 +00:00
Author
Member
Copy Link

Sry for not answering, was busy doing some other stuff.

I realized this pull request is getting to large to handle once. I will split it into parts so that some stuff can already be used in the vue2 version. That will make the diff smaller and easier to handle.

EDIT: see #717

As the next Vikunja release is just around the corner, I'd like to merge this PR after that was released to make sure we have some time to fix eventual bugs without having to issue a bugfix release every time. On the other hand, I think this will be open for some time so we're not in a hurry anyway 🙃

Sure!

Btw you don't need to force push every time to keep the history clean, we'll squash merge at the end anyway.

Since the pull request is that large I would really not recommend that here. I'm all in for doing this with small changes. But with large ones like this you would loose track of where a change came from and why it happened.

I'll try to make the commits as dense as possible. I'm doing this anyway because else I would loose track of the changes :)

Sry for not answering, was busy doing some other stuff. I realized this pull request is getting to large to handle once. I will split it into parts so that some stuff can already be used in the vue2 version. That will make the diff smaller and easier to handle. **EDIT:** see https://kolaente.dev/vikunja/frontend/pulls/717 > As the next Vikunja release is just around the corner, I'd like to merge this PR after that was released to make sure we have some time to fix eventual bugs without having to issue a bugfix release every time. On the other hand, I think this will be open for some time so we're not in a hurry anyway 🙃 Sure! > Btw you don't need to force push every time to keep the history clean, we'll squash merge at the end anyway. Since the pull request is that large I would really not recommend that here. I'm all in for doing this with small changes. But with large ones like this you would loose track of where a change came from and why it happened. I'll try to make the commits as dense as possible. I'm doing this anyway because else I would loose track of the changes :)
👍 1
dpschen force-pushed feature/vue3-support from a5a3bc3dae to a9e8310839 2021-09-14 15:42:18 +00:00 Compare
dpschen force-pushed feature/vue3-support from a9e8310839 to 5a7979f23e 2021-09-23 14:01:10 +00:00 Compare
dpschen commented 2021-09-23 14:05:17 +00:00
Author
Member
Copy Link

Regarding vue-easymde: The changes made to support vue3 are that small that it doesn't make sense to use the new version. As long as there is no further development I would keep the change I did as is.

The link to the commit might brake in the future, since I force-push this branch to keep it update. If that's the case search for the commit with the message feat: forked vue-easymde.

Regarding vue-easymde: The changes made to support vue3 [are that small](https://github.com/NikulinIlya/vue-easymde/commit/e7804de65b970d5d0bef3725ef39861399bb668a) that it doesn't make sense to use the new version. As long as there is no further development I would keep [the change I did](https://kolaente.dev/vikunja/frontend/commit/29eaa462dabb6f05b64fe3101198c3f28ab9ba4e) as is. The link to the commit might brake in the future, since I force-push this branch to keep it update. If that's the case search for the commit with the message `feat: forked vue-easymde`.
dpschen force-pushed feature/vue3-support from 5a7979f23e to b4af0ffc01 2021-09-25 10:24:48 +00:00 Compare
dpschen force-pushed feature/vue3-support from b4af0ffc01 to 9b3c0c4adb 2021-09-25 10:33:41 +00:00 Compare
dpschen force-pushed feature/vue3-support from 9b3c0c4adb to 1806a3a5c4 2021-10-01 17:08:12 +00:00 Compare
dpschen force-pushed feature/vue3-support from 1806a3a5c4 to aeabc42844 2021-10-01 18:07:50 +00:00 Compare
dpschen added 3 commits 2021-10-01 18:19:06 +00:00
continuous-integration/drone/pr Build is failing Details
15640e98ec
feat: simplify filter-popup
dpschen commented 2021-10-02 13:28:48 +00:00
Author
Member
Copy Link

I could resolve the issues with vue-easymde.
The styles of CodeMirror were missing in my fork.
I'm not sure how they end up in the npm bundle of vue-easymde but I couldn't find a direct import.

I checked out the updated vue 3 version again (v2.0) but most say it's of poor quality. E.g. one thing that is missing are the changes on the life cycle hook names:

Mine (ignore the wrong indention) vs v2.0

I could resolve the issues with vue-easymde. The [styles of CodeMirror](https://kolaente.dev/dpschen/frontend/src/branch/feature/vue3-support/src/components/input/editor.vue#L437) were missing in my fork. I'm not sure how they end up in the npm bundle of vue-easymde but I couldn't find a direct import. I checked out the updated vue 3 version again (v2.0) but most say it's of poor quality. E.g. one thing that is missing are the changes on the life cycle hook names: [Mine](https://kolaente.dev/dpschen/frontend/src/branch/feature/vue3-support/src/components/input/vue-easymde/vue-easymde.vue#L65) (ignore the wrong indention) vs [v2.0](https://github.com/NikulinIlya/vue-easymde/blob/master/src/index.vue#L137)
dpschen commented 2021-10-02 13:32:15 +00:00
Author
Member
Copy Link

It's a lot of effort to keep this branch in sync with the main branch :)
Maybe we can tackle the remaining errors together and split them somehow?

I'm not sure how to solve some. I have some changes in my local stash with some ideas how to fix some problems, but they introduce new problems. So might be good to exchange ideas.

It's a lot of effort to keep this branch in sync with the main branch :) Maybe we can tackle the remaining errors together and split them somehow? I'm not sure how to solve some. I have some changes in my local stash with some ideas how to fix some problems, but they introduce new problems. So might be good to exchange ideas.
konrad commented 2021-10-02 14:35:31 +00:00
Owner
Copy Link

Maybe we can tackle the remaining errors together and split them somehow?

I'm not sure how to solve some. I have some changes in my local stash with some ideas how to fix some problems, but they introduce new problems. So might be good to exchange ideas.

Sure! Maybe it would make sense to create new issues to split up the tasks?

I'd also be open for a discussion via jitsi (or similar) if that simplifies things.

> Maybe we can tackle the remaining errors together and split them somehow? > I'm not sure how to solve some. I have some changes in my local stash with some ideas how to fix some problems, but they introduce new problems. So might be good to exchange ideas. Sure! Maybe it would make sense to create new issues to split up the tasks? I'd also be open for a discussion via jitsi (or similar) if that simplifies things.
dpschen added the
duplicate
 label 2021-10-03 13:31:12 +00:00
konrad commented 2021-10-03 18:38:14 +00:00
Owner
Copy Link

Closing this in favor of #815

Closing this in favor of #815
konrad closed this pull request 2021-10-03 18:38:14 +00:00
This repo is archived. You cannot comment on pull requests.
Reviewers
No reviewers
Labels
Clear labels   
area/internal-code

   
changes requested

   
confirmed

   
dependencies

   
duplicate

This issue or pull request already exists

  
good first issue

   
help wanted

Need some help

  
hosting

   
invalid

Something is wrong

  
kind/bug

Something is not working

  
kind/feature

New feature

  
question

More information is needed

  
wontfix

This won't be fixed

No Label
area/internal-code
changes requested
confirmed
dependencies
duplicate
good first issue
help wanted
hosting
invalid
kind/bug
kind/feature
question
wontfix
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
2 Participants
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: vikunja/frontend#678
No description provided.
Delete Branch "dpschen:feature/vue3-support"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?