@stacksjs/stx/dist/reactive.d.ts

A performant UI Framework. Powered by Bun.

/**
 * Process reactive directives in a template.
 *
 * Transforms `x-data`, `x-model`, `x-show`, etc. into client-side reactivity.
 *
 * @param template - The HTML template string
 * @param context - Template context
 * @param filePath - Source file path for error messages
 * @returns Processed template with reactive runtime script
 */
export declare function processReactiveDirectives(template: string, _context: Record<string, unknown>, _filePath: string): string;
/**
 * Check if a template contains reactive directives
 */
export declare function hasReactiveDirectives(template: string): boolean;
/**
 * Reactive Directives Module
 *
 * Provides Alpine.js-style reactive state management for STX templates.
 * Transforms `x-data`, `x-model`, `x-show`, `x-text`, `x-bind` into client-side reactivity.
 *
 * ## Supported Syntax
 *
 * ### x-data - Define reactive state
 * ```html
 * <div x-data="{ count: 0, name: '' }">
 *   <p x-text="count"></p>
 *   <button @click="count++">Increment</button>
 * </div>
 * ```
 *
 * ### x-model - Two-way binding
 * ```html
 * <input x-model="name" type="text">
 * <textarea x-model="message"></textarea>
 * <select x-model="selected">...</select>
 * <input x-model="checked" type="checkbox">
 * ```
 *
 * ### x-show / x-hide - Toggle visibility
 * ```html
 * <div x-show="isOpen">Visible when isOpen is true</div>
 * <div x-hide="isLoading">Hidden when isLoading is true</div>
 * ```
 *
 * ### x-text / x-html - Bind content
 * ```html
 * <span x-text="message"></span>
 * <div x-html="htmlContent"></div>
 * ```
 *
 * ### x-bind / :attr - Bind attributes
 * ```html
 * <button x-bind:disabled="isLoading">Submit</button>
 * <div :class="{ active: isActive, hidden: !isVisible }">...</div>
 * <img :src="imageUrl" :alt="imageAlt">
 * ```
 *
 * ### x-ref - Element references
 * ```html
 * <input x-ref="input">
 * <button @click="$refs.input.focus()">Focus</button>
 * ```
 *
 * ### x-init - Run code on mount
 * ```html
 * <div x-data="{ items: [] }" x-init="items = await fetchItems()">
 * ```
 *
 * @module reactive
 */
// =============================================================================
// Types
// =============================================================================
export declare interface ReactiveScope {
  id: string
  selector: string
  stateExpr: string
  initExpr: string | null
  bindings: ReactiveBinding[]
  refs: Map<string, string>
}
export declare interface ReactiveBinding {
  elementId: string
  type: 'model' | 'show' | 'hide' | 'text' | 'html' | 'bind' | 'class' | 'style'
  expression: string
  attribute?: string
  inputType?: string
  transition?: TransitionConfig
}
export declare interface TransitionConfig {
  enabled: boolean
  enter?: string
  enterStart?: string
  enterEnd?: string
  leave?: string
  leaveStart?: string
  leaveEnd?: string
  duration?: number
}