@stacksjs/stx
Version:
A performant UI Framework. Powered by Bun.
137 lines • 4.29 kB
TypeScript
/**
* Create a reactive reference
*/
export declare function ref<T>(initialValue: T): Ref<T>;
/**
* Check if a value is a ref
*/
export declare function isRef<T>(value: unknown): value is Ref<T>;
/**
* Unwrap a ref to get its value
*/
export declare function unref<T>(value: T | Ref<T>): T;
/**
* Convert all properties of an object to refs
*/
export declare function toRefs<T extends object>(obj: T): { [K in keyof T]: Ref<T[K]> };
/**
* Create a shallow reactive object
*/
export declare function shallowRef<T>(initialValue: T): Ref<T>;
/**
* Create a computed property with automatic dependency tracking
*/
export declare function computed<T>(getter: () => T): ComputedRef<T>;
export declare function computed<T>(options: ComputedOptions<T>): WritableComputedRef<T>;
export declare function computed<T>(getterOrOptions: (() => T) | ComputedOptions<T>): ComputedRef<T> | WritableComputedRef<T>;
/**
* Watch a reactive source and run a callback when it changes
*/
export declare function watch<T>(source: Ref<T> | (() => T), callback: (newValue: T, oldValue: T | undefined) => void, options?: WatchOptions): WatchStopHandle;
/**
* Watch multiple sources
*/
export declare function watchMultiple<T extends readonly Ref<unknown>[]>(sources: [...T], callback: (
newValues: { [K in keyof T]: T[K] extends Ref<infer V> ? V : never },
oldValues: { [K in keyof T]: T[K] extends Ref<infer V> ? V | undefined : never }
) => void, options?: WatchOptions): WatchStopHandle;
/**
* Watch and run effect immediately, auto-tracking dependencies
*/
export declare function watchEffect(effect: () => void | (() => void), options?: Pick<WatchOptions, 'flush'>): WatchStopHandle;
/**
* Process @computed directives in templates
*/
export declare function processComputedDirectives(template: string, context?: Record<string, unknown>, _filePath?: string): string;
/**
* Process @watch directives in templates
*/
export declare function processWatchDirectives(template: string, _context?: Record<string, unknown>, _filePath?: string): string;
/**
* Create a debounced computed
*/
export declare function debouncedComputed<T>(getter: () => T, delay?: number): ComputedRef<T>;
/**
* Create a throttled computed
*/
export declare function throttledComputed<T>(getter: () => T, limit?: number): ComputedRef<T>;
/**
* Computed Properties Module
*
* Provides reactive computed values with automatic dependency tracking.
* Computed properties automatically update when their dependencies change,
* and are cached until dependencies are modified.
*
* @example
* ```typescript
* const firstName = ref('John')
* const lastName = ref('Doe')
*
* const fullName = computed(() => `${firstName.value} ${lastName.value}`)
*
* console.log(fullName.value) // 'John Doe'
* firstName.value = 'Jane'
* console.log(fullName.value) // 'Jane Doe'
* ```
*/
// ============================================================================
// Types
// ============================================================================
export declare interface Ref<T> {
value: T
subscribe: (callback: (value: T) => void) => () => void
peek: () => T
}
export declare interface ComputedRef<T> extends Ref<T> {
invalidate: () => void
dirty: boolean
deps: Set<Ref<unknown>>
}
export declare interface WritableComputedRef<T> extends ComputedRef<T> {
value: T
}
export declare interface ComputedOptions<T> {
get: () => T
set?: (value: T) => void
lazy?: boolean
equals?: (a: T, b: T) => boolean
}
export declare interface WatchOptions {
immediate?: boolean
deep?: boolean
flush?: 'pre' | 'post' | 'sync'
once?: boolean
}
export declare interface WatchStopHandle {
(): void
pause: () => void
resume: () => void
}
export {
ref as stxRef,
computed as stxComputed,
watch as stxWatch,
watchMultiple as stxWatchMultiple,
watchEffect as stxWatchEffect,
isRef as stxIsRef,
unref as stxUnref,
toRefs as stxToRefs,
shallowRef as stxShallowRef,
debouncedComputed as stxDebouncedComputed,
throttledComputed as stxThrottledComputed,
};
export default {
ref,
computed,
watch,
watchMultiple,
watchEffect,
isRef,
unref,
toRefs,
shallowRef,
debouncedComputed,
throttledComputed,
processComputedDirectives,
processWatchDirectives,
};