0
# Syntax Sugar
1

2
Shorthand syntax and convenience features for Vue templates and scripts.
3

4
## Capabilities
5

6
### Short Emits
7

8
Shorthand syntax for emitting events.
9

10
```typescript { .api }
11
/**
12
 * Short emit function with simplified syntax
13
 * @param name - Event name from defined emits
14
 * @param args - Event arguments
15
 */
16
declare function emits<T extends Record<string, any>>(
17
  name: keyof T, 
18
  ...args: any[]
19
): void;
20

21
// Configuration options
22
interface OptionsShortEmits extends BaseOptions {
23
  /** Enable short emits syntax */
24
  enabled?: boolean;
25
}
26
```
27

28
**Usage Examples:**
29

30
```vue
31
<script setup>
32
// Define emits normally
33
const emit = defineEmits<{
34
  update: [value: string];
35
  change: [oldValue: string, newValue: string];
36
  delete: [];
37
  select: [item: { id: number; name: string }];
38
}>();
39

40
// Short emit syntax (alternative to emit())
41
function handleUpdate(value: string) {
42
  emits('update', value);     // Same as: emit('update', value)
43
}
44

45
function handleChange(old: string, newVal: string) {
46
  emits('change', old, newVal); // Same as: emit('change', old, newVal)
47
}
48

49
function handleDelete() {
50
  emits('delete');            // Same as: emit('delete')
51
}
52
</script>
53
```
54

55
### Short V-Model
56

57
Shorthand syntax for v-model bindings.
58

59
```typescript { .api }
60
/**
61
 * Short v-model syntax using :: prefix
62
 */
63
// Template syntax: ::modelValue instead of v-model:modelValue
64
// Template syntax: ::checked instead of v-model:checked
65

66
// Configuration options
67
interface OptionsShortVmodel extends BaseOptions {
68
  /** Enable short v-model syntax */
69
  enabled?: boolean;
70
}
71
```
72

73
**Usage Examples:**
74

75
```vue
76
<template>
77
  <!-- Standard v-model -->
78
  <input v-model="message" />
79
  <input v-model:checked="isChecked" />
80
  
81
  <!-- Short v-model syntax -->
82
  <input ::message />         <!-- Same as v-model="message" -->
83
  <input ::checked />         <!-- Same as v-model:checked="checked" -->
84
  
85
  <!-- Works with components -->
86
  <CustomInput ::value />     <!-- Same as v-model:value="value" -->
87
  <Modal ::visible />         <!-- Same as v-model:visible="visible" -->
88
</template>
89

90
<script setup>
91
const message = ref('');
92
const isChecked = ref(false);
93
const value = ref('');
94
const visible = ref(false);
95
</script>
96
```
97

98
### Short Bind
99

100
Shorthand syntax for prop binding.
101

102
```typescript { .api }
103
/**
104
 * Short bind syntax using : prefix for same-named props
105
 */
106
// Template syntax: :propName instead of :prop-name="propName"
107

108
// Configuration options
109
interface OptionsShortBind extends BaseOptions {
110
  /** Enable short bind syntax */
111
  enabled?: boolean;
112
}
113
```
114

115
**Usage Examples:**
116

117
```vue
118
<template>
119
  <!-- Standard prop binding -->
120
  <MyComponent :title="title" :count="count" :is-active="isActive" />
121
  
122
  <!-- Short bind syntax (same variable name as prop) -->
123
  <MyComponent :title :count :is-active />
124
  
125
  <!-- Mixed usage -->
126
  <MyComponent 
127
    :title           <!-- Short: same as :title="title" -->
128
    :count="newCount" <!-- Full: different variable name -->
129
    :is-active       <!-- Short: same as :is-active="isActive" -->
130
  />
131
  
132
  <!-- Works with kebab-case to camelCase conversion -->
133
  <MyComponent :user-name />  <!-- Same as :user-name="userName" -->
134
</template>
135

136
<script setup>
137
const title = ref('My Title');
138
const count = ref(10);
139
const newCount = ref(20);
140
const isActive = ref(true);
141
const userName = ref('john');
142
</script>
143
```
144

145
### Boolean Props
146

147
Shorthand syntax for boolean props.
148

149
```typescript { .api }
150
/**
151
 * Boolean prop syntax using + prefix
152
 */
153
// Template syntax: +propName instead of :prop-name="true"
154
// Template syntax: -propName instead of :prop-name="false"
155

156
// Configuration options
157
interface OptionsBooleanProp extends BaseOptions {
158
  /** Enable boolean prop syntax */
159
  enabled?: boolean;
160
}
161
```
162

163
**Usage Examples:**
164

165
```vue
166
<template>
167
  <!-- Standard boolean props -->
168
  <MyButton :disabled="true" :loading="false" />
169
  
170
  <!-- Boolean prop syntax -->
171
  <MyButton +disabled -loading />     <!-- Same as :disabled="true" :loading="false" -->
172
  
173
  <!-- Mixed with regular props -->
174
  <MyModal 
175
    +visible                          <!-- Same as :visible="true" -->
176
    -closeable                        <!-- Same as :closeable="false" -->
177
    title="My Modal"                  <!-- Regular prop -->
178
  />
179
  
180
  <!-- Conditional boolean props -->
181
  <MyComponent 
182
    +active="isActive"                <!-- Same as :active="isActive" -->
183
    +large="size === 'large'"         <!-- Same as :large="size === 'large'" -->
184
  />
185
</template>
186

187
<script setup>
188
const isActive = ref(true);
189
const size = ref('large');
190
</script>
191
```
192

193
### Chain Call Destructuring
194

195
Enhanced destructuring for props with method chaining.
196

197
```typescript { .api }
198
/**
199
 * Chain call destructuring for props
200
 */
201
declare const $defineProps: <T>() => ChainCallDestructure<T>;
202

203
interface ChainCallDestructure<T> {
204
  [K in keyof T]: PropChain<T[K]>;
205
}
206

207
interface PropChain<T> {
208
  /** Set default value */
209
  default(value: T | (() => T)): PropChain<T>;
210
  /** Mark as required */
211
  required(): PropChain<T>;
212
  /** Add validator function */
213
  validator(fn: (value: T) => boolean): PropChain<T>;
214
}
215
```
216

217
**Usage Examples:**
218

219
```vue
220
<script setup>
221
// Chain call destructuring
222
const { 
223
  title,
224
  count,
225
  user,
226
  options 
227
} = $defineProps<{
228
  title: string;
229
  count: number;
230
  user: { name: string; age: number };
231
  options: string[];
232
}>()
233
  .title.required()
234
  .count.default(0).validator(n => n >= 0)
235
  .user.default(() => ({ name: '', age: 0 }))
236
  .options.default(() => []);
237

238
// Direct usage in template and script
239
console.log(title);     // Type: string (required)
240
console.log(count);     // Type: number (default: 0)
241
console.log(user.name); // Type: string
242
console.log(options);   // Type: string[] (default: [])
243
</script>
244
```
245

246
### Template Shortcuts
247

248
Additional template syntax shortcuts.
249

250
```typescript { .api }
251
/**
252
 * Template syntax shortcuts and abbreviations
253
 */
254

255
// Event listener shortcuts
256
// @click -> v-on:click
257
// @input -> v-on:input
258

259
// Slot shortcuts  
260
// #default -> v-slot:default
261
// #header -> v-slot:header
262

263
// Directive shortcuts
264
// v-if -> v-if
265
// v-show -> v-show
266
// v-for -> v-for
267
```
268

269
**Usage Examples:**
270

271
```vue
272
<template>
273
  <!-- Event shortcuts (built into Vue) -->
274
  <button @click="handleClick">Click</button>
275
  <input @input="handleInput" @change="handleChange" />
276
  
277
  <!-- Slot shortcuts (built into Vue) -->
278
  <MyComponent>
279
    <template #header="{ title }">
280
      <h1>{{ title }}</h1>
281
    </template>
282
    
283
    <template #default>
284
      <p>Default content</p>
285
    </template>
286
    
287
    <template #footer>
288
      <p>Footer content</p>
289
    </template>
290
  </MyComponent>
291
  
292
  <!-- Short syntax combinations -->
293
  <MyCard 
294
    +visible          <!-- Boolean prop -->
295
    :title            <!-- Short bind -->
296
    ::selected        <!-- Short v-model -->
297
    @close="onClose"  <!-- Event -->
298
  />
299
</template>
300

301
<script setup>
302
const title = ref('Card Title');
303
const selected = ref(false);
304

305
function handleClick() {
306
  console.log('Clicked');
307
}
308

309
function handleInput(event: Event) {
310
  console.log('Input:', (event.target as HTMLInputElement).value);
311
}
312

313
function handleChange(event: Event) {
314
  console.log('Changed:', (event.target as HTMLInputElement).value);
315
}
316

317
function onClose() {
318
  console.log('Card closed');
319
}
320
</script>
321
```
322

323
### Macro Combinations
324

325
Combining multiple syntax sugar features.
326

327
```typescript { .api }
328
/**
329
 * Combined syntax sugar usage patterns
330
 */
331

332
// Combining short bind + boolean props + short v-model
333
// <Component :title +active ::value @event="handler" />
334

335
// Combining chain call + short syntax
336
// const { prop } = $defineProps<T>().prop.default(value);
337
```
338

339
**Usage Examples:**
340

341
```vue
342
<template>
343
  <!-- All syntax sugar combined -->
344
  <AdvancedComponent
345
    :title              <!-- Short bind -->
346
    :count="newCount"   <!-- Regular bind -->
347
    +visible            <!-- Boolean prop (true) -->
348
    -disabled           <!-- Boolean prop (false) -->
349
    ::modelValue        <!-- Short v-model -->
350
    ::checked           <!-- Short v-model named -->
351
    @update="onUpdate"  <!-- Event handler -->
352
    @close="onClose"    <!-- Event handler -->
353
  >
354
    <template #header="{ data }">
355
      <h2>{{ data.title }}</h2>
356
    </template>
357
  </AdvancedComponent>
358
</template>
359

360
<script setup>
361
// Combined prop definition with syntax sugar
362
const {
363
  title,
364
  description,
365
  count,
366
  isActive
367
} = $defineProps<{
368
  title: string;
369
  description?: string;
370
  count: number;
371
  isActive: boolean;
372
}>()
373
  .title.required()
374
  .description.default('No description')
375
  .count.default(0).validator(n => n >= 0)
376
  .isActive.default(true);
377

378
// Short emits
379
const emit = defineEmits<{
380
  update: [value: any];
381
  close: [];
382
}>();
383

384
// Usage
385
const newCount = ref(42);
386
const modelValue = ref('');
387
const checked = ref(false);
388

389
function onUpdate(value: any) {
390
  emits('update', value);  // Short emit syntax
391
}
392

393
function onClose() {
394
  emits('close');          // Short emit syntax
395
}
396
</script>
397
```
398

399
## Type Definitions
400

401
Supporting types for syntax sugar features.
402

403
```typescript { .api }
404
// Configuration base
405
interface BaseOptions {
406
  version?: string;
407
  isProduction?: boolean;
408
  root?: string;
409
  include?: string | RegExp | (string | RegExp)[];
410
  exclude?: string | RegExp | (string | RegExp)[];
411
}
412

413
// Emit function type
414
type EmitFunction<T> = T extends Record<string, any>
415
  ? <K extends keyof T>(event: K, ...args: T[K] extends (...args: infer P) => any ? P : [T[K]]) => void
416
  : (event: string, ...args: any[]) => void;
417

418
// Props chain utilities
419
type PropValidation<T> = {
420
  type?: PropType<T>;
421
  required?: boolean;
422
  default?: T | (() => T);
423
  validator?: (value: T) => boolean;
424
};
425

426
// Template syntax type utilities
427
type BooleanPropValue<T> = T extends boolean ? T : boolean;
428
type ShortBindValue<T> = T;
429
type VModelValue<T> = T;
430

431
// Syntax sugar combination types
432
type SugarProps<T> = {
433
  [K in keyof T]: T[K] extends boolean 
434
    ? BooleanPropValue<T[K]>
435
    : ShortBindValue<T[K]>;
436
};
437
```