[codemod][new] vuejs - migration from 2 -> 3

codemod-com / codemod

The end-to-end platform for creating, sharing, and running codemods with engines like jscodeshift, ast-grep, ts-morph, and more. Automate code migrations, cleanups, and refactors for you, your team, and the community. AI-powered and CLI-first.

https://go.codemod.com/docs

Apache License 2.0

426 stars 36 forks source link

[codemod][new] vuejs - migration from 2 -> 3 #910

Open arshcodemod opened 4 months ago

arshcodemod commented 4 months ago

Migration details

[Link to upgrade guide]

[ ] codemod-appinitialization - [Codemod Studio Link]
[ ] codemod-globaltoinstanceAPIs - [Codemod Studio Link]
[ ] codemod-functionalcomponent - [Codemod Studio Link]
[ ] codemod-lifecyclehooks - [Codemod Studio Link]
[ ] codemod-customhooks - [Codemod Studio Link]
[ ] codemod-filters - [Codemod Studio Link]

To contributors working on this task:

[ ] Framework Expert: For each codemod use case in this migration, provide the Codemod Studio link (example) with detailed specifications. Include before/after pairs, transformation logic in comments, and edge cases. Even if the transformation is tricky, provide instructions on detecting the patterns. This helps estimate the effort needed and guides developers to the areas requiring manual changes.
[ ] Codemod Creator: Build and publish quality codemods that handle most edge cases. False negatives are acceptable, but there should be no false positives. Even if the transformation is tricky, build a codemod that can detect and add comments to guide developers to the areas needing manual changes.
Questions? -> Community

sadeghbarati commented 4 months ago

/cc @sxzz can you summon Vue 2 and 3 wizards here

More explanation about Codmod Studio from Alex:

use this link, containing the feature flag for our most advanced AI. use the "tour" button in the Studio to learn how the codemod studio works (and provide feedback if something is not clear) use this API doc for jscodeshift provide feedback if something is missing. keep in mind, that for a real life jscodeshift codemod, most of the code is about knowing the grammar of the parser....

Saeid-Za commented 4 months ago

Hello There! Thank you for starting this tracking issue. I believe there are some helpful tools that could serve as a reference.

vue-migration: A tool based on vue-codemod to migrate vue 2 to vue 3 (script setup)
vue-upgrade-tool - A codemod built on vue-metamorph to upgrade Vue 2 projects to Vue 3 (defineComponent or normal script style)

There are also other repositories, one that I used some years ago but couldn't find unfortunately.

I'd also suggest that setting the output target to script setup instead of normal script style.

One question that I have, is there a preference between jscodeshift and ts-moph as the engine? I've used ts-morph before, but have never worked with jscodeshift.

sadeghbarati commented 4 months ago

@Saeid-Za @epr3

Sry for the noise

https://github.com/sadeghbarati/vue-2-and-3

Created a project that contains Vue 2.7 and 3.4 in the same Vite project so that the Codmod team could test their codemods on it Feel free to add some if guys have time or interested, already invited as Collaborators in that repository

vue2.7

Option API component
Option API component with Mixins

vue3.4

Composition API components (script setup)
Composition API components with Composables

vue2.7/migrations/v-model.vue has a bug, I don't remember how we used custom v-model or v-model:title or title.sync in Vue 2, even after reading migration, I couldn't fix that problem xd

mohab-sameh commented 4 months ago

One question that I have, is there a preference between jscodeshift and ts-moph as the engine?

@Saeid-Za ts-morph is more powerful in general, but jscodeshift has the benefit of being supported by Codemod Studio's AI, making building codemods with it a much easier process.

Great references. @sadeghbarati @Saeid-Za let's kickstart this? Let's come up with a list of what's missing in vue-codemod/vue-migration and vue-upgrade-tool, build the remaining transforms in Codemod Studio (as much as possible, the rest can be done manually), and we'll whip up a daisy-chain recipe that runs all the required codemods for a, hopefully, full migration.

After that's done, @sadeghbarati we can use your repo for testing.

Saeid-Za commented 3 months ago

Hello there! 👋

There seems to be some confusion regarding the scope of the migration project, should we provide only the Vue 2 code examples and their corresponding Vue 3 examples for the codemod team, or should we also write the transformers with the help of the studio before handing everything over for integration into a package?

sadeghbarati commented 3 months ago

@arshcodemod @alexbit-codemod 👆 🙏

mohab-sameh commented 3 months ago

@Saeid-Za If you haven't, can you please join the Slack community and ping me there? We have a shared channel for vue upgrade there. @arshcodemod and I will draft a notion doc so we can collaboratively collect data about the migration steps required.

There seems to be some confusion regarding the scope of the migration project, should we provide only the Vue 2 code examples and their corresponding Vue 3 examples for the codemod team, or should we also write the transformers with the help of the studio before handing everything over for integration into a package?

Either one is a great contribution. If you would like to provide information and context about the vue upgrade steps, and we take it from there, that's great. Let's collect all the info we'll need to build the codemods together on Notion.

arshcodemod commented 3 months ago

@Saeid-Za https://www.notion.so/codemod/Vue-codemods-0a09e6534f9b4aa6a9a076b4305a26f6 taking this discussion to the notion doc here.

We can add in the information here.