feat: add manual list (#76)

Author: ZhenXiongQian

bin/vue-codemod.ts

@@ -93,6 +93,8 @@ async function main() {
 
   // init global params
   global.globalApi = []
+  global.manualList = []
+  global.scriptLine = 0
   global.outputReport = {}
 
   const resolvedPaths = globby.sync(files as string[])

package.json

@@ -36,11 +36,12 @@
     "globby": "^11.0.2",
     "jscodeshift": "^0.11.0",
     "lru-cache": "^6.0.0",
+    "prettier": "^2.3.1",
     "readline-sync": "^1.4.10",
     "source-map": "^0.6.1",
+    "table": "^6.7.1",
     "vue-eslint-parser": "^7.6.0",
-    "yargs": "^16.2.0",
-    "prettier": "^2.3.1"
+    "yargs": "^16.2.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.5",

src/global.d.ts

@@ -4,9 +4,19 @@ export type GlobalApi = {
   path: string
 }
 
+export type ManualList = {
+  path: string
+  position: string
+  name: string
+  suggest: string
+  website: string
+}
+
 declare global {
   // Use to add global variables used by components to main.js
   var globalApi: GlobalApi[]
+  var manualList: ManualList[]
+  var scriptLine: number
   var outputReport: { [key: string]: number }
   var subRules: { [key: string]: number }
 }

src/report.ts

@@ -1,4 +1,51 @@
 import * as fs from 'fs'
+import { table } from 'table'
+
+export function pushManualList(
+  path: string,
+  node: any,
+  name: string,
+  suggest: string,
+  website: string
+) {
+  let index = 0
+  const filepath = path.split('.')
+  if (filepath[filepath.length - 1] === 'vue') {
+    index = global.scriptLine - 1
+  } else {
+    index = 0
+  }
+  index = node?.value.loc?.start.line + index
+  let position: string = '[' + index + ',' + node?.value.loc?.start.column + ']'
+
+  const list = {
+    path: path,
+    position: position,
+    name: name,
+    suggest: suggest,
+    website: website
+  }
+  global.manualList.push(list)
+}
+
+export function VuePushManualList(
+  path: string,
+  node: any,
+  name: string,
+  suggest: string,
+  website: string
+) {
+  let position: string =
+    '[' + node?.loc?.start.line + ',' + node?.loc?.start.column + ']'
+  const list = {
+    path: path,
+    position: position,
+    name: name,
+    suggest: suggest,
+    website: website
+  }
+  global.manualList.push(list)
+}
 
 export function getCntFunc(key: string, outputObj: { [key: string]: number }) {
   if (!outputObj) {
@@ -7,9 +54,11 @@ export function getCntFunc(key: string, outputObj: { [key: string]: number }) {
   if (!outputObj.hasOwnProperty(key)) {
     outputObj[key] = 0
   }
+
   function cntFunc(quantity: number = 1) {
     outputObj[key] += quantity
   }
+
   return cntFunc
 }
 
@@ -20,9 +69,11 @@ export function formatterOutput(processFilePath: string[], formatter: string) {
     (sum, key) => sum + global.outputReport[key],
     0
   )
-  const totalDetected = totalChanged
+  const totalDetected = totalChanged + global.manualList.length
   const transRate =
-    totalDetected == totalChanged ? 100 : (100 * totalChanged) / totalDetected
+    totalDetected == totalChanged
+      ? 100
+      : ((100 * totalChanged) / totalDetected).toFixed(2)
 
   console.log(`--------------------------------------------------`)
   console.log(`Processed file:\n${processFilePathList}`)
@@ -54,9 +105,21 @@ export function formatterOutput(processFilePath: string[], formatter: string) {
     console.log(global.outputReport)
   }
 
+  let tableStr: string
+  let tableOutput: any[][] = [['Rule Names', 'Count']]
+  for (let i in global.outputReport) {
+    tableOutput.push([i, global.outputReport[i]])
+  }
+  tableStr = table(tableOutput, {
+    drawHorizontalLine: (lineIndex, rowCount) => {
+      return lineIndex === 0 || lineIndex === 1 || lineIndex === rowCount
+    },
+    columns: [{ alignment: 'left' }, { alignment: 'center' }]
+  })
+
   if (formatter === 'table') {
     console.log('The transformation stats: \n')
-    console.table(global.outputReport)
+    console.log(tableStr)
   }
 
   if (formatter === 'log') {
@@ -65,17 +128,26 @@ export function formatterOutput(processFilePath: string[], formatter: string) {
       processFilePath,
       totalDetected,
       totalChanged,
-      transRate
+      transRate,
+      tableStr
     )
   }
+
+  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(
   processFilePathList: string,
   processFilePath: string[],
   totalDetected: number,
   totalChanged: number,
-  transRate: number
+  transRate: string | number,
+  tableStr: string
 ) {
   let options = {
     flags: 'w', //
@@ -92,5 +164,12 @@ export function logOutput(
   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)
+  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)
+  })
 }

src/runTransformation.ts

@@ -113,6 +113,8 @@ export default function runTransformation(
         return source
       }
 
+      global.scriptLine = descriptor.script.loc.start.line
+
       lang = descriptor.script.lang || 'js'
       fileInfo.source = descriptor.script.content
     }

transformations/index.ts

@@ -40,7 +40,15 @@ const transformationMap: {
   'remove-extraneous-import': require('./remove-extraneous-import'),
 
   'router4-onready-to-isready': require('./router/router4-onready-to-isready'),
-  'router-update-addRoute': require('./router/router-update-addRoute')
+  'router-update-addRoute': require('./router/router-update-addRoute'),
+
+  // 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'),
+  'manual-remove-on-off-once': require('./manual/manual-remove-on-off-once'),
+  'manual-remove-router-star': require('./manual/manual-remove-router-star'),
+  'manual-remove-config-keycodes': require('./manual/manual-remove-config-keycodes'),
+  'manual-remove-filter': require('./manual/manual-remove-filter')
 }
 
 export const excludedTransformations = [

transformations/manual/manual-remove-Vue.ts

@@ -0,0 +1,29 @@
+import wrap from '../../src/wrapAstTransformation'
+import type { ASTTransformation } from '../../src/wrapAstTransformation'
+import { pushManualList } from '../../src/report'
+
+export const transformAST: ASTTransformation = context => {
+  const { root, j, filename } = context
+
+  const rootNodes: any = root
+    .find(j.MemberExpression, {
+      object: {
+        name: 'Vue'
+      }
+    })
+    .filter((node: any) => node?.value.property?.name !== 'createApp')
+  if (rootNodes) {
+    rootNodes.forEach((node: any) => {
+      const path = filename
+      const name = 'remove Vue(global api)'
+      const suggest =
+        "The rule of thumb is any APIs that globally mutate Vue's behavior are now moved to the app instance. "
+      const website =
+        'https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp'
+      pushManualList(path, node, name, suggest, website)
+    })
+  }
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'

transformations/manual/manual-remove-VueRouter.ts

@@ -0,0 +1,25 @@
+import wrap from '../../src/wrapAstTransformation'
+import type { ASTTransformation } from '../../src/wrapAstTransformation'
+import { pushManualList } from '../../src/report'
+
+export const transformAST: ASTTransformation = context => {
+  const { root, j, filename } = context
+
+  const rootNodes: any = root.find(j.Identifier, {
+    name: 'VueRouter'
+  })
+  if (rootNodes) {
+    rootNodes.forEach((node: any) => {
+      const path = filename
+      const name = 'remove VueRouter'
+      const suggest =
+        "The rule of thumb is any APIs that globally mutate VueRouter's behavior are now moved to the app instance. "
+      const website =
+        'https://next.router.vuejs.org/guide/migration/index.html#moved-the-base-option'
+      pushManualList(path, node, name, suggest, website)
+    })
+  }
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'

transformations/manual/manual-remove-config-keycodes.ts

@@ -0,0 +1,34 @@
+import wrap from '../../src/wrapAstTransformation'
+import type { ASTTransformation } from '../../src/wrapAstTransformation'
+import { pushManualList } from '../../src/report'
+
+export const transformAST: ASTTransformation = context => {
+  const { root, j, filename } = context
+
+  const rootNodes: any = root.find(j.MemberExpression, {
+    object: {
+      object: {
+        name: 'Vue'
+      },
+      property: {
+        name: 'config'
+      }
+    },
+    property: {
+      name: 'KeyCodes'
+    }
+  })
+  if (rootNodes) {
+    rootNodes.forEach((node: any) => {
+      const path = filename
+      const name = 'remove keycodes'
+      const suggest = 'config.keyCodes is no longer supported '
+      const website =
+        'https://v3.vuejs.org/guide/migration/keycode-modifiers.html'
+      pushManualList(path, node, name, suggest, website)
+    })
+  }
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'

transformations/manual/manual-remove-filter.ts

@@ -0,0 +1,47 @@
+import wrap from '../../src/wrapAstTransformation'
+import type { ASTTransformation } from '../../src/wrapAstTransformation'
+import { pushManualList } from '../../src/report'
+
+export const transformAST: ASTTransformation = context => {
+  const { root, j, filename } = context
+
+  const rootNodes: any = root
+    .find(j.Identifier, {
+      name: 'filters'
+    })
+    .filter((node: any) => node?.value.property?.name !== 'createApp')
+  if (rootNodes) {
+    rootNodes.forEach((node: any) => {
+      const path = filename
+      const name = 'remove filters'
+      const suggest =
+        'Filters are removed from Vue 3.0 and no longer supported. '
+      const website =
+        'https://v3.vuejs.org/guide/migration/filters.html#overview'
+      pushManualList(path, node, name, suggest, website)
+    })
+  }
+
+  const rootNodes2: any = root.find(j.MemberExpression, {
+    object: {
+      name: 'Vue'
+    },
+    property: {
+      name: 'filter'
+    }
+  })
+  if (rootNodes2) {
+    rootNodes2.forEach((node: any) => {
+      const path = filename
+      const name = 'remove global filters'
+      const suggest =
+        'Instead, you can make your global filters available to all components through globalProperties: '
+      const website =
+        'https://v3.vuejs.org/guide/migration/filters.html#global-filters'
+      pushManualList(path, node, name, suggest, website)
+    })
+  }
+}
+
+export default wrap(transformAST)
+export const parser = 'babylon'