@fictjs/router 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -100,11 +100,30 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components.tsx
-var import_runtime2 = require("@fictjs/runtime");
-var import_advanced = require("@fictjs/runtime/advanced");
+var import_runtime3 = require("@fictjs/runtime");
+var import_advanced3 = require("@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
 var import_runtime = require("@fictjs/runtime");
+var import_advanced = require("@fictjs/runtime/advanced");
 
 // src/utils.ts
 function normalizePath(path) {
@@ -433,23 +452,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 = (0, import_advanced.createSignal)(null);
+var activeRouterStack = [];
+function pushActiveRouter(router) {
+  activeRouterStack.push(router);
+  (0, import_runtime.batch)(() => {
+    activeRouter(router);
+  });
+}
+function popActiveRouter(router) {
+  const index = activeRouterStack.lastIndexOf(router);
+  if (index >= 0) {
+    activeRouterStack.splice(index, 1);
+  }
+  (0, import_runtime.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;
   },
-  isRouting: () => false,
-  pendingLocation: () => null,
-  base: "",
-  resolvePath: (to) => typeof to === "string" ? to : to.pathname || "/"
+  pendingLocation: () => {
+    const router = activeRouter();
+    return router ? readAccessor(router.pendingLocation) : null;
+  },
+  base: wrapValue(""),
+  resolvePath: defaultResolvePath
 };
 var RouterContext = (0, import_runtime.createContext)(defaultRouterContext);
 RouterContext.displayName = "RouterContext";
@@ -460,17 +532,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 = (0, import_runtime.createContext)(defaultRouteContext);
 RouteContext.displayName = "RouteContext";
 function useRoute() {
   return (0, import_runtime.useContext)(RouteContext);
 }
+var activeBeforeLeave = (0, import_advanced.createSignal)(null);
+var activeBeforeLeaveStack = [];
+function pushActiveBeforeLeave(context) {
+  activeBeforeLeaveStack.push(context);
+  (0, import_runtime.batch)(() => {
+    activeBeforeLeave(context);
+  });
+}
+function popActiveBeforeLeave(context) {
+  const index = activeBeforeLeaveStack.lastIndexOf(context);
+  if (index >= 0) {
+    activeBeforeLeaveStack.splice(index, 1);
+  }
+  (0, import_runtime.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 = (0, import_runtime.createContext)(defaultBeforeLeaveContext);
 BeforeLeaveContext.displayName = "BeforeLeaveContext";
@@ -485,27 +590,28 @@ var RouteErrorContext = (0, import_runtime.createContext)(defaultRouteErrorConte
 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 : "",
@@ -514,23 +620,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 = (0, import_runtime.useContext)(RouteErrorContext);
@@ -538,20 +644,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;
@@ -564,6 +673,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 = "";
@@ -587,16 +697,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;
   };
 }
@@ -604,12 +715,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;
     }
@@ -1089,6 +1202,38 @@ function createStaticHistory(url) {
   };
 }
 
+// src/router-internals.ts
+var import_meta = {};
+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
+var import_runtime2 = require("@fictjs/runtime");
+var import_advanced2 = require("@fictjs/runtime/advanced");
+var import_jsx_runtime = require("@fictjs/runtime/jsx-runtime");
+
 // src/scroll.ts
 var scrollPositions = /* @__PURE__ */ new Map();
 var MAX_STORED_POSITIONS = 100;
@@ -1211,35 +1356,7 @@ function configureScrollRestoration(options) {
   defaultScrollRestoration = createScrollRestoration(options);
 }
 
-// src/components.tsx
-var import_jsx_runtime = require("fict/jsx-runtime");
-var import_meta = {};
-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;
@@ -1252,10 +1369,10 @@ function createRouterState(history2, routes, base = "") {
   };
   const initialLocation = history2.location;
   const initialMatches = matchWithBase(initialLocation.pathname);
-  const locationSignal = (0, import_advanced.createSignal)(initialLocation);
-  const matchesSignal = (0, import_advanced.createSignal)(initialMatches);
-  const isRoutingSignal = (0, import_advanced.createSignal)(false);
-  const pendingLocationSignal = (0, import_advanced.createSignal)(null);
+  const locationSignal = (0, import_advanced2.createSignal)(initialLocation);
+  const matchesSignal = (0, import_advanced2.createSignal)(initialMatches);
+  const isRoutingSignal = (0, import_advanced2.createSignal)(false);
+  const pendingLocationSignal = (0, import_advanced2.createSignal)(null);
   const beforeLeaveHandlers = /* @__PURE__ */ new Set();
   let navigationToken = 0;
   const beforeLeave = {
@@ -1266,7 +1383,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 = {
@@ -1363,9 +1480,11 @@ function createRouterState(history2, routes, base = "") {
     }
     const targetLocation = createLocation(locationSpec, finalState, toKey);
     (0, import_runtime2.untrack)(async () => {
+      if (beforeLeaveHandlers.size > 0) {
+        pendingLocationSignal(targetLocation);
+      }
       const canNavigate = await beforeLeave.confirm(targetLocation, currentLocation);
       if (!canNavigate) {
-        pendingLocationSignal(null);
         return;
       }
       (0, import_runtime2.batch)(() => {
@@ -1431,6 +1550,17 @@ function RouterProvider(props) {
     props.base
   );
   (0, import_runtime2.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: () => {
@@ -1442,30 +1572,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__ */ (0, import_jsx_runtime.jsx)(RouterContext.Provider, { value: routerContext, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BeforeLeaveContext.Provider, { value: beforeLeave, children: props.children }) });
+  pushActiveRouter(routerContext);
+  pushActiveBeforeLeave(beforeLeaveContext);
+  (0, import_runtime2.onCleanup)(() => {
+    popActiveBeforeLeave(beforeLeaveContext);
+    popActiveRouter(routerContext);
+  });
+  const RouterContextProvider = RouterContext.Provider;
+  const BeforeLeaveProvider = BeforeLeaveContext.Provider;
+  return (0, import_jsx_runtime.jsx)(RouterContextProvider, {
+    value: routerContext,
+    children: (0, import_jsx_runtime.jsx)(BeforeLeaveProvider, {
+      value: beforeLeaveContext,
+      children: props.children
+    })
+  });
 }
+
+// src/components.tsx
+var import_jsx_runtime2 = require("fict/jsx-runtime");
 function Router(props) {
   const history2 = props.history || createBrowserHistory();
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Routes, { children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Routes, { children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Routes, { children: props.children }) });
 }
 function MemoryRouter(props) {
   const memoryOptions = {};
@@ -1479,12 +1620,12 @@ function MemoryRouter(props) {
     Object.keys(memoryOptions).length > 0 ? memoryOptions : void 0
   );
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Routes, { children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Routes, { children: props.children }) });
 }
 function StaticRouter(props) {
   const history2 = createStaticHistory(props.url);
   const routes = extractRoutes(props.children);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Routes, { children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouterProvider, { history: history2, routes, base: props.base, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Routes, { children: props.children }) });
 }
 function Routes(props) {
   const router = useRouter();
@@ -1492,10 +1633,12 @@ function Routes(props) {
   const routes = extractRoutes(props.children);
   const compiledRoutes = routes.map((r) => compileRoute(r));
   const branches = createBranches(compiledRoutes);
-  const currentMatches = (0, import_runtime2.createMemo)(() => {
-    const location = router.location();
-    const parentMatch = parentRoute.match();
-    const locationPath = stripBaseOrWarn(location.pathname, router.base);
+  const currentMatches = (0, import_runtime3.createMemo)(() => {
+    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) {
@@ -1504,24 +1647,22 @@ function Routes(props) {
     const relativePath = locationPath.startsWith(basePath) ? locationPath.slice(basePath.length) || "/" : locationPath;
     return matchRoutes(branches, relativePath) || [];
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderMatches(currentMatches(), 0) });
+  const matches = currentMatches();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { 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 = (0, import_advanced.createSignal)({
+  const dataState = (0, import_advanced3.createSignal)({
     data: void 0,
     error: void 0,
     loading: !!route.preload
   });
   let preloadToken = 0;
   if (route.preload) {
-    (0, import_runtime2.createEffect)(() => {
-      const location = router.location();
+    (0, import_runtime3.createEffect)(() => {
+      const location = readAccessor(router.location);
       const preloadArgs = {
         params: match.params,
         location,
@@ -1540,17 +1681,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__ */ (0, import_jsx_runtime2.jsx)(Outlet, {});
   const renderContent = () => {
     const state = dataState();
     if (state.error !== void 0 && route.errorElement) {
@@ -1561,26 +1692,39 @@ function renderMatches(matches, index) {
     }
     if (route.component) {
       const Component = route.component;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { params: match.params, location: router.location(), data: state.data, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Outlet, {}) });
-    } else if (route.element) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime.jsx)(Outlet, {});
+    }
+    if (route.children) {
+      return outletNode;
     }
     return null;
   };
-  let content = /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime2.jsx)(RouteContext.Provider, { value: routeContext, children: renderContent() });
   if (route.errorElement) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_runtime2.ErrorBoundary,
+    content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_runtime3.ErrorBoundary,
       {
-        fallback: (err, reset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouteErrorContext.Provider, { value: { error: err, reset }, children: route.errorElement }),
+        fallback: (err, reset) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouteErrorContext.Provider, { value: { error: err, reset }, children: route.errorElement }),
         children: content
       }
     );
   }
   if (route.loadingElement) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_runtime2.Suspense, { fallback: route.loadingElement, children: content });
+    content = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_runtime3.Suspense, { fallback: route.loadingElement, children: content });
   }
   return content;
 }
@@ -1589,11 +1733,11 @@ function Route(_props) {
 }
 function Outlet() {
   const route = useRoute();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: route.outlet() });
+  return readAccessor(route.outlet);
 }
 function Navigate(props) {
   const router = useRouter();
-  (0, import_runtime2.createEffect)(() => {
+  (0, import_runtime3.createEffect)(() => {
     router.navigate(props.to, {
       replace: props.replace ?? true,
       state: props.state
@@ -1603,7 +1747,7 @@ function Navigate(props) {
 }
 function Redirect(props) {
   const router = useRouter();
-  (0, import_runtime2.createEffect)(() => {
+  (0, import_runtime3.createEffect)(() => {
     router.navigate(props.to, {
       replace: props.push !== true,
       // Replace by default, push only if explicitly requested
@@ -1633,7 +1777,7 @@ function extractRoutes(children) {
         routeDef.loadingElement = props.loadingElement;
       if (props.children) routeDef.children = extractRoutes(props.children);
       routes.push(routeDef);
-    } else if (vnode.type === import_runtime2.Fragment && vnode.props?.children) {
+    } else if (vnode.type === import_runtime3.Fragment && vnode.props?.children) {
       routes.push(...extractRoutes(vnode.props.children));
     }
   }
@@ -1646,28 +1790,42 @@ function createRouter(routes, options) {
   return {
     Router: (props) => {
       const history2 = options?.history || createBrowserHistory();
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RouterProvider, { history: history2, routes, base: options?.base, children: props.children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Routes, { children: routesToElements(routes) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RouterProvider, { history: history2, routes, base: options?.base, children: props.children || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Routes, { children: routesToElements(routes) }) });
     }
   };
 }
 function routesToElements(routes) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: routes.map((route, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { 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__ */ (0, import_jsx_runtime.jsx)(Route, { ...routeProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Route, { ...routeProps });
   }) });
 }
 
 // src/link.tsx
-var import_runtime3 = require("@fictjs/runtime");
-var import_jsx_runtime2 = require("fict/jsx-runtime");
+var import_runtime4 = require("@fictjs/runtime");
+var import_internal = require("@fictjs/runtime/internal");
+var import_jsx_runtime3 = require("fict/jsx-runtime");
+var createSpreadRef = (props) => {
+  let current = null;
+  return (el) => {
+    if (!el) {
+      current = null;
+      return;
+    }
+    if (el === current) return;
+    current = el;
+    (0, import_internal.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) {
@@ -1692,7 +1850,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", {
@@ -1725,20 +1883,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__ */ (0, import_jsx_runtime2.jsx)("span", { ...anchorProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { ref: spanRef, children });
   }
   if (prefetch === "render") {
     triggerPreload();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "a",
     {
-      ...anchorProps,
-      href: href(),
+      ref: anchorRef,
+      href: getHrefValue(),
       onClick: handleClick,
       onMouseEnter: handleMouseEnter,
       onFocus: handleFocus,
@@ -1750,12 +1912,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);
@@ -1767,9 +1931,9 @@ function NavLink(props) {
   const getRenderProps = () => ({
     isActive: isActive(),
     isPending: computeIsPending(),
-    isTransitioning: router.isRouting()
+    isTransitioning: readAccessor(router.isRouting)
   });
-  const computedClassName = (0, import_runtime3.createMemo)(() => {
+  const computedClassName = (0, import_runtime4.createMemo)(() => {
     const renderProps = getRenderProps();
     const classes = [];
     if (typeof props.className === "function") {
@@ -1786,7 +1950,7 @@ function NavLink(props) {
     }
     return classes.join(" ") || void 0;
   });
-  const computedStyle = (0, import_runtime3.createMemo)(() => {
+  const computedStyle = (0, import_runtime4.createMemo)(() => {
     const renderProps = getRenderProps();
     const style = {};
     if (typeof props.style === "function") {
@@ -1803,14 +1967,14 @@ function NavLink(props) {
     }
     return Object.keys(style).length > 0 ? style : void 0;
   });
-  const computedChildren = (0, import_runtime3.createMemo)(() => {
+  const computedChildren = (0, import_runtime4.createMemo)(() => {
     const renderProps = getRenderProps();
     if (typeof props.children === "function") {
       return props.children(renderProps);
     }
     return props.children;
   });
-  const ariaCurrent = (0, import_runtime3.createMemo)(() => {
+  const ariaCurrent = (0, import_runtime4.createMemo)(() => {
     const renderProps = getRenderProps();
     if (!renderProps.isActive) return void 0;
     return props["aria-current"] || "page";
@@ -1856,18 +2020,30 @@ function NavLink(props) {
     "aria-current": _ariaCurrent,
     ...anchorProps
   } = props;
+  const anchorRef = createSpreadRef(anchorProps);
+  const spanRef = createSpreadRef(anchorProps);
   if (disabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { ...anchorProps, className: computedClassName(), style: computedStyle(), children: computedChildren() });
+    const disabledClassName = computedClassName();
+    const disabledStyle = computedStyle();
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "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__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "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,
@@ -1888,7 +2064,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) => {
@@ -1963,11 +2139,12 @@ function Form(props) {
     onSubmit: _onSubmit,
     ...formProps
   } = props;
+  const formRef = createSpreadRef(formProps);
   const htmlMethod = method && ["get", "post"].includes(method) ? method : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "form",
     {
-      ...formProps,
+      ref: formRef,
       ...action2 !== void 0 ? { action: action2 } : {},
       ...htmlMethod !== void 0 ? { method: htmlMethod } : {},
       onSubmit: handleSubmit,
@@ -1977,8 +2154,8 @@ function Form(props) {
 }
 
 // src/data.ts
-var import_runtime4 = require("@fictjs/runtime");
-var import_advanced2 = require("@fictjs/runtime/advanced");
+var import_runtime5 = require("@fictjs/runtime");
+var import_advanced4 = require("@fictjs/runtime/advanced");
 var CACHE_DURATION = 3 * 60 * 1e3;
 var PRELOAD_CACHE_DURATION = 5 * 1e3;
 var MAX_CACHE_SIZE = 500;
@@ -2031,9 +2208,9 @@ function query(fn, name) {
         return () => cached.result;
       }
     }
-    const resultSignal = (0, import_advanced2.createSignal)(cached?.result);
-    const errorSignal = (0, import_advanced2.createSignal)(void 0);
-    const loadingSignal = (0, import_advanced2.createSignal)(true);
+    const resultSignal = (0, import_advanced4.createSignal)(cached?.result);
+    const errorSignal = (0, import_advanced4.createSignal)(void 0);
+    const loadingSignal = (0, import_advanced4.createSignal)(true);
     const promise = Promise.resolve(fn(...args)).then((result) => {
       const entry = {
         timestamp: Date.now(),
@@ -2043,13 +2220,13 @@ function query(fn, name) {
       };
       queryCache.set(cacheKey, entry);
       evictOldestEntries();
-      (0, import_runtime4.batch)(() => {
+      (0, import_runtime5.batch)(() => {
         resultSignal(result);
         loadingSignal(false);
       });
       return result;
     }).catch((error) => {
-      (0, import_runtime4.batch)(() => {
+      (0, import_runtime5.batch)(() => {
         errorSignal(error);
         loadingSignal(false);
       });
@@ -2118,7 +2295,7 @@ function action(fn, name) {
 function getAction(url) {
   return actionRegistry.get(url);
 }
-var activeSubmissions = (0, import_advanced2.createSignal)(/* @__PURE__ */ new Map());
+var activeSubmissions = (0, import_advanced4.createSignal)(/* @__PURE__ */ new Map());
 function useSubmission(actionOrUrl) {
   const url = typeof actionOrUrl === "string" ? actionOrUrl : actionOrUrl.url;
   return () => {
@@ -2173,10 +2350,10 @@ function createPreload(fn) {
   };
 }
 function createResource(source, fetcher) {
-  const dataSignal = (0, import_advanced2.createSignal)(void 0);
-  const loadingSignal = (0, import_advanced2.createSignal)(true);
-  const errorSignal = (0, import_advanced2.createSignal)(void 0);
-  const latestSignal = (0, import_advanced2.createSignal)(void 0);
+  const dataSignal = (0, import_advanced4.createSignal)(void 0);
+  const loadingSignal = (0, import_advanced4.createSignal)(true);
+  const errorSignal = (0, import_advanced4.createSignal)(void 0);
+  const latestSignal = (0, import_advanced4.createSignal)(void 0);
   let currentSource;
   let fetchId = 0;
   const doFetch = async (s, id) => {
@@ -2185,7 +2362,7 @@ function createResource(source, fetcher) {
     try {
       const result = await fetcher(s);
       if (id === fetchId) {
-        (0, import_runtime4.batch)(() => {
+        (0, import_runtime5.batch)(() => {
           dataSignal(result);
           latestSignal(result);
           loadingSignal(false);
@@ -2195,7 +2372,7 @@ function createResource(source, fetcher) {
       return void 0;
     } catch (err) {
       if (id === fetchId) {
-        (0, import_runtime4.batch)(() => {
+        (0, import_runtime5.batch)(() => {
           errorSignal(err);
           loadingSignal(false);
         });
@@ -2203,7 +2380,7 @@ function createResource(source, fetcher) {
       return void 0;
     }
   };
-  (0, import_runtime4.createEffect)(() => {
+  (0, import_runtime5.createEffect)(() => {
     const s = source();
     if (s !== currentSource) {
       currentSource = s;
@@ -2229,21 +2406,21 @@ function cleanupDataUtilities() {
 }
 
 // src/lazy.tsx
-var import_runtime5 = require("@fictjs/runtime");
-var import_advanced3 = require("@fictjs/runtime/advanced");
-var import_jsx_runtime3 = require("fict/jsx-runtime");
+var import_runtime6 = require("@fictjs/runtime");
+var import_advanced5 = require("@fictjs/runtime/advanced");
+var import_jsx_runtime4 = require("fict/jsx-runtime");
 function lazy(loader) {
   let cachedComponent = null;
   let loadPromise = null;
   const LazyComponent = (props) => {
-    const state = (0, import_advanced3.createSignal)({
+    const state = (0, import_advanced5.createSignal)({
       component: cachedComponent,
       error: null,
       loading: !cachedComponent
     });
     if (cachedComponent) {
       const CachedComponent = cachedComponent;
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CachedComponent, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CachedComponent, { ...props });
     }
     if (!loadPromise) {
       loadPromise = loader().then((module2) => {
@@ -2265,7 +2442,7 @@ function lazy(loader) {
       throw loadPromise;
     }
     const LoadedComponent = currentState.component;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoadedComponent, { ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LoadedComponent, { ...props });
   };
   LazyComponent.__lazy = true;
   LazyComponent.__preload = () => {