react-navplus
Version:
A flexible, performance-optimized navigation link component for React with multi-router support, prefetching, and advanced active state detection
174 lines • 5.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.clearPrefetchCache = exports.executePrefetch = exports.normalizePrefetchOptions = exports.defaultPrefetchOptions = void 0;
/**
* Default prefetch options
*/
exports.defaultPrefetchOptions = {
enabled: true,
delay: 200,
routerType: 'react-router'
};
/**
* Normalized prefetch options from prop
* Fixed: Avoid spread syntax that requires tslib helpers
*/
const normalizePrefetchOptions = (prefetch) => {
if (typeof prefetch === 'boolean') {
return {
...exports.defaultPrefetchOptions,
enabled: prefetch
};
}
if (!prefetch) {
return { ...exports.defaultPrefetchOptions };
}
return {
...exports.defaultPrefetchOptions,
...prefetch
};
};
exports.normalizePrefetchOptions = normalizePrefetchOptions;
/**
* Cache for created prefetch links to avoid duplicates
*/
const prefetchCache = new Set();
/**
* Creates a prefetch link element
*/
const createPrefetchLink = (url, rel, as) => {
const cacheKey = `${rel}:${url}`;
if (prefetchCache.has(cacheKey)) {
return null;
}
const link = document.createElement('link');
link.rel = rel;
link.href = url;
if (as) {
link.setAttribute('as', as);
}
prefetchCache.add(cacheKey);
document.head.appendChild(link);
return link;
};
/**
* Basic prefetch implementation using link prefetch
*/
const basicPrefetch = (url) => {
try {
createPrefetchLink(url, 'prefetch', 'document');
const urlObj = new URL(url, window.location.origin);
createPrefetchLink(urlObj.origin, 'preconnect');
}
catch (error) {
if (process.env.NODE_ENV !== 'production') {
console.warn('Basic prefetch failed:', error);
}
}
};
/**
* React Router specific prefetch implementation
*/
const prefetchReactRouter = (url, routerContext) => {
basicPrefetch(url);
if (routerContext === null || routerContext === void 0 ? void 0 : routerContext.preloadRoute) {
try {
routerContext.preloadRoute(url);
}
catch (error) {
if (process.env.NODE_ENV !== 'production') {
console.debug('Router preload failed, falling back to basic prefetch');
}
}
}
};
/**
* TanStack Router specific prefetch implementation
*/
const prefetchTanStackRouter = (url, routerContext) => {
var _a, _b, _c;
if ((_a = routerContext === null || routerContext === void 0 ? void 0 : routerContext.router) === null || _a === void 0 ? void 0 : _a.preloadRoute) {
try {
routerContext.router.preloadRoute({ to: url });
return true;
}
catch (error) {
if (process.env.NODE_ENV !== 'production') {
console.debug('TanStack Router context prefetch failed:', error);
}
}
}
if (typeof window !== 'undefined' && ((_c = (_b = window.TanStackRouter) === null || _b === void 0 ? void 0 : _b.router) === null || _c === void 0 ? void 0 : _c.preloadRoute)) {
try {
window.TanStackRouter.router.preloadRoute({ to: url });
return true;
}
catch (error) {
if (process.env.NODE_ENV !== 'production') {
console.debug('TanStack Router global prefetch failed:', error);
}
}
}
basicPrefetch(url);
return false;
};
/**
* Implementation of prefetch logic for different router libraries
*/
const executePrefetch = (url, routerType, isExternal, routerContext, customPrefetch) => {
if (isExternal)
return false;
if (typeof window === 'undefined' || typeof document === 'undefined') {
return false;
}
if (routerType === 'custom' && customPrefetch) {
try {
customPrefetch(url);
return true;
}
catch (error) {
if (process.env.NODE_ENV !== 'production') {
console.error('Custom prefetch failed:', error);
}
return false;
}
}
try {
switch (routerType) {
case 'react-router':
prefetchReactRouter(url, routerContext);
break;
case 'tanstack-router':
const success = prefetchTanStackRouter(url, routerContext);
if (!success) {
console.warn('TanStack Router prefetch: router instance not found, using basic prefetch');
}
break;
case 'wouter':
basicPrefetch(url);
break;
default:
basicPrefetch(url);
break;
}
if (process.env.NODE_ENV !== 'production') {
console.log(`Prefetched: ${url} using ${routerType}`);
}
return true;
}
catch (error) {
if (process.env.NODE_ENV !== 'production') {
console.error(`Error prefetching ${url}:`, error);
}
return false;
}
};
exports.executePrefetch = executePrefetch;
/**
* Clear prefetch cache
*/
const clearPrefetchCache = () => {
prefetchCache.clear();
};
exports.clearPrefetchCache = clearPrefetchCache;
//# sourceMappingURL=prefetch.js.map