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

A performant UI Framework. Powered by Bun.

/**
 * Process @suspense directives in templates.
 *
 * Syntax:
 *   @suspense
 *     <async content>
 *   @fallback
 *     <loading fallback>
 *   @endsuspense
 *
 * With options:
 *   @suspense(timeout: 10000)
 */
export declare function processSuspenseDirectives(template: string, _context?: Record<string, unknown>, _filePath?: string): string;
/**
 * Create an SSR suspense boundary.
 * Returns the fallback immediately, then streams the content when ready.
 */
export declare function createSSRSuspense(id: string, contentPromise: Promise<string>, fallback: string): SSRSuspenseBoundary;
/**
 * Render SSR suspense boundaries for streaming.
 * Returns initial HTML with fallbacks, plus a script to replace them when content loads.
 */
export declare function renderSSRSuspense(boundaries: SSRSuspenseBoundary[]): Promise<{ initial: string; streaming: AsyncGenerator<string> }>;
/**
 * Generate CSS for suspense styling.
 */
export declare function generateSuspenseCSS(): string;
/**
 * Generate client-side runtime for suspense.
 */
export declare function generateSuspenseRuntime(): string;
/**
 * STX Suspense
 *
 * Coordinates async loading across component trees, showing a fallback
 * until all async children are resolved.
 *
 * @module suspense
 *
 * @example
 * ```html
 * @suspense
 *   <UserProfile :id="userId" />
 *   <UserActivity :id="userId" />
 *   <UserStats :id="userId" />
 * @fallback
 *   <PageSkeleton />
 * @endsuspense
 * ```
 */
// =============================================================================
// Types
// =============================================================================
export declare interface SuspenseOptions {
  id?: string
  timeout?: number
  onResolve?: () => void
  onError?: (error: Error) => void
  onPending?: () => void
}
export declare interface SuspenseState {
  status: 'pending' | 'resolved' | 'rejected'
  pending: Set<string>
  resolved: Set<string>
  error: Error | null
}
export declare interface SuspenseBoundary {
  id: string
  state: SuspenseState
  register: (childId: string) => void
  resolve: (childId: string) => void
  reject: (childId: string, error: Error) => void
  reset: () => void
}
/**
 * Server-side suspense boundary for SSR streaming.
 */
export declare interface SSRSuspenseBoundary {
  id: string
  fallback: string
  content: Promise<string>
}