feat: move app.xxx between createApp() and .mount() (#103)

Author: ZhenXiongQian

bin/vue-codemod.ts

@@ -19,7 +19,7 @@ import { transform as packageTransform } from '../src/packageTransformation'
 
 import type { TransformationModule } from '../src/runTransformation'
 import { formatterOutput } from '../src/report'
-import { ruleDescripition } from '../src/ruleDescription'
+import { ruleDescription } from '../src/ruleDescription'
 import cliProgress from 'cli-progress'
 
 const debug = createDebug('vue-codemod:cli')
@@ -233,13 +233,13 @@ function processTransformation(
     if (formatter === 'log')
       logger.timeEnd(`Processing use ${transformationName} transformation`)
     if (
-      ruleDescripition.hasOwnProperty(transformationName) &&
+      ruleDescription.hasOwnProperty(transformationName) &&
       (formatter === 'detail' || formatter === 'log')
     ) {
       let ruleOutput: { [key: string]: any } = {}
       ruleOutput.rule_name = transformationName
       // @ts-ignore
-      ruleOutput.website = ruleDescripition[transformationName].description
+      ruleOutput.website = ruleDescription[transformationName].description
       ruleOutput.transformed_files = ruleProcessFile
       console.log('\x1B[0m', ruleOutput)
       if (formatter === 'log') logger.log(ruleOutput)

src/ruleDescription.ts

@@ -1,4 +1,4 @@
-export let ruleDescripition = {
+export let ruleDescription = {
   'new-component-api': {
     description:
       'https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp'

transformations/__tests__/global-filter.spec.ts

@@ -17,6 +17,24 @@ app.config.globalProperties.$filters = {
   'transform global filter'
 )
 
+defineInlineTest(
+  transform,
+  {},
+  `const app = Vue.createApp(App).use(store).use(router)
+app.component()
+Vue.filter('capitalize', function(value) {
+  return value
+})`,
+  `const app = Vue.createApp(App).use(store).use(router)
+app.component()
+app.config.globalProperties.$filters = {
+  capitalize(value) {
+    return value
+  }
+};`,
+  'transform global filter'
+)
+
 defineInlineTest(
   transform,
   {},
@@ -31,7 +49,3 @@ Vue.filter('capitalize', function(value) {
 `,
   'transform global filter(no effect and will warn)'
 )
-
-
-
-

transformations/__tests__/move-app-mount.spec.ts

@@ -0,0 +1,43 @@
+import { defineInlineTest } from 'jscodeshift/src/testUtils'
+
+const transform = require('../move-app-mount')
+
+
+defineInlineTest(
+  transform,
+  {},
+  `app.directive('demo', {})
+const app = Vue.createApp(App).use(button_counter).use(router).use(store);
+app.mount("#app");
+app.component('myComponent',{})
+app.config.globalProperties.$filters = {
+    myFilter(value) {
+        if (!value)return ''
+        return value.toUpperCase()
+    }
+};`,
+  `const app = Vue.createApp(App).use(button_counter).use(router).use(store);
+app.directive('demo', {})
+app.component('myComponent',{})
+app.config.globalProperties.$filters = {
+    myFilter(value) {
+        if (!value)return ''
+        return value.toUpperCase()
+    }
+};
+app.mount("#app");`,
+  'move app.mount to after all the app.* '
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `Vue.directive('demo', {})
+Vue.createApp(App).use(button_counter).use(router).use(store).mount("#app");
+Vue.component('myComponent',{})
+`,
+  `Vue.directive('demo', {})
+Vue.createApp(App).use(button_counter).use(router).use(store).mount("#app");
+Vue.component('myComponent',{})`,
+  'do not change the code without app.mount'
+)

transformations/global-filter.ts

@@ -5,25 +5,30 @@ import { getCntFunc } from '../src/report'
 export const transformAST: ASTTransformation = ({ root, j }) => {
   const cntFunc = getCntFunc('global-filter', global.outputReport)
   // find the createApp()
-  const appDeclare = root.find(j.VariableDeclarator, {
-    id: { type: 'Identifier' },
-    init: {
-      type: 'CallExpression',
-      callee: {
-        object: {
-          name: 'Vue'
-        },
-        property: {
-          name: 'createApp'
-        }
-      }
+  const constApp = root.find(j.VariableDeclarator, {
+    id: {
+      name: 'app'
     }
   })
+  if (constApp.length <= 0) {
+    return
+  }
+  const vueCreateApp = j(constApp?.at(0).get().value.init).find(
+    j.MemberExpression,
+    {
+      object: {
+        name: 'Vue'
+      },
+      property: {
+        name: 'createApp'
+      }
+    }
+  )
 
-  if (!appDeclare.length) {
+  if (!constApp.length || !vueCreateApp.length) {
     return
   }
-  const appName = appDeclare.at(0).get().node.id.name
+  const appName = constApp.at(0).get().value.id.name
 
   // Vue.filter('filterName', function(value) {}) =>
   // app.config.globalProperties.$filters = { filterName(value) {} }

transformations/index.ts

@@ -20,7 +20,6 @@ const transformationMap: {
   'remove-vue-set-and-delete': require('./remove-vue-set-and-delete'),
   'rename-lifecycle': require('./rename-lifecycle'),
   'add-emit-declaration': require('./add-emit-declaration'),
-  'global-filter': require('./global-filter'),
   'tree-shaking': require('./tree-shaking'),
   'v-model': require('./v-model'),
   'render-to-resolveComponent': require('./render-to-resolveComponent'),
@@ -44,8 +43,12 @@ const transformationMap: {
   'router-update-addRoute': require('./router/router-update-addRoute'),
 
   'const-app': require('./const-app'),
+  // need to use 'const app=Vue.createApp'
+  'global-filter': require('./global-filter'),
+  'move-app-mount': require('./move-app-mount'),
 
   // manual (must be used at the end of list)
+  // rule's name must be start with 'manual-'
   'manual-remove-Vue': require('./manual/manual-remove-Vue'),
   'manual-remove-VueRouter': require('./manual/manual-remove-VueRouter'),
   'manual-remove-on-off-once': require('./manual/manual-remove-on-off-once'),

transformations/move-app-mount.ts

@@ -0,0 +1,61 @@
+import wrap from '../src/wrapAstTransformation'
+import type { ASTTransformation } from '../src/wrapAstTransformation'
+import { getCntFunc } from '../src/report'
+
+export const transformAST: ASTTransformation = ({ root, j }) => {
+  const cntFunc = getCntFunc('move-app-mount', global.outputReport)
+
+  const appMount = root.find(j.ExpressionStatement, {
+    expression: {
+      callee: {
+        object: {
+          name: 'app'
+        },
+        property: {
+          name: 'mount'
+        }
+      }
+    }
+  })
+  if (appMount.length !== 1) {
+    return
+  }
+  const appMountOnly = appMount.get()
+  let lastend = appMountOnly.value.end
+  let appMountEnd = appMountOnly.value.end
+  let lastNode = appMountOnly
+  const context = appMountOnly.value.expression?.arguments[0].value
+  root.find(j.ExpressionStatement).forEach(node => {
+    if (
+      j(node).find(j.Identifier, {
+        name: 'app'
+      }).length > 0
+    ) {
+      // @ts-ignore
+      const end = node.value.end
+      if (end < appMountEnd) {
+        appMount.insertBefore(node.value)
+        j(node).remove()
+      }
+      if (end > lastend) {
+        lastend = end
+        lastNode = node
+      }
+    }
+  })
+  if (lastend !== appMountOnly.value.end) {
+    appMount.remove()
+    j(lastNode).insertAfter(
+      j.expressionStatement(
+        j.callExpression(
+          j.memberExpression(j.identifier('app'), j.identifier('mount')),
+          [j.stringLiteral(context)]
+        )
+      )
+    )
+  }
+  cntFunc()
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'