Estimate effort for Vue2 -> Vue3 upgrade

[severinbeauvais]

• determine what's involved
• look into dependencies
• unit test impacts?
• QA impacts? (UX Assurance? full regression?)
• who should be involved
• how much work for 1 typical UI
• how much work for BCRS shared components?

[severinbeauvais]

Assumptions and questions

• assumes no refactoring to Composition API design
  • unless it's easier than upgrading the Class Style API
  • see also https://github.com/yoyo930021/vc2c (Vue Class to Composition converter)
• assumes no refactor of bcrs-shared-components for CSS rollup/build/minify (re: # 9874)
• assumes no refactor of bcrs-shared-components into web components (re: # 10725)
• assumes sbc-common-components and bcrs-shared-components are already updated
• assumes we won't use shims/wrappers/workarounds to make Vue2 code work in Vue3 (ie, we will have proper Vue3 code, though not necessarily using Composition API)
  • to avoid tech debt! (temp code that we will need to resolve later)
• business-filings-ui is oldest UI (not counting name-examination) but I will look at business-create-ui as it's more complicated than business-edit-ui (which is the most modern)
• should we use Vue 2 compatible APIs or upgrade all of them? what are implications of doing the first thing now and doing the other thing later?
• should we use config flags to retain Vue2 functionality for any reason? what are the implications?
• what don't I know?

[severinbeauvais]

Imports to upgrade

"dependencies": {
   ...
   "@vue/compat": "^3.2.39",
   "launchdarkly-js-client-sdk": "^2.22.1",
   "uuid": "^9.0.0",
   "vue": "^3.2.39",
   "vue-router": "^4.1.5",
   "vuetify": "3.0.0-beta.4",
   "vuex": "^4.0.2",
   ...
},
"devDependencies": {
   ...
   "@mdi/font": "^7.0.96",
   "@typescript-eslint/eslint-plugin": "^5.37.0",
   "@typescript-eslint/parser": "^5.37.0",
   "@vue/cli-plugin-babel": "^5.0.8",
   "@vue/cli-plugin-eslint": "^5.0.8",
   "@vue/cli-plugin-typescript": "^5.0.8",
   "@vue/cli-plugin-unit-jest": "^5.0.8",
   "@vue/cli-service": "^5.0.8",
   "@vue/compiler-sfc": "^3.2.39",
   "@vue/eslint-config-standard": "^8.0.1",
   "@vue/eslint-config-typescript": "^11.0.1",
   "@vue/test-utils": "^2.0.2",
   "eslint": "^8.23.1",
   "eslint-plugin-vue": "^9.4.0",
   "s-vuex-class": "^0.4.1",
   "typescript": "^4.8.3",
   "vue-class-component": "8.0.0-rc.1",
   "vue-property-decorator": "10.0.0-rc.3",
   "vuex-composition-helpers": "^1.1.2",
   "vuex-module-decorators": "^2.0.0",
   "webpack-plugin-vuetify": "2.0.0-alpha.11",
   ...
  }

There may be more than the above. The packages above seem to work together and were the latest when I wrote this.

[severinbeauvais]

What needs to be refactored/redesigned

Ref: https://v3-migration.vuejs.org/breaking-changes/

Legend for my estimates:
SMALL = 1 day or less
MEDIUM = more than a day but less than a week
LARGE = more than a week

• use of $on and $off (SMALL)
• use of filters? see https://npm.io/package/vue3-filters (UNKNOWN)
• unit tests - see https://test-utils.vuejs.org/migration/ (MEDIUM)
• v-model updates (SMALL)
• document emitters (SMALL)
• keyup/keydown (SMALL)
• verify all other breaking changes (SMALL)
• decorators - vue-class-component and vue-property-decorator (UNKNOWN)
• replacing vuex with pinia (MEDIUM)
• classes that extend Vue (SMALL)
• change from Class API to Options API (to be ready for Composition API)??? (MEDIUM or LARGE)

There may be more than what I found.

[severinbeauvais]

Steps (in general)

1. update build tools (eg, vue-cli) (SMALL)
2. update packages (SMALL)
3. fix lint errors (SMALL)
4. fix build errors (UNKNOWN)
5. fix unit tests (UNKNOWN)
6. fix runtime errors (UNKNOWN)

Ref: https://v3-migration.vuejs.org/migration-build.html#upgrade-workflow

Ref: https://cli.vuejs.org/migrations/migrate-from-v4.html

[severinbeauvais]

What needs to be UXAed / QAed

• all components
  • all props and variations (eg, present/absent)
  • all emits
• misc error handling
• filters
• all UI styles and behaviours
• watch dev console for runtime warnings

[severinbeauvais]

Problems to solve

• incompatible bcrs-shared-components - this will need to be updated first
• incompatible sbc-common-components - this will need to be updated first
• incompatible launchdarkly-js-client-sdk -- see Vue3 upgrade: launchdarkly-js-client-sdk #13649
• incompatible pdfjs-dist -- see Vue3 upgrade: pdfjs-dist #13650
• incompatible vue-affix -- see Vue3 upgrade: vue-affix #13651
• incompatible vue-the-mask -- see Vue3 upgrade: vue-the-mask #13652
• incompatible vue2-filters -- see Vue3 upgrade: vue2-filters #13653
• incompatible vuelidate -- see Vue3 upgrade: vuelidate #13654
• incompatible vuex-module-decorators -- see Vue3 upgrade: vuex-module-decorators #13655
• vuetify is still beta
• vue-class-component is still rc
• vue-property-decorator is still rc
• some decorators need to be refactored
• vue-test-utils incompatibilities (from 1.0.0-beta.33 to latest v1 or v2)
• need to figure out Typescript/Babel packages -- see Vue3 upgrade: Typescript #13656
• need to figure out Webpack packages (or use Vite?) - see Vue3 upgrade: Vue CLI / Webpack #13657
• ...

The list above is as far as I got within the time allocated for this ticket.

[severinbeauvais]

Recommended approach Obsolete -- see epic, RC discussions, and ongoing meetings

Option 1
First update everything to Vue 2.7 (which is more compatible with Vue3 than our existing version) including possibly refactoring everything to Composition API, then update to Vue 3.

Pro: Possibly easier to move to Vue 3. More common code architecture between projects.

Con: I think that using Composition API is not mandatory in Vue 3 so it's a lot of work for unknown benefit.

Option 2
First update everything to Vue 2.7 (which is more compatible with Vue3 than our existing version) but don't refactor everything to Composition API, then update to Vue 3.

Pro: Possibly easier to move to Vue 3 later. Possibly more compatibility up front. Imported packages are more stable. Can split up work better. Can split up work over longer period.

Con: Possibly more work than Option 3.

Option 3
Update everything to Vue 3 without changing to Composition API.

Pro: Defer work. Do it all at once.

Con: All the pain will come at once. Possible dependencies and time contraints between projects.

Recommendations

Implement option 1 or option 2. Basically, phase in the work (with or without refactoring to Composition API).

1. Convert to Composition API (which we can do in Vue 2.7) now. This is apparently straightforward per component but it's we have a lot of components, and it will require extensive testing of everything.

2. Wait a little longer for dependencies (ie, imported packages) to be properly released (no alpha/beta/rc builds) until we update to the Vue 3 packages.

3. Do something about the Vuex changes, decorator changes, etc

4. Do something about the unit tests (ie, use latest v1 release of the vue-test-utils (to make it easier to go to v2 later).

5. Must update sbc-common-components and bcrs-shared-components first!

   • can leverage some work that PPR did
   • can we combines these 2 repos?
   • should we move towards shared components as Web Components?
   • see what Faiz did in FAS re: compatibilities and pre-compiled

[severinbeauvais]

^^^ this was discussed at Vue3 Kickoff Meeting

cc: @cameron-freshworks @seeker25 @pwei1018 @kialj876 @thorwolpert @ozamani9