Apply more rules

.github/workflows/ci.yml

@@ -0,0 +1,27 @@
+name: CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x, 15.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: Run test
+      run: |
+        npm install
+        npm test

generator/codemods/global-api/__testfixtures__/basic.output.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 
-createApp(App).mount('#app');
+const app = createApp(App);
+app.mount('#app');

generator/codemods/global-api/__testfixtures__/custom-root-prop.output.js

@@ -1,7 +1,9 @@
 import { createApp, h } from 'vue';
 import App from './App.vue';
 
-createApp({
+const app = createApp({
   myOption: 'hello!',
   render: () => h(App),
-}).mount('#app');
+});
+
+app.mount('#app');

generator/codemods/global-api/__testfixtures__/next-tick.input.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+Vue.nextTick(() => {
+    console.log('foo');
+})

generator/codemods/global-api/__testfixtures__/next-tick.output.js

@@ -0,0 +1,5 @@
+import { nextTick } from 'vue';
+
+nextTick(() => {
+    console.log('foo');
+})

generator/codemods/global-api/__testfixtures__/vue-router.output.js

@@ -2,4 +2,5 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 
-createApp(App).use(router).mount('#app');
+const app = createApp(App).use(router);
+app.mount('#app');

generator/codemods/global-api/__testfixtures__/vuex.output.js

@@ -3,6 +3,7 @@ import App from './App.vue';
 import store from './store';
 import anotherStore from './another-store';
 
-createApp(App).use(store).mount('#app');
-
-createApp(App).use(anotherStore).mount('#app');
+const app = createApp({}).use(h => h(App));
+app.mount('#app');
+const app = createApp({}).use(h => h(App));
+app.mount('#app');

generator/codemods/global-api/__tests__/global-api-test.js

@@ -8,3 +8,4 @@ defineTest(__dirname, 'index', null, 'custom-root-prop')
 defineTest(__dirname, 'index', null, 'vue-router')
 defineTest(__dirname, 'index', null, 'vuex')
 defineTest(__dirname, 'index', null, 'vue-use')
+defineTest(__dirname, 'index', null, 'next-tick')

generator/codemods/global-api/create-app-mount.js

@@ -7,13 +7,21 @@ module.exports = function createAppMount(context) {
   const { j, root } = context
 
   // new Vue(...).$mount()
-  const mountCalls = root.find(j.CallExpression, n => {
-    return (
-      n.callee.type === 'MemberExpression' &&
-      n.callee.property.name === '$mount' &&
-      n.callee.object.type === 'NewExpression' &&
-      n.callee.object.callee.name === 'Vue'
-    )
+  const mountCalls = root.find(j.ExpressionStatement, {
+    expression: {
+      type: 'CallExpression',
+      callee: {
+        type: 'MemberExpression',
+        object: {
+          type: 'NewExpression',
+          callee: {
+            type: 'Identifier',
+            name: 'Vue'
+          }
+        },
+        property: { type: 'Identifier', name: '$mount' }
+      }
+    }
   })
 
   if (!mountCalls.length) {
@@ -23,16 +31,26 @@ module.exports = function createAppMount(context) {
   const addImport = require('../utils/add-import')
   addImport(context, { imported: 'createApp' }, 'vue')
 
-  mountCalls.replaceWith(({ node }) => {
-    let rootProps = node.callee.object.arguments[0]
-    const el = node.arguments[0]
+  const rootProps = mountCalls.at(0).get().node.expression.callee.object
+    .arguments
+  mountCalls.insertBefore(
+    j.variableDeclaration('const', [
+      j.variableDeclarator(
+        j.identifier('app'),
+        j.callExpression(j.identifier('createApp'), rootProps)
+      )
+    ])
+  )
 
-    return j.callExpression(
-      j.memberExpression(
-        j.callExpression(j.identifier('createApp'), [rootProps]),
-        j.identifier('mount')
-      ),
-      [el]
+  const args = mountCalls.at(0).get().node.expression.arguments
+  mountCalls.insertBefore(
+    j.expressionStatement(
+      j.callExpression(
+        j.memberExpression(j.identifier('app'), j.identifier('mount'), false),
+        args
+      )
     )
-  })
+  )
+
+  mountCalls.remove()
 }

generator/codemods/global-api/global-filter.js

@@ -0,0 +1,75 @@
+/**
+ * @param {Object} context
+ * @param {import('jscodeshift').JSCodeshift} context.j
+ * @param {ReturnType<import('jscodeshift').Core>} context.root
+ */
+module.exports = function createAppMount(context) {
+  const { j, root } = context
+
+  // find const appName = createApp(...)
+  const appDeclare = root.find(j.VariableDeclarator, {
+    id: { type: 'Identifier' },
+    init: {
+      type: 'CallExpression',
+      callee: {
+        type: 'Identifier',
+        name: 'createApp'
+      }
+    }
+  })
+  if (!appDeclare.length) {
+    return
+  }
+  const appName = appDeclare.at(0).get().node.id.name
+
+  // Vue.filter('filterName', function(value) {}) =>
+  // app.config.globalProperties.$filters = { filterName(value) {} }
+  const filters = root.find(j.ExpressionStatement, {
+    expression: {
+      type: 'CallExpression',
+      callee: {
+        type: 'MemberExpression',
+        object: { type: 'Identifier', name: 'Vue' },
+        property: { type: 'Identifier', name: 'filter' }
+      }
+    }
+  })
+  if (!filters.length) {
+    return
+  }
+
+  const methods = []
+  for (let i = 0; i < filters.length; i++) {
+    const filter = filters.at(i)
+    const args = filter.get().node.expression.arguments
+
+    methods.push(
+      j.objectMethod(
+        'method',
+        j.identifier(args[0].value),
+        args[1].params,
+        args[1].body
+      )
+    )
+  }
+
+  filters
+    .at(0)
+    .insertBefore(
+      j.expressionStatement(
+        j.assignmentExpression(
+          '=',
+          j.memberExpression(
+            j.identifier(appName),
+            j.identifier('config.globalProperties.$filters'),
+            false
+          ),
+          j.objectExpression(methods)
+        )
+      )
+    )
+
+  for (let i = 0; i < filters.length; i++) {
+    filters.at(i).remove()
+  }
+}

generator/codemods/global-api/index.js

@@ -11,6 +11,10 @@ module.exports = function(fileInfo, api) {
   require('./remove-production-tip')(context)
   require('./remove-vue-use')(context)
   require('./remove-contextual-h')(context)
+  require('./next-tick')(context)
+  require('./observable')(context)
+  require('./version')(context)
+  require('./global-filter')(context)
 
   // remove extraneous imports
   const removeExtraneousImport = require('../utils/remove-extraneous-import')

generator/codemods/global-api/next-tick.js

@@ -0,0 +1,30 @@
+/**
+ * @param {Object} context
+ * @param {import('jscodeshift').JSCodeshift} context.j
+ * @param {ReturnType<import('jscodeshift').Core>} context.root
+ */
+module.exports = function createAppMount(context) {
+  const { j, root } = context
+
+  // Vue.nextTick(() => {})
+  const nextTickCalls = root.find(j.CallExpression, n => {
+    return (
+      n.callee.type === 'MemberExpression' &&
+      n.callee.property.name === 'nextTick' &&
+      n.callee.object.name === 'Vue'
+    )
+  })
+
+  if (!nextTickCalls.length) {
+    return
+  }
+
+  const addImport = require('../utils/add-import')
+  addImport(context, { imported: 'nextTick' }, 'vue')
+
+  nextTickCalls.replaceWith(({ node }) => {
+    const el = node.arguments[0]
+
+    return j.callExpression(j.identifier('nextTick'), [el])
+  })
+}

generator/codemods/global-api/observable.js

@@ -0,0 +1,30 @@
+/**
+ * @param {Object} context
+ * @param {import('jscodeshift').JSCodeshift} context.j
+ * @param {ReturnType<import('jscodeshift').Core>} context.root
+ */
+module.exports = function createAppMount(context) {
+  const { j, root } = context
+
+  // Vue.observable(state)
+  const observableCalls = root.find(j.CallExpression, n => {
+    return (
+      n.callee.type === 'MemberExpression' &&
+      n.callee.property.name === 'observable' &&
+      n.callee.object.name === 'Vue'
+    )
+  })
+
+  if (!observableCalls.length) {
+    return
+  }
+
+  const addImport = require('../utils/add-import')
+  addImport(context, { imported: 'reactive' }, 'vue')
+
+  observableCalls.replaceWith(({ node }) => {
+    const el = node.arguments[0]
+
+    return j.callExpression(j.identifier('reactive'), [el])
+  })
+}

generator/codemods/global-api/version.js

@@ -0,0 +1,29 @@
+/**
+ * @param {Object} context
+ * @param {import('jscodeshift').JSCodeshift} context.j
+ * @param {ReturnType<import('jscodeshift').Core>} context.root
+ */
+module.exports = function createAppMount(context) {
+  const { j, root } = context
+
+  // Vue.version
+  const versionCalls = root.find(j.MemberExpression, n => {
+    return (
+      n.property.name === 'version' &&
+      n.object.name === 'Vue'
+    )
+  })
+
+  if (!versionCalls.length) {
+    return
+  }
+
+  const addImport = require('../utils/add-import')
+  addImport(context, { imported: 'version' }, 'vue')
+
+  versionCalls.replaceWith(({ node }) => {
+    const property = node.property.name
+
+    return j.identifier(property)
+  })
+}

generator/codemods/vue-addition/index.js

@@ -0,0 +1,28 @@
+module.exports = function(files, filename) {
+  let content = files[filename]
+  content = removeEventNative(content)
+  content = addTransitionFrom(content)
+  files[filename] = content
+}
+
+// template
+// v-on:event.native => v-on:event
+// @event.native => @event
+function removeEventNative(content) {
+  const reg = new RegExp(
+    '(?<=<template>[\\s\\S]*?\\s(?:v-on:|@)\\w+).native(?==[\\s\\S]*?</template>)',
+    'g'
+  )
+  return content.replace(reg, '')
+}
+
+// style
+// .xxx-enter => .xxx-enter-from
+// .xxx-leave => .xxx-leave-from
+function addTransitionFrom(content) {
+  const reg = new RegExp(
+    '(?<=<style[\\s>][\\s\\S]*?\\s\\.[A-Za-z0-9_-]+-)(enter|leave)(?=[,{\\s][\\s\\S]*?</style>)',
+    'g'
+  )
+  return content.replace(reg, '$1-from')
+}

generator/codemods/vue/__testfixtures__/add-emit-declaration.input.js

@@ -0,0 +1,9 @@
+export default {
+    props: ['text'],
+    methods: {
+        input: function(){
+            this.$emit('increment');
+            this.$emit('decrement');
+        }
+    }
+}

generator/codemods/vue/__testfixtures__/add-emit-declaration.output.js

@@ -0,0 +1,11 @@
+export default {
+    emits: ["increment", "decrement"],
+    props: ['text'],
+
+    methods: {
+        input: function(){
+            this.$emit('increment');
+            this.$emit('decrement');
+        }
+    }
+};

generator/codemods/vue/__testfixtures__/rename-lifecycle.input.js

@@ -0,0 +1,8 @@
+export default {
+    destroyed: function () {
+        console.log('foo')
+    },
+    beforeDestroy: function () {
+        console.log('bar')
+    }
+}

generator/codemods/vue/__testfixtures__/rename-lifecycle.output.js

@@ -0,0 +1,8 @@
+export default {
+    unmounted: function () {
+        console.log('foo')
+    },
+    beforeUnmount: function () {
+        console.log('bar')
+    }
+}