rwsdk
Version:
Build fast, server-driven webapps on Cloudflare with SSR, RSC, and realtime
63 lines (62 loc) • 2.23 kB
TypeScript
import { type NavigationCache, type NavigationCacheStorage } from "./navigationCache.js";
export type { NavigationCache, NavigationCacheStorage };
export interface ClientNavigationOptions {
onNavigate?: () => void;
scrollToTop?: boolean;
scrollBehavior?: "auto" | "smooth" | "instant";
cacheStorage?: NavigationCacheStorage;
}
export declare function validateClickEvent(event: MouseEvent, target: HTMLElement): boolean;
export interface NavigateOptions {
history?: "push" | "replace";
info?: {
scrollToTop?: boolean;
scrollBehavior?: "auto" | "smooth" | "instant";
};
}
export declare function navigate(href: string, options?: NavigateOptions): Promise<void>;
/**
* Initializes client-side navigation for Single Page App (SPA) behavior.
*
* Intercepts clicks on internal links and fetches page content without full-page reloads.
* Returns a handleResponse function to pass to initClient.
*
* @param opts.scrollToTop - Scroll to top after navigation (default: true)
* @param opts.scrollBehavior - How to scroll: 'instant', 'smooth', or 'auto' (default: 'instant')
* @param opts.onNavigate - Callback executed after history push but before RSC fetch
*
* @example
* // Basic usage
* import { initClient, initClientNavigation } from "rwsdk/client";
*
* const { handleResponse, onHydrationUpdate } = initClientNavigation();
* initClient({ handleResponse, onHydrationUpdate });
*
* @example
* // With custom scroll behavior
* const { handleResponse } = initClientNavigation({
* scrollBehavior: "smooth",
* scrollToTop: true,
* });
* initClient({ handleResponse });
*
* @example
* // Preserve scroll position (e.g., for infinite scroll)
* const { handleResponse } = initClientNavigation({
* scrollToTop: false,
* });
* initClient({ handleResponse });
*
* @example
* // With navigation callback
* const { handleResponse } = initClientNavigation({
* onNavigate: () => {
* console.log("Navigating to:", window.location.href);
* },
* });
* initClient({ handleResponse });
*/
export declare function initClientNavigation(opts?: ClientNavigationOptions): {
handleResponse: (response: Response) => boolean;
onHydrationUpdate: () => void;
};