feat: implement new-component-api transformation (#58)

Author: ygj6

transformations/__tests__/new-component-api.spec.ts

@@ -0,0 +1,19 @@
+import { defineInlineTest } from 'jscodeshift/src/testUtils'
+const transform = require('../new-component-api')
+
+global.globalApi= []
+
+defineInlineTest(
+  transform,
+  {},
+  `import Vue from 'vue'
+import MyComponent from './MyComponent'
+Vue.component('my-component', MyComponent)`,
+  `import MyComponent from './MyComponent'
+export default {
+  install: app => {
+    app.component('my-component', MyComponent);
+  }
+};;`,
+  'transform global component registration'
+)

transformations/index.ts

@@ -8,6 +8,7 @@ type JSTransformationModule = {
 const transformationMap: {
   [name: string]: JSTransformationModule
 } = {
+  'new-component-api': require('./new-component-api'),
   'vue-class-component-v8': require('./vue-class-component-v8'),
   'new-global-api': require('./new-global-api'),
   'vue-router-v4': require('./vue-router-v4'),

transformations/new-component-api.ts

@@ -0,0 +1,68 @@
+import wrap from '../src/wrapAstTransformation'
+import type { ASTTransformation } from '../src/wrapAstTransformation'
+import { transformAST as removeExtraneousImport } from './remove-extraneous-import'
+import type { GlobalApi } from '../src/global'
+import * as _ from 'lodash'
+
+export const transformAST: ASTTransformation = context => {
+  const { root, j, filename } = context
+  // find Vue.component
+  const componentRegistration = root
+    .find(j.CallExpression, {
+      callee: {
+        type: 'MemberExpression',
+        object: {
+          name: 'Vue'
+        },
+        property: {
+          name: 'component'
+        }
+      }
+    })
+    .filter(path => {
+      return path.parent.parent.value.type === 'Program'
+    })
+
+  let componentArgs: any[] = []
+  componentRegistration.forEach(({ node }) => {
+    if (node.arguments.length === 2) {
+      componentArgs = node.arguments
+      let componentApi: GlobalApi
+      if (j.Identifier.check(componentArgs[1])) {
+        componentApi = { name: componentArgs[1].name, path: filename }
+      } else {
+        componentApi = {
+          name: _.upperFirst(_.camelCase(componentArgs[0].value)),
+          path: filename
+        }
+      }
+      global.globalApi.push(componentApi)
+    }
+  })
+
+  // app.component()
+  const componentCall = j.callExpression(
+    j.memberExpression(j.identifier('app'), j.identifier('component')),
+    componentArgs
+  )
+  // app => { app.component() }
+  const installArrowFunction = j.arrowFunctionExpression(
+    [j.identifier('app')],
+    j.blockStatement([j.expressionStatement(componentCall)])
+  )
+
+  // { install: app => {app.component() } }
+  const objectExpression = j.objectExpression([
+    j.objectProperty(j.identifier('install'), installArrowFunction)
+  ])
+
+  // export default {}
+  const exportDefaultDeclaration = j.exportDefaultDeclaration(objectExpression)
+
+  componentRegistration.replaceWith(() => exportDefaultDeclaration)
+
+  removeExtraneousImport(context, { localBinding: 'Vue' })
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'