vite-plugin-smart-prefetch 0.4.0 → 0.4.2

package/dist/react/index.d.ts

@@ -1,8 +1,88 @@
-import React from 'react';
-import { LinkProps } from 'react-router-dom';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type PrefetchStrategy = 'auto' | 'hover' | 'visible' | 'idle' | 'hybrid';
+interface ModelConfig {
+    /** Model type */
+    type: 'probability' | 'ml' | 'hybrid';
+    /** Minimum probability threshold (0.0 - 1.0, default: 0.3) */
+    threshold: number;
+    /** Maximum routes to prefetch per page (default: 3) */
+    maxPrefetch: number;
+    /** How often to update the model */
+    updateInterval?: 'build' | 'daily' | 'weekly';
+}
+interface DataSourceMetadata {
+    /** Provider name */
+    provider: 'bigquery' | 'markov-chain' | 'manual' | string;
+    /** Date range analyzed */
+    dateRange: string;
+    /** Total sessions analyzed */
+    totalSessions: number;
+    /** Total unique routes found */
+    totalRoutes?: number;
+}
+interface PrefetchTarget {
+    /** Target route to prefetch */
+    route: string;
+    /** Probability of transition (0.0 - 1.0) */
+    probability: number;
+    /** Number of observed transitions */
+    count: number;
+    /** Chunk file to prefetch (set by config generator) */
+    chunk?: string;
+    /** Production chunk file path (for production builds) */
+    chunk_prod?: string;
+    /** Dependency chunks to prefetch (extracted from Vite manifest imports) */
+    imports?: string[];
+    /** Priority level */
+    priority: 'high' | 'medium' | 'low';
+    /** Whether this is a manual rule */
+    manual?: boolean;
+}
+interface RouteMetadata {
+    /** Total transitions from this route */
+    totalTransitions: number;
+    /** Most common destination */
+    topDestination: string;
+    /** Average time spent on page (seconds) */
+    averageTimeOnPage?: number;
+}
+interface PrefetchConfig {
+    /** Schema version */
+    version: string;
+    /** Generation timestamp */
+    generatedAt: string;
+    /** Environment */
+    environment: string;
+    /** Data source info */
+    dataSource: DataSourceMetadata;
+    /** Model info */
+    model: {
+        type: ModelConfig['type'];
+        threshold: number;
+        maxPrefetch: number;
+        accuracy?: number;
+    };
+    /** Global route patterns for dynamic route matching */
+    routePatterns?: Record<string, string[]>;
+    /** Route predictions with chunk mappings */
+    routes: {
+        [sourceRoute: string]: {
+            /** Route pattern variants (for matching dynamic routes like /order/:id) */
+            patterns?: string[];
+            /** Prefetch rules for this route */
+            prefetch: Array<PrefetchTarget & {
+                chunk: string;
+            }>;
+            /** Metadata about this route */
+            metadata?: RouteMetadata;
+        };
+    };
+    /** Quick lookup: route -> chunk file */
+    chunks: {
+        [route: string]: string;
+    };
+}
 
 /**
  * Prefetch Manager (Runtime)
@@ -15,24 +95,19 @@ declare class PrefetchManager {
     private strategy;
     private observer;
     private debug;
-    private currentSegment;
-    private fallbackToDefault;
-    constructor(strategy?: PrefetchStrategy, debug?: boolean);
+    private currentLocation;
+    /**
+     * Constructor
+     * @param strategy Prefetch strategy: 'auto', 'hover', 'visible', 'idle', or 'hybrid'
+     * @param debug Enable debug logging
+     * @param initialLocation Optional initial location (pathname)
+     */
+    constructor(strategy?: PrefetchStrategy, debug?: boolean, initialLocation?: string);
     /**
      * Initialize the prefetch manager
      * Loads configuration and sets up observers
      */
     init(): Promise<void>;
-    /**
-     * Set the user segment for segment-based prefetch rules
-     * @param segment - The user's segment (e.g., 'premium', 'free', 'admin')
-     * @param fallbackToDefault - Use default rules if segment rules unavailable
-     */
-    setSegment(segment: string | null, fallbackToDefault?: boolean): void;
-    /**
-     * Get the current segment
-     */
-    getSegment(): string | null;
     /**
      * Match pathname against a route pattern
      * Supports both React Router (:id) and TanStack Router ($id) syntax
@@ -42,6 +117,27 @@ declare class PrefetchManager {
      *   matchRoutePattern('/admin/settings', '/admin/*') → true
      */
     private matchRoutePattern;
+    /**
+     * Update current location and trigger prefetch
+     * Call this whenever the application's location changes
+     *
+     * @param pathname The current pathname (can be from location.pathname, useLocation().pathname, etc.)
+     * @example
+     * ```tsx
+     * // In React Router DOM
+     * const location = useLocation();
+     * useEffect(() => {
+     *   manager.onLocationChange(location.pathname);
+     * }, [location.pathname]);
+     *
+     * // In TanStack Router
+     * const location = useLocation();
+     * useEffect(() => {
+     *   manager.onLocationChange(location.pathname);
+     * }, [location.pathname]);
+     * ```
+     */
+    onLocationChange(pathname: string): void;
     /**
      * Prefetch routes based on current route
      */
@@ -117,117 +213,6 @@ declare class PrefetchManager {
     logPrefetchSummary(): void;
 }
 
-/**
- * React Hook for Smart Prefetch
- * Automatically prefetches routes based on navigation
- */
-
-/**
- * React hook to enable smart prefetching
- * Call this once in your root App component
- *
- * @example
- * ```tsx
- * function App() {
- *   usePrefetch();
- *   return <Routes>...</Routes>;
- * }
- * ```
- */
-declare function usePrefetch(): PrefetchManager | null;
-/**
- * Get the prefetch manager instance
- * Useful for manual prefetch control
- */
-declare function getPrefetchManager(): PrefetchManager | null;
-
-/**
- * TanStack Router Hook for Smart Prefetch
- * Automatically prefetches routes based on navigation
- *
- * @example
- * ```tsx
- * import { usePrefetchTanStack } from 'vite-plugin-smart-prefetch/react';
- *
- * export function RootLayout() {
- *   usePrefetchTanStack();
- *   return <Outlet />;
- * }
- * ```
- */
-
-/**
- * React hook to enable smart prefetching with TanStack Router
- * Call this once in your root layout component
- *
- * Supports dynamic routes with patterns:
- * - Static routes: /dashboard, /orders
- * - Dynamic routes: /orders/:id, /users/$userId
- *
- * @example
- * ```tsx
- * function RootLayout() {
- *   usePrefetchTanStack();
- *   return <Outlet />;
- * }
- * ```
- */
-declare function usePrefetchTanStack(): PrefetchManager | null;
-/**
- * Get the prefetch manager instance
- * Useful for manual prefetch control
- *
- * @example
- * ```tsx
- * const manager = getPrefetchManager();
- * manager?.setSegment('premium');
- * ```
- */
-declare function getPrefetchManagerTanStack(): PrefetchManager | null;
-/**
- * Advanced: Use route pattern matching directly
- * Useful if you need to manually check pattern matching logic
- *
- * @example
- * ```tsx
- * const matchesPattern = matchPrefetchPattern('/orders/123', '/orders/:id');
- * ```
- */
-declare function matchPrefetchPattern(pathname: string, pattern: string): boolean;
-
-/**
- * Enhanced Link Component with Prefetch Support
- * Extends React Router Link with smart prefetching
- */
-
-interface PrefetchLinkProps extends Omit<LinkProps, 'prefetch'> {
-    /**
-     * Prefetch behavior
-     * - 'hover': Prefetch on mouse enter
-     * - 'visible': Prefetch when link becomes visible
-     * - 'manual': No automatic prefetch (use onClick)
-     * - undefined: Use default strategy from config
-     */
-    prefetch?: 'hover' | 'visible' | 'manual';
-}
-/**
- * Enhanced Link component with prefetching
- *
- * @example
- * ```tsx
- * // Prefetch on hover
- * <PrefetchLink to="/orders" prefetch="hover">
- *   View Orders
- * </PrefetchLink>
- *
- * // Prefetch when visible
- * <PrefetchLink to="/dispatch-order" prefetch="visible">
- *   Create Dispatch
- * </PrefetchLink>
- * ```
- */
-declare const PrefetchLink: React.ForwardRefExoticComponent<PrefetchLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-
 interface PrefetchDebugPanelProps {
     manager: PrefetchManager | null;
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
@@ -235,4 +220,4 @@ interface PrefetchDebugPanelProps {
 }
 declare function PrefetchDebugPanel({ manager, position, defaultOpen, }: PrefetchDebugPanelProps): react_jsx_runtime.JSX.Element | null;
 
-export { PrefetchDebugPanel, type PrefetchDebugPanelProps, PrefetchLink, type PrefetchLinkProps, getPrefetchManager, getPrefetchManagerTanStack, matchPrefetchPattern, usePrefetch, usePrefetchTanStack };
+export { type PrefetchConfig, PrefetchDebugPanel, type PrefetchDebugPanelProps, PrefetchManager, type PrefetchStrategy, type PrefetchTarget };

package/dist/react/index.js

@@ -1,17 +1,19 @@
-// src/frameworks/react/usePrefetch.ts
-import { useEffect, useRef } from "react";
-import { useLocation } from "react-router-dom";
-
 // src/runtime/prefetch-manager.ts
 var PrefetchManager = class {
-  constructor(strategy = "hybrid", debug = false) {
+  /**
+   * Constructor
+   * @param strategy Prefetch strategy: 'auto', 'hover', 'visible', 'idle', or 'hybrid'
+   * @param debug Enable debug logging
+   * @param initialLocation Optional initial location (pathname)
+   */
+  constructor(strategy = "hybrid", debug = false, initialLocation) {
     this.config = null;
     this.prefetched = /* @__PURE__ */ new Set();
     this.observer = null;
-    this.currentSegment = null;
-    this.fallbackToDefault = true;
+    this.currentLocation = null;
     this.strategy = strategy;
     this.debug = debug;
+    this.currentLocation = initialLocation || null;
   }
   /**
    * Initialize the prefetch manager
@@ -73,25 +75,6 @@ var PrefetchManager = class {
       }
     }
   }
-  /**
-   * Set the user segment for segment-based prefetch rules
-   * @param segment - The user's segment (e.g., 'premium', 'free', 'admin')
-   * @param fallbackToDefault - Use default rules if segment rules unavailable
-   */
-  setSegment(segment, fallbackToDefault = true) {
-    this.currentSegment = segment;
-    this.fallbackToDefault = fallbackToDefault;
-    if (this.debug) {
-      console.log(`\u{1F504} Segment updated: ${segment || "(none)"}`);
-      console.log(`   Fallback to default: ${fallbackToDefault}`);
-    }
-  }
-  /**
-   * Get the current segment
-   */
-  getSegment() {
-    return this.currentSegment;
-  }
   /**
    * Match pathname against a route pattern
    * Supports both React Router (:id) and TanStack Router ($id) syntax
@@ -107,6 +90,30 @@ var PrefetchManager = class {
     );
     return patternRegex.test(pathname);
   }
+  /**
+   * Update current location and trigger prefetch
+   * Call this whenever the application's location changes
+   *
+   * @param pathname The current pathname (can be from location.pathname, useLocation().pathname, etc.)
+   * @example
+   * ```tsx
+   * // In React Router DOM
+   * const location = useLocation();
+   * useEffect(() => {
+   *   manager.onLocationChange(location.pathname);
+   * }, [location.pathname]);
+   *
+   * // In TanStack Router
+   * const location = useLocation();
+   * useEffect(() => {
+   *   manager.onLocationChange(location.pathname);
+   * }, [location.pathname]);
+   * ```
+   */
+  onLocationChange(pathname) {
+    this.currentLocation = pathname;
+    this.prefetch(pathname);
+  }
   /**
    * Prefetch routes based on current route
    */
@@ -162,23 +169,12 @@ var PrefetchManager = class {
       }
       return;
     }
-    let prefetchTargets = routeConfig.prefetch;
-    let ruleSource = "default";
-    if (this.currentSegment && routeConfig.segments?.[this.currentSegment]) {
-      prefetchTargets = routeConfig.segments[this.currentSegment];
-      ruleSource = `segment (${this.currentSegment})`;
-    } else if (this.currentSegment && !routeConfig.segments?.[this.currentSegment] && !this.fallbackToDefault) {
-      if (this.debug) {
-        console.warn(`\u26A0\uFE0F  No prefetch rules for segment "${this.currentSegment}" and fallback disabled`);
-      }
-      return;
-    }
+    const prefetchTargets = routeConfig.prefetch;
     console.log(`\u2705 Found prefetch rule for: ${matchedRoute}`);
     console.log(`   Total targets to prefetch: ${prefetchTargets.length}`);
-    console.log(`   Using: ${ruleSource} rules`);
     console.log(`   Strategy: ${this.strategy}`);
     if (this.debug) {
-      console.groupCollapsed(`\u{1F4CA} Prefetch Rules for: ${matchedRoute} (${ruleSource})`);
+      console.groupCollapsed(`\u{1F4CA} Prefetch Rules for: ${matchedRoute}`);
       prefetchTargets.forEach((target, index) => {
         console.log(`   ${index + 1}. ${target.route} (${target.priority} priority, ${(target.probability * 100).toFixed(1)}%)`);
       });
@@ -543,126 +539,9 @@ var PrefetchManager = class {
   }
 };
 
-// src/frameworks/react/usePrefetch.ts
-var managerInstance = null;
-function usePrefetch() {
-  const location = useLocation();
-  const initialized = useRef(false);
-  useEffect(() => {
-    if (!initialized.current) {
-      const config = window.__SMART_PREFETCH__ || {};
-      const strategy = config.strategy || "hybrid";
-      const debug = config.debug || false;
-      managerInstance = new PrefetchManager(strategy, debug);
-      managerInstance.init();
-      window.__FARMART_PREFETCH_MANAGER__ = managerInstance;
-      initialized.current = true;
-      if (debug) {
-        console.log("\u2705 usePrefetch initialized");
-        console.log("\u2705 Prefetch manager exposed as window.__FARMART_PREFETCH_MANAGER__");
-      }
-    }
-  }, []);
-  useEffect(() => {
-    if (managerInstance) {
-      managerInstance.prefetch(location.pathname);
-    }
-  }, [location.pathname]);
-  return managerInstance;
-}
-function getPrefetchManager() {
-  return managerInstance;
-}
-
-// src/frameworks/react/usePrefetchTanStack.ts
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
-import { useLocation as useLocation2 } from "@tanstack/react-router";
-var managerInstance2 = null;
-function usePrefetchTanStack() {
-  const location = useLocation2();
-  const initialized = useRef2(false);
-  useEffect2(() => {
-    if (!initialized.current) {
-      const config = window.__SMART_PREFETCH__ || {};
-      const strategy = config.strategy || "hybrid";
-      const debug = config.debug || false;
-      managerInstance2 = new PrefetchManager(strategy, debug);
-      managerInstance2.init();
-      window.__FARMART_PREFETCH_MANAGER__ = managerInstance2;
-      initialized.current = true;
-      if (debug) {
-        console.log("\u2705 usePrefetchTanStack initialized");
-        console.log("\u2705 Prefetch manager exposed as window.__FARMART_PREFETCH_MANAGER__");
-      }
-    }
-  }, []);
-  useEffect2(() => {
-    if (managerInstance2) {
-      const pathname = location.pathname.split("?")[0].split("#")[0];
-      managerInstance2.prefetch(pathname);
-    }
-  }, [location.pathname]);
-  return managerInstance2;
-}
-function getPrefetchManagerTanStack() {
-  return managerInstance2;
-}
-function matchPrefetchPattern(pathname, pattern) {
-  const patternRegex = new RegExp(
-    "^" + pattern.replace(/:[^/]+/g, "[^/]+").replace(/\$[^/]+/g, "[^/]+").replace(/\*/g, ".*") + // Match wildcard
-    "$"
-  );
-  return patternRegex.test(pathname);
-}
-
-// src/frameworks/react/PrefetchLink.tsx
-import React, { useRef as useRef3, useEffect as useEffect3 } from "react";
-import { Link } from "react-router-dom";
-import { jsx } from "react/jsx-runtime";
-var PrefetchLink = React.forwardRef(
-  ({ prefetch, to, children, onMouseEnter, ...props }, forwardedRef) => {
-    const linkRef = useRef3(null);
-    const manager = getPrefetchManager();
-    const route = typeof to === "string" ? to : to.pathname || "";
-    useEffect3(() => {
-      if (prefetch === "visible" && linkRef.current && manager) {
-        manager.observeLink(linkRef.current, route);
-      }
-    }, [prefetch, route, manager]);
-    const handleMouseEnter = (e) => {
-      if (prefetch === "hover" && manager) {
-        manager.prefetchRoute(route);
-      }
-      if (onMouseEnter) {
-        onMouseEnter(e);
-      }
-    };
-    return /* @__PURE__ */ jsx(
-      Link,
-      {
-        ref: (node) => {
-          if (node) {
-            linkRef.current = node;
-            if (typeof forwardedRef === "function") {
-              forwardedRef(node);
-            } else if (forwardedRef) {
-              forwardedRef.current = node;
-            }
-          }
-        },
-        to,
-        onMouseEnter: handleMouseEnter,
-        ...props,
-        children
-      }
-    );
-  }
-);
-PrefetchLink.displayName = "PrefetchLink";
-
 // src/frameworks/react/PrefetchDebugPanel.tsx
-import { useEffect as useEffect4, useState } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 function PrefetchDebugPanel({
   manager,
   position = "bottom-right",
@@ -671,7 +550,7 @@ function PrefetchDebugPanel({
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const [stats, setStats] = useState(null);
   const [links, setLinks] = useState([]);
-  useEffect4(() => {
+  useEffect(() => {
     if (!manager) return;
     const updateStats = () => {
       setStats(manager.getStats());
@@ -753,33 +632,33 @@ function PrefetchDebugPanel({
   };
   return /* @__PURE__ */ jsxs("div", { style: containerStyle, children: [
     isOpen && stats && /* @__PURE__ */ jsxs("div", { style: panelStyle, children: [
-      /* @__PURE__ */ jsx2("div", { style: headerStyle, children: "\u{1F680} Smart Prefetch Debug" }),
+      /* @__PURE__ */ jsx("div", { style: headerStyle, children: "\u{1F680} Smart Prefetch Debug" }),
       /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
         /* @__PURE__ */ jsxs("div", { style: statStyle, children: [
-          /* @__PURE__ */ jsx2("span", { children: "Strategy:" }),
-          /* @__PURE__ */ jsx2("strong", { children: stats.strategy })
+          /* @__PURE__ */ jsx("span", { children: "Strategy:" }),
+          /* @__PURE__ */ jsx("strong", { children: stats.strategy })
         ] }),
         /* @__PURE__ */ jsxs("div", { style: statStyle, children: [
-          /* @__PURE__ */ jsx2("span", { children: "Config Loaded:" }),
-          /* @__PURE__ */ jsx2("strong", { children: stats.configLoaded ? "\u2705" : "\u274C" })
+          /* @__PURE__ */ jsx("span", { children: "Config Loaded:" }),
+          /* @__PURE__ */ jsx("strong", { children: stats.configLoaded ? "\u2705" : "\u274C" })
         ] }),
         /* @__PURE__ */ jsxs("div", { style: statStyle, children: [
-          /* @__PURE__ */ jsx2("span", { children: "Total Prefetched:" }),
-          /* @__PURE__ */ jsx2("strong", { children: stats.totalPrefetched })
+          /* @__PURE__ */ jsx("span", { children: "Total Prefetched:" }),
+          /* @__PURE__ */ jsx("strong", { children: stats.totalPrefetched })
         ] }),
         /* @__PURE__ */ jsxs("div", { style: statStyle, children: [
-          /* @__PURE__ */ jsx2("span", { children: "Link Tags in DOM:" }),
-          /* @__PURE__ */ jsx2("strong", { children: links.length })
+          /* @__PURE__ */ jsx("span", { children: "Link Tags in DOM:" }),
+          /* @__PURE__ */ jsx("strong", { children: links.length })
         ] })
       ] }),
       stats.prefetchedRoutes.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx2("div", { style: { ...headerStyle, fontSize: "11px" }, children: "Prefetched Routes:" }),
-        /* @__PURE__ */ jsx2("div", { style: { fontSize: "11px", color: "#666", marginBottom: "8px" }, children: stats.prefetchedRoutes.join(", ") })
+        /* @__PURE__ */ jsx("div", { style: { ...headerStyle, fontSize: "11px" }, children: "Prefetched Routes:" }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: "#666", marginBottom: "8px" }, children: stats.prefetchedRoutes.join(", ") })
       ] }),
       links.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx2("div", { style: { ...headerStyle, fontSize: "11px" }, children: "Active Link Tags:" }),
+        /* @__PURE__ */ jsx("div", { style: { ...headerStyle, fontSize: "11px" }, children: "Active Link Tags:" }),
         links.map((link, i) => /* @__PURE__ */ jsxs("div", { style: linkStyle, children: [
-          /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2("strong", { children: link.route }) }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("strong", { children: link.route }) }),
           /* @__PURE__ */ jsxs("div", { style: { color: "#666", marginTop: "4px" }, children: [
             "Priority: ",
             link.priority,
@@ -787,10 +666,10 @@ function PrefetchDebugPanel({
             (parseFloat(link.probability) * 100).toFixed(1),
             "%"
           ] }),
-          /* @__PURE__ */ jsx2("div", { style: { color: "#999", marginTop: "2px", wordBreak: "break-all" }, children: link.href.split("/").pop() })
+          /* @__PURE__ */ jsx("div", { style: { color: "#999", marginTop: "2px", wordBreak: "break-all" }, children: link.href.split("/").pop() })
         ] }, i))
       ] }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx(
         "button",
         {
           onClick: () => {
@@ -810,7 +689,7 @@ function PrefetchDebugPanel({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(
       "button",
       {
         style: buttonStyle,
@@ -823,11 +702,6 @@ function PrefetchDebugPanel({
 }
 export {
   PrefetchDebugPanel,
-  PrefetchLink,
-  getPrefetchManager,
-  getPrefetchManagerTanStack,
-  matchPrefetchPattern,
-  usePrefetch,
-  usePrefetchTanStack
+  PrefetchManager
 };
 //# sourceMappingURL=index.js.map