@fictjs/router 0.4.0 → 0.5.1

package/dist/index.js

@@ -1,19 +1,34 @@
 // src/components.tsx
 import {
   createEffect,
-  onCleanup,
   createMemo,
-  batch,
-  untrack,
-  startTransition,
   Fragment,
   Suspense,
   ErrorBoundary
 } from "@fictjs/runtime";
-import { createSignal } from "@fictjs/runtime/advanced";
+import { createSignal as createSignal3 } from "@fictjs/runtime/advanced";
+
+// src/accessor-utils.ts
+function wrapAccessor(fn) {
+  const wrapped = ((...args) => {
+    if (args.length === 0) return wrapped;
+    return fn(...args);
+  });
+  return wrapped;
+}
+function wrapValue(value) {
+  const wrapped = (() => value);
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    const primitive = value;
+    wrapped.toString = () => String(primitive);
+    wrapped.valueOf = () => primitive;
+  }
+  return wrapped;
+}
 
 // src/context.ts
-import { createContext, useContext } from "@fictjs/runtime";
+import { batch, createContext, useContext } from "@fictjs/runtime";
+import { createSignal } from "@fictjs/runtime/advanced";
 
 // src/utils.ts
 function normalizePath(path) {
@@ -342,23 +357,76 @@ function isBrowser() {
 }
 
 // src/context.ts
-var defaultRouterContext = {
-  location: () => ({
-    pathname: "/",
-    search: "",
-    hash: "",
-    state: null,
-    key: "default"
-  }),
-  params: () => ({}),
-  matches: () => [],
-  navigate: () => {
+function readAccessor(value) {
+  return typeof value === "function" ? value() : value;
+}
+var activeRouter = createSignal(null);
+var activeRouterStack = [];
+function pushActiveRouter(router) {
+  activeRouterStack.push(router);
+  batch(() => {
+    activeRouter(router);
+  });
+}
+function popActiveRouter(router) {
+  const index = activeRouterStack.lastIndexOf(router);
+  if (index >= 0) {
+    activeRouterStack.splice(index, 1);
+  }
+  batch(() => {
+    activeRouter(activeRouterStack[activeRouterStack.length - 1] ?? null);
+  });
+}
+var defaultLocation = {
+  pathname: "/",
+  search: "",
+  hash: "",
+  state: null,
+  key: "default"
+};
+var defaultNavigate = wrapAccessor(((toOrDelta) => {
+  const router = activeRouter();
+  if (!router) {
     console.warn("[fict-router] No router found. Wrap your app in a <Router>");
+    return;
+  }
+  const navigate = readAccessor(router.navigate);
+  if (typeof toOrDelta === "number") {
+    return navigate(toOrDelta);
+  }
+  return navigate(toOrDelta);
+}));
+var defaultResolvePath = wrapAccessor((to) => {
+  const router = activeRouter();
+  if (router) {
+    return readAccessor(router.resolvePath)(to);
+  }
+  return typeof to === "string" ? to : to.pathname || "/";
+});
+var defaultRouterContext = {
+  location: () => {
+    const router = activeRouter();
+    return router ? readAccessor(router.location) : defaultLocation;
+  },
+  params: () => {
+    const router = activeRouter();
+    return router ? readAccessor(router.params) : {};
+  },
+  matches: () => {
+    const router = activeRouter();
+    return router ? readAccessor(router.matches) : [];
+  },
+  navigate: defaultNavigate,
+  isRouting: () => {
+    const router = activeRouter();
+    return router ? readAccessor(router.isRouting) : false;
+  },
+  pendingLocation: () => {
+    const router = activeRouter();
+    return router ? readAccessor(router.pendingLocation) : null;
   },
-  isRouting: () => false,
-  pendingLocation: () => null,
-  base: "",
-  resolvePath: (to) => typeof to === "string" ? to : to.pathname || "/"
+  base: wrapValue(""),
+  resolvePath: defaultResolvePath
 };
 var RouterContext = createContext(defaultRouterContext);
 RouterContext.displayName = "RouterContext";
@@ -369,17 +437,50 @@ var defaultRouteContext = {
   match: () => void 0,
   data: () => void 0,
   outlet: () => null,
-  resolvePath: (to) => typeof to === "string" ? to : to.pathname || "/"
+  resolvePath: wrapAccessor((to) => typeof to === "string" ? to : to.pathname || "/")
 };
 var RouteContext = createContext(defaultRouteContext);
 RouteContext.displayName = "RouteContext";
 function useRoute() {
   return useContext(RouteContext);
 }
+var activeBeforeLeave = createSignal(null);
+var activeBeforeLeaveStack = [];
+function pushActiveBeforeLeave(context) {
+  activeBeforeLeaveStack.push(context);
+  batch(() => {
+    activeBeforeLeave(context);
+  });
+}
+function popActiveBeforeLeave(context) {
+  const index = activeBeforeLeaveStack.lastIndexOf(context);
+  if (index >= 0) {
+    activeBeforeLeaveStack.splice(index, 1);
+  }
+  batch(() => {
+    activeBeforeLeave(activeBeforeLeaveStack[activeBeforeLeaveStack.length - 1] ?? null);
+  });
+}
 var defaultBeforeLeaveContext = {
-  addHandler: () => () => {
-  },
-  confirm: async () => true
+  addHandler: wrapAccessor((handler) => {
+    const context = activeBeforeLeave();
+    if (context) {
+      return readAccessor(
+        context.addHandler
+      )(handler);
+    }
+    return () => {
+    };
+  }),
+  confirm: wrapAccessor((to, from) => {
+    const context = activeBeforeLeave();
+    if (context) {
+      return readAccessor(
+        context.confirm
+      )(to, from);
+    }
+    return Promise.resolve(true);
+  })
 };
 var BeforeLeaveContext = createContext(defaultBeforeLeaveContext);
 BeforeLeaveContext.displayName = "BeforeLeaveContext";
@@ -394,27 +495,28 @@ var RouteErrorContext = createContext(defaultRouteErrorContext);
 RouteErrorContext.displayName = "RouteErrorContext";
 function useNavigate() {
   const router = useRouter();
-  return router.navigate;
+  return readAccessor(router.navigate);
 }
 function useLocation() {
   const router = useRouter();
-  return router.location;
+  return () => readAccessor(router.location);
 }
 function useParams() {
   const router = useRouter();
-  return router.params;
+  return () => readAccessor(router.params);
 }
 function useSearchParams() {
   const router = useRouter();
   const getSearchParams = () => {
-    const location = router.location();
+    const location = readAccessor(router.location);
     return new URLSearchParams(location.search);
   };
   const setSearchParams = (params, options) => {
     const searchParams = params instanceof URLSearchParams ? params : new URLSearchParams(params);
     const search = searchParams.toString();
-    const location = router.location();
-    router.navigate(
+    const location = readAccessor(router.location);
+    const navigate = readAccessor(router.navigate);
+    navigate(
       {
         pathname: location.pathname,
         search: search ? "?" + search : "",
@@ -423,23 +525,23 @@ function useSearchParams() {
       { replace: options?.replace }
     );
   };
-  return [getSearchParams, setSearchParams];
+  return [getSearchParams, wrapAccessor(setSearchParams)];
 }
 function useMatches() {
   const router = useRouter();
-  return router.matches;
+  return () => readAccessor(router.matches);
 }
 function useIsRouting() {
   const router = useRouter();
-  return router.isRouting;
+  return () => readAccessor(router.isRouting);
 }
 function usePendingLocation() {
   const router = useRouter();
-  return router.pendingLocation;
+  return () => readAccessor(router.pendingLocation);
 }
 function useRouteData() {
   const route = useRoute();
-  return route.data;
+  return () => readAccessor(route.data);
 }
 function useRouteError() {
   const errorContext = useContext(RouteErrorContext);
@@ -447,20 +549,23 @@ function useRouteError() {
     return errorContext.error;
   }
   const route = useRoute();
-  return route.error?.();
+  const routeError = route.error;
+  if (routeError === void 0) return void 0;
+  return readAccessor(routeError);
 }
 function useResolvedPath(to) {
   const route = useRoute();
   return () => {
     const target = typeof to === "function" ? to() : to;
-    return route.resolvePath(target);
+    const resolvePath2 = readAccessor(route.resolvePath);
+    return resolvePath2(target);
   };
 }
 function useMatch(path) {
   const router = useRouter();
   return () => {
     const targetPath = typeof path === "function" ? path() : path;
-    const matches = router.matches();
+    const matches = readAccessor(router.matches);
     for (const match of matches) {
       if (match.pattern === targetPath || match.pathname === targetPath) {
         return match;
@@ -473,6 +578,7 @@ function useHref(to) {
   const router = useRouter();
   return () => {
     const target = typeof to === "function" ? to() : to;
+    const base = readAccessor(router.base);
     let pathname;
     let search = "";
     let hash = "";
@@ -496,16 +602,17 @@ function useHref(to) {
     }
     let resolved;
     if (pathname === "") {
-      const currentPathname = router.location().pathname;
-      const normalizedBase = router.base === "/" || router.base === "" ? "" : router.base;
+      const currentPathname = readAccessor(router.location).pathname;
+      const normalizedBase = base === "/" || base === "" ? "" : base;
       if (normalizedBase && !currentPathname.startsWith(normalizedBase)) {
         return currentPathname + search + hash;
       }
-      resolved = stripBasePath(currentPathname, router.base);
+      resolved = stripBasePath(currentPathname, base);
     } else {
-      resolved = router.resolvePath(pathname);
+      const resolvePath2 = readAccessor(router.resolvePath);
+      resolved = resolvePath2(pathname);
     }
-    const baseHref = prependBasePath(resolved, router.base);
+    const baseHref = prependBasePath(resolved, base);
     return baseHref + search + hash;
   };
 }
@@ -513,12 +620,14 @@ function useIsActive(to, options) {
   const router = useRouter();
   return () => {
     const target = typeof to === "function" ? to() : to;
-    const resolvedTargetPath = router.resolvePath(target);
-    const currentPath = router.location().pathname;
-    if (router.base && currentPath !== router.base && !currentPath.startsWith(router.base + "/")) {
+    const resolvePath2 = readAccessor(router.resolvePath);
+    const resolvedTargetPath = resolvePath2(target);
+    const currentPath = readAccessor(router.location).pathname;
+    const base = readAccessor(router.base);
+    if (base && currentPath !== base && !currentPath.startsWith(base + "/")) {
       return false;
     }
-    const currentPathWithoutBase = stripBasePath(currentPath, router.base);
+    const currentPathWithoutBase = stripBasePath(currentPath, base);
     if (options?.end) {
       return currentPathWithoutBase === resolvedTargetPath;
     }
@@ -998,6 +1107,37 @@ function createStaticHistory(url) {
   };
 }
 
+// src/router-internals.ts
+var isDevEnv = typeof import.meta !== "undefined" && import.meta.env?.DEV === true || typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+var didWarnBaseMismatch = false;
+function hasBasePrefix(pathname, base) {
+  if (!base) return true;
+  return pathname === base || pathname.startsWith(base + "/");
+}
+function stripBaseOrWarn(pathname, base) {
+  if (!base) return pathname;
+  if (!hasBasePrefix(pathname, base)) {
+    if (isDevEnv && !didWarnBaseMismatch) {
+      didWarnBaseMismatch = true;
+      console.warn(
+        `[fict-router] Location "${pathname}" does not start with base "${base}". No routes matched.`
+      );
+    }
+    return null;
+  }
+  return stripBasePath(pathname, base);
+}
+function stripBaseIfPresent(pathname, base) {
+  if (!base) return pathname;
+  if (!hasBasePrefix(pathname, base)) return pathname;
+  return stripBasePath(pathname, base);
+}
+
+// src/router-provider.ts
+import { batch as batch2, onCleanup, startTransition, untrack } from "@fictjs/runtime";
+import { createSignal as createSignal2 } from "@fictjs/runtime/advanced";
+import { jsx } from "@fictjs/runtime/jsx-runtime";
+
 // src/scroll.ts
 var scrollPositions = /* @__PURE__ */ new Map();
 var MAX_STORED_POSITIONS = 100;
@@ -1120,34 +1260,7 @@ function configureScrollRestoration(options) {
   defaultScrollRestoration = createScrollRestoration(options);
 }
 
-// src/components.tsx
-import { Fragment as Fragment2, jsx } from "fict/jsx-runtime";
-var isDevEnv = typeof import.meta !== "undefined" && import.meta.env?.DEV === true || typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
-var didWarnBaseMismatch = false;
-function hasBasePrefix(pathname, base) {
-  if (!base) return true;
-  return pathname === base || pathname.startsWith(base + "/");
-}
-function stripBaseOrWarn(pathname, base) {
-  if (!base) return pathname;
-  if (!hasBasePrefix(pathname, base)) {
-    if (isDevEnv && !didWarnBaseMismatch) {
-      didWarnBaseMismatch = true;
-      console.warn(
-        `[fict-router] Location "${pathname}" does not start with base "${base}". No routes matched.`
-      );
-    }
-    return null;
-  }
-  return stripBasePath(pathname, base);
-}
-function stripBaseIfPresent(pathname, base) {
-  if (!base) return pathname;
-  if (hasBasePrefix(pathname, base)) {
-    return stripBasePath(pathname, base);
-  }
-  return pathname;
-}
+// src/router-provider.ts
 function createRouterState(history2, routes, base = "") {
   const normalizedBase = normalizePath(base);
   const baseForStrip = normalizedBase === "/" ? "" : normalizedBase;
@@ -1160,10 +1273,10 @@ function createRouterState(history2, routes, base = "") {
   };
   const initialLocation = history2.location;
   const initialMatches = matchWithBase(initialLocation.pathname);
-  const locationSignal = createSignal(initialLocation);
-  const matchesSignal = createSignal(initialMatches);
-  const isRoutingSignal = createSignal(false);
-  const pendingLocationSignal = createSignal(null);
+  const locationSignal = createSignal2(initialLocation);
+  const matchesSignal = createSignal2(initialMatches);
+  const isRoutingSignal = createSignal2(false);
+  const pendingLocationSignal = createSignal2(null);
   const beforeLeaveHandlers = /* @__PURE__ */ new Set();
   let navigationToken = 0;
   const beforeLeave = {
@@ -1174,7 +1287,7 @@ function createRouterState(history2, routes, base = "") {
     async confirm(to, from) {
       if (beforeLeaveHandlers.size === 0) return true;
       const currentToken = ++navigationToken;
-      let defaultPrevented = false;
+      let defaultPrevented = true;
       let retryRequested = false;
       let forceRetry = false;
       const event = {
@@ -1271,12 +1384,14 @@ function createRouterState(history2, routes, base = "") {
     }
     const targetLocation = createLocation(locationSpec, finalState, toKey);
     untrack(async () => {
+      if (beforeLeaveHandlers.size > 0) {
+        pendingLocationSignal(targetLocation);
+      }
       const canNavigate = await beforeLeave.confirm(targetLocation, currentLocation);
       if (!canNavigate) {
-        pendingLocationSignal(null);
         return;
       }
-      batch(() => {
+      batch2(() => {
         isRoutingSignal(true);
         pendingLocationSignal(targetLocation);
       });
@@ -1296,7 +1411,7 @@ function createRouterState(history2, routes, base = "") {
           );
         }
         if (locationsAreEqual(prevLocation, history2.location)) {
-          batch(() => {
+          batch2(() => {
             isRoutingSignal(false);
             pendingLocationSignal(null);
           });
@@ -1306,7 +1421,7 @@ function createRouterState(history2, routes, base = "") {
   };
   const unlisten = history2.listen(({ action: action2, location: newLocation }) => {
     const prevLocation = locationSignal();
-    batch(() => {
+    batch2(() => {
       locationSignal(newLocation);
       const newMatches = matchWithBase(newLocation.pathname);
       matchesSignal(newMatches);
@@ -1339,6 +1454,17 @@ function RouterProvider(props) {
     props.base
   );
   onCleanup(cleanup);
+  const beforeLeaveContext = {
+    addHandler: wrapAccessor(beforeLeave.addHandler),
+    confirm: wrapAccessor(beforeLeave.confirm)
+  };
+  const resolvePathFn = (to) => {
+    const location = state().location;
+    const currentPathWithoutBase = stripBaseOrWarn(location.pathname, normalizedBase) || "/";
+    const rawTargetPath = typeof to === "string" ? to : to.pathname || "/";
+    const targetPath = rawTargetPath.startsWith("/") ? stripBaseIfPresent(rawTargetPath, normalizedBase) : rawTargetPath;
+    return resolvePath(currentPathWithoutBase, targetPath);
+  };
   const routerContext = {
     location: () => state().location,
     params: () => {
@@ -1350,30 +1476,41 @@ function RouterProvider(props) {
       return allParams;
     },
     matches: () => state().matches,
-    navigate,
+    navigate: wrapAccessor(navigate),
     isRouting: () => state().isRouting,
     pendingLocation: () => state().pendingLocation,
-    base: normalizedBase,
-    resolvePath: (to) => {
-      const location = state().location;
-      const currentPathWithoutBase = stripBaseOrWarn(location.pathname, normalizedBase) || "/";
-      const rawTargetPath = typeof to === "string" ? to : to.pathname || "/";
-      const targetPath = rawTargetPath.startsWith("/") ? stripBaseIfPresent(rawTargetPath, normalizedBase) : rawTargetPath;
-      return resolvePath(currentPathWithoutBase, targetPath);
-    }
+    base: wrapValue(normalizedBase),
+    resolvePath: wrapAccessor(resolvePathFn)
   };
-  return /* @__PURE__ */ jsx(RouterContext.Provider, { value: routerContext, children: /* @__PURE__ */ jsx(BeforeLeaveContext.Provider, { value: beforeLeave, children: props.children }) });
+  pushActiveRouter(routerContext);
+  pushActiveBeforeLeave(beforeLeaveContext);
+  onCleanup(() => {
+    popActiveBeforeLeave(beforeLeaveContext);
+    popActiveRouter(routerContext);
+  });
+  const RouterContextProvider = RouterContext.Provider;
+  const BeforeLeaveProvider = BeforeLeaveContext.Provider;
+  return jsx(RouterContextProvider, {
+    value: routerContext,
+    children: jsx(BeforeLeaveProvider, {
+      value: beforeLeaveContext,
+      children: props.children
+    })
+  });
 }
+
+// src/components.tsx
+import { Fragment as Fragment2, jsx as jsx2 } from "fict/jsx-runtime";
 function Router(props) {
   const history2 = props.history || createBrowserHistory();
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ jsx(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx(Routes, { children: props.children }) });
+  return /* @__PURE__ */ jsx2(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx2(Routes, { children: props.children }) });
 }
 function HashRouter(props) {
   const hashOptions = props.hashType ? { hashType: props.hashType } : void 0;
   const history2 = createHashHistory(hashOptions);
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ jsx(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx(Routes, { children: props.children }) });
+  return /* @__PURE__ */ jsx2(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx2(Routes, { children: props.children }) });
 }
 function MemoryRouter(props) {
   const memoryOptions = {};
@@ -1387,12 +1524,12 @@ function MemoryRouter(props) {
     Object.keys(memoryOptions).length > 0 ? memoryOptions : void 0
   );
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ jsx(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx(Routes, { children: props.children }) });
+  return /* @__PURE__ */ jsx2(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx2(Routes, { children: props.children }) });
 }
 function StaticRouter(props) {
   const history2 = createStaticHistory(props.url);
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ jsx(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx(Routes, { children: props.children }) });
+  return /* @__PURE__ */ jsx2(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ jsx2(Routes, { children: props.children }) });
 }
 function Routes(props) {
   const router = useRouter();
@@ -1401,9 +1538,11 @@ function Routes(props) {
   const compiledRoutes = routes.map((r) => compileRoute(r));
   const branches = createBranches(compiledRoutes);
   const currentMatches = createMemo(() => {
-    const location = router.location();
-    const parentMatch = parentRoute.match();
-    const locationPath = stripBaseOrWarn(location.pathname, router.base);
+    const pendingLocation = readAccessor(router.pendingLocation);
+    const location = pendingLocation ?? readAccessor(router.location);
+    const parentMatch = readAccessor(parentRoute.match);
+    const base = readAccessor(router.base);
+    const locationPath = stripBaseOrWarn(location.pathname, base);
     if (locationPath == null) return [];
     let basePath = "/";
     if (parentMatch) {
@@ -1412,16 +1551,14 @@ function Routes(props) {
     const relativePath = locationPath.startsWith(basePath) ? locationPath.slice(basePath.length) || "/" : locationPath;
     return matchRoutes(branches, relativePath) || [];
   });
-  return /* @__PURE__ */ jsx(Fragment2, { children: renderMatches(currentMatches(), 0) });
+  const matches = currentMatches();
+  return /* @__PURE__ */ jsx2(Fragment2, { children: matches.length > 0 ? renderMatches(matches, 0) : null });
 }
 function renderMatches(matches, index) {
-  if (index >= matches.length) {
-    return null;
-  }
   const match = matches[index];
   const route = match.route;
   const router = useRouter();
-  const dataState = createSignal({
+  const dataState = createSignal3({
     data: void 0,
     error: void 0,
     loading: !!route.preload
@@ -1429,7 +1566,7 @@ function renderMatches(matches, index) {
   let preloadToken = 0;
   if (route.preload) {
     createEffect(() => {
-      const location = router.location();
+      const location = readAccessor(router.location);
       const preloadArgs = {
         params: match.params,
         location,
@@ -1448,17 +1585,7 @@ function renderMatches(matches, index) {
       });
     });
   }
-  const routeContext = {
-    match: () => match,
-    data: () => dataState().data,
-    error: () => dataState().error,
-    outlet: () => renderMatches(matches, index + 1),
-    resolvePath: (to) => {
-      const basePath = match.pathname;
-      const targetPath = typeof to === "string" ? to : to.pathname || "/";
-      return resolvePath(basePath, targetPath);
-    }
-  };
+  const outletNode = /* @__PURE__ */ jsx2(Outlet, {});
   const renderContent = () => {
     const state = dataState();
     if (state.error !== void 0 && route.errorElement) {
@@ -1469,26 +1596,39 @@ function renderMatches(matches, index) {
     }
     if (route.component) {
       const Component = route.component;
-      return /* @__PURE__ */ jsx(Component, { params: match.params, location: router.location(), data: state.data, children: /* @__PURE__ */ jsx(Outlet, {}) });
-    } else if (route.element) {
+      return /* @__PURE__ */ jsx2(Component, { params: match.params, location: readAccessor(router.location), data: state.data, children: outletNode });
+    }
+    if (route.element) {
       return route.element;
-    } else if (route.children) {
-      return /* @__PURE__ */ jsx(Outlet, {});
+    }
+    if (route.children) {
+      return outletNode;
     }
     return null;
   };
-  let content = /* @__PURE__ */ jsx(RouteContext.Provider, { value: routeContext, children: renderContent() });
+  const routeContext = {
+    match: () => match,
+    data: () => dataState().data,
+    error: () => dataState().error,
+    outlet: () => index + 1 < matches.length ? renderMatches(matches, index + 1) : null,
+    resolvePath: wrapAccessor((to) => {
+      const basePath = match.pathname;
+      const targetPath = typeof to === "string" ? to : to.pathname || "/";
+      return resolvePath(basePath, targetPath);
+    })
+  };
+  let content = /* @__PURE__ */ jsx2(RouteContext.Provider, { value: routeContext, children: renderContent() });
   if (route.errorElement) {
-    content = /* @__PURE__ */ jsx(
+    content = /* @__PURE__ */ jsx2(
       ErrorBoundary,
       {
-        fallback: (err, reset) => /* @__PURE__ */ jsx(RouteErrorContext.Provider, { value: { error: err, reset }, children: route.errorElement }),
+        fallback: (err, reset) => /* @__PURE__ */ jsx2(RouteErrorContext.Provider, { value: { error: err, reset }, children: route.errorElement }),
         children: content
       }
     );
   }
   if (route.loadingElement) {
-    content = /* @__PURE__ */ jsx(Suspense, { fallback: route.loadingElement, children: content });
+    content = /* @__PURE__ */ jsx2(Suspense, { fallback: route.loadingElement, children: content });
   }
   return content;
 }
@@ -1497,7 +1637,7 @@ function Route(_props) {
 }
 function Outlet() {
   const route = useRoute();
-  return /* @__PURE__ */ jsx(Fragment2, { children: route.outlet() });
+  return readAccessor(route.outlet);
 }
 function Navigate(props) {
   const router = useRouter();
@@ -1554,28 +1694,42 @@ function createRouter(routes, options) {
   return {
     Router: (props) => {
       const history2 = options?.history || createBrowserHistory();
-      return /* @__PURE__ */ jsx(RouterProvider, { history: history2, routes, base: options?.base, children: props.children || /* @__PURE__ */ jsx(Routes, { children: routesToElements(routes) }) });
+      return /* @__PURE__ */ jsx2(RouterProvider, { history: history2, routes, base: options?.base, children: props.children || /* @__PURE__ */ jsx2(Routes, { children: routesToElements(routes) }) });
     }
   };
 }
 function routesToElements(routes) {
-  return /* @__PURE__ */ jsx(Fragment2, { children: routes.map((route, i) => {
+  return /* @__PURE__ */ jsx2(Fragment2, { children: routes.map((route, i) => {
     const routeProps = { key: route.key || `route-${i}` };
     if (route.path !== void 0) routeProps.path = route.path;
     if (route.component !== void 0) routeProps.component = route.component;
     if (route.element !== void 0) routeProps.element = route.element;
     if (route.index !== void 0) routeProps.index = route.index;
     if (route.children) routeProps.children = routesToElements(route.children);
-    return /* @__PURE__ */ jsx(Route, { ...routeProps });
+    return /* @__PURE__ */ jsx2(Route, { ...routeProps });
   }) });
 }
 
 // src/link.tsx
 import { createMemo as createMemo2 } from "@fictjs/runtime";
-import { jsx as jsx2 } from "fict/jsx-runtime";
+import { spread } from "@fictjs/runtime/internal";
+import { jsx as jsx3 } from "fict/jsx-runtime";
+var createSpreadRef = (props) => {
+  let current = null;
+  return (el) => {
+    if (!el) {
+      current = null;
+      return;
+    }
+    if (el === current) return;
+    current = el;
+    spread(el, props, false, true);
+  };
+};
 function Link(props) {
   const router = useRouter();
   const href = useHref(() => props.to);
+  const getHrefValue = () => readAccessor(readAccessor(href));
   let preloadTriggered = false;
   const handleClick = (event) => {
     if (props.onClick) {
@@ -1600,7 +1754,7 @@ function Link(props) {
   const triggerPreload = () => {
     if (preloadTriggered || props.disabled || props.prefetch === "none") return;
     preloadTriggered = true;
-    const hrefValue = href();
+    const hrefValue = getHrefValue();
     if (typeof window !== "undefined" && window.dispatchEvent) {
       window.dispatchEvent(
         new CustomEvent("fict-router:preload", {
@@ -1613,14 +1767,16 @@ function Link(props) {
     if (props.prefetch === "intent" || props.prefetch === void 0) {
       triggerPreload();
     }
-    const onMouseEnter = props.onMouseEnter;
+    const propsRecord = props;
+    const onMouseEnter = propsRecord.onMouseEnter;
     if (onMouseEnter) onMouseEnter(event);
   };
   const handleFocus = (event) => {
     if (props.prefetch === "intent" || props.prefetch === void 0) {
       triggerPreload();
     }
-    const onFocus = props.onFocus;
+    const propsRecord = props;
+    const onFocus = propsRecord.onFocus;
     if (onFocus) onFocus(event);
   };
   const {
@@ -1633,20 +1789,24 @@ function Link(props) {
     prefetch,
     disabled,
     onClick: _onClick,
+    onMouseEnter: _onMouseEnter,
+    onFocus: _onFocus,
     children,
     ...anchorProps
   } = props;
+  const anchorRef = createSpreadRef(anchorProps);
+  const spanRef = createSpreadRef(anchorProps);
   if (disabled) {
-    return /* @__PURE__ */ jsx2("span", { ...anchorProps, children });
+    return /* @__PURE__ */ jsx3("span", { ref: spanRef, children });
   }
   if (prefetch === "render") {
     triggerPreload();
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "a",
     {
-      ...anchorProps,
-      href: href(),
+      ref: anchorRef,
+      href: getHrefValue(),
       onClick: handleClick,
       onMouseEnter: handleMouseEnter,
       onFocus: handleFocus,
@@ -1658,12 +1818,14 @@ function NavLink(props) {
   const router = useRouter();
   const isActive = useIsActive(() => props.to, { end: props.end });
   const href = useHref(() => props.to);
+  const getHrefValue = () => readAccessor(readAccessor(href));
   const pendingLocation = usePendingLocation();
   const computeIsPending = () => {
     const pending = pendingLocation();
     if (!pending) return false;
-    const resolvedHref = href();
-    const baseToStrip = router.base === "/" ? "" : router.base;
+    const resolvedHref = getHrefValue();
+    const base = readAccessor(router.base);
+    const baseToStrip = base === "/" ? "" : base;
     const pendingPathWithoutBase = stripBasePath(pending.pathname, baseToStrip);
     const parsed = parseURL(resolvedHref);
     const targetPathWithoutBase = stripBasePath(parsed.pathname, baseToStrip);
@@ -1675,7 +1837,7 @@ function NavLink(props) {
   const getRenderProps = () => ({
     isActive: isActive(),
     isPending: computeIsPending(),
-    isTransitioning: router.isRouting()
+    isTransitioning: readAccessor(router.isRouting)
   });
   const computedClassName = createMemo2(() => {
     const renderProps = getRenderProps();
@@ -1764,18 +1926,30 @@ function NavLink(props) {
     "aria-current": _ariaCurrent,
     ...anchorProps
   } = props;
+  const anchorRef = createSpreadRef(anchorProps);
+  const spanRef = createSpreadRef(anchorProps);
   if (disabled) {
-    return /* @__PURE__ */ jsx2("span", { ...anchorProps, className: computedClassName(), style: computedStyle(), children: computedChildren() });
+    const disabledClassName = computedClassName();
+    const disabledStyle = computedStyle();
+    return /* @__PURE__ */ jsx3(
+      "span",
+      {
+        ref: spanRef,
+        ...disabledClassName !== void 0 ? { class: disabledClassName } : {},
+        ...disabledStyle !== void 0 ? { style: disabledStyle } : {},
+        children: computedChildren()
+      }
+    );
   }
   const finalClassName = computedClassName();
   const finalStyle = computedStyle();
   const finalAriaCurrent = ariaCurrent();
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "a",
     {
-      ...anchorProps,
-      href: href(),
-      ...finalClassName !== void 0 ? { className: finalClassName } : {},
+      ref: anchorRef,
+      href: getHrefValue(),
+      ...finalClassName !== void 0 ? { class: finalClassName } : {},
       ...finalStyle !== void 0 ? { style: finalStyle } : {},
       ...finalAriaCurrent !== void 0 ? { "aria-current": finalAriaCurrent } : {},
       onClick: handleClick,
@@ -1796,7 +1970,7 @@ function Form(props) {
     event.preventDefault();
     const formData = new FormData(form);
     const method2 = props.method?.toUpperCase() || "GET";
-    const actionUrl = props.action || router.location().pathname;
+    const actionUrl = props.action || readAccessor(router.location).pathname;
     if (method2 === "GET") {
       const searchParams = new URLSearchParams();
       formData.forEach((value, key) => {
@@ -1871,11 +2045,12 @@ function Form(props) {
     onSubmit: _onSubmit,
     ...formProps
   } = props;
+  const formRef = createSpreadRef(formProps);
   const htmlMethod = method && ["get", "post"].includes(method) ? method : void 0;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "form",
     {
-      ...formProps,
+      ref: formRef,
       ...action2 !== void 0 ? { action: action2 } : {},
       ...htmlMethod !== void 0 ? { method: htmlMethod } : {},
       onSubmit: handleSubmit,
@@ -1885,8 +2060,8 @@ function Form(props) {
 }
 
 // src/data.ts
-import { createEffect as createEffect2, batch as batch2 } from "@fictjs/runtime";
-import { createSignal as createSignal2 } from "@fictjs/runtime/advanced";
+import { createEffect as createEffect2, batch as batch3 } from "@fictjs/runtime";
+import { createSignal as createSignal4 } from "@fictjs/runtime/advanced";
 var CACHE_DURATION = 3 * 60 * 1e3;
 var PRELOAD_CACHE_DURATION = 5 * 1e3;
 var MAX_CACHE_SIZE = 500;
@@ -1939,9 +2114,9 @@ function query(fn, name) {
         return () => cached.result;
       }
     }
-    const resultSignal = createSignal2(cached?.result);
-    const errorSignal = createSignal2(void 0);
-    const loadingSignal = createSignal2(true);
+    const resultSignal = createSignal4(cached?.result);
+    const errorSignal = createSignal4(void 0);
+    const loadingSignal = createSignal4(true);
     const promise = Promise.resolve(fn(...args)).then((result) => {
       const entry = {
         timestamp: Date.now(),
@@ -1951,13 +2126,13 @@ function query(fn, name) {
       };
       queryCache.set(cacheKey, entry);
       evictOldestEntries();
-      batch2(() => {
+      batch3(() => {
         resultSignal(result);
         loadingSignal(false);
       });
       return result;
     }).catch((error) => {
-      batch2(() => {
+      batch3(() => {
         errorSignal(error);
         loadingSignal(false);
       });
@@ -2026,7 +2201,7 @@ function action(fn, name) {
 function getAction(url) {
   return actionRegistry.get(url);
 }
-var activeSubmissions = createSignal2(/* @__PURE__ */ new Map());
+var activeSubmissions = createSignal4(/* @__PURE__ */ new Map());
 function useSubmission(actionOrUrl) {
   const url = typeof actionOrUrl === "string" ? actionOrUrl : actionOrUrl.url;
   return () => {
@@ -2081,10 +2256,10 @@ function createPreload(fn) {
   };
 }
 function createResource(source, fetcher) {
-  const dataSignal = createSignal2(void 0);
-  const loadingSignal = createSignal2(true);
-  const errorSignal = createSignal2(void 0);
-  const latestSignal = createSignal2(void 0);
+  const dataSignal = createSignal4(void 0);
+  const loadingSignal = createSignal4(true);
+  const errorSignal = createSignal4(void 0);
+  const latestSignal = createSignal4(void 0);
   let currentSource;
   let fetchId = 0;
   const doFetch = async (s, id) => {
@@ -2093,7 +2268,7 @@ function createResource(source, fetcher) {
     try {
       const result = await fetcher(s);
       if (id === fetchId) {
-        batch2(() => {
+        batch3(() => {
           dataSignal(result);
           latestSignal(result);
           loadingSignal(false);
@@ -2103,7 +2278,7 @@ function createResource(source, fetcher) {
       return void 0;
     } catch (err) {
       if (id === fetchId) {
-        batch2(() => {
+        batch3(() => {
           errorSignal(err);
           loadingSignal(false);
         });
@@ -2137,21 +2312,25 @@ function cleanupDataUtilities() {
 }
 
 // src/lazy.tsx
-import "@fictjs/runtime";
-import { createSignal as createSignal3 } from "@fictjs/runtime/advanced";
-import { jsx as jsx3 } from "fict/jsx-runtime";
+import { onCleanup as onCleanup2 } from "@fictjs/runtime";
+import { createSignal as createSignal5 } from "@fictjs/runtime/advanced";
+import { jsx as jsx4 } from "fict/jsx-runtime";
 function lazy(loader) {
   let cachedComponent = null;
   let loadPromise = null;
   const LazyComponent = (props) => {
-    const state = createSignal3({
+    let isMounted = true;
+    onCleanup2(() => {
+      isMounted = false;
+    });
+    const state = createSignal5({
       component: cachedComponent,
       error: null,
       loading: !cachedComponent
     });
     if (cachedComponent) {
       const CachedComponent = cachedComponent;
-      return /* @__PURE__ */ jsx3(CachedComponent, { ...props });
+      return /* @__PURE__ */ jsx4(CachedComponent, { ...props });
     }
     if (!loadPromise) {
       loadPromise = loader().then((module) => {
@@ -2161,9 +2340,13 @@ function lazy(loader) {
       });
     }
     loadPromise.then((component) => {
-      state({ component, error: null, loading: false });
+      if (isMounted) {
+        state({ component, error: null, loading: false });
+      }
     }).catch((error) => {
-      state({ component: null, error, loading: false });
+      if (isMounted) {
+        state({ component: null, error, loading: false });
+      }
     });
     const currentState = state();
     if (currentState.error) {
@@ -2173,10 +2356,11 @@ function lazy(loader) {
       throw loadPromise;
     }
     const LoadedComponent = currentState.component;
-    return /* @__PURE__ */ jsx3(LoadedComponent, { ...props });
+    return /* @__PURE__ */ jsx4(LoadedComponent, { ...props });
   };
-  LazyComponent.__lazy = true;
-  LazyComponent.__preload = () => {
+  const lazyComp = LazyComponent;
+  lazyComp.__lazy = true;
+  lazyComp.__preload = () => {
     if (!loadPromise) {
       loadPromise = loader().then((module) => {
         const component = "default" in module ? module.default : module;
@@ -2196,7 +2380,8 @@ function preloadLazy(component) {
   return Promise.resolve();
 }
 function isLazyComponent(component) {
-  return !!(component && typeof component === "function" && component.__lazy);
+  const comp = component;
+  return !!(comp && typeof comp === "function" && comp.__lazy);
 }
 function lazyRoute(config) {
   const LazyComponent = lazy(config.component);