Skip to content

Commit 7f67332

Browse files
committed
docs: update README
1 parent e0d1705 commit 7f67332

File tree

1 file changed

+49
-10
lines changed

1 file changed

+49
-10
lines changed

README.md

Lines changed: 49 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,20 @@
22

33
**Current status: experimental**
44

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.
66

77
Inspired by [react-codemod](https://github.com/reactjs/react-codemod).
88

99
## Command Line Usage
10+
- run a single transformation:
11+
`npx vue-codemod <path> -t <transformation> --params [transformation params] [...additional options]`
1012

11-
`npx vue-codemod <path> -t <transformation> --params [transformation params] [...additional options]`
12-
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.
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.
1616
<!-- - use the `--dry` options for a dry-run. -->
17+
- run all transformations:
18+
`npx vue-codemod <path> -a`
1719

1820
## Programmatic API
1921

@@ -28,18 +30,53 @@ Inspired by [react-codemod](https://github.com/reactjs/react-codemod).
2830
- [ ] (WIP) Implement the transformations described below for migration usage
2931
- [ ] Built-in transformations need to support TypeScript
3032
- [ ] 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)
3234
- [x] A playground for writing transformations - `yarn playground` and visit http://localhost:3000
3335

3436
## Included Transformations
3537

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+
3673
### Migrating from Vue 2 to Vue 3
3774

3875
The migration path (to be integrated in a new version of [`vue-migration-helper`](https://github.com/vuejs/vue-migration-helper)):
3976

4077
1. Install eslint-plugin-vue@7, turn on the `vue3-essential` category (maybe a few exceptions like `vue/no-deprecated-dollar-scopedslots-api`)
4178
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`
4380
4. Install vue@3, vue-loader@16, etc.
4481
5. Make sure to use the compat build of vue@3
4582
6. Serve the app in development mode, fix the runtime deprecation warnings
@@ -122,7 +159,8 @@ Legend of annotations:
122159
- Arrow functions that returns dynamic `import` call to `.vue` files
123160
- Arrow functions that returns an object with the `component` property being a dynamic `import` call.
124161
- 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.
125-
- 🔴 [RFC30: Add `emits` component option](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
162+
- [RFC30: Add `emits` component option](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
163+
- **implemented as `add-emit-declaration`**
126164
- There could be potential naming conflicts with existing component-level `emits` options, so we need to scan and warn on such usages
127165
- 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
128166
- [Vuex 3.x to 4](https://github.com/vuejs/vuex/tree/4.0)
@@ -140,6 +178,8 @@ Legend of annotations:
140178
- `import { Component } from 'vue-class-component'` -> `import { Options as Component } from 'vue-class-component'`
141179
- 🔴 `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`)
142180
- 🔴 `Component.registerHooks` -> `Vue.registerHooks`
181+
- [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)
182+
- **implemented as `v-for-v-if-precedence-changed`**
143183

144184
#### Breaking Changes that Can Only Be Manually Migrated
145185

@@ -152,7 +192,6 @@ Legend of annotations:
152192
- [RFC31: Attribute Fallthrough + Functional Component Updates](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
153193
- Warn of every `$listeners` and `.native` usage
154194
- 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)
156195
- Warn for [mixing `v-for` and `ref`](https://github.com/vuejs/vue-next/issues/1166).
157196
- Warn about deprecated instance methods and properties: `$destroy`, `$children`
158197

0 commit comments

Comments
 (0)