@stacksjs/stx/dist/keep-alive.d.ts

A performant UI Framework. Powered by Bun.

/**
 * Process @keepAlive directives in templates.
 *
 * Syntax:
 *   @keepAlive
 *     <content to cache>
 *   @endkeepAlive
 *
 * With options:
 *   @keepAlive(max: 10, include: 'ComponentA,ComponentB')
 */
export declare function processKeepAliveDirectives(template: string, _context?: Record<string, unknown>, _filePath?: string): string;
/**
 * Create a keep-alive cache programmatically.
 */
export declare function createKeepAliveCache(options?: KeepAliveOptions): KeepAliveCache;
/**
 * Check if a component should be cached based on filters.
 */
export declare function shouldCacheComponent(componentName: string, cache: KeepAliveCache): boolean;
/**
 * Generate CSS for keep-alive styling.
 */
export declare function generateKeepAliveCSS(): string;
/**
 * Generate client-side runtime for keep-alive.
 */
export declare function generateKeepAliveRuntime(): string;
/**
 * Hook called when a component is activated from cache.
 * Use in client-side scripts.
 */
export declare function onActivated(callback: (detail: { key: string; keepAliveId: string; cachedAt: number }) => void): void;
/**
 * Hook called when a component is deactivated and cached.
 * Use in client-side scripts.
 */
export declare function onDeactivated(callback: (detail: { key: string; keepAliveId: string }) => void): void;
/**
 * STX Keep-Alive
 *
 * Caches component instances to preserve state when toggling visibility.
 * Similar to Vue's <KeepAlive> component.
 *
 * @module keep-alive
 *
 * @example
 * ```html
 * @keepAlive
 *   @if (currentTab === 'settings')
 *     <SettingsPanel />
 *   @elseif (currentTab === 'profile')
 *     <ProfilePanel />
 *   @endif
 * @endkeepAlive
 * ```
 *
 * With options:
 * ```html
 * @keepAlive(max: 10, include: 'Settings,Profile', exclude: 'Debug')
 *   <component :is="currentComponent" />
 * @endkeepAlive
 * ```
 */
// =============================================================================
// Types
// =============================================================================
export declare interface KeepAliveOptions {
  max?: number
  include?: string
  exclude?: string
  id?: string
}
export declare interface CachedComponent {
  key: string
  html: string
  state: Record<string, unknown>
  cachedAt: number
  scrollPositions: Map<string, { top: number; left: number }>
}
export declare interface KeepAliveCache {
  id: string
  cache: Map<string, CachedComponent>
  max: number
  include: string[] | null
  exclude: string[] | null
}