Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mubaidr/vue2-migration-helper
Transforms Vue.js 2.0 SFCs to Vue.js 3.0 Composition API syntax.
https://github.com/mubaidr/vue2-migration-helper
composition-api javascript typescript vue vue-sfc vue2 vue3 vue3-composition-api vuejs
Last synced: 12 days ago
JSON representation
Transforms Vue.js 2.0 SFCs to Vue.js 3.0 Composition API syntax.
- Host: GitHub
- URL: https://github.com/mubaidr/vue2-migration-helper
- Owner: mubaidr
- License: mit
- Archived: true
- Created: 2019-12-05T09:34:09.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-06T16:43:55.000Z (about 4 years ago)
- Last Synced: 2024-10-05T02:08:19.141Z (about 1 month ago)
- Topics: composition-api, javascript, typescript, vue, vue-sfc, vue2, vue3, vue3-composition-api, vuejs
- Language: TypeScript
- Homepage: https://vue2-migration-helper.netlify.com/
- Size: 1.29 MB
- Stars: 31
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vue2-migration-helper
Transforms Vue.js SFCs to composition api syntax.
[](https://actions-badge.atrox.dev/mubaidr/vue2-migration-helper/goto?ref=master)
[](https://www.codacy.com/manual/mubaidr/vue2-migration-helper?utm_source=github.com&utm_medium=referral&utm_content=mubaidr/vue2-migration-helper&utm_campaign=Badge_Grade)
[](https://codecov.io/gh/mubaidr/vue2-migration-helper)
[](https://app.netlify.com/sites/vue2-migration-helper/deploys)
[](#contributors)
[](https://nodei.co/npm/vue2-migration-helper/)
## Install
```bash
npm i vue2-migration-helper
```
### CLI
```bash
# convert all .vue files in source directory and outputs in target directory
vue2-migration-helper --source="source" --target="target"
# displays help
vue2-migration-helper --help
```
### Programatically use
```ts
import { vue2MigrationHelper } from 'vue2-migration-helper'
vue2MigrationHelper({
source: 'source/',
target: 'target/',
})
```
## Features
- [x] add `setup` method
- with `props` and `context` arguments
- [x] add required vue `imports`
- only adds required imports after traversing code
- [x] update `data` properties
- Uses `data` variable using `reactive`
- Return reactive references using `ref`
- updates usage of these varaiables
- [x] update `computed` syntax
- defines variable for each property using new syntax `computed`
- [x] update `watch` syntax
- updates watch syntax
- [x] integrate `methods` directly into setup
- defines `methods` into the setup body
- updates method calls
- [x] update template `ref` usage
- adds a new variable for each `templateRef` using `ref(null)`
- add new defined templateRefs to return statement
- [x] convert `props` syntax
- [x] update `lifecycle` hooks and remove deperecated lifecycle hooks
- removes depracted life cycle hooks, injects deprecated hooks code into `setup` method.
- copies other `hooks` into the `setup` method
- [x] `component` registration
- [x] replace `this` usage with new `context` parameter for \$events etc
- replaces `this` keyword usage as this no longer refers to vue component itself.
missing something?
## Example
For a Vue.js SFC (single file component) like this:
```js
import SomeComponent from './SomeComponent'
const zero = {}
export default {
props: {
title: String,
likes: Number,
callback: Function,
},
components: {
SomeComponent,
},
data() {
return {
one: true,
two: 2,
three: 'three',
}
},
watch: {
one(val) {
console.log(val)
},
two: (val) => {
console.log(val)
},
three: function (a, b) {
console.log(a, b)
},
},
computed: {
oneComputed() {
return !this.one
},
twoComputed: () => {
return !this.one
},
threeComputed: function () {
return !this.one
},
},
created() {
console.log('created')
},
mounted() {
console.log('mounted')
},
methods: {
...[
function fourMethod() {
console.log('fourMethod')
},
function fiveMethod() {
console.log('fiveMethod')
},
],
oneMethod() {
const html = this.$refs.templateRef.innerHTML
console.log('oneMethod')
console.log(this.oneComputed)
},
twoMethod: function () {
this.$refs.templateRef.innerHTML = 'html'
console.log('twoMethod')
console.log(this.twoComputed)
this.oneMethod()
console.log(this.$router)
},
threeMethod: () => {
console.log('threeMethod')
console.log(this.threeComputed)
this.twoMethod()
console.log(this.$store)
},
},
}
```
this script generates Vue SFC using composition API:
```js
import {
ref,
reacted,
toRefs,
watch,
computed,
onCreated,
onMounted,
} from 'vue'
import SomeComponent from './SomeComponent'
const zero = {}
export default {
components: {
SomeComponent,
},
props: {
title: String,
likes: Number,
callback: Function,
},
setup(props, context) {
const data = reactive({
one: true,
two: 2,
three: 'three',
})
const templateRef = ref(null)
watch(three, (a, b) => {
console.log(a, b)
})
watch(two, (val) => {
console.log(val)
})
watch(one, (val) => {
console.log(val)
})
const oneComputed = computed(() => {
return !data.one
})
const twoComputed = computed(() => {
return data.two + 5
})
const threeComputed = computed(() => {
return data.three.toUpperCase()
})
;(() => {
console.log('created')
})()
onMounted(() => {
console.log('mounted')
})
function fourMethod() {
console.log('fourMethod')
}
function fiveMethod() {
console.log('fiveMethod')
}
function oneMethod() {
const html = templateRef.innerHTML
console.log('oneMethod')
console.log(oneComputed)
console.log(context.$data)
}
function twoMethod() {
templateRef.innerHTML = 'html'
console.log('twoMethod')
console.log(twoComputed)
oneMethod()
console.log(context.$router)
}
function threeMethod() {
console.log('threeMethod')
console.log(threeComputed)
twoMethod()
console.log(fourMethod)
console.log(context.$store)
}
return {
...ref(data),
oneComputed,
twoComputed,
threeComputed,
fourMethod,
fiveMethod,
oneMethod,
twoMethod,
threeMethod,
templateRef,
}
},
}
```