https://github.com/dbfernverkehr/vue-class-style-codemod
Vue3 Migration Tool
https://github.com/dbfernverkehr/vue-class-style-codemod
jscodeshift migration vue2 vue2tovue3 vue3 vuejs
Last synced: 8 months ago
JSON representation
Vue3 Migration Tool
- Host: GitHub
- URL: https://github.com/dbfernverkehr/vue-class-style-codemod
- Owner: dbfernverkehr
- License: mit
- Created: 2023-11-23T10:51:03.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-28T14:22:48.000Z (almost 2 years ago)
- Last Synced: 2025-02-01T01:33:12.841Z (8 months ago)
- Topics: jscodeshift, migration, vue2, vue2tovue3, vue3, vuejs
- Language: TypeScript
- Homepage:
- Size: 185 KB
- Stars: 13
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-class-style-codemod
This project is based on the fork of https://github.com/originjs/vue-codemod and was modified and further developed by Deutsche Bahn Fernverkehr AG.
> Cloned from https://github.com/originjs/vue-codemod
`vue-class-style-codemod` is a Vue 2 to Vue 3 migration tool based on `vue-codemod` adding support to convert Vue Class-based components defined with [`vue-class-component`](https://github.com/vuejs/vue-class-component) and [`vue-property-decorator`](https://github.com/kaorun343/vue-property-decorator) to the `script setup` component syntax.
## How to use
Install all dependencies and make vue-class-style-codemod available globally
``npm run setup`` (Please use only npm and not yarn)
Transformation of projects and individual files with the help of vue-class-style-codemod.
> vue-class-style-codemod -t/-a [transformation params]
or
> npx vue-class-style-codemod -t/-a [transformation params]
1) **** indicates the relative path of execution, which can be files and folders. If the file to be converted is in the same folder as the converter, you must specify the file starting from the parent folder.
2) **-a** (or --runAllTransformation) means executing all rules.
3) **-t** (or --transformation) means specific rule (ex. property-decorator)
Please note that the transformation completely replaces the old file
## Rules
Having already the rule `vue-class-component-v8` available in `vue-class-style-codemod`, this projects adds the two rules `property-decorator` and `define-component-to-script-setup`.
### property-decorator
The rule converts most decorators of `vue-property-decorator`. The following table shows some exemplary conversions.
#### Class
From To
```javascript
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class CreatedInput extends Vue {
public created(): void {
this.groupControls.register(this.id);
}
public beforeCreated(): void {
this.groupControls.register(this.id);
}
}
```
```javascript
groupControls.register(id);
groupControls.register(id);
```
#### Emit
From To
```javascript
@Emit('reset')
resetCount() {
this.count = 0;
}
```
```javascript
const emit = defineEmits<{
(e: 'reset'): void
}>();
function resetCount() {
count = 0;
emit("reset");
}
```
#### Injection
From To
```javascript
@Inject() readonly foo!: string
@Inject('bar') readonly bar!: string
@Inject({ from: 'optional', default: 'default' }) readonly optional!: string
@Inject(symbol) readonly baz!: string
@Inject({ from: 'optional', default: () => 'Hello World' }) readonly optional!: string
```
```javascript
const foo: string = inject('foo');
const bar: string = inject('bar');
const optional: string = inject('optional', 'default');
const baz: string = inject(symbol);
const optional: string = inject('optional', () => 'Hello World');
```
#### Next tick
From To
```javascript
await this.$nextTick();
```
```javascript
await nextTick();
```
#### Gettext
From To
```javascript
public get cancelButtonText(): string {
// Cancel button text comment
return this.$gettext('Cancel');
}
```
```javascript
const cancelButtonText = computed(() => {
// Cancel button translation comment
return $gettext('Cancel');
});
```
#### Prop
From To
```javascript
@Prop(Number) readonly propA: number | undefined
@Prop({ default: 'default value' }) readonly propB: string
@Prop({ type: String }) readonly propC!: string
@Prop([String, Boolean]) readonly propD: string | boolean | undefined
@Prop(Number) readonly propE!: number | undefined
@Prop([String, Boolean]) readonly propF!: string | boolean | undefined
```
```javascript
const props = withDefaults(defineProps<{
propA?: number | undefined,
propB?: string,
propC: string,
propD?: string | boolean | undefined,
propE: number | undefined,
propF: string | boolean | undefined
}>(), {
propB: 'default value'
});
```
#### Provide
From To
```javascript
@Provide() foo = 'foo';
@Provide('bar') baz = 'bar';
```
```javascript
const foo = reactive('foo');
provide('foo', foo);
const baz = reactive('bar');
provide('bar', baz);
```
#### Ref
From To
```javascript
@Ref() readonly anotherComponent!: AnotherComponent
@Ref('aButton') readonly button!: HTMLButtonElement
```
```javascript
const anotherComponent = ref();
const aButton = ref();
```
#### Static class fields
From To
```javascript
export class AnyComponent extends Vue {
private static readonly noScrollClass: string = 'util__noscroll-xs';
public static addNoScrollXs(): void {
document.documentElement.classList.add(AnyComponent.noScrollClass);
}
}
```
```javascript
const noScrollClass: string = 'util__noscroll-xs';
function addNoScrollXs(): void {
document.documentElement.classList.add(noScrollClass);
}
```
#### Router
From To
```javascript
methodA() {
return this.$route.params.id
}
methodB() {
return this.$router.back()
}
```
```javascript
const router = useRouter();
const route = useRoute();
function methodA() {
return route.params.id;
}
function methodB() {
return router.back();
}
```
#### Vuex
From To
```javascript
methodC() {
return this.$store.commit('increment')
}
```
```javascript
function methodC() {
return store.commit('increment');
}
```
#### Watch
From To
```javascript
@Watch('person', { immediate: true, deep: true })
onPersonChanged(val: Person, oldVal: Person) {}
```
```javascript
function onPersonChanged(val: Person, oldVal: Person) {}
watch(person, onPersonChanged);
```
### define-component-to-script-setup
This rule converts the `defineComponent` syntax to the `script setup` syntax.
From To
```javascript
import { defineComponent } from 'vue';
export default defineComponent({
name: 'test',
components: {
testComponent
},
emit: ['change','input'],
props: {
counter: {
required: false,
type: Boolean
},
},
setup(props, ctx) {
ctx.emit('changeValue');
return {
test,
title: computed(() => 'Hello World'),
}
},
methods: {
doIt() {
console.log(`Hello ${this.name}`);
},
},
});
```
```javascript
const emit = defineEmits<{
(e: 'change'): void,
(e: 'input'): void
}>();
const props = defineProps<{
counter?: Boolean
}>();
const title = computed(() => 'Hello World');
emit('changeValue');
function doIt() {
console.log(`Hello ${name}`);
}
```
License Information:
The copyright of the original repo licensed under the copyright of vuejs and the changes under the copyright of DB Fernverkehr. All code and modifications are licensed under the **MIT license**.