Skip to content
This repository has been archived by the owner on Nov 1, 2020. It is now read-only.

mubaidr/vue2-migration-helper

Repository files navigation

vue2-migration-helper

Transforms Vue.js SFCs to composition api syntax.

Build Status Codacy Badge codecov Netlify Status All Contributors

NPM

Install

npm i vue2-migration-helper

CLI

# 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

import { vue2MigrationHelper } from 'vue2-migration-helper'

vue2MigrationHelper({
  source: 'source/',
  target: 'target/',
})

Features

  • add setup method
    • with props and context arguments
  • add required vue imports
    • only adds required imports after traversing code
  • update data properties
    • Uses data variable using reactive
    • Return reactive references using ref
    • updates usage of these varaiables
  • update computed syntax
    • defines variable for each property using new syntax computed
  • update watch syntax
    • updates watch syntax
  • integrate methods directly into setup
    • defines methods into the setup body
    • updates method calls
  • update template ref usage
    • adds a new variable for each templateRef using ref(null)
    • add new defined templateRefs to return statement
  • convert props syntax
  • 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
  • component registration
  • 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:

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:

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