Initial setup

Author: haoqunjiang

.editorconfig

@@ -1,2 +1,61 @@
 # vue-codemod
-Vue codemod scripts
+
+**Current status: pre-MVP, not usable**
+
+This repository contains a collection of codemod scripts for use with [JSCodeshift](https://github.com/facebook/jscodeshift) that help update Vue.js APIs.
+
+Inspired by [react-codemod](https://github.com/reactjs/react-codemod).
+
+## Usage
+
+`npx vue-codemod -t <transformation> -f <path> [...options]
+
+- `transformation` - name of transformation, see available transformations below. Or you can provide a path to a custom transformation module.
+- `path` - files or directory to transform
+- use the `--dry` options for a dry-run
+
+## TODOs
+
+(Sort by priority)
+
+- [ ] Basic testing setup and an MVP
+- [ ] Define an interface for transformation of template blocks
+- [ ] Automatically apply transformations to `.vue` file without explicitly depending on `vue-jscodeshift-adapter` (should open source this repo after finishing this one)
+- [ ] A playground for writing transformations
+- [ ] Implement more transformations for [active RFCs](https://github.com/vuejs/rfcs/tree/master/active-rfcs)
+- [ ] Support `.ts` and `<script lang="ts">`
+
+## Included Transformations
+
+### rfc-0009
+
+Alias of [`new-vue-to-create-app`](#new-vue-to-create-app)
+
+### rfc-0013
+
+**WIP**
+Runs [`object-to-composition-api`](#object-to-composition-api)
+
+### new-vue-to-create-app
+
+Implements [RFC-0009 Global API Change](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md).
+Converts `new Vue(...).$mount('#app')` calls to `createApp(...).mount(App, '#app')`.
+
+### object-to-composition-api
+
+**WIP**
+Implements [RFC-0013 Composition API](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md).
+Migrated from https://github.com/vuejs/function-api-converter
+
+## Custom Transformation
+
+TODO
+
+## Post Transformation
+
+- Running transformations will generally ruin the formatting of your files. A recommended way to solve that problem is by using [Prettier](https://prettier.io/) or `eslint --fix`.
+- Even after running prettier its possible to have unnecessary new lines added/removed. This can be solved by ignoring white spaces while staging the changes in git.
+
+```sh
+git diff --ignore-blank-lines | git apply --cached
+```

.prettierrc.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+import program from 'commander'
+import execa from 'execa'
+
+import * as fs from 'fs'
+import * as path from 'path'
+
+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
+  }
+}
+
+const transformationPath = resolveTransformation(program.transformation)
+if (!transformationPath) {
+  console.error(`Cannot find transformation module ${program.transformation}`)
+  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
+})

README.md

@@ -0,0 +1,27 @@
+{
+  "name": "vue-codemod",
+  "version": "0.0.1",
+  "description": "Vue codemod scripts",
+  "main": "index.js",
+  "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",
+    "globby": "^11.0.0",
+    "inquirer": "^7.0.3",
+    "jscodeshift": "^0.7.0",
+    "vue-jscodeshift-adapter": "^2.0.3"
+  },
+  "devDependencies": {
+    "@types/jest": "^24.0.25",
+    "@types/jscodeshift": "^0.6.3",
+    "@types/node": "^13.1.6",
+    "jest": "^24.9.0",
+    "typescript": "^3.7.4"
+  }
+}

bin/vue-codemod.ts

@@ -0,0 +1 @@
+export * from './rfc-0009'

package.json

@@ -0,0 +1,33 @@
+import { Transform } from "jscodeshift"
+import adapt from '../../utils/adapter'
+
+import removeProductionTip from './remove-production-tip'
+import transformMount from './transformMount'
+
+const transform: Transform = (file, api) => {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  // add a `createApp` import
+  const vueImportExpr = root.find(j.ImportDeclaration, {
+    source: {
+      value: 'vue'
+    }
+  })
+  vueImportExpr.forEach(({ node }) => {
+    node.specifiers.push(j.importSpecifier(j.identifier('createApp')))
+  })
+
+  removeProductionTip(j, root)
+  transformMount(j, root)
+
+  // remove extraneous Vue import
+  const localVueUsages = root.find(j.Identifier, { name: 'Vue' })
+  if (localVueUsages.length === 1) {
+    localVueUsages.closest(j.ImportDefaultSpecifier).remove()
+  }
+
+  return root.toSource({ lineTerminator: '\n' })
+}
+
+export default adapt(transform)

transforms/new-vue-to-create-app.ts

@@ -0,0 +1,15 @@
+import { JSCodeshift } from 'jscodeshift'
+
+export default function removeProductionTip(j: JSCodeshift, root: ReturnType<JSCodeshift>) {
+  const productionTipAssignment = root.find(
+    j.AssignmentExpression,
+    n =>
+      n.left.type === 'MemberExpression' &&
+      n.left.property.name === 'productionTip' &&
+      n.left.object.property.name === 'config' &&
+      n.left.object.object.name === 'Vue'
+  )
+  productionTipAssignment.remove()
+
+  return root
+}

transforms/rfc-0009/index.ts

@@ -0,0 +1,42 @@
+import { JSCodeshift } from 'jscodeshift'
+
+export default function transformMount(j: JSCodeshift, root: ReturnType<JSCodeshift>) {
+  // new Vue(...).$mount()
+  const mountCalls = root.find(j.CallExpression, n => {
+    return (
+      n.callee.type === 'MemberExpression' &&
+      n.callee.property.name === '$mount' &&
+      n.callee.object &&
+      n.callee.object.type === 'NewExpression' &&
+      n.callee.object.callee.name === 'Vue'
+    )
+  })
+
+  mountCalls.replaceWith(({ node }) => {
+    // FIXME:
+    // @ts-ignore
+    let options = node.callee.object.arguments[0]
+    const el = node.arguments[0]
+
+    // if it's a simple option, like `{ render: h => h(App) }`,
+    // then just use the App variable
+    if (
+      options.properties.length === 1 &&
+      options.properties[0].key.name === 'render' &&
+      options.properties[0].value.type === 'ArrowFunctionExpression' &&
+      options.properties[0].value.body.type === 'CallExpression'
+    ) {
+      options = options.properties[0].value.body.arguments[0]
+    }
+
+    return j.callExpression(
+      j.memberExpression(
+        j.callExpression(j.identifier('createApp'), []),
+        j.identifier('mount')
+      ),
+      [options, el]
+    )
+  })
+
+  return root
+}

transforms/rfc-0009/remove-production-tip.ts

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "sourceMap": false,
+    "target": "esnext",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "allowJs": false,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "removeComments": false,
+    "jsx": "preserve",
+    "lib": ["esnext"],
+    "types": [
+      "jest",
+      "jscodeshift",
+      "node"
+    ],
+    "rootDir": ".",
+  }
+}

transforms/rfc-0009/transformMount.ts

@@ -0,0 +1,7 @@
+// @ts-ignore
+import adapt from 'vue-jscodeshift-adapter'
+
+// TODO:
+// 1. support lang="ts" block in .vue files
+// 2. automatically apply the adapter function to all transform modules
+export default adapt