@flight-framework/router 0.0.2 → 0.0.4

package/dist/index.js

@@ -104,26 +104,192 @@ if (typeof globalThis !== "undefined") {
   }
 }
 
-// src/link.ts
+// src/prefetch.ts
 var isBrowser2 = typeof window !== "undefined";
+var supportsIntersectionObserver = isBrowser2 && "IntersectionObserver" in window;
+var prefetchedUrls = /* @__PURE__ */ new Set();
+var prefetchingUrls = /* @__PURE__ */ new Set();
+var viewportObservers = /* @__PURE__ */ new Map();
+function prefetch(href, options = {}) {
+  if (!isBrowser2) return;
+  const {
+    priority = "auto",
+    includeModules = true,
+    includeData = false
+  } = options;
+  const url = normalizeUrl(href);
+  if (prefetchedUrls.has(url) || prefetchingUrls.has(url)) {
+    return;
+  }
+  prefetchingUrls.add(url);
+  createPrefetchLink(url, "document", priority);
+  if (includeModules) {
+    prefetchModules(url, priority);
+  }
+  if (includeData) {
+    prefetchData(url, priority);
+  }
+  prefetchedUrls.add(url);
+  prefetchingUrls.delete(url);
+}
+function prefetchAll(hrefs, options = {}) {
+  for (const href of hrefs) {
+    prefetch(href, options);
+  }
+}
+function isPrefetched(href) {
+  return prefetchedUrls.has(normalizeUrl(href));
+}
+function clearPrefetchCache() {
+  prefetchedUrls.clear();
+  prefetchingUrls.clear();
+}
+function createPrefetchLink(href, as, priority) {
+  if (!isBrowser2) return null;
+  const existing = document.querySelector(
+    `link[rel="prefetch"][href="${href}"], link[rel="modulepreload"][href="${href}"]`
+  );
+  if (existing) return existing;
+  const link = document.createElement("link");
+  if (as === "script") {
+    link.rel = "modulepreload";
+  } else {
+    link.rel = "prefetch";
+    link.as = as;
+  }
+  link.href = href;
+  if (priority !== "auto" && "fetchPriority" in link) {
+    link.fetchPriority = priority;
+  }
+  if (priority === "low" && "requestIdleCallback" in window) {
+    window.requestIdleCallback(() => {
+      document.head.appendChild(link);
+    });
+  } else {
+    document.head.appendChild(link);
+  }
+  return link;
+}
+function prefetchModules(href, priority) {
+  const manifest = window.__FLIGHT_MANIFEST__;
+  if (!manifest?.routes) return;
+  const routeModules = manifest.routes[href];
+  if (!routeModules) return;
+  for (const module of routeModules) {
+    createPrefetchLink(module, "script", priority);
+  }
+}
+function prefetchData(href, priority) {
+  const dataUrl = `/_flight/data${href === "/" ? "/index" : href}.json`;
+  createPrefetchLink(dataUrl, "fetch", priority);
+}
+var sharedObserver = null;
+var observerCallbacks = /* @__PURE__ */ new Map();
+function getViewportObserver() {
+  if (!supportsIntersectionObserver) return null;
+  if (!sharedObserver) {
+    sharedObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const callback = observerCallbacks.get(entry.target);
+            if (callback) {
+              callback();
+              sharedObserver?.unobserve(entry.target);
+              observerCallbacks.delete(entry.target);
+            }
+          }
+        }
+      },
+      {
+        // Start prefetching when link is 25% visible or within 100px of viewport
+        rootMargin: "100px",
+        threshold: 0.25
+      }
+    );
+  }
+  return sharedObserver;
+}
+function observeForPrefetch(element, href) {
+  if (!supportsIntersectionObserver) {
+    return () => {
+    };
+  }
+  const observer = getViewportObserver();
+  if (!observer) return () => {
+  };
+  const callback = () => {
+    prefetch(href, { priority: "low" });
+  };
+  observerCallbacks.set(element, callback);
+  observer.observe(element);
+  const cleanup = () => {
+    observer.unobserve(element);
+    observerCallbacks.delete(element);
+    viewportObservers.delete(element);
+  };
+  viewportObservers.set(element, cleanup);
+  return cleanup;
+}
+function setupIntentPrefetch(element, href) {
+  if (!isBrowser2) return () => {
+  };
+  let prefetchTriggered = false;
+  const handleIntent = () => {
+    if (!prefetchTriggered) {
+      prefetchTriggered = true;
+      prefetch(href, { priority: "auto" });
+    }
+  };
+  element.addEventListener("mouseenter", handleIntent, { passive: true });
+  element.addEventListener("focus", handleIntent, { passive: true });
+  element.addEventListener("touchstart", handleIntent, { passive: true });
+  return () => {
+    element.removeEventListener("mouseenter", handleIntent);
+    element.removeEventListener("focus", handleIntent);
+    element.removeEventListener("touchstart", handleIntent);
+  };
+}
+function normalizeUrl(href) {
+  if (isBrowser2 && !href.startsWith("http")) {
+    try {
+      const url = new URL(href, window.location.origin);
+      return url.pathname + url.search;
+    } catch {
+      return href;
+    }
+  }
+  return href;
+}
+
+// src/link.ts
+var isBrowser3 = typeof window !== "undefined";
 function handleLinkClick(href, options, event) {
   if (event && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
     return;
   }
+  if (event && event.button !== 0) {
+    return;
+  }
   event?.preventDefault();
   const { navigate: navigate2 } = getRouterContext();
   navigate2(href, options);
 }
 function isExternalUrl(href) {
   if (!href) return false;
-  return href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//") || href.startsWith("mailto:") || href.startsWith("tel:");
+  return href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//") || href.startsWith("mailto:") || href.startsWith("tel:") || href.startsWith("javascript:") || href.startsWith("#");
+}
+function normalizePrefetchStrategy(prefetchProp) {
+  if (prefetchProp === true) {
+    return "intent";
+  }
+  if (prefetchProp === false || prefetchProp === void 0) {
+    return "none";
+  }
+  return prefetchProp;
 }
 function prefetchRoute(href) {
-  if (!isBrowser2) return;
-  const link = document.createElement("link");
-  link.rel = "prefetch";
-  link.href = href;
-  document.head.appendChild(link);
+  prefetch(href);
 }
 var Link = null;
 if (typeof globalThis !== "undefined") {
@@ -137,58 +303,196 @@ if (typeof globalThis !== "undefined") {
         className,
         target,
         rel,
-        prefetch: prefetch2 = false,
+        prefetch: prefetchProp = "none",
         replace = false,
         scroll = true,
         onClick,
+        "aria-label": ariaLabel,
         ...props
       }) {
         const linkRef = useRef(null);
         const isExternal = isExternalUrl(href);
-        const handleClick = useCallback((e) => {
-          if (onClick) {
-            onClick(e);
-            if (e.defaultPrevented) return;
-          }
-          if (isExternal || target === "_blank") return;
-          handleLinkClick(href, { replace, scroll }, e);
-        }, [href, isExternal, target, replace, scroll, onClick]);
+        const prefetchStrategy = normalizePrefetchStrategy(prefetchProp);
+        const handleClick = useCallback(
+          (e) => {
+            if (onClick) {
+              onClick(e);
+              if (e.defaultPrevented) return;
+            }
+            if (isExternal || target === "_blank") return;
+            handleLinkClick(href, { replace, scroll }, e);
+          },
+          [href, isExternal, target, replace, scroll, onClick]
+        );
         useEffect(() => {
-          if (!prefetch2 || isExternal || !isBrowser2) return;
+          if (isExternal || !isBrowser3 || prefetchStrategy === "none") {
+            return;
+          }
           const link = linkRef.current;
           if (!link) return;
-          let prefetched = false;
-          const doPrefetch = () => {
-            if (!prefetched) {
-              prefetched = true;
-              prefetchRoute(href);
-            }
-          };
-          link.addEventListener("mouseenter", doPrefetch);
-          link.addEventListener("focus", doPrefetch);
-          return () => {
-            link.removeEventListener("mouseenter", doPrefetch);
-            link.removeEventListener("focus", doPrefetch);
-          };
-        }, [href, prefetch2, isExternal]);
+          switch (prefetchStrategy) {
+            case "render":
+              prefetch(href, { priority: "low" });
+              break;
+            case "viewport":
+              return observeForPrefetch(link, href);
+            case "intent":
+            default:
+              return setupIntentPrefetch(link, href);
+          }
+        }, [href, prefetchStrategy, isExternal]);
         const computedRel = isExternal && target === "_blank" ? rel || "noopener noreferrer" : rel;
-        return React.createElement("a", {
-          ref: linkRef,
-          href,
-          className,
-          target,
-          rel: computedRel,
-          onClick: handleClick,
-          ...props
-        }, children);
+        return React.createElement(
+          "a",
+          {
+            ref: linkRef,
+            href,
+            className,
+            target,
+            rel: computedRel,
+            "aria-label": ariaLabel,
+            onClick: handleClick,
+            ...props
+          },
+          children
+        );
       };
     }
   } catch {
   }
 }
+function createLink(props) {
+  const {
+    href,
+    children,
+    className,
+    target,
+    rel,
+    prefetch: prefetchProp = "none",
+    replace = false,
+    scroll = true
+  } = props;
+  const anchor = document.createElement("a");
+  anchor.href = href;
+  anchor.className = className || "";
+  if (target) anchor.target = target;
+  if (rel) anchor.rel = rel;
+  if (typeof children === "string") {
+    anchor.textContent = children;
+  }
+  const isExternal = isExternalUrl(href);
+  const prefetchStrategy = normalizePrefetchStrategy(prefetchProp);
+  if (!isExternal && target !== "_blank") {
+    anchor.addEventListener("click", (e) => {
+      handleLinkClick(href, { replace, scroll }, e);
+    });
+  }
+  if (!isExternal && prefetchStrategy !== "none") {
+    switch (prefetchStrategy) {
+      case "render":
+        prefetch(href, { priority: "low" });
+        break;
+      case "viewport":
+        observeForPrefetch(anchor, href);
+        break;
+      case "intent":
+      default:
+        setupIntentPrefetch(anchor, href);
+        break;
+    }
+  }
+  return anchor;
+}
+function useLinkProps(href, options = {}) {
+  const { replace = false, scroll = true, prefetch: prefetchProp = "none" } = options;
+  const isExternal = isExternalUrl(href);
+  const prefetchStrategy = normalizePrefetchStrategy(prefetchProp);
+  const result = {
+    href,
+    onClick: (e) => {
+      if (!isExternal) {
+        handleLinkClick(href, { replace, scroll }, e);
+      }
+    }
+  };
+  if (prefetchStrategy === "intent" && !isExternal) {
+    let prefetched = false;
+    const doPrefetch = () => {
+      if (!prefetched) {
+        prefetched = true;
+        prefetch(href);
+      }
+    };
+    result.onMouseenter = doPrefetch;
+    result.onFocus = doPrefetch;
+  }
+  if (prefetchStrategy === "render" && !isExternal && isBrowser3) {
+    prefetch(href, { priority: "low" });
+  }
+  return result;
+}
+
+// src/prefetch-links.ts
+var isBrowser4 = typeof window !== "undefined";
+var PrefetchPageLinks = null;
+if (typeof globalThis !== "undefined") {
+  try {
+    const React = globalThis.React;
+    if (React?.createElement && "useEffect" in React) {
+      const { useEffect, useState } = React;
+      PrefetchPageLinks = function FlightPrefetchPageLinks({
+        page,
+        options = {}
+      }) {
+        const [shouldRender, setShouldRender] = useState(false);
+        useEffect(() => {
+          if (!isBrowser4) return;
+          if (isPrefetched(page)) {
+            return;
+          }
+          prefetch(page, {
+            priority: "low",
+            includeModules: true,
+            ...options
+          });
+          setShouldRender(false);
+        }, [page, options]);
+        return null;
+      };
+    }
+  } catch {
+  }
+}
+function prefetchPages(pages, options = {}) {
+  if (!isBrowser4) return;
+  for (const page of pages) {
+    if (!isPrefetched(page)) {
+      prefetch(page, {
+        priority: "low",
+        ...options
+      });
+    }
+  }
+}
+function prefetchWhenIdle(page, options = {}) {
+  if (!isBrowser4) return;
+  const doPrefetch = () => {
+    if (!isPrefetched(page)) {
+      prefetch(page, {
+        priority: "low",
+        ...options
+      });
+    }
+  };
+  if ("requestIdleCallback" in window) {
+    window.requestIdleCallback(doPrefetch, { timeout: 3e3 });
+  } else {
+    setTimeout(doPrefetch, 100);
+  }
+}
 
 // src/hooks.ts
-var isBrowser3 = typeof window !== "undefined";
+var isBrowser5 = typeof window !== "undefined";
 var useParams = () => ({});
 var useSearchParams = () => [new URLSearchParams(), () => {
 }];
@@ -210,10 +514,10 @@ if (typeof globalThis !== "undefined") {
       };
       useSearchParams = function useFlightSearchParams() {
         const [searchParams, setSearchParamsState] = useState(
-          () => isBrowser3 ? new URLSearchParams(window.location.search) : new URLSearchParams()
+          () => isBrowser5 ? new URLSearchParams(window.location.search) : new URLSearchParams()
         );
         useEffect(() => {
-          if (!isBrowser3) return;
+          if (!isBrowser5) return;
           const handleChange = () => {
             setSearchParamsState(new URLSearchParams(window.location.search));
           };
@@ -221,7 +525,7 @@ if (typeof globalThis !== "undefined") {
           return () => window.removeEventListener("popstate", handleChange);
         }, []);
         const setSearchParams = useCallback((newParams) => {
-          if (!isBrowser3) return;
+          if (!isBrowser5) return;
           let params;
           if (newParams instanceof URLSearchParams) {
             params = newParams;
@@ -245,7 +549,7 @@ if (typeof globalThis !== "undefined") {
         const { path } = getRouterContext();
         const [pathname, setPathname] = useState(path);
         useEffect(() => {
-          if (!isBrowser3) return;
+          if (!isBrowser5) return;
           const handleChange = () => {
             setPathname(window.location.pathname);
           };
@@ -260,20 +564,11 @@ if (typeof globalThis !== "undefined") {
 }
 
 // src/navigate.ts
-var isBrowser4 = typeof window !== "undefined";
+var isBrowser6 = typeof window !== "undefined";
 function navigate(to, options = {}) {
   const { navigate: routerNavigate } = getRouterContext();
   routerNavigate(to, options);
 }
-function prefetch(href) {
-  if (!isBrowser4) return;
-  const existing = document.querySelector(`link[rel="prefetch"][href="${href}"]`);
-  if (existing) return;
-  const link = document.createElement("link");
-  link.rel = "prefetch";
-  link.href = href;
-  document.head.appendChild(link);
-}
 function patternToRegex(pattern) {
   const paramNames = [];
   let regexStr = pattern.replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/\\\[\.\.\.(\w+)\\\]/g, (_, name) => {
@@ -308,14 +603,63 @@ function parseParams(pathname, pattern) {
   const { params } = matchRoute(pathname, pattern);
   return params;
 }
+function findRoute(pathname, routes) {
+  for (const route of routes) {
+    const { matched, params } = matchRoute(pathname, route.path);
+    if (matched) {
+      return {
+        route,
+        params,
+        pathname
+      };
+    }
+  }
+  return null;
+}
+function generatePath(pattern, params = {}) {
+  let path = pattern;
+  path = path.replace(/\[(\w+)\]/g, (_, name) => {
+    return params[name] || "";
+  });
+  path = path.replace(/:(\w+)/g, (_, name) => {
+    return params[name] || "";
+  });
+  return path;
+}
+function isActive(pattern) {
+  const { path } = getRouterContext();
+  const { matched } = matchRoute(path, pattern);
+  return matched;
+}
+function redirect(url) {
+  if (isBrowser6) {
+    window.location.href = url;
+  }
+  throw new Error(`Redirect to: ${url}`);
+}
 export {
   Link,
+  PrefetchPageLinks,
   RouterContext,
   RouterProvider,
+  clearPrefetchCache,
+  createLink,
+  findRoute,
+  generatePath,
+  isActive,
+  isPrefetched,
   matchRoute,
   navigate,
+  observeForPrefetch,
   parseParams,
   prefetch,
+  prefetchAll,
+  prefetchPages,
+  prefetchRoute,
+  prefetchWhenIdle,
+  redirect,
+  setupIntentPrefetch,
+  useLinkProps,
   useParams,
   usePathname,
   useRouter,

package/package.json

@@ -1,48 +1,48 @@
-{
-  "name": "@flight-framework/router",
-  "version": "0.0.2",
-  "description": "Agnostic client-side routing primitives for Flight Framework",
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "keywords": [
-    "flight",
-    "router",
-    "spa",
-    "navigation",
-    "ssr"
-  ],
-  "author": "Flight Framework",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/EliosLT/Flight-framework",
-    "directory": "packages/router"
-  },
-  "devDependencies": {
-    "tsup": "^8.0.0",
-    "typescript": "^5.3.0"
-  },
-  "peerDependencies": {
-    "react": ">=18.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    }
-  },
-  "scripts": {
-    "build": "tsup src/index.ts --format esm --dts --clean",
-    "dev": "tsup src/index.ts --format esm --dts --watch"
-  }
-}
+{
+    "name": "@flight-framework/router",
+    "version": "0.0.4",
+    "description": "Agnostic client-side routing primitives for Flight Framework",
+    "type": "module",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "tsup src/index.ts --format esm --dts --clean",
+        "dev": "tsup src/index.ts --format esm --dts --watch"
+    },
+    "keywords": [
+        "flight",
+        "router",
+        "spa",
+        "navigation",
+        "ssr"
+    ],
+    "author": "Flight Framework",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/EliosLT/Flight-framework",
+        "directory": "packages/router"
+    },
+    "devDependencies": {
+        "tsup": "^8.0.0",
+        "typescript": "^5.3.0"
+    },
+    "peerDependencies": {
+        "react": ">=18.0.0"
+    },
+    "peerDependenciesMeta": {
+        "react": {
+            "optional": true
+        }
+    }
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024-2026 Flight Contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.