feat: const-app

transformations/__tests__/const-app.spec.ts

@@ -0,0 +1,22 @@
+import { defineInlineTest } from 'jscodeshift/src/testUtils'
+
+const transform = require('../const-app')
+
+
+defineInlineTest(
+  transform,
+  {},
+  `Vue.createApp(App).use(button_counter).use(router).use(store).mount("#app");
+//used by new_directive_api
+Vue.directive('demo', {})
+
+`,
+  `const app = Vue.createApp(App).use(button_counter).use(router).use(store);
+//used by new_directive_api
+app.directive('demo', {})
+
+app.mount("#app");`,
+
+  'const app'
+)
+

transformations/const-app.ts

@@ -0,0 +1,108 @@
+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('const-app', global.outputReport)
+
+  //判断是否存在.mount()
+  // @ts-ignore
+  const createAppParent = root.find(j.ExpressionStatement, {
+    expression: {
+      callee: {
+        property: {
+          name: 'mount'
+        }
+      }
+    }
+  })
+  if (createAppParent.length != 1) {
+    return
+  }
+
+  //处理Vue.component和Vue.directive
+  root
+    .find(j.MemberExpression, {
+      object: {
+        name: 'Vue'
+      }
+      // @ts-ignore
+    })
+    .filter(
+      node =>
+        // @ts-ignore
+        node.value.property.name === 'directive' || node.value.property.name === 'component'
+    )
+    .forEach(node => {
+      // @ts-ignore
+      node.value.object.name = 'app'
+    })
+
+  //判断是否已存在app.mount('#app')
+  const ifConstApp = root.find(j.MemberExpression, {
+    object: {
+      name: 'app'
+    },
+    property: {
+      name: 'mount'
+    }
+  })
+  if (ifConstApp.length > 0) {
+    return
+  }
+
+  var newCreateApp
+  var mountContext
+  createAppParent.forEach(node => {
+    const createApp = node.value.expression
+
+    //获取mount()中的内容
+    // @ts-ignore
+    mountContext = createApp.arguments[0].value
+
+    //去除..mount('#app')
+    // @ts-ignore
+    newCreateApp = createApp.callee.object
+  })
+
+  createAppParent.replaceWith(
+    j.variableDeclaration('const', [
+      j.variableDeclarator(j.identifier('app'), newCreateApp)
+    ])
+  )
+
+
+  let end = 0
+  let lastNode = createAppParent.get()
+  root.find(j.VariableDeclaration).forEach(node => {
+    // @ts-ignore
+    if (node.value.end > end) {
+      // @ts-ignore
+      end = node.value.end
+      lastNode = node
+    }
+  })
+  root.find(j.ExpressionStatement).forEach(node => {
+    // @ts-ignore
+    if (node.value.end > end) {
+      // @ts-ignore
+      end = node.value.end
+      lastNode = node
+    }
+  })
+
+  j(lastNode).insertAfter(
+    j.expressionStatement(
+      j.callExpression(
+        j.memberExpression(j.identifier('app'), j.identifier('mount')),
+        // @ts-ignore
+        [j.stringLiteral(mountContext)]
+      )
+    )
+  )
+
+  cntFunc()
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'

transformations/index.ts

@@ -42,6 +42,8 @@ const transformationMap: {
   'router4-onready-to-isready': require('./router/router4-onready-to-isready'),
   'router-update-addRoute': require('./router/router-update-addRoute'),
 
+  'const-app': require('./const-app'),
+
   // manual (must be used at the end of list)
   'manual-remove-Vue': require('./manual/manual-remove-Vue'),
   'manual-remove-VueRouter': require('./manual/manual-remove-VueRouter'),