feat: print transformed files for each rule (#81)

Author: 2kjiejie

bin/vue-codemod.ts

@@ -19,9 +19,9 @@ import { transform as packageTransform } from '../src/packageTransformation'
 
 import type { TransformationModule } from '../src/runTransformation'
 import { formatterOutput } from '../src/report'
+import { ruleDescripition } from '../src/ruleDescription'
 
 const debug = createDebug('vue-codemod:cli')
-const log = console.log.bind(console)
 let processFilePath: string[] = []
 
 const {
@@ -52,7 +52,8 @@ const {
     alias: 'f',
     type: 'string',
     describe: 'Specify an output report formatter',
-    default: 'detail'
+    default: 'table',
+    choices: ['table', 'detail', 'log']
   })
   .example([
     [
@@ -68,6 +69,18 @@ const {
   .alias('h', 'help')
   .alias('v', 'version').argv
 
+let logger: Console = console
+if (formatter === 'log') {
+  let options = {
+    flags: 'w', //
+    encoding: 'utf8' // utf8编码
+  }
+
+  let stdout = fs.createWriteStream('./vue_codemod.log', options)
+
+  logger = new console.Console(stdout)
+}
+
 // TODO: port the `Runner` interface of jscodeshift
 async function main() {
   if (
@@ -108,7 +121,7 @@ async function main() {
     )
     if (packageTransform()) {
       processFilePath.push('package.json')
-      global.outputReport['package.json'] = 1
+      global.outputReport['package transformation'] = 1
     }
   }
 
@@ -135,10 +148,11 @@ async function main() {
     }
     if (packageTransform()) {
       processFilePath.push('package.json')
+      global.outputReport['package transformation'] = 1
     }
   }
 
-  formatterOutput(processFilePath, formatter)
+  formatterOutput(processFilePath, formatter, logger)
 }
 /**
  * process files by Transformation
@@ -151,8 +165,10 @@ function processTransformation(
   transformationName: string,
   transformationModule: TransformationModule
 ) {
-  log(`Processing use ${transformationName} transformation`)
-
+  console.time(`\x1B[0mProcessing use \x1B[1m${transformationName} transformation\x1B[0m\x1B[33m`)
+  if (formatter === 'log')
+    logger.time(`Processing use ${transformationName} transformation`)
+  let ruleProcessFile: string[] = []
   const extensions = ['.js', '.ts', '.vue', '.jsx', '.tsx']
   for (const p of resolvedPaths) {
     debug(`Processing ${p}…`)
@@ -180,6 +196,7 @@ function processTransformation(
 
       if (retainedSource != result) {
         fs.writeFileSync(p, result)
+        ruleProcessFile.push(p)
         if (processFilePath.indexOf(p) == -1) {
           processFilePath.push(p)
         } else {
@@ -190,6 +207,23 @@ function processTransformation(
       console.error(e)
     }
   }
+  if (ruleProcessFile.length) {
+    console.timeEnd(`\x1B[0mProcessing use \x1B[1m${transformationName} transformation\x1B[0m\x1B[33m`)
+    if (formatter === 'log')
+      logger.timeEnd(`Processing use ${transformationName} transformation`)
+    if (
+      ruleDescripition.hasOwnProperty(transformationName) &&
+      (formatter === 'detail' || formatter === 'log')
+    ) {
+      let ruleOutput: { [key: string]: any } = {}
+      ruleOutput.rule_name = transformationName
+      // @ts-ignore
+      ruleOutput.website = ruleDescripition[transformationName].description
+      ruleOutput.transformed_files = ruleProcessFile
+      console.log('\x1B[0m', ruleOutput)
+      if (formatter === 'log') logger.log(ruleOutput)
+    }
+  }
 }
 
 main().catch(err => {

src/report.ts

@@ -1,4 +1,3 @@
-import * as fs from 'fs'
 import { table } from 'table'
 
 export function pushManualList(
@@ -62,7 +61,11 @@ export function getCntFunc(key: string, outputObj: { [key: string]: number }) {
   return cntFunc
 }
 
-export function formatterOutput(processFilePath: string[], formatter: string) {
+export function formatterOutput(
+  processFilePath: string[],
+  formatter: string,
+  logger: Console
+) {
   // normal output
   const processFilePathList = processFilePath.join('\n')
   const totalChanged = Object.keys(global.outputReport).reduce(
@@ -75,21 +78,21 @@ export function formatterOutput(processFilePath: string[], formatter: string) {
       ? 100
       : ((100 * totalChanged) / totalDetected).toFixed(2)
 
-  console.log(`--------------------------------------------------`)
+  console.log(`\x1B[0m--------------------------------------------------`)
   console.log(`Processed file:\n${processFilePathList}`)
   console.log(`Processed ${processFilePath.length} files`)
 
   console.log(
-    '\x1B[44;37;4m%s\x1B[0m',
+    '\x1B[31;4m%s\x1B[0m',
     `${totalDetected} places`,
     `need to be transformed`
   )
   console.log(
-    '\x1B[44;37;4m%s\x1B[0m',
+    '\x1B[32;4m%s\x1B[0m',
     `${totalChanged} places`,
     `was transformed`
   )
-  console.log(`The transformation rate is \x1B[44;37;4m${transRate}%\x1B[0m`)
+  console.log(`The transformation rate is \x1B[32;4m${transRate}%\x1B[0m`)
 
   if (formatter === 'all') {
     console.log('The transformation stats: \n')
@@ -129,16 +132,19 @@ export function formatterOutput(processFilePath: string[], formatter: string) {
       totalDetected,
       totalChanged,
       transRate,
-      tableStr
+      tableStr,
+      logger
     )
   }
 
-  console.log('The list that you need to migrate your codes mannually')
-  let index = 1
-  global.manualList.forEach(manual => {
-    console.log('index:', index++)
-    console.log(manual)
-  })
+  if (global.manualList.length) {
+    console.log('The list that you need to migrate your codes mannually: ')
+    let index = 1
+    global.manualList.forEach(manual => {
+      console.log('index:', index++)
+      console.log(manual)
+    })
+  }
 }
 
 export function logOutput(
@@ -147,17 +153,9 @@ export function logOutput(
   totalDetected: number,
   totalChanged: number,
   transRate: string | number,
-  tableStr: string
+  tableStr: string,
+  logger: Console
 ) {
-  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`)
@@ -166,10 +164,12 @@ export function logOutput(
   logger.log(`The transformation rate is ${transRate}%`)
   logger.log('The transformation stats: \n')
   logger.log(tableStr)
-  logger.log('The list that you need to migrate your codes mannually')
-  let index = 1
-  global.manualList.forEach(manual => {
-    logger.log('index:', index++)
-    logger.log(manual)
-  })
+  if (global.manualList.length) {
+    logger.log('The list that you need to migrate your codes mannually')
+    let index = 1
+    global.manualList.forEach(manual => {
+      logger.log('index:', index++)
+      logger.log(manual)
+    })
+  }
 }

src/ruleDescription.ts

@@ -0,0 +1,128 @@
+export let ruleDescripition = {
+  'new-component-api': {
+    description:
+      'https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp'
+  },
+  'vue-class-component-v8': {
+    description: 'https://github.com/vuejs/vue-class-component/issues/406'
+  },
+  'new-global-api': {
+    description:
+      'https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp'
+  },
+  'vue-router-v4': {
+    description: [
+      'https://next.router.vuejs.org/guide/migration/index.html#new-router-becomes-createrouter',
+      'https://next.router.vuejs.org/guide/migration/index.html#new-history-option-to-replace-mode',
+      'https://next.router.vuejs.org/guide/migration/index.html#replaced-onready-with-isready'
+    ]
+  },
+  'vuex-v4': {
+    description: 'new Store (...) => createStore (...)'
+  },
+  'define-component': {
+    description: 'Vue.extend (...) => defineComponent (...)'
+  },
+  'new-vue-to-create-app': {
+    description:
+      'https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp'
+  },
+  'scoped-slots-to-slots': {
+    description:
+      'https://v3.vuejs.org/guide/migration/slots-unification.html#overview'
+  },
+  'new-directive-api': {
+    description:
+      'https://v3.vuejs.org/guide/migration/custom-directives.html#overview'
+  },
+  'remove-vue-set-and-delete': {
+    description:
+      'https://v3.vuejs.org/guide/migration/introduction.html#removed-apis'
+  },
+  'rename-lifecycle': {
+    description:
+      'https://v3.vuejs.org/guide/migration/introduction.html#other-minor-changes'
+  },
+  'add-emit-declaration': {
+    description:
+      'https://v3.vuejs.org/guide/migration/emits-option.html#overview'
+  },
+  'tree-shaking': {
+    description:
+      'https://v3.vuejs.org/guide/migration/global-api-treeshaking.html'
+  },
+  'v-model': {
+    description: 'https://v3.vuejs.org/guide/migration/v-model.html#overview'
+  },
+  'render-to-resolveComponent': {
+    description:
+      'https://v3.vuejs.org/guide/migration/render-function-api.html#registered-component'
+  },
+  'remove-contextual-h-from-render': {
+    description:
+      'https://v3.vuejs.org/guide/migration/render-function-api.html#render-function-argument'
+  },
+  'remove-production-tip': {
+    description:
+      'https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp'
+  },
+  'remove-trivial-root': {
+    description: 'createApp ({ render: () => h (App) }) => createApp (App)'
+  },
+  'vue-as-namespace-import': {
+    description: 'import Vue from "vue" => import * as Vue from "vue"'
+  },
+  'slot-attribute': {
+    description:
+      'https://vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax'
+  },
+  'slot-default': {
+    description:
+      'If component tag did not contain a <slot> element, any content provided between its opening and closing tag would be discarded.'
+  },
+  'slot-scope-attribute': {
+    description:
+      'https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots-with-the-slot-scope-Attribute'
+  },
+  'v-for-template-key': {
+    description:
+      'https://v3.vuejs.org/guide/migration/key-attribute.html#overview'
+  },
+  'v-else-if-key': {
+    description:
+      'https://v3.vuejs.org/guide/migration/key-attribute.html#overview'
+  },
+  'transition-group-root': {
+    description:
+      'https://v3.vuejs.org/guide/migration/transition-group.html#overview'
+  },
+  'v-bind-order-sensitive': {
+    description: 'https://v3.vuejs.org/guide/migration/v-bind.html#overview'
+  },
+  'v-for-v-if-precedence-changed': {
+    description: 'https://v3.vuejs.org/guide/migration/v-if-v-for.html#overview'
+  },
+  'remove-listeners': {
+    description:
+      'https://v3.vuejs.org/guide/migration/listeners-removed.html#overview'
+  },
+  'v-bind-sync': {
+    description: 'https://v3.vuejs.org/guide/migration/v-model.html#overview'
+  },
+  'remove-v-on-native': {
+    description:
+      'https://v3.vuejs.org/guide/migration/v-on-native-modifier-removed.html#overview'
+  },
+  'router-link-event-tag': {
+    description:
+      'https://next.router.vuejs.org/guide/migration/index.html#removal-of-event-and-tag-props-in-router-link'
+  },
+  'router-link-exact': {
+    description:
+      'https://next.router.vuejs.org/guide/migration/index.html#removal-of-the-exact-prop-in-router-link'
+  },
+  'router-view-keep-alive-transition': {
+    description:
+      'https://next.router.vuejs.org/guide/migration/index.html#router-view-keep-alive-and-transition'
+  }
+}