Automated AST-Based Code Migration for Vue Front‑End Projects

In front‑end development projects, architecture upgrades such as Vue 2 → Vue 3, Webpack 4 → Webpack 5, or migration to Vite bring benefits but often involve breaking changes that are not fully backward compatible.

Manually updating large codebases is time‑consuming and error‑prone, so the author proposes an automated migration tool based on abstract syntax trees (AST).

Background – The article first illustrates a simple Vue 3 migration case: registering a global directive differs between Vue 2 and Vue 3. The Vue 2 code:

import Vue from 'vue'
Vue.directive('focus', { inserted: (el) => el.focus() })

and the Vue 3 equivalent:

import { createApp } from 'vue'
const app = createApp({})
app.directive('focus', { inserted: (el) => el.focus() })

When many files need such changes, a scaffolding tool is needed.

Migration ideas – The author first tried regular‑expression replacements, e.g. replacing @vivo/v-jsbridge with @webf/webf-vue-render . However, regex is fragile due to whitespace, quotes, and complex patterns.

Therefore, an AST‑based approach is recommended.

AST basics – Using Babel as an example, the compilation process consists of parsing source code into an AST, transforming the AST, and generating new code from the transformed AST. A small example converting an ES6 arrow function to ES5 shows the AST before and after transformation.

Benefits of AST migration include flexibility, richer matching capabilities, and consistent code style.

Tool selection – For JavaScript files the author chooses GoGoCode (an Alibaba open‑source AST library) because of its jQuery‑like API. For CSS/LESS/SCSS files PostCSS is used, and for Vue single‑file components the combination of @vue/component‑compiler‑utils (to extract style blocks) and GoGoCode (to handle script and template) is employed.

Overall workflow – The migration process consists of:

Traverse project files and dispatch each file to a specific transform function based on its extension.

Parse the file into an AST.

Apply transformation rules to script, template, and style sections.

Generate the updated source code and write it back.

File‑traversal example (Node.js):

const path = require('path')
const fs = require('fs')
const transformFiles = path => {
  const traverse = path => {
    try {
      fs.readdir(path, (err, files) => {
        files.forEach(file => {
          const filePath = `${path}/${file}`
          fs.stat(filePath, async (err, stats) => {
            if (stats.isFile()) {
              const language = file.split('.').pop()
              if (language === 'vue') {
                await transformVue(file, filePath, language)
              } else if (jsSuffix.includes(language)) {
                await transformScript(file, filePath, language)
              } else if (styleSuffix.includes(language)) {
                await transformStyle(file, filePath, language)
              }
            } else {
              traverse(`${path}/${file}`)
            }
          })
        })
      })
    } catch (err) { console.error(err) }
  }
  traverse(path)
}

Vue file handling example:

const $ = require('gogocode')
const transformVue = async (file, path, language = 'vue') => {
  return new Promise((resolve, reject) => {
    fs.readFile(path, (err, code) => {
      const sourceCode = code.toString()
      const ast = $(sourceCode, { parseOptions: { language: 'vue' } })
      transformScript(ast)
      transformTemplate(ast)
      transformStyles(ast)
      const outputCode = ast.root().generate()
      fs.writeFile(path, outputCode, err => err ? reject(err) : resolve())
    })
  })
}

Transformation rules are expressed with GoGoCode’s find , replace , append , etc. Example: replace an import source.

const transformScript = ast => {
  const script = ast.find('
')
  script.replace(`import {$$$} from "@vivo/v-jsbridge"`, `import {$$$} from "@webf/webf-vue-render/modules/jsb"`)
  return ast
}

Template migration example replaces a div with an @change attribute by a span with :onChange :

const transformTemplate = ast => {
  const template = ast.find('
')
  const tagName = 'div'
  const targetTagName = 'span'
  template.replace(`<${tagName} @change="$_$" $$$1>$$$0</${tagName}>`, `<${targetTagName} :onChange="$_$" $$$1>$$$0</${targetTagName}>`)
  return ast
}

Style migration uses PostCSS. A simple plugin changes all color declarations to red :

const colorPlugin = () => ({
  postcssPlugin: 'postcss-color',
  Once(root) { root.walkDecls(node => { if (node.prop === 'color') node.value = 'red' }) }
})
colorPlugin.postcss = true

const transformStyles = ast => {
  const styles = ast.rootNode.value.styles
  styles.forEach(style => {
    const result = compileStyle({ source: style.content, scoped: false })
    const res = postcss([colorPlugin]).process(result.code, { from: path, syntax: parsers[style.lang || 'css'] })
    style.content = res.css
  })
  return ast
}

The article concludes that with a basic understanding of AST concepts and the mentioned tools, developers can build an automated migration scaffold that reduces manual effort and mitigates risk.