@richie-router/react 0.1.2 → 0.1.3

package/dist/esm/router.mjs

@@ -26,10 +26,68 @@ var RouterStateContext = React.createContext(null);
 var OutletContext = React.createContext(null);
 var MatchContext = React.createContext(null);
 var MANAGED_HEAD_ATTRIBUTE = "data-richie-router-head";
-var EMPTY_HEAD = { meta: [], links: [], scripts: [], styles: [] };
+var EMPTY_HEAD = [];
+function ensureLeadingSlash(value) {
+  return value.startsWith("/") ? value : `/${value}`;
+}
+function normalizeBasePath(basePath) {
+  if (!basePath) {
+    return "";
+  }
+  const trimmed = basePath.trim();
+  if (trimmed === "" || trimmed === "/") {
+    return "";
+  }
+  const normalized = ensureLeadingSlash(trimmed).replace(/\/+$/u, "");
+  return normalized === "/" ? "" : normalized;
+}
+function parseHref(href) {
+  if (href.startsWith("http://") || href.startsWith("https://")) {
+    return new URL(href);
+  }
+  return new URL(ensureLeadingSlash(href), "http://richie-router.local");
+}
+function stripBasePathFromPathname(pathname, basePath) {
+  if (!basePath) {
+    return pathname;
+  }
+  if (pathname === basePath) {
+    return "/";
+  }
+  return pathname.startsWith(`${basePath}/`) ? pathname.slice(basePath.length) || "/" : pathname;
+}
+function stripBasePathFromHref(href, basePath) {
+  const normalizedBasePath = normalizeBasePath(basePath);
+  if (!normalizedBasePath) {
+    return href;
+  }
+  const url = parseHref(href);
+  return `${stripBasePathFromPathname(url.pathname, normalizedBasePath)}${url.search}${url.hash}`;
+}
+function prependBasePathToPathname(pathname, basePath) {
+  if (!basePath) {
+    return pathname;
+  }
+  return pathname === "/" ? basePath : `${basePath}${ensureLeadingSlash(pathname)}`;
+}
+function prependBasePathToHref(href, basePath) {
+  const normalizedBasePath = normalizeBasePath(basePath);
+  if (!normalizedBasePath) {
+    return href;
+  }
+  const url = parseHref(href);
+  return `${prependBasePathToPathname(url.pathname, normalizedBasePath)}${url.search}${url.hash}`;
+}
 function routeHasRecord(value) {
   return typeof value === "object" && value !== null;
 }
+function routeHasInlineHead(route) {
+  const headOption = route.options.head;
+  return Boolean(headOption && typeof headOption !== "string");
+}
+function matchesHaveInlineHead(matches) {
+  return matches.some((match) => routeHasInlineHead(match.route));
+}
 function resolveParamsInput(input, previous) {
   if (input === undefined) {
     return previous;
@@ -75,6 +133,8 @@ class Router {
   headCache = new Map;
   parseSearch;
   stringifySearch;
+  basePath;
+  initialHeadSnapshot;
   started = false;
   unsubscribeHistory;
   constructor(options) {
@@ -83,6 +143,7 @@ class Router {
     this.history = options.history ?? (typeof window === "undefined" ? createMemoryHistory() : createBrowserHistory());
     this.parseSearch = options.parseSearch ?? defaultParseSearch;
     this.stringifySearch = options.stringifySearch ?? defaultStringifySearch;
+    this.basePath = normalizeBasePath(options.basePath);
     for (const route of collectRoutes(this.routeTree)) {
       this.routesByFullPath.set(route.fullPath, route);
     }
@@ -90,15 +151,22 @@ class Router {
       this.routesByTo.set(branch.leaf.to, branch.leaf);
     }
     const location = this.readLocation();
+    const initialMatches = this.buildMatches(location);
+    const rawHistoryHref = this.history.location.href;
     const initialHeadSnapshot = typeof window !== "undefined" ? window.__RICHIE_ROUTER_HEAD__ : undefined;
-    const initialHead = initialHeadSnapshot && initialHeadSnapshot.href === location.href ? initialHeadSnapshot.head : EMPTY_HEAD;
+    const hasMatchingInitialHeadSnapshot = Boolean(initialHeadSnapshot && (initialHeadSnapshot.href === location.href || initialHeadSnapshot.href === rawHistoryHref));
+    const initialHead = hasMatchingInitialHeadSnapshot && initialHeadSnapshot ? initialHeadSnapshot.head : EMPTY_HEAD;
+    if (hasMatchingInitialHeadSnapshot && this.options.loadRouteHead === undefined && initialHeadSnapshot?.routeHeads !== undefined) {
+      this.seedHeadCacheFromRouteHeads(initialMatches, initialHeadSnapshot.routeHeads);
+    }
     if (typeof window !== "undefined" && initialHeadSnapshot !== undefined) {
       delete window.__RICHIE_ROUTER_HEAD__;
     }
+    this.initialHeadSnapshot = hasMatchingInitialHeadSnapshot ? initialHeadSnapshot : undefined;
     this.state = {
       status: "loading",
       location,
-      matches: this.buildMatches(location),
+      matches: initialMatches,
       head: initialHead,
       error: null
     };
@@ -129,15 +197,17 @@ class Router {
   }
   async load(options) {
     const nextLocation = this.readLocation();
+    const initialHeadSnapshot = this.initialHeadSnapshot?.href === nextLocation.href ? this.initialHeadSnapshot : undefined;
+    this.initialHeadSnapshot = undefined;
     await this.commitLocation(nextLocation, {
       request: options?.request,
       replace: true,
-      writeHistory: false
+      writeHistory: false,
+      initialHeadSnapshot
     });
   }
   async navigate(options) {
-    const href = this.buildHref(options);
-    const location = createParsedLocation(href, options.state ?? null, this.parseSearch);
+    const location = this.buildLocation(options);
     await this.commitLocation(location, {
       replace: options.replace ?? false,
       writeHistory: true,
@@ -145,8 +215,7 @@ class Router {
     });
   }
   async preloadRoute(options) {
-    const href = this.buildHref(options);
-    const location = createParsedLocation(href, options.state ?? null, this.parseSearch);
+    const location = this.buildLocation(options);
     try {
       await this.resolveLocation(location);
     } catch {}
@@ -156,6 +225,12 @@ class Router {
     await this.load();
   }
   buildHref(options) {
+    return prependBasePathToHref(this.buildLocationHref(options), this.basePath);
+  }
+  buildLocation(options) {
+    return createParsedLocation(this.buildLocationHref(options), options.state ?? null, this.parseSearch);
+  }
+  buildLocationHref(options) {
     const targetRoute = this.routesByTo.get(options.to) ?? null;
     const fromMatch = options.from ? this.findMatchByTo(options.from) : null;
     const previousParams = fromMatch?.params ?? {};
@@ -170,7 +245,7 @@ class Router {
   }
   readLocation() {
     const location = this.history.location;
-    return createParsedLocation(location.href, location.state, this.parseSearch);
+    return createParsedLocation(stripBasePathFromHref(location.href, this.basePath), location.state, this.parseSearch);
   }
   applyTrailingSlash(pathname, route) {
     const trailingSlash = this.options.trailingSlash ?? "preserve";
@@ -265,29 +340,102 @@ class Router {
         to: route.to
       });
     }
-    const head = await this.resolveLocationHead(matches, location, options?.request);
+    const head = await this.resolveLocationHead(matches, location, options?.request, options?.initialHeadSnapshot);
     return { matches, head, error: null };
   }
-  async resolveLocationHead(matches, location, request) {
+  async resolveLocationHead(matches, location, request, initialHeadSnapshot) {
     const resolvedHeadByRoute = new Map;
-    for (const match of matches) {
-      if (!match.route.serverHead) {
+    const serverMatches = matches.filter((match) => match.route.serverHead);
+    if (serverMatches.length === 0) {
+      return resolveHeadConfig(matches, resolvedHeadByRoute);
+    }
+    if (this.options.loadRouteHead !== undefined) {
+      for (const match of serverMatches) {
+        resolvedHeadByRoute.set(match.route.fullPath, await this.loadRouteHead(match.route, match.params, match.search, location, request));
+      }
+      return resolveHeadConfig(matches, resolvedHeadByRoute);
+    }
+    if (initialHeadSnapshot?.href === location.href && initialHeadSnapshot.routeHeads === undefined && !matchesHaveInlineHead(matches)) {
+      return initialHeadSnapshot.head;
+    }
+    let needsDocumentHeadFetch = false;
+    for (const match of serverMatches) {
+      const cachedHead = this.getCachedRouteHead(match.route.fullPath, match.params, match.search);
+      if (cachedHead) {
+        resolvedHeadByRoute.set(match.route.fullPath, cachedHead);
         continue;
       }
-      resolvedHeadByRoute.set(match.route.fullPath, await this.loadRouteHead(match.route, match.params, match.search, location, request));
+      needsDocumentHeadFetch = true;
+    }
+    if (!needsDocumentHeadFetch) {
+      return resolveHeadConfig(matches, resolvedHeadByRoute);
+    }
+    const documentHead = await this.fetchDocumentHead(location);
+    if ((documentHead.routeHeads?.length ?? 0) === 0 && !matchesHaveInlineHead(matches)) {
+      return documentHead.head;
+    }
+    const routeHeadsById = this.cacheRouteHeadsFromDocument(matches, documentHead.routeHeads ?? []);
+    for (const match of serverMatches) {
+      const responseHead = routeHeadsById.get(match.route.fullPath);
+      if (responseHead) {
+        resolvedHeadByRoute.set(match.route.fullPath, responseHead);
+        continue;
+      }
+      const cachedHead = this.getCachedRouteHead(match.route.fullPath, match.params, match.search);
+      if (cachedHead) {
+        resolvedHeadByRoute.set(match.route.fullPath, cachedHead);
+        continue;
+      }
+      const response = await this.fetchRouteHead(match.route, match.params, match.search);
+      this.setRouteHeadCache(match.route.fullPath, match.params, match.search, response);
+      resolvedHeadByRoute.set(match.route.fullPath, response.head);
     }
     return resolveHeadConfig(matches, resolvedHeadByRoute);
   }
-  async loadRouteHead(route, params, search, location, request) {
-    const cacheKey = JSON.stringify({
-      routeId: route.fullPath,
+  getRouteHeadCacheKey(routeId, params, search) {
+    return JSON.stringify({
+      routeId,
       params,
       search
     });
-    const cached = this.headCache.get(cacheKey);
+  }
+  getCachedRouteHead(routeId, params, search) {
+    const cached = this.headCache.get(this.getRouteHeadCacheKey(routeId, params, search));
     if (cached && cached.expiresAt > Date.now()) {
       return cached.head;
     }
+    return null;
+  }
+  setRouteHeadCache(routeId, params, search, response) {
+    this.headCache.set(this.getRouteHeadCacheKey(routeId, params, search), {
+      head: response.head,
+      expiresAt: Date.now() + (response.staleTime ?? 0)
+    });
+  }
+  seedHeadCacheFromRouteHeads(matches, routeHeads) {
+    this.cacheRouteHeadsFromDocument(matches, routeHeads);
+  }
+  cacheRouteHeadsFromDocument(matches, routeHeads) {
+    const routeHeadsById = new Map(routeHeads.map((entry) => [entry.routeId, entry]));
+    const resolvedHeadByRoute = new Map;
+    for (const match of matches) {
+      if (!match.route.serverHead) {
+        continue;
+      }
+      const entry = routeHeadsById.get(match.route.fullPath);
+      if (!entry) {
+        continue;
+      }
+      this.setRouteHeadCache(match.route.fullPath, match.params, match.search, entry);
+      resolvedHeadByRoute.set(match.route.fullPath, entry.head);
+    }
+    return resolvedHeadByRoute;
+  }
+  async loadRouteHead(route, params, search, location, request) {
+    const cachedHead = this.getCachedRouteHead(route.fullPath, params, search);
+    if (cachedHead) {
+      return cachedHead;
+    }
     const response = this.options.loadRouteHead !== undefined ? await this.options.loadRouteHead({
       route,
       routeId: route.fullPath,
@@ -296,14 +444,11 @@ class Router {
       location,
       request
     }) : await this.fetchRouteHead(route, params, search);
-    this.headCache.set(cacheKey, {
-      head: response.head,
-      expiresAt: Date.now() + (response.staleTime ?? 0)
-    });
+    this.setRouteHeadCache(route.fullPath, params, search, response);
     return response.head;
   }
   async fetchRouteHead(route, params, search) {
-    const basePath = this.options.headBasePath ?? "/head-api";
+    const basePath = this.options.headBasePath ?? prependBasePathToHref("/head-api", this.basePath);
     const searchParams = new URLSearchParams({
       routeId: route.fullPath,
       params: JSON.stringify(params),
@@ -318,6 +463,20 @@ class Router {
     }
     return await response.json();
   }
+  async fetchDocumentHead(location) {
+    const basePath = this.options.headBasePath ?? prependBasePathToHref("/head-api", this.basePath);
+    const searchParams = new URLSearchParams({
+      href: prependBasePathToHref(location.href, this.basePath)
+    });
+    const response = await fetch(`${basePath}?${searchParams.toString()}`);
+    if (!response.ok) {
+      if (response.status === 404) {
+        throw notFound();
+      }
+      throw new Error(`Failed to resolve server head for location "${location.href}"`);
+    }
+    return await response.json();
+  }
   async commitLocation(location, options) {
     this.state = {
       ...this.state,
@@ -327,13 +486,15 @@ class Router {
     this.notify();
     try {
       const resolved = await this.resolveLocation(location, {
-        request: options.request
+        request: options.request,
+        initialHeadSnapshot: options.initialHeadSnapshot
       });
+      const historyHref = prependBasePathToHref(location.href, this.basePath);
       if (options.writeHistory) {
         if (options.replace) {
-          this.history.replace(location.href, location.state);
+          this.history.replace(historyHref, location.state);
         } else {
-          this.history.push(location.href, location.state);
+          this.history.push(historyHref, location.state);
         }
       }
       this.state = {
@@ -354,11 +515,12 @@ class Router {
         return;
       }
       const errorMatches = this.buildMatches(location);
+      const historyHref = prependBasePathToHref(location.href, this.basePath);
       if (options.writeHistory) {
         if (options.replace) {
-          this.history.replace(location.href, location.state);
+          this.history.replace(historyHref, location.state);
         } else {
-          this.history.push(location.href, location.state);
+          this.history.push(historyHref, location.state);
         }
       }
       this.state = {
@@ -448,61 +610,95 @@ function createManagedHeadElements(head) {
     element.setAttribute(MANAGED_HEAD_ATTRIBUTE, "true");
     return element;
   };
-  for (const meta of head.meta ?? []) {
-    if ("title" in meta) {
-      const title = managed(document.createElement("title"));
-      title.textContent = meta.title;
-      elements.push(title);
+  const setAttributes = (element, attributes) => {
+    for (const [key, value] of Object.entries(attributes)) {
+      if (value === undefined || value === false) {
+        continue;
+      }
+      if (value === true) {
+        element.setAttribute(key, "");
+        continue;
+      }
+      element.setAttribute(key, value);
+    }
+  };
+  for (const element of head) {
+    if (element.tag === "title") {
+      continue;
+    }
+    if (element.tag === "meta") {
+      const tag2 = managed(document.createElement("meta"));
+      if ("charset" in element) {
+        tag2.setAttribute("charset", element.charset);
+      } else if ("name" in element) {
+        tag2.setAttribute("name", element.name);
+        tag2.setAttribute("content", element.content);
+      } else if ("property" in element) {
+        tag2.setAttribute("property", element.property);
+        tag2.setAttribute("content", element.content);
+      } else {
+        tag2.setAttribute("http-equiv", element.httpEquiv);
+        tag2.setAttribute("content", element.content);
+      }
+      elements.push(tag2);
       continue;
     }
-    const tag = managed(document.createElement("meta"));
-    if ("charset" in meta) {
-      tag.setAttribute("charset", meta.charset);
-    } else if ("name" in meta) {
-      tag.setAttribute("name", meta.name);
-      tag.setAttribute("content", meta.content);
-    } else if ("property" in meta) {
-      tag.setAttribute("property", meta.property);
-      tag.setAttribute("content", meta.content);
-    } else {
-      tag.setAttribute("http-equiv", meta.httpEquiv);
-      tag.setAttribute("content", meta.content);
+    if (element.tag === "link") {
+      const tag2 = managed(document.createElement("link"));
+      setAttributes(tag2, {
+        rel: element.rel,
+        href: element.href,
+        type: element.type,
+        media: element.media,
+        sizes: element.sizes,
+        crossorigin: element.crossorigin
+      });
+      elements.push(tag2);
+      continue;
+    }
+    if (element.tag === "style") {
+      const tag2 = managed(document.createElement("style"));
+      if (element.media) {
+        tag2.setAttribute("media", element.media);
+      }
+      tag2.textContent = element.children;
+      elements.push(tag2);
+      continue;
+    }
+    if (element.tag === "script") {
+      const tag2 = managed(document.createElement("script"));
+      if (element.src) {
+        tag2.setAttribute("src", element.src);
+      }
+      if (element.type) {
+        tag2.setAttribute("type", element.type);
+      }
+      if (element.async) {
+        tag2.async = true;
+      }
+      if (element.defer) {
+        tag2.defer = true;
+      }
+      if (element.children) {
+        tag2.textContent = element.children;
+      }
+      elements.push(tag2);
+      continue;
+    }
+    if (element.tag === "base") {
+      const tag2 = managed(document.createElement("base"));
+      tag2.setAttribute("href", element.href);
+      if (element.target) {
+        tag2.setAttribute("target", element.target);
+      }
+      elements.push(tag2);
+      continue;
+    }
+    const tag = managed(document.createElement(element.name));
+    setAttributes(tag, element.attrs ?? {});
+    if (element.children) {
+      tag.textContent = element.children;
     }
-    elements.push(tag);
-  }
-  for (const link of head.links ?? []) {
-    const tag = managed(document.createElement("link"));
-    tag.setAttribute("rel", link.rel);
-    tag.setAttribute("href", link.href);
-    if (link.type)
-      tag.setAttribute("type", link.type);
-    if (link.media)
-      tag.setAttribute("media", link.media);
-    if (link.sizes)
-      tag.setAttribute("sizes", link.sizes);
-    if (link.crossorigin)
-      tag.setAttribute("crossorigin", link.crossorigin);
-    elements.push(tag);
-  }
-  for (const style of head.styles ?? []) {
-    const tag = managed(document.createElement("style"));
-    if (style.media)
-      tag.setAttribute("media", style.media);
-    tag.textContent = style.children;
-    elements.push(tag);
-  }
-  for (const script of head.scripts ?? []) {
-    const tag = managed(document.createElement("script"));
-    if (script.src)
-      tag.setAttribute("src", script.src);
-    if (script.type)
-      tag.setAttribute("type", script.type);
-    if (script.async)
-      tag.async = true;
-    if (script.defer)
-      tag.defer = true;
-    if (script.children)
-      tag.textContent = script.children;
     elements.push(tag);
   }
   return elements;
@@ -511,6 +707,10 @@ function reconcileDocumentHead(head) {
   if (typeof document === "undefined") {
     return;
   }
+  const title = [...head].reverse().find((element) => element.tag === "title");
+  if (title && title.tag === "title") {
+    document.title = title.children;
+  }
   for (const element of Array.from(document.head.querySelectorAll(`[${MANAGED_HEAD_ATTRIBUTE}]`))) {
     element.remove();
   }
@@ -655,7 +855,7 @@ function useResolvedLink(props) {
   const router = useRouterContext();
   const href = router.buildHref(props);
   const location = useLocation();
-  const pathOnly = href.split(/[?#]/u)[0] ?? href;
+  const pathOnly = stripBasePathFromHref(href, router.options.basePath).split(/[?#]/u)[0] ?? href;
   const isActive = pathOnly === location.pathname;
   return { href, isActive, router };
 }