❤
npm
Sign UpSign In

vue2-migration-helper
TypeScript icon, indicating that this package has built-in type declarations

0.3.12 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i vue2-migration-helper

Repository

github.com/mubaidr/vue2-migration-helper

Homepage

github.com/mubaidr/vue2-migration-helper#readme

Weekly Downloads

4

Version

0.3.12

License

MIT

Unpacked Size

53.9 kB

Total Files

47

Last publish

Collaborators

  • mubaidr
Try on RunKit
Report malware