DOM Configuration

/**
 * Check if tag name is a valid HTML element
 * Compiler-only - do not use in runtime unless behind __DEV__ flag
 * @param key - Tag name to validate
 * @returns True if tag is a known HTML element
 */
function isHTMLTag(key: string): boolean;

/**
 * Check if tag name is a valid SVG element  
 * Compiler-only - do not use in runtime unless behind __DEV__ flag
 * @param key - Tag name to validate
 * @returns True if tag is a known SVG element
 */
function isSVGTag(key: string): boolean;

/**
 * Check if tag name is a valid MathML element
 * Compiler-only - do not use in runtime unless behind __DEV__ flag  
 * @param key - Tag name to validate
 * @returns True if tag is a known MathML element
 */
function isMathMLTag(key: string): boolean;

/**
 * Check if tag is a void (self-closing) element
 * Compiler-only - do not use in runtime unless behind __DEV__ flag
 * @param key - Tag name to validate  
 * @returns True if tag is void (area, br, img, input, etc.)
 */
function isVoidTag(key: string): boolean;

/**
 * Check if attribute is a special boolean attribute
 * These have different property names than their DOM counterparts
 * @param key - Attribute name to check
 * @returns True if attribute is special boolean type
 */
function isSpecialBooleanAttr(key: string): boolean;

/**
 * Check if attribute is a boolean attribute (any type)
 * Includes both special and regular boolean attributes
 * @param key - Attribute name to check
 * @returns True if attribute is boolean type
 */
function isBooleanAttr(key: string): boolean;

/**
 * Check if boolean attribute value should be included in output
 * Boolean attributes are included if truthy or empty string
 * @param value - Attribute value to check
 * @returns True if attribute should be rendered
 */
function includeBooleanAttr(value: unknown): boolean;

/**
 * Check if attribute name is safe for server-side rendering
 * Validates against unsafe characters that could cause issues
 * @param name - Attribute name to validate
 * @returns True if attribute name is SSR-safe
 */
function isSSRSafeAttrName(name: string): boolean;

/**
 * Check if attribute is a known HTML attribute
 * Used for stringification of runtime static nodes
 * @param key - Attribute name to check  
 * @returns True if attribute is a known HTML attribute
 */
function isKnownHtmlAttr(key: string): boolean;

/**
 * Check if attribute is a known SVG attribute
 * @param key - Attribute name to check
 * @returns True if attribute is a known SVG attribute
 */
function isKnownSvgAttr(key: string): boolean;

/**
 * Check if attribute is a known MathML attribute  
 * @param key - Attribute name to check
 * @returns True if attribute is a known MathML attribute
 */
function isKnownMathMLAttr(key: string): boolean;

/**
 * Check if attribute value can be rendered
 * Only string, number, and boolean values are renderable
 * @param value - Attribute value to check
 * @returns True if value can be safely rendered as attribute
 */
function isRenderableAttrValue(value: unknown): boolean;

/**
 * Mapping from JavaScript property names to HTML attribute names
 * Used when converting props to attributes
 */
const propsToAttrMap: Record<string, string | undefined>;

import { 
  isHTMLTag, isSVGTag, isVoidTag,
  isBooleanAttr, includeBooleanAttr,
  isSSRSafeAttrName, isKnownHtmlAttr,
  isRenderableAttrValue, propsToAttrMap
} from "@vue/shared";

// Element tag validation (compiler use)
if (__DEV__) {
  console.log(isHTMLTag("div")); // true
  console.log(isHTMLTag("custom-element")); // false
  
  console.log(isSVGTag("circle")); // true
  console.log(isSVGTag("div")); // false
  
  console.log(isVoidTag("br")); // true
  console.log(isVoidTag("div")); // false
}

// Boolean attribute handling
function handleBooleanAttr(name: string, value: unknown) {
  if (isBooleanAttr(name)) {
    // Boolean attributes like "disabled", "checked", "hidden"
    if (includeBooleanAttr(value)) {
      return name; // Include attribute without value
    }
    return null; // Omit attribute
  }
  return `${name}="${value}"`; // Regular attribute with value
}

// Examples of boolean attribute behavior
console.log(includeBooleanAttr(true)); // true
console.log(includeBooleanAttr("")); // true (empty string counts as truthy for boolean attrs)
console.log(includeBooleanAttr(false)); // false
console.log(includeBooleanAttr(null)); // false

// SSR safety checking
function validateAttributeName(name: string) {
  if (!isSSRSafeAttrName(name)) {
    console.error(`Unsafe attribute name: ${name}`);
    return false;
  }
  return true;
}

// Valid names
validateAttributeName("class"); // true
validateAttributeName("data-value"); // true

// Invalid names (contain unsafe characters)
validateAttributeName("on>click"); // false (logs error)
validateAttributeName("style="); // false (logs error)

// Known attribute checking
function isKnownAttribute(attrName: string, tagType: 'html' | 'svg' | 'mathml') {
  switch (tagType) {
    case 'html':
      return isKnownHtmlAttr(attrName);
    case 'svg':
      return isKnownSvgAttr(attrName);
    case 'mathml':
      return isKnownMathMLAttr(attrName);
  }
}

// Attribute value validation
function canRenderAttribute(value: unknown): boolean {
  return isRenderableAttrValue(value);
}

console.log(canRenderAttribute("string")); // true
console.log(canRenderAttribute(42)); // true
console.log(canRenderAttribute(true)); // true
console.log(canRenderAttribute(null)); // false
console.log(canRenderAttribute(undefined)); // false
console.log(canRenderAttribute({})); // false

// Property to attribute mapping
function getAttributeName(propName: string): string {
  return propsToAttrMap[propName] || propName;
}

console.log(getAttributeName("className")); // "class"
console.log(getAttributeName("htmlFor")); // "for"
console.log(getAttributeName("acceptCharset")); // "accept-charset"
console.log(getAttributeName("customProp")); // "customProp" (no mapping)