tessl/npm-vue--compiler-dom

DOM-specific template compiler for Vue.js that extends core compiler functionality with browser-specific optimizations and transformations

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Error Handling

Name: tessl/npm-vue--compiler-dom
Author: tessl

DOM-specific error handling system with comprehensive error codes and messages for compilation issues.

Capabilities

DOM Compiler Error Creation

Creates DOM-specific compiler errors with proper error codes and location information.

/**
 * 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;

Usage Examples:

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

DOM Compiler Error Interface

Extended compiler error interface with DOM-specific error codes.

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

DOM Error Codes

Enumeration of all DOM-specific compilation error codes.

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

DOM Error Messages

Human-readable error messages corresponding to each error code.

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

Error Message Mappings:

X_V_HTML_NO_EXPRESSION: "v-html is missing expression."
X_V_HTML_WITH_CHILDREN: "v-html will override element children."
X_V_TEXT_NO_EXPRESSION: "v-text is missing expression."
X_V_TEXT_WITH_CHILDREN: "v-text will override element children."
X_V_MODEL_ON_INVALID_ELEMENT: "v-model can only be used on <input>, <textarea> and <select> elements."
X_V_MODEL_ARG_ON_ELEMENT: "v-model argument is not supported on plain elements."
X_V_MODEL_ON_FILE_INPUT_ELEMENT: "v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead."
X_V_MODEL_UNNECESSARY_VALUE: "Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior."
X_V_SHOW_NO_EXPRESSION: "v-show is missing expression."
X_TRANSITION_INVALID_CHILDREN: "<Transition> expects exactly one child element or component."
X_IGNORED_SIDE_EFFECT_TAG: "Tags with side effect (<script> and <style>) are ignored in client component templates."

Common Error Scenarios

V-Html Directive Errors

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

V-Text Directive Errors

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

V-Model Directive Errors

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

V-Show Directive Errors

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

Transition Component Errors

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

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

Side Effect Tag Warnings

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

Error Handling in Compilation

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

Development vs Production Error Handling

Development Mode:

Full error messages included
Detailed source location information
Warnings for potential issues (HTML nesting, etc.)
Stack traces for debugging

Production Mode:

Minimal error messages to reduce bundle size
Essential error information only
Some warnings may be omitted for performance

Error Recovery: The compiler attempts to recover from errors when possible, allowing compilation to continue and report multiple issues in a single pass. This helps developers fix all issues at once rather than encountering them one by one.