fix: only when global.globalApi.length > 0 will use app.component (#59)

Author: Adolph-WSY

src/packageTransformation.ts

@@ -24,7 +24,7 @@ const globalAddConfig: {
       'vue-router': '^4.0.8',
       'vue-i18n': '^9.1.6'
     },
-    delete: { 'vue-templadte-compiler': '', '@vue/composition-api': '' }
+    delete: { 'vue-template-compiler': '', '@vue/composition-api': '' }
   },
   dependencies: {
     add: {},

transformations/__tests__/root-prop-to-use.spec.ts

@@ -2,6 +2,15 @@ import { defineInlineTest } from 'jscodeshift/src/testUtils'
 import type { GlobalApi } from '../../src/global'
 const transform = require('../root-prop-to-use')
 
+global.globalApi = []
+let api1: GlobalApi = {
+  name: 'api1',
+  path: 'src/directive/permission/api1.js'
+}
+let api2: GlobalApi = { name: 'api2', path: 'src/directive/api2.js' }
+global.globalApi.push(api1)
+global.globalApi.push(api2)
+
 defineInlineTest(
   transform,
   {
@@ -31,15 +40,6 @@ defineInlineTest(
   `createApp({});`
 )
 
-global.globalApi = []
-let api1: GlobalApi = {
-  name: 'api1',
-  path: 'src/directive/permission/api1.js'
-}
-let api2: GlobalApi = { name: 'api2', path: 'src/directive/api2.js' }
-global.globalApi.push(api1)
-global.globalApi.push(api2)
-
 defineInlineTest(
   transform,
   { rootPropName: '', isGlobalApi: true },
@@ -49,3 +49,21 @@ import { api2 } from "../src/directive/api2.js";
 Vue.createApp().use(api1).use(api2);`,
   'Can recognize global api use'
 )
+
+defineInlineTest(
+  transform,
+  { rootPropName: '', isGlobalApi: true },
+  `import Comp1 from "./Comp1.vue"
+  export default {
+    install: app => {
+      app.component("comp1", Comp1);
+    }
+  }`,
+  `import Comp1 from "./Comp1.vue"
+  export default {
+    install: app => {
+      app.component("comp1", Comp1);
+    }
+  }`,
+  'No target Approots, jump out of this transition. '
+)

transformations/new-global-api.ts

@@ -26,7 +26,9 @@ export const transformAST: ASTTransformation = context => {
   // TODO:
   // should analyze the AST to get the default import of vue-router and vuex,
   // rather than hard-coding the names
-  removeVueUse(context, { removablePlugins: ['VueRouter', 'Vuex','VueCompositionApi','VueI18n'] })
+  removeVueUse(context, {
+    removablePlugins: ['VueRouter', 'Vuex', 'VueCompositionApi', 'VueI18n']
+  })
   removeContextualHFromRender(context)
 
   removeExtraneousImport(context, { localBinding: 'Vue' })

transformations/root-prop-to-use.ts

@@ -2,7 +2,9 @@ import wrap from '../src/wrapAstTransformation'
 import type { ASTTransformation } from '../src/wrapAstTransformation'
 
 import * as N from 'jscodeshift'
+import createDebug from 'debug'
 
+const debug = createDebug('vue-codemod:rule')
 type Params = {
   rootPropName: string
   isGlobalApi?: boolean
@@ -38,13 +40,19 @@ export const transformAST: ASTTransformation<Params> = (
     }
   })
 
+  if (appRoots == undefined || appRoots.length == 0) {
+    debug('No target Approots, jump out of this transition. ')
+    return
+  }
+
   // add global api to main.js used by component
-  if (
-    isGlobalApi &&
-    global.globalApi != undefined &&
-    global.globalApi.length > 0
-  ) {
-    console.log('add global api in createApp')
+  if (isGlobalApi) {
+    debug(filename)
+    if (global.globalApi == undefined || global.globalApi.length == 0) {
+      debug('global api is empty')
+      return
+    }
+    debug('add global api in createApp')
     const addImport = require('./add-import')
     for (let i in global.globalApi) {
       let api = global.globalApi[i]