The vc2c project can convert vue class APIs to vue composition APIs in Vue.js components written in Typescript.
ASTConvertPlugins is the most important part of this project, it can convert AST to composition APIs.
Custom decorator in ASTConvertPlugins are supported, such as @Subscription
.
See Writing a custom ASTConvert for more details.
The files to be converted must meet the criterias below:
name
props
data
computed
methods
watch
mounted
)provide / inject
mixins
extends
render
className
computed
data
mounted
)render
methods
Mixins
@Prop
@PropSync
@Model
@Watch
@Provide / @Inject
@ProvideReactive / @InjectReactive
@Emit
@Ref
this
to props
, variable
, or context
.The vc2c project has both CLI and API interface.
# npm
npx vc2c single [cliOptions] <VueOrTSfilePath>
# yarn
yarn add vc2c
yarn vc2c single [cliOptions] <VueOrTSfilePath>
# volta
sudo volta install vc2c
vc2c single [cliOptions] <VueOrTSfilePath>
-v, --view Output file content on stdout, and no write file.
-o, --output Output result file path.
-r, --root <root> Set root path for calc file absolute path. Default:`process.cwd()`.
-c, --config <config> Set vc2c config file path. Default: `'.vc2c.js'`.
-h, --help Output usage information.
const { convert, convertFile } = require('vc2c')
// Get convert result script
const resultScript = convert(
/* scriptContent */ fileContent, // cann't include vue file content, if vue file, only input script element content
/* {Vc2cConfig} */ options
)
// Get FileInfo and scriptResult
const { file, result } = convertFile(
/* VueOrTSfilePath */ filePath,
/* rootPath */ cmdOptions.root,
/* Vc2cConfigFilePath */ cmdOptions.config
)
{
// root path for calc file absolute path, if in CLI, --root value will replace. default:`process.cwd()`
root?: string
// show debug message. default: `false`
debug?: boolean,
// if true, use @vue/composition-api. default: `false`
compatible?: boolean
// first setup function parameter name. default: `props`
setupPropsKey?: string
// second setup function parameter name. default: `context`
setupContextKey?: string
// Use custom version typescript. default: Typescript 3.7.3
typesciprt?: typeof ts
// Use custom version vue-template-compiler, please match your project vue versions. default: vue-template-compiler 2.6.11
vueTemplateCompiler?: typeof vueTemplateCompiler
// Use custom eslint file path. if file not exists, use default vc2c eslint config. default: `.eslintrc.js`
eslintConfigFile?: string
// Use custom ASTConvertPlugins for ASTConvert and ASTTransform
plugins?: ASTConvertPlugins
}
import * as ts from 'typescript'
// import { ASTConvertPlugins, ASTConverter, ASTTransform } from 'vc2c'
export interface ASTConvertPlugins {
[ts.SyntaxKind.Decorator]: {
// @Component decorator argument ASTConvert
[ts.SyntaxKind.PropertyAssignment]: Array<ASTConverter<ts.PropertyAssignment>>
[ts.SyntaxKind.MethodDeclaration]: Array<ASTConverter<ts.MethodDeclaration>>
};
// Class child AST will forEach ASTConverter until return ASTResult by AST SyntaxKind
[ts.SyntaxKind.Identifier]: Array<ASTConverter<ts.Identifier>>
[ts.SyntaxKind.HeritageClause]: Array<ASTConverter<ts.HeritageClause>>
[ts.SyntaxKind.PropertyDeclaration]: Array<ASTConverter<ts.PropertyDeclaration>>
[ts.SyntaxKind.GetAccessor]: Array<ASTConverter<ts.GetAccessorDeclaration>>
[ts.SyntaxKind.SetAccessor]: Array<ASTConverter<ts.SetAccessorDeclaration>>
[ts.SyntaxKind.MethodDeclaration]: Array<ASTConverter<ts.MethodDeclaration>>
// When all ASTConvert finished, run ASTTransform.
after: Array<ASTTransform>
}
Vue Class @Component
decorator Object:
@Component
argument by running ASTConvert
functions in plugins[ts.SyntaxKind.Decorator][property.kind as ts.SyntaxKind]
array.ASTConvert
returns a ASTResult
, vc2c will record the ASTResult
and proceed to the next object property.ASTConvert
returns false
, vc2c will run the next ASTConvert
function in the array.Vue Class:
Class
AST childs by running ASTConvert
functions in plugins[AST.kind as ts.SyntaxKind]
array.ASTConvert
returns a ASTResult
, vc2c will record the ASTResult
and proceed to the next object property.ASTConvert
returns false
, vc2c will run the next ASTConvert
function in the array.Transform:
ASTTransform
functions in plugins.after
array after finishing the two steps above.computed
, removeThis
.ASTConvert
or ASTTransform
in ASTConvertPlugins
.
import { BuiltInPlugins } from 'vc2c'
const astConvert: ASTConvert = BuiltInPlugins.convertProp
import { getDecoratorNames, isInternalHook } from 'vc2c'
ASTConvert
functions must be placed in order by it's strictness in ASTConvertPlugins
. Stricter function should be placed up front.