Migrate to vue3

[csc-felipe]

Description

Migrate vue2 → vue3.

Most of the breaking changes don't apply to our code, so it's not such a big code change. But still quite a large PR.

https://v3-migration.vuejs.org/breaking-changes/#template-directives
https://v3-migration.vuejs.org/breaking-changes/v-model.html
https://vuejs.org/guide/reusability/custom-directives.html#directive-hooks

Related issues

GL 943

needs #982 #1006

Type of change

• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Changes Made

• Update libraries
  • vue
  • vuex
  • vue-i18n
  • vue-router
  • fix changing project
• refactor index page app creation to be less repetitive
• update csc-ui vue directive to work with vue3
• add IndexedDB workaround for Chrome - Random Closing Database issue (hard/impossible to reproduce) dexie/Dexie.js#613
• remove LAST_ACTIVE cookie reference, as it's not being set anywhere
• fix bindings in autocomplete fields by using :query instead of v-model
• some values that were not reactive, now are, and can't be passed as is to Dexie, they need toRaw() from vue

Testing

• Tests do not apply
• Manual tests are in order to confirm everything works as before

Mentions

In VSCode, the Vue extension change from Vetur to Volar. So you might want to update your setup.

Also, remember to pnpm install to update the libraries.

Vue development browser extension now works

[csc-felipe]

Ready for review

[csc-felipe]

rebased

[csc-felipe]

There was a weird issue with indexedDB, in which the db transactions were not completing. So there's a workaround. According to issues I've been reading in the dexie repo, it's mostly a chromium issue, but It only happened after migrating to vue, which makes me wonder if there's a connection between these.

Apparently, router.go changed behaviour, and selecting a project was not working, so that was fixed as well.

I noticed that the LAST_ACTIVE cookie was not being set anywhere, and remove the code referencing it.

[hannyle]

I'm getting these warnings

[csc-felipe]

I see the warnings too. The vue-router warning is what happens during component initialization. The other warnings are from i18n vite plugin. It's not recommended to have HTML in the strings, and it was a deliberate choice, as I didn't know at the time (and still don't) how else to accomplish the same thing.that.

[hannyle]

I see the warnings too. The vue-router warning is what happens during component initialization. The other warnings are from i18n vite plugin. It's not recommended to have HTML in the strings, and it was a deliberate choice, as I didn't know at the time (and still don't) how else to accomplish the same thing.that.

I could also help take a look if I can fix this, if you don't mind.

[hannyle]

After the fix for autocomplete, the previous issue has gone but I think in the Upload modal, when you type some letters it doesn't suggest the result anymore. It still works fine for Searchbox I think.

[csc-felipe]

After the fix for autocomplete, the previous issue has gone but I think in the Upload modal, when you type some letters it doesn't suggest the result anymore. It still works fine for Searchbox I think.

It should be fixed now

[blankdots]

from my point of view stuff works, and I cannot spot anything in the code.

All i can spot in the build are these warnings:

emcc: warning: warnings in JS library compilation [-Wjs-compiler]
emcc: warning: running limited binaryen optimizations because DWARF info requested (or indirectly required) [-Wlimited-postlink-optimizations]
vite v4.2.0 building for production...
✓ 490 modules transformed.
rendering chunks (60)...warnings when minifying css:
▲ [WARNING] Unexpected ";" [css-syntax-error]

    <stdin>:10223:1:
      10223 │ };
            ╵  ^

[blankdots]

about the css warning @hannyle pointed out these lines: https://github.com/CSCfi/swift-browser-ui/blob/feature/vue3/swift_browser_ui_frontend/src/components/SearchResultItem.vue#L106-L109

[blankdots]

from my point of view it works, but please wait for other reviewers

[hannyle]

I have this issue when using the Edit tags modal, the tags were not properly saved and might be a lingering issue of dexie :/

[sampsapenna]

I'm experiencing a bug, where after login the navbar is partially empty because the username wasn't in the URL from the beginning, maybe it's breaking reactivity? After refreshing everything is properly rendered, but if I manually navigate to /browse again, the bug is repeated.

It might have something to do with router being more strict about the router parameters, complaining that the initial /browse doesn't have those defined while some component tries accessing them.

[hannyle]

I noticed that bug as well, I think @csc-felipe created a separate issue for it?
https://gitlab.ci.csc.fi/sds-dev/sd-connect/swift-browser-ui/-/issues/972

[sampsapenna]

I noticed that bug as well, I think @csc-felipe created a separate issue for it? https://gitlab.ci.csc.fi/sds-dev/sd-connect/swift-browser-ui/-/issues/972

Seems like it, thanks for the info 👍🏼

[csc-felipe]

I have this issue when using the Edit tags modal, the tags were not properly saved and might be a lingering issue of dexie :/

These issues are because of the reactivity model in Vue3, and it wraps everything with reactive(). Calling isProxy() confirms it.

The trick is to use toRaw() before passing a value to Dexie.

[csc-felipe]

Makes me think that we may not even need the workaround... But well, it's a good workaround anyway

[csc-felipe]

What it means is that the array with tags, for example, becomes a ProxyArray, actually an object. So Dexie doesn't like it ^^.

[hannyle]

I wonder why it happens only with Edit tags but not with creating folder or copy folder? Or maybe Share Modal when we change the list of Shared IDs ?

[csc-felipe]

It happens only when the Proxy object is passed to Dexie, and Dexie tries to do something with it. And I exagerated that everything becomes a reactive proxy object. This same case probably doesn't apply to the previous issue.

[csc-felipe]

That's hopefully fixed now!

[hannyle]

That's hopefully fixed now!

Yes it's fixed 👍

[hannyle]

There is a similar issue with Display Options in ObjectsView that changing 3 options shows the same error with Dexie.

I did a quick research and understand that because Vue 3 has built-in reactivity , we could also use liveQuery() to have reactive data-fetching or query, for example:

[csc-felipe]

I'm not sure I understand the suggestion to use liveQuery, because it's usually for reading data, but that db call is writing data.

[hannyle]

Well that's true, hm.. 🤔

[csc-felipe]

toRaw also works here, so we don't have to pass the reactive values to dexie.

It should be fixed now.

[hannyle]

Looks good to me! Great job! 🎉