feat: add transformation report (#74)

Author: 2kjiejie

bin/vue-codemod.ts

@@ -18,6 +18,7 @@ import runTransformation from '../src/runTransformation'
 import { transform as packageTransform } from '../src/packageTransformation'
 
 import type { TransformationModule } from '../src/runTransformation'
+import { formatterOutput } from '../src/report'
 
 const debug = createDebug('vue-codemod:cli')
 const log = console.log.bind(console)
@@ -27,6 +28,7 @@ const {
   _: files,
   transformation: transformationName,
   runAllTransformation: runAllTransformation,
+  reportFormatter: formatter,
   params
 } = yargs
   .usage('Usage: vue-codemod [file pattern] <option>')
@@ -46,6 +48,12 @@ const {
     conflicts: 'transformation',
     describe: 'run all transformation module'
   })
+  .option('reportFormatter', {
+    alias: 'f',
+    type: 'string',
+    describe: 'Specify an output report formatter',
+    default: 'detail'
+  })
   .example([
     [
       'npx vue-codemod ./src -a',
@@ -85,6 +93,7 @@ async function main() {
 
   // init global params
   global.globalApi = []
+  global.outputReport = {}
 
   const resolvedPaths = globby.sync(files as string[])
   if (transformationName != undefined) {
@@ -97,6 +106,7 @@ async function main() {
     )
     if (packageTransform()) {
       processFilePath.push('package.json')
+      global.outputReport['package.json'] = 1
     }
   }
 
@@ -125,10 +135,8 @@ async function main() {
       processFilePath.push('package.json')
     }
   }
-  const processFilePathList = processFilePath.join('\n')
-  console.log(`--------------------------------------------------`)
-  console.log(`Processed file:\n${processFilePathList}`)
-  console.log(`Processed ${processFilePath.length} files`)
+
+  formatterOutput(processFilePath, formatter)
 }
 /**
  * process files by Transformation

src/global.d.ts

@@ -7,6 +7,8 @@ export type GlobalApi = {
 declare global {
   // Use to add global variables used by components to main.js
   var globalApi: GlobalApi[]
+  var outputReport: { [key: string]: number }
+  var subRules: { [key: string]: number }
 }
 
 export {}

src/report.ts

@@ -0,0 +1,96 @@
+import * as fs from 'fs'
+
+export function getCntFunc(key: string, outputObj: { [key: string]: number }) {
+  if (!outputObj) {
+    outputObj = { key: 0 }
+  }
+  if (!outputObj.hasOwnProperty(key)) {
+    outputObj[key] = 0
+  }
+  function cntFunc(quantity: number = 1) {
+    outputObj[key] += quantity
+  }
+  return cntFunc
+}
+
+export function formatterOutput(processFilePath: string[], formatter: string) {
+  // normal output
+  const processFilePathList = processFilePath.join('\n')
+  const totalChanged = Object.keys(global.outputReport).reduce(
+    (sum, key) => sum + global.outputReport[key],
+    0
+  )
+  const totalDetected = totalChanged
+  const transRate =
+    totalDetected == totalChanged ? 100 : (100 * totalChanged) / totalDetected
+
+  console.log(`--------------------------------------------------`)
+  console.log(`Processed file:\n${processFilePathList}`)
+  console.log(`Processed ${processFilePath.length} files`)
+
+  console.log(
+    '\x1B[44;37;4m%s\x1B[0m',
+    `${totalDetected} places`,
+    `need to be transformed`
+  )
+  console.log(
+    '\x1B[44;37;4m%s\x1B[0m',
+    `${totalChanged} places`,
+    `was transformed`
+  )
+  console.log(`The transformation rate is \x1B[44;37;4m${transRate}%\x1B[0m`)
+
+  if (formatter === 'all') {
+    console.log('The transformation stats: \n')
+    console.log(global.outputReport)
+  }
+
+  Object.keys(outputReport).forEach(item => {
+    if (!outputReport[item]) delete outputReport[item]
+  })
+
+  if (formatter === 'detail') {
+    console.log('The transformation stats: \n')
+    console.log(global.outputReport)
+  }
+
+  if (formatter === 'table') {
+    console.log('The transformation stats: \n')
+    console.table(global.outputReport)
+  }
+
+  if (formatter === 'log') {
+    logOutput(
+      processFilePathList,
+      processFilePath,
+      totalDetected,
+      totalChanged,
+      transRate
+    )
+  }
+}
+
+export function logOutput(
+  processFilePathList: string,
+  processFilePath: string[],
+  totalDetected: number,
+  totalChanged: number,
+  transRate: number
+) {
+  let options = {
+    flags: 'w', //
+    encoding: 'utf8' // utf8编码
+  }
+
+  let stdout = fs.createWriteStream('./vue_codemod.log', options)
+
+  let logger = new console.Console(stdout)
+
+  logger.log(`--------------------------------------------------`)
+  logger.log(`Processed file:\n${processFilePathList}\n`)
+  logger.log(`Processed ${processFilePath.length} files`)
+  logger.log(`${totalDetected} places`, `need to be transformed`)
+  logger.log(`${totalChanged} places`, `was transformed`)
+  logger.log(`The transformation rate is ${transRate}%`)
+  logger.log('The transformation stats: \n', global.outputReport)
+}

src/wrapAstTransformation.ts

@@ -10,6 +10,8 @@ export type ASTTransformation<Params = void> = {
   (context: Context, params: Params): void
 }
 
+global.subRules = {}
+
 export default function astTransformationToJSCodeshiftModule<Params = any>(
   transformAST: ASTTransformation<Params>
 ): Transform {

src/wrapVueTransformation.ts

@@ -2,6 +2,7 @@ import type { Operation } from './operationUtils'
 import type VueTransformation from './VueTransformation'
 import { Node } from 'vue-eslint-parser/ast/nodes'
 import * as parser from 'vue-eslint-parser'
+import { getCntFunc } from './report'
 
 const BOM = '\uFEFF'
 
@@ -21,7 +22,8 @@ export type VueASTTransformation<Params = void> = {
 
 export function createTransformAST(
   nodeFilter: (node: Node) => boolean,
-  fix: (node: Node, source?: string) => Operation[]
+  fix: (node: Node, source?: string) => Operation[],
+  ruleName: string
 ) {
   function findNodes(context: any): Node[] {
     const { file } = context
@@ -44,12 +46,17 @@ export function createTransformAST(
   }
 
   const transformAST: VueASTTransformation = context => {
+    const cntFunc = getCntFunc(ruleName, global.outputReport)
     let fixOperations: Operation[] = []
     const { file } = context
     const source = file.source
     const toFixNodes: Node[] = findNodes(context)
     toFixNodes.forEach(node => {
-      fixOperations = fixOperations.concat(fix(node, source))
+      const operations = fix(node, source)
+      if (operations.length) {
+        cntFunc()
+        fixOperations = fixOperations.concat(operations)
+      }
     })
     return fixOperations
   }

transformations/add-emit-declaration.ts

@@ -1,10 +1,12 @@
 import wrap from '../src/wrapAstTransformation'
 import type { ASTTransformation } from '../src/wrapAstTransformation'
+import { getCntFunc } from '../src/report'
 
 export const transformAST: ASTTransformation = ({ root, j }) => {
   // find the export default
   const defaultExportBody = root.find(j.ExportDefaultDeclaration)
-
+  // stats
+  const cntFunc = getCntFunc('add-emit-declarations', global.outputReport)
   // find the CallExpression
   const emitCalls = defaultExportBody.find(j.CallExpression, node => {
     return (
@@ -47,6 +49,8 @@ export const transformAST: ASTTransformation = ({ root, j }) => {
         .node.declaration.properties?.unshift(
           j.objectProperty(j.identifier('emits'), j.arrayExpression(elements))
         )
+
+      cntFunc()
     }
   }
 }

transformations/global-filter.ts

@@ -1,7 +1,9 @@
 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('global-filter', global.outputReport)
   // find the createApp()
   const appDeclare = root.find(j.VariableDeclarator, {
     id: { type: 'Identifier' },
@@ -53,6 +55,7 @@ export const transformAST: ASTTransformation = ({ root, j }) => {
     return
   }
 
+  cntFunc()
   const methods = []
   for (let i = 0; i < filters.length; i++) {
     const filter = filters.at(i)

transformations/new-component-api.ts

@@ -3,9 +3,11 @@ import type { ASTTransformation } from '../src/wrapAstTransformation'
 import { transformAST as removeExtraneousImport } from './remove-extraneous-import'
 import type { GlobalApi } from '../src/global'
 import * as _ from 'lodash'
+import { getCntFunc } from '../src/report'
 
 export const transformAST: ASTTransformation = context => {
   const { root, j, filename } = context
+  const cntFunc = getCntFunc('new-component-api', global.outputReport)
   const rootExpressionStatement = root
     .find(j.ExpressionStatement)
     .filter(path => path.parent.value.type === 'Program')
@@ -34,6 +36,7 @@ export const transformAST: ASTTransformation = context => {
     if (node.arguments.length === 2) {
       componentArgs = node.arguments
       let componentApi: GlobalApi
+      cntFunc()
       if (j.Identifier.check(componentArgs[1])) {
         componentApi = { name: componentArgs[1].name, path: filename }
       } else {

transformations/new-directive-api.ts

@@ -1,5 +1,6 @@
 import wrap from '../src/wrapAstTransformation'
 import type { ASTTransformation } from '../src/wrapAstTransformation'
+import { getCntFunc } from '../src/report'
 
 const hookNameMap: { [key: string]: string } = {
   bind: 'beforeMount',
@@ -9,6 +10,7 @@ const hookNameMap: { [key: string]: string } = {
 }
 
 export const transformAST: ASTTransformation = ({ root, j }) => {
+  const cntFunc = getCntFunc('new-directive-api', global.outputReport)
   const directiveRegistration = root.find(j.CallExpression, {
     callee: {
       type: 'MemberExpression',
@@ -40,6 +42,7 @@ export const transformAST: ASTTransformation = ({ root, j }) => {
 
         if (hookNameMap[prop.key.name]) {
           prop.key.name = hookNameMap[prop.key.name]
+          cntFunc()
         }
         if (prop.key.name === 'update') {
           updateIndex = index

transformations/new-global-api.ts

@@ -11,8 +11,16 @@ import { transformAST as removeVueUse } from './remove-vue-use'
 import { transformAST as removeContextualHFromRender } from './remove-contextual-h-from-render'
 
 import { transformAST as removeExtraneousImport } from './remove-extraneous-import'
+import { getCntFunc } from '../src/report'
 
 export const transformAST: ASTTransformation = context => {
+  const newVueCount = subRules['new-vue-to-create-app']
+    ? subRules['new-vue-to-create-app']
+    : 0
+  const remHCount = subRules['remove-contextual-h-from-render']
+    ? subRules['remove-contextual-h-from-render']
+    : 0
+  const beforeCount = newVueCount + remHCount
   vueAsNamespaceImport(context)
   importCompositionApiFromVue(context)
   newVueTocreateApp(context)
@@ -29,11 +37,17 @@ export const transformAST: ASTTransformation = context => {
   removeVueUse(context, {
     removablePlugins: ['VueRouter', 'Vuex', 'VueCompositionApi', 'VueI18n']
   })
-  removeContextualHFromRender(context)
+  removeContextualHFromRender(context) // count
 
   removeExtraneousImport(context, { localBinding: 'Vue' })
   removeExtraneousImport(context, { localBinding: 'Vuex' })
   removeExtraneousImport(context, { localBinding: 'VueRouter' })
+  const afterCount =
+    subRules['new-vue-to-create-app'] +
+    subRules['remove-contextual-h-from-render']
+  const change = afterCount - beforeCount
+  const cntFunc = getCntFunc('new-global-api', outputReport)
+  cntFunc(change)
 }
 
 export default wrap(transformAST)