Error Handling

/**
 * Create a DOM-specific compiler error
 * @param code - DOM error code identifier
 * @param loc - Optional source location information
 * @returns DOMCompilerError with message and location
 */
function createDOMCompilerError(
  code: DOMErrorCodes,
  loc?: SourceLocation
): DOMCompilerError;

import { createDOMCompilerError, DOMErrorCodes } from "@vue/compiler-dom";

// Create error for missing v-html expression
const error = createDOMCompilerError(
  DOMErrorCodes.X_V_HTML_NO_EXPRESSION,
  { start: { line: 1, column: 5 }, end: { line: 1, column: 12 } }
);

console.log(error.code);    // DOMErrorCodes.X_V_HTML_NO_EXPRESSION
console.log(error.message); // "v-html is missing expression."
console.log(error.loc);     // Source location information

interface DOMCompilerError extends CompilerError {
  /** DOM-specific error code */
  code: DOMErrorCodes;
}

interface CompilerError {
  /** Error code identifier */
  code: DOMErrorCodes;
  /** Human-readable error message */
  message: string;
  /** Source location where error occurred */
  loc?: SourceLocation;
}

interface SourceLocation {
  /** Error start position */
  start: Position;
  /** Error end position */
  end: Position;
  /** Source code snippet */
  source: string;
}

interface Position {
  /** Line number (1-based) */
  line: number;
  /** Column number (0-based) */
  column: number;
  /** Character offset */
  offset: number;
}

enum DOMErrorCodes {
  /** v-html directive is missing expression */
  X_V_HTML_NO_EXPRESSION = 53,
  /** v-html directive has conflicting children */
  X_V_HTML_WITH_CHILDREN,
  /** v-text directive is missing expression */
  X_V_TEXT_NO_EXPRESSION,
  /** v-text directive has conflicting children */
  X_V_TEXT_WITH_CHILDREN,
  /** v-model used on invalid element type */
  X_V_MODEL_ON_INVALID_ELEMENT,
  /** v-model has argument on plain element */
  X_V_MODEL_ARG_ON_ELEMENT,
  /** v-model used on file input (read-only) */
  X_V_MODEL_ON_FILE_INPUT_ELEMENT,
  /** Unnecessary value binding with v-model */
  X_V_MODEL_UNNECESSARY_VALUE,
  /** v-show directive is missing expression */
  X_V_SHOW_NO_EXPRESSION,
  /** Transition component has invalid children */
  X_TRANSITION_INVALID_CHILDREN,
  /** Side-effect tag ignored in client template */
  X_IGNORED_SIDE_EFFECT_TAG,
  /** Extension point for additional error codes */
  __EXTEND_POINT__
}

const DOMErrorMessages: { [code: number]: string };

// X_V_HTML_NO_EXPRESSION
`<div v-html></div>`                    // Missing expression
`<div v-html=""></div>`                 // Empty expression

// X_V_HTML_WITH_CHILDREN  
`<div v-html="content">
  <p>This will be overridden</p>
</div>`

// X_V_TEXT_NO_EXPRESSION
`<span v-text></span>`                  // Missing expression
`<span v-text=""></span>`               // Empty expression

// X_V_TEXT_WITH_CHILDREN
`<span v-text="message">
  Default text
</span>`

// X_V_MODEL_ON_INVALID_ELEMENT
`<div v-model="value"></div>`           // Not a form element
`<p v-model="text"></p>`                // Not a form element

// X_V_MODEL_ARG_ON_ELEMENT
`<input v-model:value="data">`          // Arguments not supported on elements

// X_V_MODEL_ON_FILE_INPUT_ELEMENT
`<input v-model="file" type="file">`    // File inputs are read-only

// X_V_MODEL_UNNECESSARY_VALUE
`<input v-model="name" :value="name">` // Conflicting value binding

// X_V_SHOW_NO_EXPRESSION
`<div v-show></div>`                    // Missing expression
`<div v-show=""></div>`                 // Empty expression

// X_TRANSITION_INVALID_CHILDREN
`<Transition>
  <div>First child</div>
  <div>Second child</div>
</Transition>`                          // Multiple children

`<Transition></Transition>`             // No children

// X_IGNORED_SIDE_EFFECT_TAG
`<template>
  <div>Content</div>
  <script>console.log('ignored')</script>
  <style>body { margin: 0; }</style>
</template>`

import { compile } from "@vue/compiler-dom";

// Handle compilation errors
const errors: CompilerError[] = [];
const warnings: CompilerError[] = [];

const { code } = compile(template, {
  onError: (error) => {
    errors.push(error);
    if (error.code >= DOMErrorCodes.X_V_HTML_NO_EXPRESSION) {
      console.error('DOM-specific error:', error.message);
    }
  },
  onWarn: (warning) => {
    warnings.push(warning);
    console.warn('Compilation warning:', warning.message);
  }
});

// Check for specific error types
const hasVModelErrors = errors.some(error => 
  error.code >= DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT &&
  error.code <= DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE
);