Core compiler for Vue.js template compilation and transformation
—
Vue Compiler Core provides a comprehensive error handling system with detailed error codes, source location tracking, and human-readable error messages for all compilation phases.
Enumeration of all possible compiler error conditions.
/**
* Enumeration of all compiler error codes
*/
enum ErrorCodes {
// Parse errors
ABRUPT_CLOSING_OF_EMPTY_COMMENT = 0,
CDATA_IN_HTML_CONTENT = 1,
DUPLICATE_ATTRIBUTE = 2,
END_TAG_WITH_ATTRIBUTES = 3,
END_TAG_WITH_TRAILING_SOLIDUS = 4,
EOF_BEFORE_TAG_NAME = 5,
EOF_IN_CDATA = 6,
EOF_IN_COMMENT = 7,
EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT = 8,
EOF_IN_TAG = 9,
INCORRECTLY_CLOSED_COMMENT = 10,
INCORRECTLY_OPENED_COMMENT = 11,
INVALID_FIRST_CHARACTER_OF_TAG_NAME = 12,
MISSING_ATTRIBUTE_VALUE = 13,
MISSING_END_TAG_NAME = 14,
MISSING_WHITESPACE_BETWEEN_ATTRIBUTES = 15,
NESTED_COMMENT = 16,
UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME = 17,
UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE = 18,
UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME = 19,
UNEXPECTED_NULL_CHARACTER = 20,
UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME = 21,
UNEXPECTED_SOLIDUS_IN_TAG = 22,
// Vue-specific parse errors
X_INVALID_END_TAG = 23,
X_MISSING_END_TAG = 24,
X_MISSING_INTERPOLATION_END = 25,
X_MISSING_DIRECTIVE_NAME = 26,
X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END = 27,
// Transform errors
X_V_IF_NO_EXPRESSION = 28,
X_V_IF_SAME_KEY = 29,
X_V_ELSE_NO_ADJACENT_IF = 30,
X_V_FOR_NO_EXPRESSION = 31,
X_V_FOR_MALFORMED_EXPRESSION = 32,
X_V_FOR_TEMPLATE_KEY_PLACEMENT = 33,
X_V_BIND_NO_EXPRESSION = 34,
X_V_ON_NO_EXPRESSION = 35,
X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET = 36,
X_V_SLOT_MIXED_SLOT_USAGE = 37,
X_V_SLOT_DUPLICATE_SLOT_NAMES = 38,
X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN = 39,
X_V_SLOT_MISPLACED = 40,
X_V_MODEL_NO_EXPRESSION = 41,
X_V_MODEL_MALFORMED_EXPRESSION = 42,
X_V_MODEL_ON_SCOPE_VARIABLE = 43,
X_V_MODEL_ON_PROPS = 44,
X_INVALID_EXPRESSION = 45,
X_KEEP_ALIVE_INVALID_CHILDREN = 46,
// Generic errors
X_PREFIX_ID_NOT_SUPPORTED = 47,
X_MODULE_MODE_NOT_SUPPORTED = 48,
X_CACHE_HANDLER_NOT_SUPPORTED = 49,
X_SCOPE_ID_NOT_SUPPORTED = 50
}Mapping of error codes to human-readable messages.
/**
* Map of error codes to default error messages
*/
const errorMessages: Record<ErrorCodes, string>;Error Message Examples:
// Example error messages
errorMessages[ErrorCodes.DUPLICATE_ATTRIBUTE] = "Duplicate attribute.";
errorMessages[ErrorCodes.X_V_IF_NO_EXPRESSION] = "v-if is missing expression.";
errorMessages[ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION] = "v-for has invalid expression.";Functions for creating compiler errors with location information.
/**
* Creates a compiler error with location information
* @param code - Error code from ErrorCodes enum
* @param loc - Source location where error occurred
* @param messages - Custom error messages (optional)
* @param additionalMessage - Additional error context (optional)
* @returns Compiler error instance
*/
function createCompilerError<T extends number>(
code: T,
loc?: SourceLocation,
messages?: { [code: number]: string },
additionalMessage?: string
): InferCompilerError<T>;Usage Examples:
import { createCompilerError, ErrorCodes } from "@vue/compiler-core";
// Create error with location
const error = createCompilerError(
ErrorCodes.X_V_IF_NO_EXPRESSION,
sourceLocation,
undefined,
"Expected expression after v-if directive"
);
// Create error with custom messages
const customMessages = {
[ErrorCodes.DUPLICATE_ATTRIBUTE]: "Found duplicate attribute, this is not allowed"
};
const error = createCompilerError(
ErrorCodes.DUPLICATE_ATTRIBUTE,
sourceLocation,
customMessages
);Type definitions for compiler errors.
Base interface for all compiler errors.
/**
* Core compiler error interface
*/
interface CoreCompilerError extends Error {
/** Error code from ErrorCodes enum */
code: number;
/** Source location where error occurred */
loc?: SourceLocation;
}Extended compiler error interface with additional properties.
/**
* Compiler error interface extending SyntaxError
*/
interface CompilerError extends SyntaxError {
/** Error code from ErrorCodes enum */
code: number;
/** Source location where error occurred */
loc?: SourceLocation;
}Utility type for inferring specific error types.
/**
* Infers the specific compiler error type based on error code
*/
type InferCompilerError<T extends number> = T extends ErrorCodes
? CoreCompilerError
: CompilerError;Errors that occur during template parsing phase.
// Example of how parse errors are handled internally
function handleParseError(
context: ParserContext,
code: ErrorCodes,
offset?: number
) {
const loc = getCursor(context, offset);
const error = createCompilerError(code, loc);
context.onError(error);
}Common Parse Errors:
DUPLICATE_ATTRIBUTE - Multiple attributes with same nameMISSING_ATTRIBUTE_VALUE - Attribute without value where requiredEOF_IN_TAG - Unexpected end of file inside tagX_MISSING_END_TAG - Missing closing tag for elementX_MISSING_INTERPOLATION_END - Unclosed interpolation {{ }}Errors that occur during AST transformation phase.
// Example of transform error handling
function validateDirective(
dir: DirectiveNode,
context: TransformContext
) {
if (dir.name === 'if' && !dir.exp) {
context.onError(
createCompilerError(
ErrorCodes.X_V_IF_NO_EXPRESSION,
dir.loc
)
);
}
}Common Transform Errors:
X_V_IF_NO_EXPRESSION - v-if without conditionX_V_FOR_MALFORMED_EXPRESSION - Invalid v-for syntaxX_V_MODEL_ON_SCOPE_VARIABLE - v-model on v-for variableX_INVALID_EXPRESSION - Invalid JavaScript expressionX_V_SLOT_MISPLACED - v-slot used incorrectlyDefault error handling functions provided by the compiler.
/**
* Default error handler that throws the error
* @param error - Compiler error to handle
*/
function defaultOnError(error: CompilerError): never;
/**
* Default warning handler that logs the warning
* @param warning - Compiler warning to handle
*/
function defaultOnWarn(warning: CompilerError): void;Usage Examples:
import { baseCompile, defaultOnError } from "@vue/compiler-core";
// Use custom error handler
const result = baseCompile(template, {
onError: (error) => {
console.error(`Compilation error: ${error.message}`);
if (error.loc) {
console.error(`At line ${error.loc.start.line}, column ${error.loc.start.column}`);
}
}
});
// Use default error handler (throws)
const result = baseCompile(template, {
onError: defaultOnError
});How errors integrate with parser context.
interface ParserOptions {
/** Error handler function */
onError?: (error: CompilerError) => void;
/** Warning handler function */
onWarn?: (warning: CompilerError) => void;
}How errors integrate with transform context.
interface TransformOptions {
/** Error handler function */
onError?: (error: CompilerError) => void;
/** Warning handler function */
onWarn?: (warning: CompilerError) => void;
}Function for generating helpful code frames for error display.
/**
* Generates a code frame showing the error location in context
* @param source - Original source code
* @param start - Start position of error
* @param end - End position of error
* @returns Formatted code frame string
*/
function generateCodeFrame(
source: string,
start?: number,
end?: number
): string;Usage Examples:
import { generateCodeFrame } from "@vue/compiler-core";
const source = `<template>
<div v-if>No condition</div>
</template>`;
const error = createCompilerError(
ErrorCodes.X_V_IF_NO_EXPRESSION,
{ start: { offset: 15 }, end: { offset: 20 } }
);
// Generate helpful code frame
const codeFrame = generateCodeFrame(
source,
error.loc.start.offset,
error.loc.end.offset
);
console.log(codeFrame);
// Output:
// 2 | <div v-if>No condition</div>
// | ^^^^^The compiler includes error recovery mechanisms to continue compilation after encountering errors.
interface CompilerOptions {
/** Collect all errors instead of throwing on first error */
collectErrors?: boolean;
}
// When collectErrors is true, errors are collected and returned
interface CodegenResult {
code: string;
preamble: string;
ast: RootNode;
map?: RawSourceMap;
/** Collected errors during compilation */
errors?: CompilerError[];
}Usage Examples:
import { baseCompile } from "@vue/compiler-core";
// Collect all errors
const result = baseCompile(template, {
collectErrors: true,
onError: (error) => {
// Errors are collected but don't stop compilation
console.warn(`Warning: ${error.message}`);
}
});
if (result.errors && result.errors.length > 0) {
console.log(`Found ${result.errors.length} compilation errors`);
result.errors.forEach(error => {
console.error(error.message);
});
}Install with Tessl CLI
npx tessl i tessl/npm-vue--compiler-core