@stacksjs/stx
Version:
A performant UI Framework. Powered by Bun.
101 lines • 2.91 kB
TypeScript
/**
* Process @async directives in templates.
*
* Syntax:
* @async(component: 'ComponentName', timeout: 5000)
* <loading content>
* @error
* <error content>
* @endasync
*/
export declare function processAsyncDirectives(template: string, _context?: Record<string, unknown>, _filePath?: string): string;
/**
* Define an async component.
*/
export declare function defineAsyncComponent(options: DefineAsyncComponentOptions | (() => Promise<{ default: string } | string>)): AsyncComponentDefinition;
/**
* Check if a value is an async component definition.
*/
export declare function isAsyncComponent(value: unknown): value is AsyncComponentDefinition;
/**
* Generate CSS for async component styling.
*/
export declare function generateAsyncComponentCSS(): string;
/**
* Generate client-side runtime for async components.
*/
export declare function generateAsyncComponentRuntime(): string;
/**
* STX Async Components
*
* Provides lazy loading capabilities for components with loading and error states.
*
* @module async-components
*
* @example
* ```html
* @async(component: 'HeavyChart', timeout: 5000)
* <div class="loading">Loading chart...</div>
* @error
* <div class="error">Failed to load chart</div>
* @endasync
* ```
*
* Or inline:
* ```html
* <AsyncComponent
* :component="() => import('./HeavyChart.stx')"
* :timeout="5000"
* >
* <template #loading>Loading...</template>
* <template #error="{ error }">Error: {{ error.message }}</template>
* </AsyncComponent>
* ```
*/
// =============================================================================
// Types
// =============================================================================
export declare interface AsyncComponentOptions {
component: string
timeout?: number
delay?: number
suspensible?: boolean
loadingComponent?: string
errorComponent?: string
retries?: number
props?: Record<string, unknown>
}
export declare interface AsyncComponentState {
status: 'pending' | 'loading' | 'resolved' | 'rejected'
component: string | null
error: Error | null
attempts: number
}
/**
* Define an async component for programmatic use.
*
* @example
* ```typescript
* const AsyncChart = defineAsyncComponent({
* loader: () => import('./Chart.stx'),
* loadingComponent: LoadingSpinner,
* errorComponent: ErrorDisplay,
* delay: 200,
* timeout: 3000
* })
* ```
*/
export declare interface DefineAsyncComponentOptions {
loader: () => Promise<{ default: string } | string>
loadingComponent?: string
errorComponent?: string
delay?: number
timeout?: number
suspensible?: boolean
onLoadStart?: () => void
onLoadEnd?: () => void
onError?: (error: Error, retry: () => void, fail: () => void, attempts: number) => void
}
export declare interface AsyncComponentDefinition extends DefineAsyncComponentOptions {
__asyncComponent: true
}