Create Vue3 migration script: upgrade libraries, configuration, syntax and tools (extension ready)

[cnotv]

Description

As defined in the finding, create a script able to replace all the indicated issues.

TODO

• Create migration script haul
• Add logs capabilities
• Create flags for verbose, dry, log generation and summary
• Upgrade Node related configurations to version 20
  • all existing package.json
  • GitHub Actions automation
  • NVM config
• Update libraries ecosystem to Vue3
• Migrate Vue related syntax
  • 1-to-1 changes
  • RegEx replacement
  • DOM cleanup
  • Router updates
• Update Jest syntax Existing library seems sufficient so far
• Update ESLint libs and ESLint rules
• Add auto ignore TS and enable by configuration for all non breaking issues Not recommended after experiencing it
• Update SCSS syntax
• Add documentation

Context

From the report, here copied the parts of code:

• Vue 3 migrations
• VueTest2 migrations
• Some compiling error can be returned only after fixing all the types issues
• Vue 2.7 compatible syntax can be solved with Migrate Vue 2.7 compatible syntax to new format #10101

Extensions

Given the need to migrate also the extensions, the script will also have to run through the affected parts which have to be modified manually and return a message/error or generate a log.

Vue + Typescript

(mostly to be corrected on Epinio, which is now removed?)

• All the mounted components without type now return overload definition issues (reported in draft PR CI)
• Cannot find module 'vue/types/vue', not sure if TSConfig issue or migration change
• Cannot find module 'vue/types/options', not sure if TSConfig issue or migration change
• All typed Vue files which use Vue.extend now return Property 'extend' does not exist on type 'typeof
• Props are not recognized, it may be related to the Vue.extend issue
• Property '$emit' does not exist on type
• Cannot use namespace 'Router' as a type.
• Property 'extend' does not exist on type 'typeof import

Jest

• Update trasform configuration instead of @vue/vue2-jest
• TypeError: Cannot read properties of undefined (reading 'prototype'), from i18n global Vue.prototype.t (reported in draft PR CI)

Issues after recent merge to master

After all these months a rebase to master generate error Error: Cannot find module 'html-webpack-plugin'. It may be related to wrong conflicts resolution.

[gaktive]

@rak-phillip will update this with his own discoveries of Vue3 work that has been back ported to Vue 2.7.

@cnotv to dig up more recent reference links to our CI since the ones listed here have expired due to age.

[rak-phillip]

Based on the backported features listed for the Vue 2.7¹ release, there are at least two items in the list above that we can break out into separate PRs and address today:

All typed Vue files which use Vue.extend now return Property 'extend' does not exist on type 'typeof

We can transition to defineComponent() and resolve any issues that might arise as a result of this change.

Property '$emit' does not exist on type

Without the logs, I'm making the assumption that this error has to deal with the fact existing components aren't explicitly declaring emitted events. Vue 2.7 supports the emits option so we can start specifying this to avoid issues when the time comes for migration.

Footnotes

1. https://v2.vuejs.org/v2/guide/migration-vue-2-7.html#Backported-Features ↩

[cnotv]

Is it that convenient at this point to modify such a huge amount of files in multiple iterations and face all these conflicts in code? Without count that maybe is not so easy a simple text replacement from the IDE, due to the closing brackets.

Perhaps the defineComponent() may not be so much troublesome for the conflicts as the second case, which may even lead to bugs and require multiple QA.

If I have to work all these issues, I'll rather do it altogether as this would not hinder me, plus we may have a proper generic migration script for other cases.

[cnotv]

@cnotv to dig up more recent reference links to our CI since the ones listed here have expired due to age.

@gaktive the logs are listed in the description....

[cnotv]

Updated URL due CI log expiration, it points to local branch on push due new issue crossed due merge to master.
Fixed PR conflicts.
Added screenshot samples on top of the existing listed logs.

[rak-phillip]

Is it that convenient at this point to modify such a huge amount of files in multiple iterations and face all these conflicts in code? Without count that maybe is not so easy a simple text replacement from the IDE, due to the closing brackets.

Breaking down the tasks into smaller PRs has its merits. I find that focusing on a limited scope makes conflict resolution more manageable, and I believe smaller and more focused PRs will be easier to reason about, considering the complexity of the changes.

Perhaps the defineComponent() may not be so much troublesome for the conflicts as the second case, which may even lead to bugs and require multiple QA.

You definitely raise a valid point here, but it's my position that w can alleviate some issues related to identifying bugs if we focus on smaller, more manageable tasks due to the overall complexity of the Vue 3 migration.

If I have to work all these issues, I'll rather do it altogether as this would not hinder me, plus we may have a proper generic migration script for other cases.

It's entirely valid to tackle all the issues together. My suggestion to break it into smaller tasks was aimed at providing us with items that we can start merging today based on what Vue 2.7 provides us out of the box. Smaller tasks also introduce the potential for others to contribute. I don't intend to dictate the workflow, and if an all-encompassing approach works best for you, that's absolutely fine 🙂

[cnotv]

Ok I agree 100% with what you state, so let's create the issue with these 2 points and see if anyone wants to contribute, which is always welcome 😍
Otherwise we may just close these together, what do you think?

[rak-phillip]

I created #10104 to address defineComponent usage.

I'm holding off on creating anything related to emits as the updated logs that you provided don't appear to be related to using the new emits option and might have to do with Vue TypeScript types instead:

TS2339: Property '$emit' does not exist on type '{ deep: boolean; handler(): void; }'.
    101 |       deep: true,
    102 |       handler() {
  > 103 |         this.$emit('change', this.values);
        |              ^^^^^
    104 |       }
    105 |     },
    106 |

I'll comb through the logs and the migration guide to see if there's anything else that we can potentially pick up in the near term.

[cnotv]

I created #10104 to address defineComponent usage.

I'm holding off on creating anything related to emits as the updated logs that you provided don't appear to be related to using the new emits option and might have to do with Vue TypeScript types instead:

TS2339: Property '$emit' does not exist on type '{ deep: boolean; handler(): void; }'.
    101 |       deep: true,
    102 |       handler() {
  > 103 |         this.$emit('change', this.values);
        |              ^^^^^
    104 |       }
    105 |     },
    106 |

I'll comb through the logs and the migration guide to see if there's anything else that we can potentially pick up in the near term.

It seems more like a Vue reason: https://eslint.vuejs.org/rules/require-explicit-emits.html

[cnotv]

@codyrancher @nwmac There's these points which still use Vue. in an uncommon way or are leftovers from Nuxt which need still to be addressed.