CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue--compiler-core

Core compiler for Vue.js template compilation and transformation

Pending
Overview
Eval results
Files

error-handling.mddocs/

Error Handling

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.

Capabilities

Error Codes

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
}

Error Messages

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.";

Error Creation

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
);

Error Interfaces

Type definitions for compiler errors.

Core Compiler Error

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;
}

Compiler Error

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;
}

Error Type Inference

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;

Error Handling Patterns

Parse Error Handling

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 name
  • MISSING_ATTRIBUTE_VALUE - Attribute without value where required
  • EOF_IN_TAG - Unexpected end of file inside tag
  • X_MISSING_END_TAG - Missing closing tag for element
  • X_MISSING_INTERPOLATION_END - Unclosed interpolation {{ }}

Transform Error Handling

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 condition
  • X_V_FOR_MALFORMED_EXPRESSION - Invalid v-for syntax
  • X_V_MODEL_ON_SCOPE_VARIABLE - v-model on v-for variable
  • X_INVALID_EXPRESSION - Invalid JavaScript expression
  • X_V_SLOT_MISPLACED - v-slot used incorrectly

Error Reporting Functions

Default 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
});

Error Context Integration

Parser Context Errors

How errors integrate with parser context.

interface ParserOptions {
  /** Error handler function */
  onError?: (error: CompilerError) => void;
  /** Warning handler function */
  onWarn?: (warning: CompilerError) => void;
}

Transform Context Errors

How errors integrate with transform context.

interface TransformOptions {
  /** Error handler function */
  onError?: (error: CompilerError) => void;
  /** Warning handler function */
  onWarn?: (warning: CompilerError) => void;
}

Code Frame Generation

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>
//   |         ^^^^^

Error Recovery

The compiler includes error recovery mechanisms to continue compilation after encountering errors.

Recovery Strategies

  • Skip malformed tokens - Continue parsing after invalid syntax
  • Synthesize missing elements - Create placeholder nodes for missing content
  • Fallback transforms - Use safe defaults when transforms fail
  • Graceful degradation - Reduce optimization level rather than failing

Error Collection

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

docs

ast-types.md

compilation.md

error-handling.md

index.md

transforms.md

utilities.md

tile.json