Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | // Type definitions for Coherent.js client-side hydration
export interface CoherentElement {
[tagName: string]: {
text?: string;
html?: string;
children?: CoherentNode[];
className?: string | (() => string);
[key: string]: any;
};
}
export type CoherentNode = CoherentElement | string | number | boolean | null | undefined;
export interface ComponentFunction {
(props?: Record<string, any>): CoherentNode;
}
export interface HydratedComponentInstance {
element: HTMLElement;
component: ComponentFunction;
props: Record<string, any>;
isHydrated: boolean;
update(newProps: Record<string, any>): void;
destroy(): void;
}
export interface HydrationOptions {
/**
* Whether to enable client-side event handlers
* @default true
*/
enableEvents?: boolean;
/**
* Whether to preserve existing DOM structure
* @default true
*/
preserveDOM?: boolean;
/**
* Custom error handler for hydration failures
*/
onError?: (error: Error, element: HTMLElement) => void;
}
/**
* Hydrate a DOM element with a Coherent component
* @param element - The DOM element to hydrate
* @param component - The Coherent component function
* @param props - Component props
* @param options - Hydration options
* @returns Hydrated component instance or null if failed
*/
export function hydrate(
element: HTMLElement,
component: ComponentFunction,
props?: Record<string, any>,
options?: HydrationOptions
): HydratedComponentInstance | null;
/**
* Hydrate multiple elements with their corresponding components
* @param elements - Array of DOM elements to hydrate
* @param components - Array of Coherent component functions
* @param propsArray - Array of component props
* @returns Array of hydrated component instances or null for failures
*/
export function hydrateAll(
elements: HTMLElement[],
components: ComponentFunction[],
propsArray?: Record<string, any>[]
): (HydratedComponentInstance | null)[];
/**
* Find and hydrate elements by CSS selector
* @param selector - CSS selector to find elements
* @param component - The Coherent component function
* @param props - Component props
* @returns Array of hydrated component instances or null for failures
*/
export function hydrateBySelector(
selector: string,
component: ComponentFunction,
props?: Record<string, any>
): (HydratedComponentInstance | null)[];
/**
* Enable client-side interactivity for event handlers
* @param rootElement - Root element to enable events on (default: document)
*/
export function enableClientEvents(rootElement?: HTMLElement | Document): void;
/**
* Create a hydratable component
* @param component - The component function to make hydratable
* @returns A hydratable component function
*/
export function makeHydratable(component: ComponentFunction): ComponentFunction;
/**
* Default export with all hydration utilities
*/
declare const hydration: {
hydrate: typeof hydrate;
hydrateAll: typeof hydrateAll;
hydrateBySelector: typeof hydrateBySelector;
enableClientEvents: typeof enableClientEvents;
makeHydratable: typeof makeHydratable;
};
export default hydration;
|