Vue code automatic conversion tool: option API to composition API, <script> turn <script setup>, Ref syntax sugar conversion
🇨🇳 中文版介绍
After the release of Vue3.0, there have been many syntax changes:
-
Composition API became a better choice than Option API;
-
<script setup>simplifies the complicated declaration of<script>; -
Reactivity Transform solve the problem that Ref variable needs
.value;
These improvements did not appear at the first time, but appeared slowly in the past two years. Many projects have migrated from Vue2.x to Vue3.x and are still using Option syntax. There are also many projects that were used when Vue3.0 was just launched, and the old code did not enjoy the newly launched syntactic sugar. The manual modify is time-consuming and labor-intensive, so a plugin that automatically upgrades the syntax is required.
- (WIP) completes the basic transcoding function
- Write a Vscode plugin that supports applying Codemods to .vue files
- set test case
- Support Typescript conversion
- Playground for conversion examples http://localhost:3000
It is recommended to use it in the form of a Vscode plugin. codemod cannot guarantee 100% correctness, and manual inspection is still required after code conversion, so we recommend that you only convert the code you need to upgrade each time. Modifying a project all at once will bring unexpected hidden dangers. From a code refactoring point of view, small steps are always better than a shuttle.
Although we have tried our best to be compatible with the old code, it still cannot cover all cases. If you have a solution or find a new bug, please submit a PR or ISSUE.
🔴 Mixin, the difficulty is that Mixin can be nested in multiple layers, and there is no way to analyze the mixin (PR welcome).
🔴 Import variables from other files, the difficulty is similar to the Mixin above (PR welcome).
Jscodeshift is very easy to use, as long as you read some examples in this repository. The only caveat is that it's best to add fully test cases when you contribute, thanks.