@stacksjs/stx
Version:
A performant UI Framework. Powered by Bun.
106 lines • 3.27 kB
TypeScript
/**
* Extract and process event attributes from a template without generating
* a standalone script. Returns the modified template (with @event attributes
* removed and IDs added) and the collected event bindings as data.
*
* Used by SFC processing to inject event bindings into the component's
* <script client> scope instead of a separate script block.
*
* @param template - The HTML template string
* @returns Object with processed template and collected bindings
*/
export declare function extractAndProcessEvents(template: string): {
template: string
bindings: ParsedEvent[]
};
/**
* Process event directives in a template.
*
* Transforms `@click`, `@keydown.enter`, etc. attributes into
* client-side event listeners.
*
* In SFC mode (context.__stx_sfc_mode), event bindings are collected
* on context.__stx_event_bindings instead of generating a standalone script.
* This allows them to be injected into the component's <script client> scope.
*
* @param template - The HTML template string
* @param context - Template context
* @param filePath - Source file path for error messages
* @returns Processed template with event binding script (or just template in SFC mode)
*/
export declare function processEventDirectives(template: string, context: Record<string, unknown>, _filePath: string): string;
/**
* Check if a template contains event directives
*/
export declare function hasEventDirectives(template: string): boolean;
/**
* Event Directives Module
*
* Provides Alpine.js-style event handling for STX templates.
* Transforms `@click`, `@keydown.enter`, etc. into client-side event listeners.
*
* ## Supported Syntax
*
* ### Basic Events
* ```html
* <button @click="count++">Increment</button>
* <button @click="handleClick()">Click me</button>
* <form @submit="handleSubmit()">...</form>
* ```
*
* ### Event Modifiers
* ```html
* <form @submit.prevent="handleSubmit()">...</form>
* <a @click.prevent.stop="navigate()">Link</a>
* <button @click.once="initialize()">Init</button>
* <div @click.self="onlyThis()">...</div>
* <input @keydown.capture="log()">
* ```
*
* ### Key Modifiers
* ```html
* <input @keydown.enter="submit()">
* <input @keyup.escape="cancel()">
* <input @keydown.space="toggle()">
* <input @keydown.ctrl.s="save()">
* <input @keydown.meta.enter="send()">
* ```
*
* ### Mouse Modifiers
* ```html
* <div @click.left="handleLeft()">
* <div @click.right="handleRight()">
* <div @click.middle="handleMiddle()">
* ```
*
* ### Special Variables
* ```html
* <input @input="value = $event.target.value">
* <button @click="handleClick($el)">Uses element</button>
* ```
*
* @module events
*/
// =============================================================================
// Types
// =============================================================================
export declare interface ParsedEvent {
attribute: string
event: string
handler: string
modifiers: EventModifiers
elementId: string
}
export declare interface EventModifiers {
prevent: boolean
stop: boolean
once: boolean
capture: boolean
self: boolean
passive: boolean
keys: string[]
systemKeys: string[]
mouse: string | null
debounce: number | null
throttle: number | null
}