Internal utility functions shared across Vue.js packages for DOM manipulation, type checking, and general utilities
—
Cached string transformation utilities for converting between naming conventions, manipulating text, and generating identifiers. All transformation functions use internal caching for optimal performance.
Functions for converting between different naming conventions with automatic caching for repeated transformations.
/**
* Convert kebab-case or snake_case string to camelCase
* Uses internal caching for performance
* @param str - String to convert (e.g., "kebab-case", "snake_case")
* @returns Camelized string (e.g., "kebabCase", "snakeCase")
*/
function camelize(str: string): string;
/**
* Convert camelCase string to kebab-case
* Uses internal caching for performance
* @param str - String to convert (e.g., "camelCase")
* @returns Hyphenated string (e.g., "camel-case")
*/
function hyphenate(str: string): string;
/**
* Capitalize the first letter of a string
* Uses internal caching and preserves TypeScript literal types
* @param str - String to capitalize
* @returns Capitalized string with proper typing
*/
function capitalize<T extends string>(str: T): Capitalize<T>;Utilities for generating Vue event handler property names from event names.
/**
* Convert event name to handler key (e.g., "click" -> "onClick")
* Uses internal caching and proper TypeScript typing
* @param str - Event name to convert
* @returns Handler key with "on" prefix and capitalized event name
*/
function toHandlerKey<T extends string>(
str: T
): T extends '' ? '' : `on${Capitalize<T>}`;Functions for generating JavaScript expressions and identifiers in Vue's compiler.
/**
* Generate safe property access expression for props
* Handles both dot notation and bracket notation based on identifier validity
* @param name - Property name to access
* @returns Safe JavaScript expression for property access
*/
function genPropsAccessExp(name: string): string;
/**
* Generate cache key from source and options
* Creates deterministic cache keys for compilation artifacts
* @param source - Source string/code
* @param options - Configuration options object
* @returns Unique cache key string
*/
function genCacheKey(source: string, options: any): string;String-to-number conversion functions with different parsing strategies.
/**
* Convert value to number with loose parsing (for v-model.number)
* Attempts parseFloat and returns original value if NaN
* @param val - Value to convert (typically string)
* @returns Parsed number or original value
*/
function looseToNumber(val: any): any;
/**
* Convert string to number with strict validation
* Only converts actual string values, returns original if not a string or NaN
* @param val - Value to convert
* @returns Parsed number or original value
*/
function toNumber(val: any): any;Usage Examples:
import {
camelize, hyphenate, capitalize, toHandlerKey,
genPropsAccessExp, looseToNumber, toNumber
} from "@vue/shared";
// Case transformations
const camelCase = camelize("my-component-name"); // "myComponentName"
const camelCase2 = camelize("background_color"); // "backgroundColor"
const kebabCase = hyphenate("myComponentName"); // "my-component-name"
const kebabCase2 = hyphenate("backgroundColor"); // "background-color"
const capitalized = capitalize("hello"); // "Hello" (typed as "Hello")
// Event handler generation
const clickHandler = toHandlerKey("click"); // "onClick"
const mouseHandler = toHandlerKey("mouseover"); // "onMouseover"
const emptyHandler = toHandlerKey(""); // "" (typed correctly)
// Code generation (used internally by Vue compiler)
const dotAccess = genPropsAccessExp("name"); // "__props.name"
const bracketAccess = genPropsAccessExp("123abc"); // "__props[\"123abc\"]"
const specialAccess = genPropsAccessExp("my-prop"); // "__props[\"my-prop\"]"
// Number parsing for v-model
const loose1 = looseToNumber("123"); // 123
const loose2 = looseToNumber("123abc"); // 123 (parseFloat stops at first non-digit)
const loose3 = looseToNumber("abc"); // "abc" (returned as-is)
const strict1 = toNumber("123"); // 123
const strict2 = toNumber("123abc"); // "123abc" (returned as-is, not a pure number)
const strict3 = toNumber(123); // 123 (returned as-is, not a string)
// Caching demonstration - repeated calls are cached
const result1 = camelize("some-long-string"); // Computed and cached
const result2 = camelize("some-long-string"); // Retrieved from cache (same reference)
console.log(result1 === result2); // trueAll transformation functions use internal caching mechanisms:
This caching is essential for Vue's performance since these transformations are called frequently during template compilation and runtime operations.
Install with Tessl CLI
npx tessl i tessl/npm-vue--shared