@flightdev/router 0.4.0

package/dist/vue/index.js

@@ -0,0 +1,658 @@
+// src/context.ts
+var isBrowser = typeof window !== "undefined";
+var currentContext = {
+  path: "/",
+  searchParams: new URLSearchParams(),
+  navigate: () => {
+  },
+  back: () => {
+  },
+  forward: () => {
+  }
+};
+var subscribers = /* @__PURE__ */ new Set();
+function subscribe(callback) {
+  subscribers.add(callback);
+  return () => subscribers.delete(callback);
+}
+function getRouterContext() {
+  return currentContext;
+}
+function updateContext(updates) {
+  currentContext = { ...currentContext, ...updates };
+  subscribers.forEach((cb) => cb(currentContext));
+}
+function navigateTo(to, options = {}) {
+  if (!isBrowser) return;
+  const { replace = false, scroll = true, state } = options;
+  if (replace) {
+    window.history.replaceState(state ?? null, "", to);
+  } else {
+    window.history.pushState(state ?? null, "", to);
+  }
+  const url = new URL(to, window.location.origin);
+  updateContext({
+    path: url.pathname,
+    searchParams: url.searchParams
+  });
+  if (scroll) {
+    window.scrollTo({ top: 0, left: 0, behavior: "instant" });
+  }
+}
+function initRouter(options = {}) {
+  const { initialPath, basePath = "" } = options;
+  let path;
+  let searchParams;
+  if (isBrowser) {
+    path = window.location.pathname;
+    searchParams = new URLSearchParams(window.location.search);
+  } else {
+    path = initialPath || "/";
+    searchParams = new URLSearchParams();
+  }
+  if (basePath && path.startsWith(basePath)) {
+    path = path.slice(basePath.length) || "/";
+  }
+  currentContext = {
+    path,
+    searchParams,
+    navigate: navigateTo,
+    back: () => isBrowser && window.history.back(),
+    forward: () => isBrowser && window.history.forward()
+  };
+  if (isBrowser) {
+    window.addEventListener("popstate", () => {
+      updateContext({
+        path: window.location.pathname,
+        searchParams: new URLSearchParams(window.location.search)
+      });
+    });
+    const originalPushState = history.pushState.bind(history);
+    const originalReplaceState = history.replaceState.bind(history);
+    history.pushState = function(state, unused, url) {
+      originalPushState(state, unused, url);
+      if (url) {
+        const newUrl = new URL(url.toString(), window.location.origin);
+        updateContext({
+          path: newUrl.pathname,
+          searchParams: newUrl.searchParams
+        });
+      }
+    };
+    history.replaceState = function(state, unused, url) {
+      originalReplaceState(state, unused, url);
+      if (url) {
+        const newUrl = new URL(url.toString(), window.location.origin);
+        updateContext({
+          path: newUrl.pathname,
+          searchParams: newUrl.searchParams
+        });
+      }
+    };
+  }
+}
+var initialized = false;
+if (isBrowser && !initialized) {
+  initialized = true;
+  initRouter();
+}
+var RouterContext = null;
+var RouterProvider = null;
+var useRouter = getRouterContext;
+if (typeof globalThis !== "undefined") {
+  try {
+    const React = globalThis.React;
+    if (React?.createContext) {
+      const { createContext, useState, useEffect, useContext } = React;
+      const ReactRouterContext = createContext(currentContext);
+      RouterContext = ReactRouterContext;
+      RouterProvider = function FlightRouterProvider({
+        children,
+        initialPath,
+        basePath = ""
+      }) {
+        const [routerState, setRouterState] = useState(() => {
+          const path = isBrowser ? window.location.pathname : initialPath || "/";
+          const searchParams = isBrowser ? new URLSearchParams(window.location.search) : new URLSearchParams();
+          return {
+            path: basePath && path.startsWith(basePath) ? path.slice(basePath.length) || "/" : path,
+            searchParams,
+            navigate: navigateTo,
+            back: () => isBrowser && window.history.back(),
+            forward: () => isBrowser && window.history.forward()
+          };
+        });
+        useEffect(() => {
+          if (!isBrowser) return;
+          const handlePopState = () => {
+            let path = window.location.pathname;
+            if (basePath && path.startsWith(basePath)) {
+              path = path.slice(basePath.length) || "/";
+            }
+            setRouterState((prev) => ({
+              ...prev,
+              path,
+              searchParams: new URLSearchParams(window.location.search)
+            }));
+          };
+          window.addEventListener("popstate", handlePopState);
+          return () => window.removeEventListener("popstate", handlePopState);
+        }, [basePath]);
+        useEffect(() => {
+          return subscribe((ctx) => {
+            setRouterState((prev) => ({
+              ...prev,
+              path: ctx.path,
+              searchParams: ctx.searchParams
+            }));
+          });
+        }, []);
+        return React.createElement(
+          ReactRouterContext.Provider,
+          { value: routerState },
+          children
+        );
+      };
+      useRouter = function useFlightRouter() {
+        return useContext(ReactRouterContext);
+      };
+    }
+  } catch {
+  }
+}
+
+// src/navigate.ts
+var isBrowser2 = typeof window !== "undefined";
+function navigate(to, options = {}) {
+  const { navigate: routerNavigate } = getRouterContext();
+  routerNavigate(to, options);
+}
+function patternToRegex(pattern) {
+  const paramNames = [];
+  let regexStr = pattern.replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/\\\[\.\.\.(\w+)\\\]/g, (_, name) => {
+    paramNames.push(name);
+    return "(.+)";
+  }).replace(/\\\[(\w+)\\\]/g, (_, name) => {
+    paramNames.push(name);
+    return "([^/]+)";
+  }).replace(/:(\w+)/g, (_, name) => {
+    paramNames.push(name);
+    return "([^/]+)";
+  });
+  regexStr = `^${regexStr}$`;
+  return {
+    regex: new RegExp(regexStr),
+    paramNames
+  };
+}
+function matchRoute(pathname, pattern) {
+  const { regex, paramNames } = patternToRegex(pattern);
+  const match = pathname.match(regex);
+  if (!match) {
+    return { matched: false, params: {} };
+  }
+  const params = {};
+  paramNames.forEach((name, index) => {
+    params[name] = match[index + 1] || "";
+  });
+  return { matched: true, params };
+}
+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 (isBrowser2) {
+    window.location.href = url;
+  }
+  throw new Error(`Redirect to: ${url}`);
+}
+
+// src/prefetch.ts
+var isBrowser3 = typeof window !== "undefined";
+var supportsIntersectionObserver = isBrowser3 && "IntersectionObserver" in window;
+var prefetchedUrls = /* @__PURE__ */ new Set();
+var prefetchingUrls = /* @__PURE__ */ new Set();
+var viewportObservers = /* @__PURE__ */ new Map();
+function prefetch(href, options = {}) {
+  if (!isBrowser3) 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 (!isBrowser3) 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 (!isBrowser3) 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 (isBrowser3 && !href.startsWith("http")) {
+    try {
+      const url = new URL(href, window.location.origin);
+      return url.pathname + url.search;
+    } catch {
+      return href;
+    }
+  }
+  return href;
+}
+
+// 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/vue/Link.ts
+import { defineComponent, ref, onMounted, onUnmounted, h } from "vue";
+var isBrowser5 = typeof window !== "undefined";
+function isExternalUrl(href) {
+  if (!href) return false;
+  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;
+}
+var Link = defineComponent({
+  name: "FlightLink",
+  props: {
+    href: {
+      type: String,
+      required: true
+    },
+    prefetch: {
+      type: [Boolean, String],
+      default: "none"
+    },
+    replace: {
+      type: Boolean,
+      default: false
+    },
+    scroll: {
+      type: Boolean,
+      default: true
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    target: {
+      type: String,
+      default: void 0
+    },
+    rel: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const linkRef = ref(null);
+    const isExternal = isExternalUrl(props.href);
+    const prefetchStrategy = normalizePrefetchStrategy(props.prefetch);
+    let cleanup;
+    onMounted(() => {
+      if (isExternal || !isBrowser5 || prefetchStrategy === "none") {
+        return;
+      }
+      const link = linkRef.value;
+      if (!link) return;
+      switch (prefetchStrategy) {
+        case "render":
+          prefetch(props.href, { priority: "low" });
+          break;
+        case "viewport":
+          cleanup = observeForPrefetch(link, props.href);
+          break;
+        case "intent":
+        default:
+          cleanup = setupIntentPrefetch(link, props.href);
+          break;
+      }
+    });
+    onUnmounted(() => {
+      cleanup?.();
+    });
+    const handleClick = (e) => {
+      if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+        return;
+      }
+      if (e.button !== 0) {
+        return;
+      }
+      if (isExternal || props.target === "_blank") {
+        return;
+      }
+      e.preventDefault();
+      const { navigate: navigate2 } = getRouterContext();
+      navigate2(props.href, { replace: props.replace, scroll: props.scroll });
+    };
+    const computedRel = isExternal && props.target === "_blank" ? props.rel || "noopener noreferrer" : props.rel;
+    return () => h("a", {
+      ref: linkRef,
+      href: props.href,
+      class: props.class,
+      target: props.target,
+      rel: computedRel,
+      onClick: handleClick
+    }, slots.default?.());
+  }
+});
+
+// src/vue/composables.ts
+import { ref as ref2, provide, inject, onMounted as onMounted2, onUnmounted as onUnmounted2 } from "vue";
+var isBrowser6 = typeof window !== "undefined";
+var RouterKey = /* @__PURE__ */ Symbol("FlightRouter");
+function navigateTo2(to, options = {}) {
+  if (!isBrowser6) return;
+  const { replace = false, scroll = true, state } = options;
+  if (replace) {
+    window.history.replaceState(state ?? null, "", to);
+  } else {
+    window.history.pushState(state ?? null, "", to);
+  }
+  if (scroll) {
+    window.scrollTo({ top: 0, left: 0, behavior: "instant" });
+  }
+}
+function RouterProvider2(props, { slots }) {
+  const path = ref2(isBrowser6 ? window.location.pathname : props.initialPath || "/");
+  const searchParams = ref2(isBrowser6 ? new URLSearchParams(window.location.search) : new URLSearchParams());
+  const routerState = ref2({
+    path: path.value,
+    searchParams: searchParams.value,
+    navigate: navigateTo2,
+    back: () => isBrowser6 && window.history.back(),
+    forward: () => isBrowser6 && window.history.forward()
+  });
+  provide(RouterKey, routerState);
+  if (isBrowser6) {
+    onMounted2(() => {
+      const handlePopState = () => {
+        path.value = window.location.pathname;
+        searchParams.value = new URLSearchParams(window.location.search);
+        routerState.value = {
+          ...routerState.value,
+          path: path.value,
+          searchParams: searchParams.value
+        };
+      };
+      window.addEventListener("popstate", handlePopState);
+      const unsubscribe = subscribe((ctx) => {
+        path.value = ctx.path;
+        searchParams.value = ctx.searchParams;
+        routerState.value = {
+          ...routerState.value,
+          path: ctx.path,
+          searchParams: ctx.searchParams
+        };
+      });
+      onUnmounted2(() => {
+        window.removeEventListener("popstate", handlePopState);
+        unsubscribe();
+      });
+    });
+  }
+  return slots.default?.();
+}
+function useRouter2() {
+  const routerState = inject(RouterKey);
+  if (routerState) {
+    return routerState.value;
+  }
+  return getRouterContext();
+}
+function usePathname() {
+  const routerState = inject(RouterKey);
+  if (routerState) {
+    return ref2(routerState.value.path);
+  }
+  return ref2(isBrowser6 ? window.location.pathname : "/");
+}
+function useSearchParams() {
+  const routerState = inject(RouterKey);
+  if (routerState) {
+    return ref2(routerState.value.searchParams);
+  }
+  return ref2(isBrowser6 ? new URLSearchParams(window.location.search) : new URLSearchParams());
+}
+function useParams() {
+  return ref2({});
+}
+export {
+  Link,
+  RouterProvider2 as RouterProvider,
+  clearPrefetchCache,
+  findRoute,
+  generatePath,
+  getRouterContext,
+  initRouter,
+  isActive,
+  isPrefetched,
+  matchRoute,
+  navigate,
+  observeForPrefetch,
+  parseParams,
+  prefetch,
+  prefetchAll,
+  prefetchPages,
+  prefetchWhenIdle,
+  redirect,
+  setupIntentPrefetch,
+  subscribe,
+  useParams,
+  usePathname,
+  useRouter2 as useRouter,
+  useSearchParams
+};