originjs/vue-codemod

Vue.js codemod scripts

vue-codemod's Issues

codemod should support cli update in package.json

Is your feature request related to a problem? Please describe.
codmod dont support cli update int package.json

Describe the solution you'd like
i think cli need to be supported,and element-ui?

The website access in the manual migration guide is incorrect. The VUE website path is changed.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [e.g. iOS]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

wrong function of transformation module render-to-resolveComponent

as the example code in the document of vuejs
in vue2:

and it will be changed to :

But, it is wrong with command :npx vue-codemod test.vue -a

the other wrong with :npx vue-codemod test.vue -t render-to-resolveComponent

test.vue:
<script> export default { render(h) { return h('button_counter') } } </script>

new-global-api transformation TypeError: Cannot read property 'properties' of undefined

Describe the bug
new-global-api transformation TypeError: Cannot read property 'properties' of undefined

Processing use new-global-api transformation
TypeError: Cannot read property 'properties' of undefined
    at NodePath.<anonymous> (D:\GitHub\vue-codemod\dist\transformations\root-prop-to-use.js:54:41)
    at NodePath.<anonymous> (D:\GitHub\vue-codemod\node_modules\jscodeshift\src\collections\Node.js:142:47)    at D:\GitHub\vue-codemod\node_modules\jscodeshift\src\Collection.js:75:36
    at Array.forEach (<anonymous>)
    at Collection.forEach (D:\GitHub\vue-codemod\node_modules\jscodeshift\src\Collection.js:74:18)
    at Collection.replaceWith (D:\GitHub\vue-codemod\node_modules\jscodeshift\src\collections\Node.js:140:17)
    at Collection.typedMethod [as replaceWith] (D:\GitHub\vue-codemod\node_modules\jscodeshift\src\Collection.js:413:43)
    at Object.transformAST (D:\GitHub\vue-codemod\dist\transformations\root-prop-to-use.js:52:14)
    at transformAST (D:\GitHub\vue-codemod\dist\transformations\new-global-api.js:24:24)
    at transform (D:\GitHub\vue-codemod\dist\src\wrapAstTransformation.js:15:9)

To Reproduce
input: vab.js

const install = (Vue, opts = {}) => {
  Vue.prototype.$baseEventBus = new Vue()
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default install

run: npx ../vue-codemod src/utils/vab.js -t new-global-api

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [e.g. iOS]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

`vuex-v4` transformation will throw undefined error

Describe the bug
vuex-v4 transformation will throw undefined error

To Reproduce
run: npx vue-codemod src -t vuex-v4

import Vuex from 'vuex';
const store = new Vuex.Store({
  state () {
    return {
      count: 1
    }
  }
});

and will be transformed:

import Vuex from 'vuex';
// `Vuex.createStore(...)` is undefined
const store = Vuex.createStore({
  state () {
    return {
      count: 1
    }
  }
});

Expected behavior

import * as Vuex from 'vuex';

const store = Vuex.createStore({
  state () {
    return {
      count: 1
    }
  }
});

or

import {createStore} from 'vuex';

const store = createStore({
  state () {
    return {
      count: 1
    }
  }
});

Screenshots

Environment (please complete the following information):
OS: [MacOS]
Version [e.g. 22]

The element-plus version is hardcoded.

createLogger function name not to be transformed

• Describe the bug
  createLogger function name not to be transformed

• To Reproduce

run: npx vue-codemod src -a

import logger from 'vuex/dist/logger'
const store = new Vuex.Store({
  plugins: [logger()]
})

then ,this file will be transformed

import createLogger from 'vuex'
const store = new Vuex.Store({
  plugins: [logger()]
})

• Expected behavior

import createLogger from 'vuex'
const store = new Vuex.Store({
  plugins: [createLogger()]
})

OS: [MacOS]
Version [branch dev]

wrong version change of "@vue/cli-plugin-babel" and "@vue/cli-service"

wrong version change of "@vue/cli-plugin-babel" and "@vue/cli-service" in the packageTransformation.ts.

caused the error:

compile error after transformation 'slot-attribute'

Describe the bug
compile error after transformation 'slot-attribute'

To Reproduce

<template slot="title">
  <span slot="title">title name</span>
</template>

npx vue-codemod this.vue -t slot-attribute

after transformation

<template v-slot:title>
  <template v-slot:title>
    <span>title name</span>
  <template>
</template>

Expected behavior

<template v-slot:title>
  <span>title name</span>
</template>

Environment (please complete the following information):

• OS: [Windows 10]
• version branch dev

v-bind-order-sensitive transformation, each run results in more whitespace

Describe the bug
v-bind-order-sensitive transformation, each run results in more whitespace

To Reproduce

• install vue-codemod
• run npx vue-codemod test.vue -t v-bind-order-sensitive

Expected behavior

<template>
    <div :id="id" class="orderArea orderbarArea"></div>
</template>

Screenshots

Environment (please complete the following information):

OS: Win 10
Version: dev branch 61cae70

`vue` in devdependencies is not converted to`vue@next`

Describe the bug
vue in devdependencies is not converted tovue@next

To Reproduce
run: npx vue-codemod src -a
package.json:

{
  "name": "vue2-component-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "devDependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Expected behavior
Auto convert Vue to vue@next

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [e.g. iOS]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

script setup ts section will be removed in vue sfc

Describe the bug
Vue2 component Using script setup the script section will be removed totally.

To Reproduce

<template>
  <div
    ref="wrapRef"
    class="
      absolute
      right-0
      top-90px
      z-2
      max-h-[calc(100vh-90px)]
      w-[calc(50vw-10.5cm)]
      bg-white
      shadow-md shadow-dark-200
      p-5
      overflow-y-auto
    "
  >
    <div
      v-for="item in list"
      :key="item.id"
      class="flex cursor-pointer text-gray-500 mb-10px"
      :command="item.id"
      @click="selectHistory(item.id)"
    >
      <i class="iconfont icon-time text-gray-300 mr-4px"></i
      >{{ getFormattedTitle(item.createTimestamp, '') }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { getFormattedTitle } from '../composable/useDocument'
import { IDocmentHistory } from '@/api/types'

interface IProps {
  list: IDocmentHistory[]
  select?: (id: number) => void
}

const props = withDefaults(defineProps<IProps>(), {
  list: () => [],
  select: (id: number) => {},
})

const selectHistory = (id: number) => {
  props?.select(id)
}
</script>

<script lang="ts">
export default {
  name: 'document-history',
}
</script>

Expected behavior
Do not modify the script setup section

'v-for-template-key' transformation time is too long

Describe the bug
'v-for-template-key' transformation time is too long

To Reproduce

• git clone https://github.com/wdlhao/vue2-element-touzi-admin.git
• npx vue-codemod src -t v-for-template-key

Expected behavior
v-for key will be on template tag

Environment (please complete the following information):

• OS: [windows 10]
• branch: dev

Error in running `npx vue-codemod test/shims-tsx.d.ts -a `

Describe the bug
Error in running npx vue-codemod test/shims-tsx.d.ts -a

To Reproduce
run:npx vue-codemod test/shims-tsx.d.ts -a

test/shims-tsx.d.ts:

import Vue, { VNode } from 'vue'

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

output:

D:\work\songwang\vue-codemod-test>npx vue-codemod test/shims-tsx.d.ts -a 
Warning!!
This tool may overwrite files.
press enter or enter yes or enter Y to continue:yes
Processing use vue-class-component-v8 transformation
Processing use new-global-api transformation
Processing use vue-router-v4 transformation
SyntaxError: Unexpected token (1:15)
    at Object._raise (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:748:17)
    at Object.raiseWithData (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:741:17)
    at Object.raise (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:735:17)
    at Object.unexpected (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:9101:16)
    at Object.expectContextual (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:9067:41)
    at Object.parseImport (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:13102:12)
    at Object.parseImport (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:6737:30)
    at Object.parseStatementContent (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:11776:27)
    at Object.parseStatementContent (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:6806:18)
    at Object.parseStatement (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:11676:17) {
  loc: Position { line: 1, column: 15 },
  pos: 15
}
Processing use vuex-v4 transformation
SyntaxError: Unexpected token (1:15)
    at Object._raise (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:748:17)
    at Object.raiseWithData (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:741:17)
    at Object.raise (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:735:17)
    at Object.unexpected (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:9101:16)
    at Object.expectContextual (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:9067:41)
    at Object.parseImport (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:13102:12)
    at Object.parseImport (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:6737:30)
    at Object.parseStatementContent (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:11776:27)
    at Object.parseStatementContent (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:6806:18)
    at Object.parseStatement (D:\work\songwang\yuangongji\vue-codemod\node_modules\@babel\parser\lib\index.js:11676:17) {
  loc: Position { line: 1, column: 15 },
  pos: 15
}
.........

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [e.g. iOS]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

The conversion feature of the Global API is expected to be supported.

Is your feature request related to a problem? Please describe.
The conversion feature of the Global API is expected to be supported.

2.x Global API	3.x Instance API (app)
Vue.config	app.config
Vue.config.productionTip	removed (see below)
Vue.config.ignoredElements	app.config.compilerOptions.isCustomElement (see below)
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use (see below)
Vue.prototype	app.config.globalProperties (see below)
Vue.extend	removed (see below)

Describe the solution you'd like

Describe alternatives you've considered

Additional context

v-bind-sync report an error when v-bind missing argument

Describe the bug
when v-bind missing argument, v-bind-sync transformation will report an error.

<template>
  <!-- ✗ BAD: missing argument -->
  <MyComponent v-bind.sync="foo"/>
</template>

To Reproduce

install the lastest vue-codemod, then run vue-codemod test.vue -t v-bind-sync:

TypeError: Cannot read property 'range' of null

      137 |  */
      138 | export function getText(node: Node, source: string): string {
    > 139 |   const start = node.range[0]
          |                      ^
      140 |   const end = node.range[1]
      141 |   return source.slice(start, end)
      142 | }

      at Object.getText (src/operationUtils.ts:139:22)
      at fix (vue-transformations/v-bind-sync.ts:57:39)
      at vue-transformations/v-bind-sync.ts:14:42

Expected behavior
output as it was:

<template>
  <!-- ✗ BAD: missing argument -->
  <MyComponent v-bind.sync="foo"/>
</template>

Screenshots

Environment (please complete the following information):

• OS: Win 10
• Version dev branch, latest commit: 5953fd3

Additional context
Add any other context about the problem here.

slot-attribute transformation incorrectly transform slot attribute

Describe the bug
slot-attribute transformation incorrectly transform <template slot="header">

To Reproduce

• install vue-codemod
• run npx vue-codemod test.vue -t slot-attribute.

Expected behavior
<template slot="header"> hello </template> will be transformed to <template v-slot:header> hello</template>.

Screenshots

Environment (please complete the following information):

• OS: Win 10
• Version: dev branch 0d564eb

Conversion failed when `template` is not the first label

Describe the bug
Conversion failed when template is not the first label.

To Reproduce
test.vue:

<style>
</style>

<template>
    <div>aaa</div>
</template>

<script>
export default {
}
</script>

Run npx vue-codemod test.vue -a
Actual Results:
<div>aaa</div> is removed from the template.

<style>
</style>

<template></template>

<script>
export default {
}
</script>

Expected behavior

<style>
</style>

<template>
    <div>aaa</div>
</template>

<script>
export default {
}
</script>

Screenshots

Environment (please complete the following information):

• OS: [e.g. iOS]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Vue-codemod should not rely on prettier when used

Describe the bug
Vue-codemod should not rely on prettier when used

npx vue-codemod test/test.vue -a
internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'prettier'
Require stack:
- D:\work\songwang\aa\node_modules\@originjs\vue-codemod\dist\src\packageTransformation.js
- D:\work\songwang\aa\node_modules\@originjs\vue-codemod\dist\bin\vue-codemod.js

To Reproduce
The converted project does not rely on the prettier
npx vue-codemod test/test.vue -a

Expected behavior
Vue codemod should not rely on prettier when used

Screenshots

Environment (please complete the following information):

• OS: [windows]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

element-ui to element-plus index.css modification

Describe the bug
A clear and concise description of what the bug is.
originjs/vue2-element-touzi-admin@8cddf35
To Reproduce
Steps to reproduce the behavior.
NA
Expected behavior
A clear and concise description of what you expected to happen.
import('element-ui/lib/theme-chalk/index.css') should be changed to
import('element-plus/theme-chalk/index.css')
Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [e.g. iOS]
• Version [e.g. 22]
  element-plus 2.2.17

Additional context
Add any other context about the problem here.

When using v-bind-sync conversion, an error is reported

Describe the bug
When using v-bind-sync conversion, an error is reported

npx vue-codemod test/test.vue -t v-bind-sync
Warning!!
 This tool may overwrite files.
Enter yes to continue:yes
Processing use v-bind-sync transformation
TypeError: Cannot set property 'vue-template-compiler' of undefined
    at Object.transform (D:\work\songwang\aa\node_modules\@originjs\vue-codemod\dist\src\packageTransformation.js:51:65)
    at main (D:\work\songwang\aa\node_modules\@originjs\vue-codemod\dist\bin\vue-codemod.js:86:33)
    at Object.<anonymous> (D:\work\songwang\aa\node_modules\@originjs\vue-codemod\dist\bin\vue-codemod.js:141:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47

To Reproduce
Steps to reproduce the behavior.
test.vue:

<template>
    <div>sss</div>
</template>

Expected behavior

Screenshots

Environment (please complete the following information):

• OS: [windows]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

vue-router-v4 transformation Error: mode must be one of 'hash', 'history', or 'abstract'

Describe the bug
vue-router-v4 transformation Error: mode must be one of 'hash', 'history', or 'abstract'

errlog:

Error: mode must be one of 'hash', 'history', or 'abstract'
    at D:\GitHub\vue-codemod\dist\transformations\vue-router-v4.js:55:31
    at Array.filter (<anonymous>)
    at NodePath.<anonymous> (D:\GitHub\vue-codemod\dist\transformations\vue-router-v4.js:39:63)
    at NodePath.<anonymous> (D:\GitHub\vue-codemod\node_modules\jscodeshift\src\collections\Node.js:142:47)    at D:\GitHub\vue-codemod\node_modules\jscodeshift\src\Collection.js:75:36
    at Array.forEach (<anonymous>)
    at Collection.forEach (D:\GitHub\vue-codemod\node_modules\jscodeshift\src\Collection.js:74:18)
    at Collection.replaceWith (D:\GitHub\vue-codemod\node_modules\jscodeshift\src\collections\Node.js:140:17)
    at Collection.typedMethod [as replaceWith] (D:\GitHub\vue-codemod\node_modules\jscodeshift\src\Collection.js:413:43)
    at transformAST (D:\GitHub\vue-codemod\dist\transformations\vue-router-v4.js:31:22)

To Reproduce
input:

const router = new VueRouter({
  base: publicPath,
  mode: routerMode,
  scrollBehavior: () => ({
    y: 0,
  }),
  routes: constantRoutes,
})

run: npx ../vue-codemod src -t vue-router-v4

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [windows]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Code lines containing `new` and `el` are incorrectly converted to `Vue.createApp`.

Describe the bug
Code lines containing new and el are incorrectly converted to Vue.createApp.

To Reproduce
Steps to reproduce the behavior.
demo/test.js：

const container = new LazyContainer({ el, binding, vnode, lazy: this.lazy })

Run:npx vue-codemod demo/test.js -t new-global-api

output：

const container = Vue.createApp(LazyContainer, {
  binding,
  vnode,
  lazy: this.lazy
}).mount(el)

Expected behavior
No modification is made.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [Windows]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.