vuejs / composition-api-converter Goto Github PK

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.

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)

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
    }
  }
}

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 }
  }
}

This is a potential project. In the past two years, Vue has been through many changes.

• Option API to composition API
• <script setup> syntactic sugar
• reactive-transform (coming soon)
• Vue 2.7 (coming soon)

People 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:

• In the past few months I've been active in vue-next, contributed several times. More often, I help people solve issue
• One of the maintainers of Vux
• A Vue fan, with four years of using Vue

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