drab/dist/prefetch/index.d.ts

Interactivity for You

import { Base, type BaseAttributes } from "../base/index.js";
type Strategy = "hover" | "load" | "visible";
export type PrefetchAttributes = BaseAttributes & {
    strategy?: Strategy;
    prerender?: boolean;
    url?: string;
};
/**
 * The `Prefetch` element can prefetch a url, or enhance the `HTMLAnchorElement` by loading the HTML for a page before it is navigated to. This element speeds up the navigation for multi-page applications (MPAs).
 *
 * If you are using a framework that already has a prefetch feature or uses a client side router, it is best to use the framework's feature instead of this element to ensure prefetching is working in accordance with the router.
 *
 * `strategy`
 *
 * Set the `strategy` attribute to specify the when the prefetch will take place.
 *
 * - `"hover"` - (default) After `mouseover`, `focus`, or `touchstart` for > 200ms
 * - `"visible"` - Uses an intersection observer to prefetch when the anchor is within the viewport.
 * - `"load"` - Immediately prefetches when the element is loaded, use carefully.
 *
 * `prerender`
 *
 * Use the `prerender` attribute to use the Speculation Rules API when supported to prerender on the client. This allows you to run client side JavaScript in advance instead of only fetching the HTML.
 *
 * Browsers that do not support will still use `<link rel="prefetch">` instead.
 *
 * [Speculation Rules Reference](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API)
 *
 * `url`
 *
 * Add a `url` attribute to immediately prefetch a url without having to provide
 * (or in addition to) `trigger` anchor elements.
 *
 * This element can be deprecated once the Speculation Rules API is supported across browsers. The API will be able to prefetch assets in a similar way with the `source: "document"` and `eagerness` features, and will work without JavaScript.
 */
export declare class Prefetch extends Base {
    #private;
    constructor();
    /**
     * Appends `<link rel="prefetch">` or `<script type="speculationrules">` to the head of the document.
     *
     * @param options Configuration options.
     */
    appendTag(options: {
        /** `url` to prefetch. */
        url: string;
        /**
         * Uses the Speculation Rules API when supported to prerender on the client.
         */
        prerender?: boolean;
    }): void;
    /**
     * Use to prefetch/prerender HTML.
     *
     * Can be used more than once with different options for different selectors.
     *
     * @param options Prefetch options.
     */
    prefetch(options?: {
        /** The anchors to prefetch. Defaults to `trigger` elements. */
        anchors?: NodeListOf<HTMLAnchorElement>;
        /** Uses the Speculation Rules API when supported to prerender on the client. */
        prerender?: boolean;
        /**
         * Determines when the prefetch takes place.
         *
         * @default "hover"
         */
        strategy?: "hover" | "load" | "visible";
    }): void;
    mount(): void;
}
export {};