0
# String Transformations
1

2
Cached string transformation utilities for converting between naming conventions, manipulating text, and generating identifiers. All transformation functions use internal caching for optimal performance.
3

4
## Capabilities
5

6
### Case Transformations
7

8
Functions for converting between different naming conventions with automatic caching for repeated transformations.
9

10
```typescript { .api }
11
/**
12
 * Convert kebab-case or snake_case string to camelCase
13
 * Uses internal caching for performance
14
 * @param str - String to convert (e.g., "kebab-case", "snake_case")
15
 * @returns Camelized string (e.g., "kebabCase", "snakeCase")
16
 */
17
function camelize(str: string): string;
18

19
/**
20
 * Convert camelCase string to kebab-case
21
 * Uses internal caching for performance
22
 * @param str - String to convert (e.g., "camelCase")
23
 * @returns Hyphenated string (e.g., "camel-case")
24
 */
25
function hyphenate(str: string): string;
26

27
/**
28
 * Capitalize the first letter of a string
29
 * Uses internal caching and preserves TypeScript literal types
30
 * @param str - String to capitalize
31
 * @returns Capitalized string with proper typing
32
 */
33
function capitalize<T extends string>(str: T): Capitalize<T>;
34
```
35

36
### Event Handler Key Generation
37

38
Utilities for generating Vue event handler property names from event names.
39

40
```typescript { .api }
41
/**
42
 * Convert event name to handler key (e.g., "click" -> "onClick")
43
 * Uses internal caching and proper TypeScript typing
44
 * @param str - Event name to convert
45
 * @returns Handler key with "on" prefix and capitalized event name
46
 */
47
function toHandlerKey<T extends string>(
48
  str: T
49
): T extends '' ? '' : `on${Capitalize<T>}`;
50
```
51

52
### Code Generation Utilities
53

54
Functions for generating JavaScript expressions and identifiers in Vue's compiler.
55

56
```typescript { .api }
57
/**
58
 * Generate safe property access expression for props
59
 * Handles both dot notation and bracket notation based on identifier validity
60
 * @param name - Property name to access
61
 * @returns Safe JavaScript expression for property access
62
 */
63
function genPropsAccessExp(name: string): string;
64

65
/**
66
 * Generate cache key from source and options
67
 * Creates deterministic cache keys for compilation artifacts
68
 * @param source - Source string/code
69
 * @param options - Configuration options object
70
 * @returns Unique cache key string
71
 */
72
function genCacheKey(source: string, options: any): string;
73
```
74

75
### Number Conversion Utilities
76

77
String-to-number conversion functions with different parsing strategies.
78

79
```typescript { .api }
80
/**
81
 * Convert value to number with loose parsing (for v-model.number)
82
 * Attempts parseFloat and returns original value if NaN
83
 * @param val - Value to convert (typically string)
84
 * @returns Parsed number or original value
85
 */
86
function looseToNumber(val: any): any;
87

88
/**
89
 * Convert string to number with strict validation
90
 * Only converts actual string values, returns original if not a string or NaN
91
 * @param val - Value to convert
92
 * @returns Parsed number or original value
93
 */
94
function toNumber(val: any): any;
95
```
96

97
**Usage Examples:**
98

99
```typescript
100
import { 
101
  camelize, hyphenate, capitalize, toHandlerKey,
102
  genPropsAccessExp, looseToNumber, toNumber
103
} from "@vue/shared";
104

105
// Case transformations
106
const camelCase = camelize("my-component-name"); // "myComponentName"
107
const camelCase2 = camelize("background_color"); // "backgroundColor"
108

109
const kebabCase = hyphenate("myComponentName"); // "my-component-name"
110
const kebabCase2 = hyphenate("backgroundColor"); // "background-color"
111

112
const capitalized = capitalize("hello"); // "Hello" (typed as "Hello")
113

114
// Event handler generation
115
const clickHandler = toHandlerKey("click"); // "onClick"
116
const mouseHandler = toHandlerKey("mouseover"); // "onMouseover"
117
const emptyHandler = toHandlerKey(""); // "" (typed correctly)
118

119
// Code generation (used internally by Vue compiler)
120
const dotAccess = genPropsAccessExp("name"); // "__props.name"
121
const bracketAccess = genPropsAccessExp("123abc"); // "__props[\"123abc\"]"
122
const specialAccess = genPropsAccessExp("my-prop"); // "__props[\"my-prop\"]"
123

124
// Number parsing for v-model
125
const loose1 = looseToNumber("123"); // 123
126
const loose2 = looseToNumber("123abc"); // 123 (parseFloat stops at first non-digit)
127
const loose3 = looseToNumber("abc"); // "abc" (returned as-is)
128

129
const strict1 = toNumber("123"); // 123
130
const strict2 = toNumber("123abc"); // "123abc" (returned as-is, not a pure number)
131
const strict3 = toNumber(123); // 123 (returned as-is, not a string)
132

133
// Caching demonstration - repeated calls are cached
134
const result1 = camelize("some-long-string"); // Computed and cached
135
const result2 = camelize("some-long-string"); // Retrieved from cache (same reference)
136
console.log(result1 === result2); // true
137
```
138

139
### Performance Notes
140

141
All transformation functions use internal caching mechanisms:
142

143
- **First call**: Computes transformation and stores in cache
144
- **Subsequent calls**: Returns cached result (same object reference)
145
- **Memory efficient**: Cache keys are the input strings themselves
146
- **Thread safe**: Pure functions with immutable caches
147

148
This caching is essential for Vue's performance since these transformations are called frequently during template compilation and runtime operations.