feat: const-app

transformations/__tests__/const-app.spec.ts

@@ -0,0 +1,38 @@
+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");
+Vue.directive('demo', {})
+Vue.component('myComponent',{})
+
+`,
+  `const app = Vue.createApp(App).use(button_counter).use(router).use(store);
+app.directive('demo', {})
+app.component('myComponent',{})
+
+app.mount("#app");`,
+
+  'add const app and transform Vue to app in main.js'
+)
+
+defineInlineTest(
+  transform,
+  {},
+  `const app = Vue.createApp(App).use(button_counter).use(router).use(store);
+Vue.directive('demo', {})
+Vue.component('myComponent',{})
+
+app.mount("#app");`,
+  `const app = Vue.createApp(App).use(button_counter).use(router).use(store);
+app.directive('demo', {})
+app.component('myComponent',{})
+
+app.mount("#app");`,
+
+  'do not add const app when app.mount() is already exist '
+)

transformations/const-app.ts

@@ -0,0 +1,107 @@
+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)
+
+  // Determine if there is a .mount()
+  const createAppParent = root.find(j.ExpressionStatement, {
+    expression: {
+      callee: {
+        property: {
+          name: 'mount'
+        }
+      }
+    }
+  })
+  if (createAppParent.length != 1) {
+    return
+  }
+
+  // replace Vue.component and Vue.directive
+  root
+    .find(j.MemberExpression, {
+      object: {
+        name: 'Vue'
+      }
+    })
+    .filter(
+      node =>
+        // @ts-ignore
+        node.value.property.name === 'directive' ||
+        // @ts-ignore
+        node.value.property.name === 'component'
+    )
+    .forEach(node => {
+      // @ts-ignore
+      node.value.object.name = 'app'
+    })
+
+  // Determine if there is a app.mount('#app')
+  const ifConstApp = root.find(j.MemberExpression, {
+    object: {
+      name: 'app'
+    },
+    property: {
+      name: 'mount'
+    }
+  })
+  if (ifConstApp.length > 0) {
+    return
+  }
+
+  let newCreateApp
+  let mountContext
+  createAppParent.forEach(node => {
+    const createApp = node.value.expression
+
+    // get the value in the .mount()
+    // @ts-ignore
+    mountContext = createApp.arguments[0].value
+
+    // get the expression without .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'),