feat!: migrate to vue 3

[emuvente]

Initial PR for migrating from webpack & vue 2 to vite & vue 3. This still has many issues but the overall functionality is there. I've had to manually roll-back changes while working on this and change some parts multiple times, so there are some minor related issues that still need to be cleaned up. The general process for developing this has been cycling through running npm run build, npm run lint, npm run unit, npm run storybook, npm run dev -- --config=local, and npm start -- --config=local, and fixing any errors that arise.

References

https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/
https://www.sitepoint.com/webpack-vite-migration/
https://vitejs.dev/guide/ssr
https://storybook.js.org/docs/migration-guide/from-older-version

Tasks completed

• upgraded to node 20
• many dependency upgrades (see last section)
• switched to "type": "module"
• replaced require.context with import.meta.glob and importHelpers util
• used full paths for css imports
• replaced all instances of require with import
• added defineAsyncComponent for all async component imports
• replaced >>> with :deep()
• replaced / with math.div() in sass & scss
• replaced import '@/...' with import '#src/...' and removed @ alias
• removed algolia and related components
• converted server modules to esm where possible
• removed/migrated vue filters
• swapped workerpool for piscina
• changed the imports for { gql } from @apollo/client to graphql-tag
• added babel transformer to handle import.meta.url in jest
• updated jest svg transform
• changed updateProps to rerender in specs

TODO

• preload hints for static assets
• fix/complete static asset url resolution
• complete production ssr
• review need for plugin-legacy with current browser support target
• upgrade cypress
• fix failing jest tests
• fix individual page issues
• performance testing
• fix failing stories
• update manifest (manifest.webmanifest) to have full URL src properties -> warnings can be seen after running npm run build and npm start -- --config=local
• ensure production minification of HTML and CSS (it happened before with webpack) -> see commented out htmlPurge in vite.config.js

Items to review/QA

These are things that have changed in this PR that need review/QA, and issues that have popped up while developing that still need to be addressed.

• focus lock issues when navigating on /15
• KvLightbox vue focus lock div
• css preprocessing
• font loading
• flag icons
• icon sprite sheet loading
• vue sfc deep selector usage
• live loans loan use and loan callouts
• local graphql resolvers default values
• qr code for mfa
• KvLoadingSpinner
• DynamicRichText
• auto deposit signup form

Setup local development

Note: Your terminal app must be running with Rosetta for backwards compatibility with some of our dependencies, canvas in particular.

# Terminal window 1
npm checkout vue-3
nvm use
rm -rf node_modules
npm i
npm run dev -- --config=dev-custom-host

# Terminal window 2
caddy run

# Open custom host in browser, for example https://kiva-ui.local/lend/filter

[emuvente]

Ok, just pushed up a fix for getDeepComponents, so there only remaining unit test failure is KvCheckboxList.

Prefetching is in an unstable state. It currently will only work as long as all the components are using the options api. For any component that uses the composition api they will not have a prefetch option and none of the prefetches will be called for any of their child components.

I've looked into the various ways we can do prefetching in vue 3, and there isn't any easy solution. There is a super easy and useful serverPrefetch hook, but it only gets called during SSR, so client-side prefetching before navigation isn't supported. For the client-side we would need to use a combination of beforeRouteEnter and beforeRouteUpdate. So to do the same sort of prefetching we are doing today, we would need to define the data fetch in 3 different hooks in each component, each hook using a slightly different format.

I would recommend that we try to replace prefetching with loading data after page navigation. This will require rewriting some components and adding loading states for many pages (blank areas are ok, no need for loading placeholders/spinners everywhere as long as content shifting is avoided). On the plus side it will mean much faster performance for server renders and better perceived client-side performance.

[dyersituations]

Minification verified (working) and performance tests ran locally (Lighthouse scores more or less match dev env with Vue 2 running). Next step is deploying to dev and running through functional and Lighthouse tests again: https://kiva.atlassian.net/browse/MP-718

[mcstover]

I think it's go time for this...

[kiva-robot]

🎉 This PR is included in version 3.0.0-rc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[kiva-robot]

🎉 This PR is included in version 3.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀