feat: support applying jscodeshift codemods to .vue files

Author: haoqunjiang

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true

.prettierrc.js

@@ -8,11 +8,11 @@ Inspired by [react-codemod](https://github.com/reactjs/react-codemod).
 
 ## Command Line Usage
 
-`npx vue-codemod -t <transformation> --params [transformation params] <path> [...additional options]`
+`npx vue-codemod <path> -t <transformation> --params [transformation params] [...additional options]`
 
 - `transformation` (required) - name of transformation, see available transformations below; or you can provide a path to a custom transformation module.
 - `path` (required) - files or directory to transform.
-- `--params` (optional) - additional transformation specific args	.
+- `--params` (optional) - additional transformation specific args.
 - use the `--dry` options for a dry-run.
 
 ## Programmatic API
@@ -23,9 +23,9 @@ TODO
 
 (Sort by priority)
 
-- [ ] Basic testing setup and a dummy CLI
-- [ ] Support applying `jscodeshift` codemods to `.vue` files
-- [ ] Provide a programmatic interface for usage in `vue-cli-plugin-vue-next`
+- [x] Basic testing setup and a dummy CLI
+- [x] Support applying `jscodeshift` codemods to `.vue` files
+- [x] Provide a programmatic interface for usage in `vue-cli-plugin-vue-next`
 - [ ] Define an interface for transformation of template blocks
 - [ ] A playground for writing transformations
 - [ ] Implement more transformations for [active RFCs](https://github.com/vuejs/rfcs/tree/master/active-rfcs)

README.md

@@ -1,46 +1,83 @@
 #!/usr/bin/env node
 
-import program from 'commander'
-import execa from 'execa'
-
 import * as fs from 'fs'
 import * as path from 'path'
+import Module from 'module'
 
-import { version } from '../package.json'
-
-program
-  .name('vue-codemod')
-  .version(version)
-  
-  .requiredOption('-t, --transformation <name>', 'Name or path of a transfromation module')
-  .requiredOption('-f, --file <glob>', 'Files or directory to run codemod on')
-  .option('--dry', 'Dry run (no changes are made to files)')
-  
-  .parse(process.argv)
-
-function resolveTransformation (name: string) {  
-  const builtInPath = require.resolve(`../transforms/${name}`)
-  if (fs.existsSync(builtInPath)) {
-    return builtInPath
-  }
-  
-  const customModulePath = path.resolve(process.cwd(), name)
-  if (fs.existsSync(customModulePath)) {
-    return customModulePath
+import * as yargs from 'yargs'
+import * as globby from 'globby'
+
+import createDebug from 'debug'
+
+import builtInTransformations from '../transformations'
+import runTransformation from '../src/run-transformation'
+
+const debug = createDebug('vue-codemod')
+const log = console.log.bind(console)
+
+const { _: files, transformation: transformationName, params } = yargs
+  .usage('Usage: $0 [file pattern]')
+  .option('transformation', {
+    alias: 't',
+    type: 'string',
+    describe: 'Name or path of the transformation module',
+  })
+  .option('params', {
+    alias: 'p',
+    describe: 'Custom params to the transformation',
+  })
+  .demandOption('transformation')
+  .help().argv
+
+// TODO: port the `Runner` interface of jscodeshift
+async function main() {
+  const resolvedPaths = globby.sync(files)
+  const transformation = loadTransformation(transformationName)
+
+  log(`Processing ${resolvedPaths.length} files…`)
+
+  for (const p of resolvedPaths) {
+    debug(`Processing ${p}…`)
+    const fileInfo = {
+      path: p,
+      source: fs.readFileSync(p).toString(),
+    }
+    try {
+      const result = runTransformation(
+        fileInfo,
+        transformation,
+        params as object
+      )
+      fs.writeFileSync(p, result)
+    } catch (e) {
+      console.error(e)
+    }
   }
 }
 
-const transformationPath = resolveTransformation(program.transformation)
-if (!transformationPath) {
-  console.error(`Cannot find transformation module ${program.transformation}`)
+main().catch((err) => {
+  console.error(err)
   process.exit(1)
-}
-
-// TODO:
-// don't depend on the jscodeshift **CLI** interface
-// so that we can apply the adapter to all code transforms directly
-const jscodeshiftExecutable = require.resolve('.bin/jscodeshift')
-execa.sync(jscodeshiftExecutable, ['-t', transformationPath, program.file, '--extensions', 'vue,js'], {
-  stdio: 'inherit',
-  stripFinalNewline: false
 })
+
+function loadTransformation(nameOrPath: string) {
+  let transformation = builtInTransformations[nameOrPath]
+  if (transformation) {
+    return transformation
+  }
+
+  const customModulePath = path.resolve(process.cwd(), nameOrPath)
+  if (fs.existsSync(customModulePath)) {
+    const requireFunc = Module.createRequire(
+      path.resolve(process.cwd(), './package.json')
+    )
+    // TODO: interop with ES module
+    // TODO: fix absolute path
+    const module = requireFunc(`./${nameOrPath}`)
+    const transformation =
+      typeof module.default === 'function' ? module.default : module
+    return transformation
+  }
+
+  throw new Error(`Cannot find transformation module ${nameOrPath}`)
+}

bin/vue-codemod.ts

@@ -3,25 +3,45 @@
   "version": "0.0.1",
   "description": "Vue codemod scripts",
   "main": "index.js",
+  "bin": "./dist/bin/vue-codemod.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "tsc"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/vuejs/vue-codemod.git"
   },
   "author": "Haoqun Jiang",
   "license": "MIT",
   "dependencies": {
-    "commander": "^4.1.0",
-    "execa": "^4.0.0",
+    "@types/debug": "^4.1.5",
+    "@vue/compiler-sfc": "^3.0.0-alpha.12",
+    "debug": "^4.1.1",
     "globby": "^11.0.0",
     "inquirer": "^7.0.3",
     "jscodeshift": "^0.7.0",
-    "vue-jscodeshift-adapter": "^2.0.3"
+    "vue": "^3.0.0-alpha.12",
+    "vue-sfc-descriptor-to-string": "^1.0.0",
+    "yargs": "^15.3.1"
   },
   "devDependencies": {
     "@types/jest": "^24.0.25",
     "@types/jscodeshift": "^0.6.3",
     "@types/node": "^13.1.6",
+    "@types/yargs": "^15.0.4",
     "jest": "^24.9.0",
+    "prettier": "^2.0.4",
     "typescript": "^3.7.4"
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true
+  },
+  "engines": {
+    "node": ">= 12.2.0"
   }
 }

package.json

@@ -0,0 +1,3 @@
+export default class VueTransformation {
+  // TODO:
+}

src/VueTransformation.ts

@@ -0,0 +1,5 @@
+// TODO: Programmatic API
+
+export { default as VueTransformation } from './VueTransformation'
+
+export { default as runTransformation } from './run-transformation'

src/index.ts

@@ -0,0 +1,75 @@
+import jscodeshift, { Transform, Parser } from 'jscodeshift'
+// @ts-ignore
+import getParser from 'jscodeshift/dist/getParser'
+import { parse } from '@vue/compiler-sfc'
+import descriptorToString from 'vue-sfc-descriptor-to-string'
+import createDebug from 'debug'
+
+import VueTransformation from './VueTransformation'
+
+const debug = createDebug('vue-codemod')
+
+type FileInfo = {
+  path: string
+  source: string
+}
+
+type JSTransformation = Transform & {
+  parser?: string | Parser
+}
+
+export default function runTransformation(
+  fileInfo: FileInfo,
+  transformation: VueTransformation | JSTransformation,
+  params: object = {}
+) {
+  if (transformation instanceof VueTransformation) {
+    debug('TODO: Running VueTransformation')
+    return
+  }
+
+  debug('Running jscodeshift transform')
+
+  let parser = getParser()
+  if (transformation.parser) {
+    parser =
+      typeof transformation.parser === 'string'
+        ? getParser(transformation.parser)
+        : transformation.parser
+  }
+  const j = jscodeshift.withParser(parser)
+  const api = {
+    j,
+    jscodeshift: j,
+    stats: () => {},
+    report: () => {},
+  }
+
+  const { path, source } = fileInfo
+  const extension = (/\.([^.]*)$/.exec(path) || [])[0]
+
+  if (extension !== '.vue') {
+    const out = transformation(fileInfo, api, params)
+    if (!out) {
+      return source // skipped
+    }
+    return out
+  }
+
+  const { descriptor } = parse(source, { filename: path })
+  if (descriptor.script) {
+    fileInfo.source = descriptor.script.content
+    const out = transformation(fileInfo, api, params)
+
+    if (!out || out === descriptor.script.content) {
+      return source // skipped
+    }
+    descriptor.script.content = out
+    // TODO: preserve indentation
+    return descriptorToString(descriptor, {
+      indents: {
+        template: 0,
+      },
+    })
+  }
+}

src/run-transformation.ts

@@ -0,0 +1,15 @@
+declare module 'vue-sfc-descriptor-to-string' {
+  import { SFCDescriptor } from '@vue/compiler-sfc'
+
+  interface Options {
+    indents?: {
+      template?: number
+      script?: number
+      style?: number
+    }
+  }
+
+  function toString(sfcDescriptor: SFCDescriptor, options?: Options): string
+
+  export = toString
+}

src/typings.d.ts

@@ -1,5 +1,4 @@
-import { Transform } from "jscodeshift"
-import adapt from '../../utils/adapter'
+import { Transform } from 'jscodeshift'
 
 import removeProductionTip from './remove-production-tip'
 import transformMount from './transformMount'
@@ -11,8 +10,8 @@ const transform: Transform = (file, api) => {
   // add a `createApp` import
   const vueImportExpr = root.find(j.ImportDeclaration, {
     source: {
-      value: 'vue'
-    }
+      value: 'vue',
+    },
   })
   vueImportExpr.forEach(({ node }) => {
     node.specifiers.push(j.importSpecifier(j.identifier('createApp')))
@@ -30,4 +29,4 @@ const transform: Transform = (file, api) => {
   return root.toSource({ lineTerminator: '\n' })
 }
 
-export default adapt(transform)
+export default transform

transforms/rfc-0009/index.ts transformations/create-app-mount/index.ts

@@ -0,0 +1,10 @@
+import createAppMount from './create-app-mount'
+
+const transformationMap : {
+  [name: string]: Function
+} = {
+  'create-app-mount': createAppMount,
+  // TODO:
+}
+
+export default transformationMap