{"id":13435186,"url":"https://github.com/mubaidr/vue2-migration-helper","last_synced_at":"2025-03-18T02:31:14.793Z","repository":{"id":55065746,"uuid":"226065766","full_name":"mubaidr/vue2-migration-helper","owner":"mubaidr","description":"Transforms Vue.js 2.0 SFCs to Vue.js 3.0 Composition API syntax.","archived":true,"fork":false,"pushed_at":"2020-09-06T16:43:55.000Z","size":1356,"stargazers_count":31,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-05T02:08:19.141Z","etag":null,"topics":["composition-api","javascript","typescript","vue","vue-sfc","vue2","vue3","vue3-composition-api","vuejs"],"latest_commit_sha":null,"homepage":"https://vue2-migration-helper.netlify.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mubaidr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"mubaidr","patreon":"mubaidr","open_collective":"mubaidr","liberapay":"mubaidr","issuehunt":"mubaidr"}},"created_at":"2019-12-05T09:34:09.000Z","updated_at":"2023-10-12T11:50:29.000Z","dependencies_parsed_at":"2022-08-14T10:50:37.827Z","dependency_job_id":null,"html_url":"https://github.com/mubaidr/vue2-migration-helper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mubaidr%2Fvue2-migration-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mubaidr%2Fvue2-migration-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mubaidr%2Fvue2-migration-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mubaidr%2Fvue2-migration-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mubaidr","download_url":"https://codeload.github.com/mubaidr/vue2-migration-helper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221704674,"owners_count":16866811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["composition-api","javascript","typescript","vue","vue-sfc","vue2","vue3","vue3-composition-api","vuejs"],"created_at":"2024-07-31T03:00:33.639Z","updated_at":"2024-10-27T16:32:02.597Z","avatar_url":"https://github.com/mubaidr.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mubaidr","https://patreon.com/mubaidr","https://opencollective.com/mubaidr","https://liberapay.com/mubaidr","https://issuehunt.io/r/mubaidr"],"categories":["Components \u0026 Libraries","🔧 Tools / Helper libraries","Utilities [🔝](#readme)"],"sub_categories":["Utilities"],"readme":"# vue2-migration-helper\n\nTransforms Vue.js SFCs to composition api syntax.\n\n[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fmubaidr%2Fvue2-migration-helper%2Fbadge%3Fref%3Dmaster\u0026style=flat)](https://actions-badge.atrox.dev/mubaidr/vue2-migration-helper/goto?ref=master)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/72af19d6ff7240a5a4041ea5ecba65ea)](https://www.codacy.com/manual/mubaidr/vue2-migration-helper?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=mubaidr/vue2-migration-helper\u0026utm_campaign=Badge_Grade)\n[![codecov](https://codecov.io/gh/mubaidr/vue2-migration-helper/branch/master/graph/badge.svg)](https://codecov.io/gh/mubaidr/vue2-migration-helper)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/0ff1d48c-3a86-4c1b-be18-e349e2e41e12/deploy-status)](https://app.netlify.com/sites/vue2-migration-helper/deploys)\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n[![NPM](https://nodei.co/npm/vue2-migration-helper.png)](https://nodei.co/npm/vue2-migration-helper/)\n\n## Install\n\n```bash\nnpm i vue2-migration-helper\n```\n\n### CLI\n\n```bash\n# convert all .vue files in source directory and outputs in target directory\nvue2-migration-helper --source=\"source\" --target=\"target\"\n\n# displays help\nvue2-migration-helper --help\n```\n\n### Programatically use\n\n```ts\nimport { vue2MigrationHelper } from 'vue2-migration-helper'\n\nvue2MigrationHelper({\n  source: 'source/',\n  target: 'target/',\n})\n```\n\n## Features\n\n- [x] add `setup` method\n  - with `props` and `context` arguments\n- [x] add required vue `imports`\n  - only adds required imports after traversing code\n- [x] update `data` properties\n  - Uses `data` variable using `reactive`\n  - Return reactive references using `ref`\n  - updates usage of these varaiables\n- [x] update `computed` syntax\n  - defines variable for each property using new syntax `computed`\n- [x] update `watch` syntax\n  - updates watch syntax\n- [x] integrate `methods` directly into setup\n  - defines `methods` into the setup body\n  - updates method calls\n- [x] update template `ref` usage\n  - adds a new variable for each `templateRef` using `ref(null)`\n  - add new defined templateRefs to return statement\n- [x] convert `props` syntax\n- [x] update `lifecycle` hooks and remove deperecated lifecycle hooks\n  - removes depracted life cycle hooks, injects deprecated hooks code into `setup` method.\n  - copies other `hooks` into the `setup` method\n- [x] `component` registration\n- [x] replace `this` usage with new `context` parameter for \\$events etc\n  - replaces `this` keyword usage as this no longer refers to vue component itself.\n\nmissing something?\n\n## Example\n\nFor a Vue.js SFC (single file component) like this:\n\n```js\nimport SomeComponent from './SomeComponent'\nconst zero = {}\n\nexport default {\n  props: {\n    title: String,\n    likes: Number,\n    callback: Function,\n  },\n\n  components: {\n    SomeComponent,\n  },\n\n  data() {\n    return {\n      one: true,\n      two: 2,\n      three: 'three',\n    }\n  },\n\n  watch: {\n    one(val) {\n      console.log(val)\n    },\n    two: (val) =\u003e {\n      console.log(val)\n    },\n    three: function (a, b) {\n      console.log(a, b)\n    },\n  },\n\n  computed: {\n    oneComputed() {\n      return !this.one\n    },\n    twoComputed: () =\u003e {\n      return !this.one\n    },\n    threeComputed: function () {\n      return !this.one\n    },\n  },\n\n  created() {\n    console.log('created')\n  },\n\n  mounted() {\n    console.log('mounted')\n  },\n\n  methods: {\n    ...[\n      function fourMethod() {\n        console.log('fourMethod')\n      },\n      function fiveMethod() {\n        console.log('fiveMethod')\n      },\n    ],\n\n    oneMethod() {\n      const html = this.$refs.templateRef.innerHTML\n      console.log('oneMethod')\n      console.log(this.oneComputed)\n    },\n\n    twoMethod: function () {\n      this.$refs.templateRef.innerHTML = 'html'\n      console.log('twoMethod')\n      console.log(this.twoComputed)\n      this.oneMethod()\n      console.log(this.$router)\n    },\n\n    threeMethod: () =\u003e {\n      console.log('threeMethod')\n      console.log(this.threeComputed)\n      this.twoMethod()\n\n      console.log(this.$store)\n    },\n  },\n}\n```\n\nthis script generates Vue SFC using composition API:\n\n```js\nimport {\n  ref,\n  reacted,\n  toRefs,\n  watch,\n  computed,\n  onCreated,\n  onMounted,\n} from 'vue'\n\nimport SomeComponent from './SomeComponent'\nconst zero = {}\n\nexport default {\n  components: {\n    SomeComponent,\n  },\n  props: {\n    title: String,\n    likes: Number,\n    callback: Function,\n  },\n\n  setup(props, context) {\n    const data = reactive({\n      one: true,\n      two: 2,\n      three: 'three',\n    })\n    const templateRef = ref(null)\n    watch(three, (a, b) =\u003e {\n      console.log(a, b)\n    })\n    watch(two, (val) =\u003e {\n      console.log(val)\n    })\n    watch(one, (val) =\u003e {\n      console.log(val)\n    })\n    const oneComputed = computed(() =\u003e {\n      return !data.one\n    })\n    const twoComputed = computed(() =\u003e {\n      return data.two + 5\n    })\n    const threeComputed = computed(() =\u003e {\n      return data.three.toUpperCase()\n    })\n\n    ;(() =\u003e {\n      console.log('created')\n    })()\n\n    onMounted(() =\u003e {\n      console.log('mounted')\n    })\n\n    function fourMethod() {\n      console.log('fourMethod')\n    }\n\n    function fiveMethod() {\n      console.log('fiveMethod')\n    }\n\n    function oneMethod() {\n      const html = templateRef.innerHTML\n      console.log('oneMethod')\n      console.log(oneComputed)\n      console.log(context.$data)\n    }\n\n    function twoMethod() {\n      templateRef.innerHTML = 'html'\n      console.log('twoMethod')\n      console.log(twoComputed)\n      oneMethod()\n      console.log(context.$router)\n    }\n\n    function threeMethod() {\n      console.log('threeMethod')\n      console.log(threeComputed)\n      twoMethod()\n      console.log(fourMethod)\n      console.log(context.$store)\n    }\n\n    return {\n      ...ref(data),\n      oneComputed,\n      twoComputed,\n      threeComputed,\n      fourMethod,\n      fiveMethod,\n      oneMethod,\n      twoMethod,\n      threeMethod,\n      templateRef,\n    }\n  },\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmubaidr%2Fvue2-migration-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmubaidr%2Fvue2-migration-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmubaidr%2Fvue2-migration-helper/lists"}