vue3-lazy-hydration/dist/vue3-lazy-hydration.d.ts

Lazy Hydration for Vue 3 SSR

import { AllowedComponentProps } from 'vue';
import type { AsyncComponentLoader } from 'vue';
import type { Component } from 'vue';
import { ComponentCustomProps } from 'vue';
import { ComponentOptionsMixin } from 'vue';
import { ComputedOptions } from 'vue';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { MethodOptions } from 'vue';
import { Ref } from 'vue';
import { RendererElement } from 'vue';
import { RendererNode } from 'vue';
import { VNode } from 'vue';
import { VNodeProps } from 'vue';

/**
 * @public Wrap a Vue.js component in a renderless component so that it is never hydrated.
 */
export declare function hydrateNever(source: Component | AsyncComponentLoader): Component;

/**
 * @public Wrap a component in a renderless component so that it is hydrated when a specified HTML event occurs on one of its elements.
 */
export declare function hydrateOnInteraction(source: Component | AsyncComponentLoader, events?: (keyof HTMLElementEventMap)[]): Component<any, any, any, ComputedOptions, MethodOptions>;

/**
 * @public Wrap a component in a renderless component so that it is hydrated when the browser is idle.
 */
export declare function hydrateWhenIdle(source: Component | AsyncComponentLoader, timeout?: number): Component<any, any, any, ComputedOptions, MethodOptions>;

/**
 * @public Wrap a component in a renderless component so that it is hydrated when triggered.
 */
export declare function hydrateWhenTriggered(source: Component | AsyncComponentLoader, triggered: Ref | (() => boolean)): Component<any, any, any, ComputedOptions, MethodOptions>;

/**
 * @public Wrap a Vue.js component in a renderless component so that it is hydrated when one of the component's root elements is visible.
 */
export declare function hydrateWhenVisible(source: Component | AsyncComponentLoader, observerOpts?: IntersectionObserverInit): Component<any, any, any, ComputedOptions, MethodOptions>;

/**
 * @public A renderless Vue.js component to lazy hydrate its children.
 */
export declare const LazyHydrationWrapper: DefineComponent<    {
whenIdle: {
default: boolean;
type: (BooleanConstructor | NumberConstructor)[];
};
whenVisible: {
default: boolean;
type: (BooleanConstructor | ObjectConstructor)[];
};
onInteraction: {
default: boolean;
type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
};
whenTriggered: {
default: undefined;
type: (BooleanConstructor | ObjectConstructor)[];
};
}, () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}> | VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[], unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "hydrated"[], "hydrated", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<    {
whenIdle: {
default: boolean;
type: (BooleanConstructor | NumberConstructor)[];
};
whenVisible: {
default: boolean;
type: (BooleanConstructor | ObjectConstructor)[];
};
onInteraction: {
default: boolean;
type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
};
whenTriggered: {
default: undefined;
type: (BooleanConstructor | ObjectConstructor)[];
};
}>> & {
onHydrated?: ((...args: any[]) => any) | undefined;
}, {
whenIdle: number | boolean;
whenVisible: boolean | Record<string, any>;
onInteraction: string | boolean | unknown[];
whenTriggered: boolean | Record<string, any>;
}>;

/**
 * @public A Vue.js composable to delay hydration until a specified HTML event occurs on any component element.
 */
export declare function useHydrateOnInteraction({ willPerformHydration, hydrate, onCleanup, }: ReturnType<typeof useLazyHydration>, events?: (keyof HTMLElementEventMap)[]): void;

/**
 * @public A Vue.js composable to delay hydration until the browser is idle.
 */
export declare function useHydrateWhenIdle({ willPerformHydration, hydrate, onCleanup, }: ReturnType<typeof useLazyHydration>, timeout?: number): void;

/**
 * @public A Vue.js composable to manually trigger hydration.
 */
export declare function useHydrateWhenTriggered({ willPerformHydration, hydrate, onCleanup, }: ReturnType<typeof useLazyHydration>, trigger: Ref | (() => boolean)): void;

/**
 * @public A Vue.js composable to delay hydration until one of the component's root elements is visible.
 */
export declare function useHydrateWhenVisible({ willPerformHydration, hydrate, onCleanup, }: ReturnType<typeof useLazyHydration>, observerOptions?: IntersectionObserverInit): void;

/**
 * @public A Vue.js composable to delay hydration until the hydrate function is called.
 */
export declare function useLazyHydration(): {
    willPerformHydration: false;
    onHydrated: () => void;
    hydrate?: undefined;
    onCleanup?: undefined;
} | {
    willPerformHydration: true;
    hydrate: () => void | Promise<void>;
    onHydrated: (cb: () => void) => void;
    onCleanup: (cb: () => void) => void;
};

export { }