Migrate to Vue 3

[jimchamp]

Open Library maintains a small number of web components that were created with Vue 2. Vue 2 will reach end of life on 31 December 2023, so we'll have to migrate to Vue 3 in the near future.

Project Summary

• ~Get a way to build with createApp; drop web components~

• ~Fix workbox-webpack-plugin and vite having conflicing version of rollup ; maybe can update workbox-webpack-plugin ?~

• Create a way to multi build all the Components

• Test all components and make sure they don't use global IDs

• Test all components and make sure they don't interfere with CSS

Code Changes

• [ ] Migrate the following components by addressing breaking changes
  • [ ] MergeUI
  • [ ] Upgrade vue-async-computed to the new version which supports vue 3 only -- we have a solution but need to add npm install step with/during switch-over to vue3
  • [x] LibraryExplorer
  • [x] Upgrade to vue-multiselect@3 #8384 (current version doesn't work with Vue 2)
    • I think it must be done in lockstep with the Vue 3 build upgrade
  • [x] ObservationForm
  • [x] AuthorIdentifiers
  • [x] HelloWorld
• [ ] Upgrade to Vue 3 following the build migration guide
  • This is relatively straightforward once the components are migrated

Finishing Touches

• [ ] Update our Vue documentation
  • [ ] Add link to this page to wiki sidebar
• [ ] Test new build process with Vite
  • This is a nice to have and would let us get rid of webpack but not strictly necessary for the upgrade.

Next Steps

1. [ ] Draft PR #7550 missing 2 files (merge UI & library explorer)
   • See: https://github.com/jimchamp/openlibrary/tree/poc/vue3-migration/openlibrary/components/vue3#readme
2. [ ] #8384 will need to get added into #7550

Additional context

This also give us the opportunity to try using Vite for our component builds. We currently use Vue CLI, and this is one of the slower steps of our build process. More importantly, Vue CLI is now in maintenance mode, and eventually will be no longer supported.

Stakeholders

[RayBB]

vue-async-computed doesn't support vue 3 per https://github.com/foxbenjaminfox/vue-async-computed/issues/104

Will need to move away from that too.

[RayBB]

Related thread about challenges: https://www.reddit.com/r/vuetifyjs/comments/126zkzb/vuevuetify_2_to_vuevuetify_3_migration_is/

[jimchamp]

If memory serves, vue-multiselect will need to be upgraded in order to migrate the library explorer. The Vue 3 version of this library is on their next branch, here.

[RayBB]

You're right and Vue 3 support only seems to be available as beta and there doesn't seem to be too much active development there.

How do we feel about using beta packages that haven't had a release in a while?

Might be worth looking into: https://github.com/vueform/multiselect

It has a nice comparison table with the library we are using now.

[RayBB]

Based on the discussion a few weeks back Drini said we're okay to use the beta lib for now. I'm going to investigate that.

[github-actions[bot]]

Assignees removed automatically after 14 days.

[mekarpeles]

Here's the latest from my conversation w/ @jimchamp

[jimchamp]

Sorry about that, @RayBB... We're still hammering out the process and exclusions for this new reassignment workflow.

I've added the no-automation label to this issue. Issues with this label will not have their assignees automatically removed.

[mekarpeles]

We decided on:

Have each web component have its own index.js which will let us load only what’s needed and also solve the asynccompute plugin issue