You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+49-10Lines changed: 49 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,18 +2,20 @@
2
2
3
3
**Current status: experimental**
4
4
5
-
This repository contains a collection of codemod scripts for use with [JSCodeshift](https://github.com/facebook/jscodeshift) that help update Vue.js APIs.
5
+
This repository contains a collection of codemod scripts for use with [JSCodeshift](https://github.com/facebook/jscodeshift)and [vue-eslint-parser](https://github.com/mysticatea/vue-eslint-parser)that help update Vue.js APIs.
6
6
7
7
Inspired by [react-codemod](https://github.com/reactjs/react-codemod).
-`transformation` (required) - name of transformation, see available transformations below; or you can provide a path to a custom transformation module.
14
-
-`path` (required) - files or directory to transform.
15
-
-`--params` (optional) - additional transformation specific args.
13
+
-`transformation` (required) - name of transformation, see available transformations below; or you can provide a path to a custom transformation module.
14
+
-`path` (required) - files or directory to transform.
15
+
-`--params` (optional) - additional transformation specific args.
16
16
<!-- - use the `--dry` options for a dry-run. -->
17
+
- run all transformations:
18
+
`npx vue-codemod <path> -a`
17
19
18
20
## Programmatic API
19
21
@@ -28,18 +30,53 @@ Inspired by [react-codemod](https://github.com/reactjs/react-codemod).
28
30
-[ ] (WIP) Implement the transformations described below for migration usage
29
31
-[ ] Built-in transformations need to support TypeScript
30
32
-[ ] Built-in transformations need to support module systems other than ES module, and those without modules
31
-
-[] Define an interface for transformation of template blocks (may use [`vue-eslint-parser`](https://github.com/mysticatea/vue-eslint-parser/) for this)
33
+
-[x] Define an interface for transformation of template blocks (use [`vue-eslint-parser`](https://github.com/mysticatea/vue-eslint-parser/) for this)
32
34
-[x] A playground for writing transformations - `yarn playground` and visit http://localhost:3000
33
35
34
36
## Included Transformations
35
37
38
+
### Transformation List
39
+
40
+
-`vue-class-component-v8`
41
+
-`new-global-api`
42
+
-`vue-router-v4`
43
+
-`vuex-v4`
44
+
-`define-component`
45
+
-`new-vue-to-create-app`
46
+
-`scoped-slots-to-slots`
47
+
-`new-directive-api`
48
+
-`remove-vue-set-and-delete`
49
+
-`rename-lifecycle`
50
+
-`add-emit-declaration`
51
+
-`global-filter`
52
+
-`tree-shaking`
53
+
-`v-model`
54
+
-`render-to-resolveComponent`
55
+
-`remove-contextual-h-from-render`
56
+
-`remove-production-tip`
57
+
-`remove-trivial-root`
58
+
-`remove-vue-use`
59
+
-`root-prop-to-use`
60
+
-`vue-as-namespace-import`
61
+
-`add-import`
62
+
-`remove-extraneous-import`
63
+
-`slot-attribute`
64
+
-`slot-default`
65
+
-`slot-scope-attribute`
66
+
-`v-for-template-key`
67
+
-`v-else-if-key`
68
+
-`transition-group-root`
69
+
-`v-bind-order-sensitive`
70
+
-`v-for-v-if-precedence-changed`
71
+
-`remove-listeners`
72
+
36
73
### Migrating from Vue 2 to Vue 3
37
74
38
75
The migration path (to be integrated in a new version of [`vue-migration-helper`](https://github.com/vuejs/vue-migration-helper)):
39
76
40
77
1. Install eslint-plugin-vue@7, turn on the `vue3-essential` category (maybe a few exceptions like `vue/no-deprecated-dollar-scopedslots-api`)
41
78
2. Run `eslint --fix` to fix all auto-fixable issues; if there are any remaining errors, fix them manually
42
-
3. Run the codemods below
79
+
3. Run the `-a` command: `npx vue-codemod <path> -a`
43
80
4. Install vue@3, vue-loader@16, etc.
44
81
5. Make sure to use the compat build of vue@3
45
82
6. Serve the app in development mode, fix the runtime deprecation warnings
@@ -122,7 +159,8 @@ Legend of annotations:
122
159
- Arrow functions that returns dynamic `import` call to `.vue` files
123
160
- Arrow functions that returns an object with the `component` property being a dynamic `import` call.
124
161
- The only case that cannot be easily detected is 2.x async components using manual `resolve/reject` instead of returning promises. Manual upgrade will be required for such cases but they should be relatively rare.
- There could be potential naming conflicts with existing component-level `emits` options, so we need to scan and warn on such usages
127
165
- To better utilize the new `emits` option, we can provide a codemod that automatically scans all instances of `$emit` calls in a component and generate the `emits` option
128
166
-[Vuex 3.x to 4](https://github.com/vuejs/vuex/tree/4.0)
@@ -140,6 +178,8 @@ Legend of annotations:
140
178
-`import { Component } from 'vue-class-component'` -> `import { Options as Component } from 'vue-class-component'`
141
179
- 🔴 `import Vue from 'vue'` -> `import { Vue } from 'vue-class-component'` (Need to avoid name collision if there's any reference to `Vue` besides `extends Vue`)
- Subtle differences between `@vue/composition-api` and the Vue 3 implementation are listed in the [`@vue/composition-api` README](https://github.com/vuejs/composition-api#limitations)
155
-
-[The precedence of `v-if` and `v-for` have been flipped when using both on the same element.](https://github.com/vuejs/vue-next/issues/1165)
156
195
- Warn for [mixing `v-for` and `ref`](https://github.com/vuejs/vue-next/issues/1166).
157
196
- Warn about deprecated instance methods and properties: `$destroy`, `$children`
0 commit comments