repository·main·Indexed 43 days ago
https://github.com/vuejs/vue-codemodA tool for running automated code transformations on Vue files to assist with migrations and refactoring. It provides a CLI and programmatic API via runTransformation(), a core VueTransformation class, and a set of built-in transformations for migrating to Vue Router v4, Vuex v4, and converting to createApp(). Developers can implement custom ASTTransformation types and convert them to jscodeshift modules.
The Context object is passed to your ASTTransformation and contains the tools required to inspect and modify the code:
root: The parsed AST root (returned by jscodeshift's Core).j: The jscodeshift API instance used for creating, finding, and manipulating AST nodes.filename: The path/name of the file currently being processed.export type Context = {
root: ReturnType<Core>
j: JSCodeshift
filename: string
}To create a custom codemod, implement the ASTTransformation type. This interface defines a function that receives a Context object and an optional Params object. The Context provides access to the parsed AST root, the jscodeshift API instance, and the current file's filename, allowing you to perform transformations using the jscodeshift API.
import type { ASTTransformation, Context } from './path-to-types';
export type MyParams = { someOption: boolean };
export const myTransformation: ASTTransformation<MyParams> = (context, params) => {
const { root, j, filename } = context;
// Example: Find all variable declarations in the file
const declarations = root.find(j.VariableDeclaration);
if (params.someOption) {
// Perform logic based on params
}
};export type ASTTransformation<Params = void> = {
(context: Context, params: Params): void
}Use the astTransformationToJSCodeshiftModule function to wrap your custom ASTTransformation into a standard jscodeshift Transform module. This allows your transformation to be executed by the jscodeshift runner. The wrapper handles the parsing of the file source, provides the necessary context, and returns the transformed source code as a string.
import astTransformationToJSCodeshiftModule from './wrapAstTransformation';
import { myTransformation } from './myTransformation';
// This exported function is now a compatible jscodeshift Transform
export default astTransformationToJSCodeshiftModule(myTransformation);export default function astTransformationToJSCodeshiftModule<Params = any>(
transformAST: ASTTransformation<Params>
): Transform {
// ... implementation
}The transformations export provides access to the collection of available Vue codemods. This can be used to inspect, select, or iterate over specific transformation rules provided by the library.
import { transformations } from 'vue-codemod';
// Access specific transformations
console.log(transformations);You can execute codemods programmatically by importing runTransformation from the entrypoint. This function is the primary way to apply transformations to source code within a custom script or tool.
import { runTransformation } from 'vue-codemod';
// Usage depends on the internal implementation of runTransformation
await runTransformation(/* options */);The vue-codemod project provides a collection of built-in transformations designed to automate Vue.js migrations and code cleanup. These transformations can be identified by their unique names and are used to target specific API changes or patterns in a codebase.
These transformations target major version migrations or specific API shifts:
vue-class-component-v8: Migrates vue-class-component to version 8.new-global-api: Updates usage of the global API.vue-router-v4: Migrates Vue Router to version 4.vuex-v4: Migrates Vuex to version 4.define-component: Converts components to use the defineComponent helper.new-vue-to-create-app: Migrates from new Vue() to createApp().scoped-slots-to-slots: Converts scoped slots syntax to the newer v-slot pattern.new-directive-api: Updates directive API usage.remove-vue-set-and-delete: Removes Vue.set and Vue.delete calls.Smaller, specific code cleanup tasks:
remove-contextual-h-from-render: Removes contextual h functions from render functions.remove-production-tip: Removes production tip logic.remove-trivial-root: Removes unnecessary root elements.remove-vue-use: Removes Vue.use calls.root-prop-to-use: Converts root properties to use calls.vue-as-namespace-import: Updates Vue namespace imports.General purpose code maintenance:
add-import: Adds missing imports.remove-extraneous-import: Removes unused imports.The following options are available for the vue-codemod command line interface:
--transformation, -t <string> Name or path of the transformation module (Required)
--params, -p <string> Custom params to the transformationThe vue-codemod CLI allows you to run automated transformations on Vue files. You must specify a transformation module using the --transformation flag and provide a file pattern to target specific files for processing.
Usage:
npx vue-codemod [file pattern] --transformation <name_or_path> [options]
Arguments:
[file pattern]: A glob pattern (e.g., src/**/*.vue) representing the files you want to transform.Options:
--transformation, -t: (Required) The name of a built-in transformation or the path to a custom transformation module.--params, -p: Custom parameters to pass to the transformation module.# Example: Running a built-in transformation on all Vue files in src
npx vue-codemod "src/**/*.vue" --transformation my-transformation-name
# Example: Running a custom transformation module from a local path
npx vue-codemod "src/**/*.vue" --transformation ./my-custom-transform.js --params '{"key": "value"}'VueTransformation class is exported as the core engine for handling Vue-specific code transformations. It is used to encapsulate the logic required to parse, manipulate, and generate Vue source code.