vuejs / composition-api-converter Goto Github PK
View Code? Open in Web Editor NEWAutomatically migrate components to the Function API
Home Page: https://suspicious-mclean-0e54c3.netlify.com/
Automatically migrate components to the Function API
Home Page: https://suspicious-mclean-0e54c3.netlify.com/
I think it would be great to just copy paste the whole file including the template
and style
sections - then the output file can be a drop-in replacement really, but also could use the template to see what is public/private (basically you could assume private methods and computeds if they are not used in the template)
If I pass a component with a prop but without data I'll get an empty object in the setup return.
Input:
export default {
name: 'MyComponent',
props: {
item: Object,
}
}
Output:
export default {
name: 'MyComponent',
props: {
item: Object
},
setup() {
return {}
}
}
Should be (probably):
export default {
name: 'MyComponent',
props: {
item: Object
},
setup(props) {
return { ...props }
}
}
I would like to be able to choose on how to convert data props to reactive values. There are two methods: value
and state
and value
is the default one now. I would like to pick state
instead.
Input:
export default {
data() {
return {
visible: false,
}
},
}
Current output:
import { value } from 'vue'
export default {
setup() {
const visible = value(false)
return {
visible
}
}
}
Output with state
:
import { state } from 'vue'
export default {
setup() {
const data = state({ visible: false })
return {
...data
}
}
}
This is a potential project. In the past two years, Vue has been through many changes.
<script setup>
syntactic sugarPeople need a automated tool to update their old code. I know Vue team is busy at the moment, and the majority of these implementations not difficult to do, just need time. So I wanted to apply to maintain this project, and help Vue team to do the things what I can do.
A little background on me:
I would be greatly honoured if I can help you with something, even if it's experimental. All best wish for happy new year.
@yyx990803 @posva @Akryum
If this converts files well enough it could be used as a cli to just convert your whole project. Pretty powerful!
Although it would be based on #1 happening...
Object spread is not currently supported and probably could be handled with some ugly code (unfortunately).
Input:
const computed = { value() { return this.count + 1; } };
export default {
props: {
count: Number,
},
computed: {
...computed,
}
}
Could be:
import { computed } from 'vue';
const _computed = { value() { return this.count + 1; } };
export default {
setup(props, context) {
const ctx = { ...props, ...context };
return {
...Object.keys(_computed).reduce((acc, key) => {
acc[key] = computed(_computed[key].bind(ctx))
return acc;
}, {})
}
}
}
The same applies to methods and data.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.