@qwik.dev/router 2.0.0-alpha.9 → 2.0.0-beta.10

package/lib/index.qwik.mjs

@@ -1,10 +1,12 @@
 import { jsx, Fragment, jsxs } from "@qwik.dev/core/jsx-runtime";
-import { component$, useErrorBoundary, useOnWindow, $, Slot, isBrowser, createContextId, implicit$FirstArg, useContext, useVisibleTask$, noSerialize, useServerData, untrack, sync$, isDev, withLocale, event$, useStyles$, useStore, useSignal, useContextProvider, useTask$, isServer, getLocale, jsx as jsx$1, SkipRender } from "@qwik.dev/core";
-import { _deserialize, _weakSerialize, _getContextElement, _waitUntilRendered, _getQContainerElement, _wrapStore, _getContextEvent, _serialize } from "@qwik.dev/core/internal";
+import { component$, useErrorBoundary, useOnWindow, $, Slot, createAsyncComputed$, isBrowser, createContextId, useContext, implicit$FirstArg, noSerialize, useVisibleTask$, useServerData, useSignal, untrack, sync$, isDev, withLocale, event$, useStyles$, isServer, useStore, useContextProvider, useTask$, getLocale, jsx as jsx$1, SkipRender, createElement } from "@qwik.dev/core";
+import { p } from "@qwik.dev/core/preloader";
+import { _deserialize, _UNINITIALIZED, _getContextContainer, SerializerSymbol, _getContextElement, _hasStoreEffects, _getQContainerElement, forceStoreEffects, _waitUntilRendered, _resolveContextWithoutSequentialScope, _getContextEvent, _serialize } from "@qwik.dev/core/internal";
 import * as qwikRouterConfig from "@qwik-router-config";
 import { z } from "zod";
 import { z as z2 } from "zod";
 import swRegister from "@qwik-router-sw-register";
+import { renderToStream } from "@qwik.dev/core/server";
 const ErrorBoundary = component$((props) => {
   const store2 = useErrorBoundary();
   useOnWindow("qerror", $((e) => {
@@ -19,132 +21,38 @@ const ErrorBoundary = component$((props) => {
 });
 const MODULE_CACHE = /* @__PURE__ */ new WeakMap();
 const CLIENT_DATA_CACHE = /* @__PURE__ */ new Map();
-const PREFETCHED_NAVIGATE_PATHS = /* @__PURE__ */ new Set();
 const QACTION_KEY = "qaction";
+const QLOADER_KEY = "qloaders";
 const QFN_KEY = "qfunc";
 const QDATA_KEY = "qdata";
-const toPath = (url) => url.pathname + url.search + url.hash;
-const toUrl = (url, baseUrl) => new URL(url, baseUrl.href);
-const isSameOrigin = (a, b) => a.origin === b.origin;
-const withSlash = (path) => path.endsWith("/") ? path : path + "/";
-const isSamePathname = ({ pathname: a }, { pathname: b }) => {
-  const lDiff = Math.abs(a.length - b.length);
-  return lDiff === 0 ? a === b : lDiff === 1 && withSlash(a) === withSlash(b);
-};
-const isSameSearchQuery = (a, b) => a.search === b.search;
-const isSamePath = (a, b) => isSameSearchQuery(a, b) && isSamePathname(a, b);
-const getClientDataPath = (pathname, pageSearch, action) => {
-  let search = pageSearch ?? "";
-  if (action) {
-    search += (search ? "&" : "?") + QACTION_KEY + "=" + encodeURIComponent(action.id);
-  }
-  return pathname + (pathname.endsWith("/") ? "" : "/") + "q-data.json" + search;
-};
-const getClientNavPath = (props, baseUrl) => {
-  const href = props.href;
-  if (typeof href === "string" && typeof props.target !== "string" && !props.reload) {
-    try {
-      const linkUrl = toUrl(href.trim(), baseUrl.url);
-      const currentUrl = toUrl("", baseUrl.url);
-      if (isSameOrigin(linkUrl, currentUrl)) {
-        return toPath(linkUrl);
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  } else if (props.reload) {
-    return toPath(toUrl("", baseUrl.url));
-  }
-  return null;
-};
-const shouldPrefetchData = (clientNavPath, currentLoc) => {
-  if (clientNavPath) {
-    const prefetchUrl = toUrl(clientNavPath, currentLoc.url);
-    const currentUrl = toUrl("", currentLoc.url);
-    return !isSamePath(prefetchUrl, currentUrl);
-  }
-  return false;
-};
-const shouldPrefetchSymbols = (clientNavPath, currentLoc) => {
-  if (clientNavPath) {
-    const prefetchUrl = toUrl(clientNavPath, currentLoc.url);
-    const currentUrl = toUrl("", currentLoc.url);
-    return !isSamePathname(prefetchUrl, currentUrl);
-  }
-  return false;
-};
-const isPromise = (value) => {
-  return value && typeof value.then === "function";
-};
-const deepFreeze = (obj) => {
-  if (obj == null) {
-    return obj;
-  }
-  Object.getOwnPropertyNames(obj).forEach((prop) => {
-    const value = obj[prop];
-    if (value && typeof value === "object" && !Object.isFrozen(value)) {
-      deepFreeze(value);
-    }
-  });
-  return Object.freeze(obj);
-};
-const clientNavigate = (win, navType, fromURL, toURL, replaceState = false) => {
-  if (navType !== "popstate") {
-    const samePath = isSamePath(fromURL, toURL);
-    const sameHash = fromURL.hash === toURL.hash;
-    if (!samePath || !sameHash) {
-      const newState = {
-        _qRouterScroll: newScrollState()
-      };
-      if (replaceState) {
-        win.history.replaceState(newState, "", toPath(toURL));
-      } else {
-        win.history.pushState(newState, "", toPath(toURL));
-      }
-    }
-  }
-};
-const newScrollState = () => {
-  return {
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0
-  };
-};
-const prefetchSymbols = (path) => {
-  if (isBrowser) {
-    path = path.endsWith("/") ? path : path + "/";
-    if (!PREFETCHED_NAVIGATE_PATHS.has(path)) {
-      PREFETCHED_NAVIGATE_PATHS.add(path);
-      document.dispatchEvent(new CustomEvent("qprefetch", {
-        detail: {
-          links: [
-            path
-          ]
-        }
-      }));
-    }
-  }
-};
-const loadClientData = async (url, element, opts) => {
+const Q_ROUTE = "q:route";
+const DEFAULT_LOADERS_SERIALIZATION_STRATEGY = globalThis.__DEFAULT_LOADERS_SERIALIZATION_STRATEGY__ || "never";
+const MAX_Q_DATA_RETRY_COUNT = 3;
+const loadClientData = async (url, element, opts, retryCount = 0) => {
   const pagePathname = url.pathname;
   const pageSearch = url.search;
-  const clientDataPath = getClientDataPath(pagePathname, pageSearch, opts?.action);
+  const clientDataPath = getClientDataPath(pagePathname, pageSearch, {
+    actionId: opts?.action?.id,
+    loaderIds: opts?.loaderIds
+  });
   let qData;
   if (!opts?.action) {
     qData = CLIENT_DATA_CACHE.get(clientDataPath);
   }
-  if (opts?.prefetchSymbols !== false) {
-    prefetchSymbols(pagePathname);
+  if (opts?.preloadRouteBundles !== false) {
+    preloadRouteBundles(pagePathname, 0.8);
   }
   let resolveFn;
   if (!qData) {
-    const fetchOptions = getFetchOptions(opts?.action);
+    const fetchOptions = getFetchOptions(opts?.action, opts?.clearCache);
     if (opts?.action) {
       opts.action.data = void 0;
     }
     qData = fetch(clientDataPath, fetchOptions).then((rsp) => {
+      if (rsp.status === 404 && opts?.loaderIds && retryCount < MAX_Q_DATA_RETRY_COUNT) {
+        opts.loaderIds = void 0;
+        return loadClientData(url, element, opts, retryCount + 1);
+      }
       if (rsp.redirected) {
         const redirectedURL = new URL(rsp.url);
         const isQData = redirectedURL.pathname.endsWith("/q-data.json");
@@ -196,16 +104,19 @@ const loadClientData = async (url, element, opts) => {
     return v;
   });
 };
-const getFetchOptions = (action) => {
+const getFetchOptions = (action, noCache) => {
   const actionData = action?.data;
   if (!actionData) {
-    return {
-      cache: "no-cache",
-      headers: {
-        "Cache-Control": "no-cache",
-        Pragma: "no-cache"
-      }
-    };
+    if (noCache) {
+      return {
+        cache: "no-cache",
+        headers: {
+          "Cache-Control": "no-cache",
+          Pragma: "no-cache"
+        }
+      };
+    }
+    return void 0;
   }
   if (actionData instanceof FormData) {
     return {
@@ -217,11 +128,108 @@ const getFetchOptions = (action) => {
       method: "POST",
       body: JSON.stringify(actionData),
       headers: {
-        "Content-Type": "application/json, charset=UTF-8"
+        "Content-Type": "application/json; charset=UTF-8"
       }
     };
   }
 };
+const toPath = (url) => url.pathname + url.search + url.hash;
+const toUrl = (url, baseUrl) => new URL(url, baseUrl.href);
+const isSameOrigin = (a, b) => a.origin === b.origin;
+const withSlash = (path) => path.endsWith("/") ? path : path + "/";
+const isSamePathname = ({ pathname: a }, { pathname: b }) => {
+  const lDiff = Math.abs(a.length - b.length);
+  return lDiff === 0 ? a === b : lDiff === 1 && withSlash(a) === withSlash(b);
+};
+const isSameSearchQuery = (a, b) => a.search === b.search;
+const isSamePath = (a, b) => isSameSearchQuery(a, b) && isSamePathname(a, b);
+const getClientDataPath = (pathname, pageSearch, options) => {
+  let search = pageSearch ?? "";
+  if (options?.actionId) {
+    search += (search ? "&" : "?") + QACTION_KEY + "=" + encodeURIComponent(options.actionId);
+  }
+  if (options?.loaderIds) {
+    for (const loaderId of options.loaderIds) {
+      search += (search ? "&" : "?") + QLOADER_KEY + "=" + encodeURIComponent(loaderId);
+    }
+  }
+  return pathname + (pathname.endsWith("/") ? "" : "/") + "q-data.json" + search;
+};
+const getClientNavPath = (props, baseUrl) => {
+  const href = props.href;
+  if (typeof href === "string" && typeof props.target !== "string" && !props.reload) {
+    try {
+      const linkUrl = toUrl(href.trim(), baseUrl.url);
+      const currentUrl = toUrl("", baseUrl.url);
+      if (isSameOrigin(linkUrl, currentUrl)) {
+        return toPath(linkUrl);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  } else if (props.reload) {
+    return toPath(toUrl("", baseUrl.url));
+  }
+  return null;
+};
+const shouldPreload = (clientNavPath, currentLoc) => {
+  if (clientNavPath) {
+    const prefetchUrl = toUrl(clientNavPath, currentLoc.url);
+    const currentUrl = toUrl("", currentLoc.url);
+    return !isSamePathname(prefetchUrl, currentUrl);
+  }
+  return false;
+};
+const isPromise = (value) => {
+  return value && typeof value.then === "function";
+};
+const createLoaderSignal = (loadersObject, loaderId, url, serializationStrategy, container) => {
+  return createAsyncComputed$(async () => {
+    if (isBrowser && loadersObject[loaderId] === _UNINITIALIZED) {
+      const data = await loadClientData(url, void 0, {
+        loaderIds: [
+          loaderId
+        ]
+      });
+      loadersObject[loaderId] = data?.loaders[loaderId] ?? _UNINITIALIZED;
+    }
+    return loadersObject[loaderId];
+  }, {
+    container,
+    serializationStrategy
+  });
+};
+const clientNavigate = (win, navType, fromURL, toURL, replaceState = false) => {
+  if (navType !== "popstate") {
+    const samePath = isSamePath(fromURL, toURL);
+    const sameHash = fromURL.hash === toURL.hash;
+    if (!samePath || !sameHash) {
+      const newState = {
+        _qRouterScroll: newScrollState()
+      };
+      if (replaceState) {
+        win.history.replaceState(newState, "", toPath(toURL));
+      } else {
+        win.history.pushState(newState, "", toPath(toURL));
+      }
+    }
+  }
+};
+const newScrollState = () => {
+  return {
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0
+  };
+};
+const preloadRouteBundles = (path, probability = 0.8) => {
+  if (isBrowser) {
+    path = path.endsWith("/") ? path : path + "/";
+    path = path.length > 1 && path.startsWith("/") ? path.slice(1) : path;
+    p(path, probability);
+  }
+};
 const RouteStateContext = /* @__PURE__ */ createContextId("qc-s");
 const ContentContext = /* @__PURE__ */ createContextId("qc-c");
 const ContentInternalContext = /* @__PURE__ */ createContextId("qc-ic");
@@ -249,54 +257,77 @@ const Link = component$((props) => {
   const nav = useNavigate();
   const loc = useLocation();
   const originalHref = props.href;
+  const anchorRef = useSignal();
   const { onClick$, prefetch: prefetchProp, reload, replaceState, scroll, ...linkProps } = /* @__PURE__ */ (() => props)();
   const clientNavPath = untrack(() => getClientNavPath({
     ...linkProps,
     reload
   }, loc));
   linkProps.href = clientNavPath || originalHref;
-  const prefetchData = untrack(() => !!clientNavPath && prefetchProp !== false && prefetchProp !== "js" && shouldPrefetchData(clientNavPath, loc) || void 0);
-  const prefetch = untrack(() => prefetchData || !!clientNavPath && prefetchProp !== false && shouldPrefetchSymbols(clientNavPath, loc));
+  const prefetchData = untrack(() => !!clientNavPath && prefetchProp !== false && prefetchProp !== "js" || void 0);
+  const prefetch = untrack(() => prefetchData || !!clientNavPath && prefetchProp !== false && shouldPreload(clientNavPath, loc));
   const handlePrefetch = prefetch ? $((_, elm) => {
     if (navigator.connection?.saveData) {
       return;
     }
     if (elm && elm.href) {
       const url = new URL(elm.href);
-      prefetchSymbols(url.pathname);
+      preloadRouteBundles(url.pathname);
       if (elm.hasAttribute("data-prefetch")) {
         loadClientData(url, elm, {
-          prefetchSymbols: false,
+          preloadRouteBundles: false,
           isPrefetch: true
         });
       }
     }
   }) : void 0;
-  const preventDefault = clientNavPath ? sync$((event, target) => {
+  const preventDefault = clientNavPath ? sync$((event) => {
     if (!(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
       event.preventDefault();
     }
   }) : void 0;
-  const handleClick = clientNavPath ? $(async (event, elm) => {
+  const handleClientSideNavigation = clientNavPath ? $((event, elm) => {
     if (event.defaultPrevented) {
       if (elm.href) {
         elm.setAttribute("aria-pressed", "true");
-        await nav(elm.href, {
+        nav(elm.href, {
           forceReload: reload,
           replaceState,
           scroll
+        }).then(() => {
+          elm.removeAttribute("aria-pressed");
         });
-        elm.removeAttribute("aria-pressed");
       }
     }
   }) : void 0;
+  const handlePreload = $((_, elm) => {
+    const url = new URL(elm.href);
+    preloadRouteBundles(url.pathname, 1);
+  });
+  useVisibleTask$(({ track }) => {
+    track(() => loc.url.pathname);
+    const handler = linkProps.onQVisible$;
+    if (handler) {
+      const event = new CustomEvent("qvisible");
+      if (Array.isArray(handler)) {
+        handler.flat(10).forEach((handler2) => handler2?.(event, anchorRef.value));
+      } else {
+        handler?.(event, anchorRef.value);
+      }
+    }
+    if (!isDev && anchorRef.value) {
+      handlePrefetch?.(void 0, anchorRef.value);
+    }
+  });
   return /* @__PURE__ */ jsx("a", {
+    ref: anchorRef,
     "q:link": !!clientNavPath,
     ...linkProps,
     onClick$: [
       preventDefault,
+      handlePreload,
       onClick$,
-      handleClick
+      handleClientSideNavigation
     ],
     "data-prefetch": prefetchData,
     onMouseOver$: [
@@ -307,16 +338,13 @@ const Link = component$((props) => {
       linkProps.onFocus$,
       handlePrefetch
     ],
-    // Don't prefetch on visible in dev mode
-    onQVisible$: [
-      linkProps.onQVisible$,
-      !isDev ? handlePrefetch : void 0
-    ],
+    // We need to prevent the onQVisible$ from being called twice since it is handled in the visible task
+    onQVisible$: [],
     children: /* @__PURE__ */ jsx(Slot, {})
   });
 });
-const resolveHead = (endpoint, routeLocation, contentModules, locale) => {
-  const head = createDocumentHead();
+const resolveHead = (endpoint, routeLocation, contentModules, locale, defaults) => {
+  const head = createDocumentHead(defaults);
   const getData = (loaderOrAction) => {
     const id = loaderOrAction.__id;
     if (loaderOrAction.__brand === "server_loader") {
@@ -372,13 +400,23 @@ const mergeArray = (existingArr, newArr) => {
     }
   }
 };
-const createDocumentHead = () => ({
-  title: "",
-  meta: [],
-  links: [],
-  styles: [],
-  scripts: [],
-  frontmatter: {}
+const createDocumentHead = (defaults) => ({
+  title: defaults?.title || "",
+  meta: [
+    ...defaults?.meta || []
+  ],
+  links: [
+    ...defaults?.links || []
+  ],
+  styles: [
+    ...defaults?.styles || []
+  ],
+  scripts: [
+    ...defaults?.scripts || []
+  ],
+  frontmatter: {
+    ...defaults?.frontmatter
+  }
 });
 function matchRoute(route, path) {
   const routeIdx = startIdxSkipSlash(route);
@@ -388,6 +426,9 @@ function matchRoute(route, path) {
   return matchRoutePart(route, routeIdx, routeLength, path, pathIdx, pathLength);
 }
 function matchRoutePart(route, routeIdx, routeLength, path, pathIdx, pathLength) {
+  if (path.startsWith("/build/")) {
+    return null;
+  }
   let params = null;
   while (routeIdx < routeLength) {
     const routeCh = route.charCodeAt(routeIdx++);
@@ -489,18 +530,42 @@ function lastIndexOf(text, start, match, searchIdx, notFoundIdx) {
   }
   return idx > start ? idx : notFoundIdx;
 }
+var RouteDataProp = /* @__PURE__ */ (function(RouteDataProp2) {
+  RouteDataProp2[RouteDataProp2["RouteName"] = 0] = "RouteName";
+  RouteDataProp2[RouteDataProp2["Loaders"] = 1] = "Loaders";
+  RouteDataProp2[RouteDataProp2["OriginalPathname"] = 2] = "OriginalPathname";
+  RouteDataProp2[RouteDataProp2["RouteBundleNames"] = 3] = "RouteBundleNames";
+  return RouteDataProp2;
+})({});
+var MenuDataProp = /* @__PURE__ */ (function(MenuDataProp2) {
+  MenuDataProp2[MenuDataProp2["Pathname"] = 0] = "Pathname";
+  MenuDataProp2[MenuDataProp2["MenuLoader"] = 1] = "MenuLoader";
+  return MenuDataProp2;
+})({});
+const deepFreeze = (obj) => {
+  if (obj == null) {
+    return obj;
+  }
+  Object.getOwnPropertyNames(obj).forEach((prop) => {
+    const value = obj[prop];
+    if (value && typeof value === "object" && !Object.isFrozen(value)) {
+      deepFreeze(value);
+    }
+  });
+  return Object.freeze(obj);
+};
 const loadRoute = async (routes, menus, cacheModules, pathname) => {
   if (!Array.isArray(routes)) {
     return null;
   }
   for (const routeData of routes) {
-    const routeName = routeData[0];
+    const routeName = routeData[RouteDataProp.RouteName];
     const params = matchRoute(routeName, pathname);
     if (!params) {
       continue;
     }
-    const loaders = routeData[1];
-    const routeBundleNames = routeData[3];
+    const loaders = routeData[RouteDataProp.Loaders];
+    const routeBundleNames = routeData[RouteDataProp.RouteBundleNames];
     const modules = new Array(loaders.length);
     const pendingLoads = [];
     loaders.forEach((moduleLoader, i) => {
@@ -545,9 +610,9 @@ const loadModule = (moduleLoader, pendingLoads, moduleSetter, cacheModules) => {
 const getMenuLoader = (menus, pathname) => {
   if (menus) {
     pathname = pathname.endsWith("/") ? pathname : pathname + "/";
-    const menu = menus.find((m) => m[0] === pathname || pathname.startsWith(m[0] + (pathname.endsWith("/") ? "" : "/")));
+    const menu = menus.find((m) => m[MenuDataProp.Pathname] === pathname || pathname.startsWith(m[MenuDataProp.Pathname] + (pathname.endsWith("/") ? "" : "/")));
     if (menu) {
-      return menu[1];
+      return menu[MenuDataProp.MenuLoader];
     }
   }
 };
@@ -739,8 +804,8 @@ const spaInit = event$((_, el) => {
     };
     win[scrollEnabled] = true;
     setTimeout(() => {
-      addEventListener("popstate", win[initPopstate]);
-      addEventListener("scroll", win[initScroll], {
+      win.addEventListener("popstate", win[initPopstate]);
+      win.addEventListener("scroll", win[initScroll], {
         passive: true
       });
       document.body.addEventListener("click", win[initAnchors]);
@@ -752,14 +817,45 @@ const spaInit = event$((_, el) => {
     }, 0);
   }
 });
+const startViewTransition = (params) => {
+  if (!params.update) {
+    return;
+  }
+  if ("startViewTransition" in document) {
+    let transition;
+    try {
+      transition = document.startViewTransition(params);
+    } catch {
+      transition = document.startViewTransition(params.update);
+    }
+    const event = new CustomEvent("qviewtransition", {
+      detail: transition
+    });
+    document.dispatchEvent(event);
+    return transition;
+  } else {
+    params.update?.();
+  }
+};
 const QWIK_CITY_SCROLLER = "_qCityScroller";
 const QWIK_ROUTER_SCROLLER = "_qRouterScroller";
 const preventNav = {};
 const internalState = {
   navCount: 0
 };
-const QwikRouterProvider = component$((props) => {
-  useStyles$(`:root{view-transition-name:none}`);
+const useQwikRouter = (props) => {
+  useStyles$(`
+    @layer qwik {
+      @supports selector(html:active-view-transition-type(type)) {
+        html:active-view-transition-type(qwik-navigation) {
+          :root{view-transition-name:none}
+        }
+      }
+      @supports not selector(html:active-view-transition-type(type)) {
+        :root{view-transition-name:none}
+      }
+    }
+  `);
   const env = useQwikRouterEnv();
   if (!env?.params) {
     throw new Error(`Missing Qwik Router Env Data for help visit https://github.com/QwikDev/qwik/issues/6237`);
@@ -768,19 +864,40 @@ const QwikRouterProvider = component$((props) => {
   if (!urlEnv) {
     throw new Error(`Missing Qwik URL Env Data`);
   }
+  const serverHead = useServerData("documentHead");
+  if (isServer) {
+    if (env.ev.originalUrl.pathname !== env.ev.url.pathname && !__EXPERIMENTAL__.enableRequestRewrite) {
+      throw new Error(`enableRequestRewrite is an experimental feature and is not enabled. Please enable the feature flag by adding \`experimental: ["enableRequestRewrite"]\` to your qwikVite plugin options.`);
+    }
+  }
   const url = new URL(urlEnv);
-  const routeLocation = useStore({
+  const routeLocationTarget = {
     url,
     params: env.params,
     isNavigating: false,
     prevUrl: void 0
-  }, {
+  };
+  const routeLocation = useStore(routeLocationTarget, {
     deep: false
   });
   const navResolver = {};
-  const loaderState = _weakSerialize(useStore(env.response.loaders, {
-    deep: false
-  }));
+  const container = _getContextContainer();
+  const getSerializationStrategy = (loaderId) => {
+    return env.response.loadersSerializationStrategy.get(loaderId) || DEFAULT_LOADERS_SERIALIZATION_STRATEGY;
+  };
+  const loadersObject = {};
+  const loaderState = {};
+  for (const [key, value] of Object.entries(env.response.loaders)) {
+    loadersObject[key] = value;
+    loaderState[key] = createLoaderSignal(loadersObject, key, url, getSerializationStrategy(key), container);
+  }
+  loadersObject[SerializerSymbol] = (obj) => {
+    const loadersSerializationObject = {};
+    for (const [k, v] of Object.entries(obj)) {
+      loadersSerializationObject[k] = getSerializationStrategy(k) === "always" ? v : _UNINITIALIZED;
+    }
+    return loadersSerializationObject;
+  };
   const routeInternal = useSignal({
     type: "initial",
     dest: url,
@@ -788,7 +905,7 @@ const QwikRouterProvider = component$((props) => {
     replaceState: false,
     scroll: true
   });
-  const documentHead = useStore(createDocumentHead);
+  const documentHead = useStore(() => createDocumentHead(serverHead));
   const content = useStore({
     headings: void 0,
     menu: void 0
@@ -873,7 +990,7 @@ const QwikRouterProvider = component$((props) => {
         let scroller = document.getElementById(QWIK_ROUTER_SCROLLER);
         if (!scroller) {
           scroller = document.getElementById(QWIK_CITY_SCROLLER);
-          if (scroller) {
+          if (scroller && isDev) {
             console.warn(`Please update your scroller ID to "${QWIK_ROUTER_SCROLLER}" as "${QWIK_CITY_SCROLLER}" is deprecated and will be removed in V3`);
           }
         }
@@ -934,10 +1051,10 @@ const QwikRouterProvider = component$((props) => {
       } else {
         trackUrl = new URL(navigation.dest, location);
         if (trackUrl.pathname.endsWith("/")) {
-          if (!qwikRouterConfig.trailingSlash) {
+          if (globalThis.__NO_TRAILING_SLASH__) {
             trackUrl.pathname = trackUrl.pathname.slice(0, -1);
           }
-        } else if (qwikRouterConfig.trailingSlash) {
+        } else if (!globalThis.__NO_TRAILING_SLASH__) {
           trackUrl.pathname += "/";
         }
         let loadRoutePromise = loadRoute(qwikRouterConfig.routes, qwikRouterConfig.menus, qwikRouterConfig.cacheModules, trackUrl.pathname);
@@ -956,12 +1073,21 @@ const QwikRouterProvider = component$((props) => {
         const newHref = pageData.href;
         const newURL = new URL(newHref, trackUrl);
         if (!isSamePath(newURL, trackUrl)) {
-          trackUrl = newURL;
-          loadRoutePromise = loadRoute(qwikRouterConfig.routes, qwikRouterConfig.menus, qwikRouterConfig.cacheModules, trackUrl.pathname);
+          if (!pageData.isRewrite) {
+            trackUrl = newURL;
+          }
+          loadRoutePromise = loadRoute(
+            qwikRouterConfig.routes,
+            qwikRouterConfig.menus,
+            qwikRouterConfig.cacheModules,
+            newURL.pathname
+            // Load the actual required path.
+          );
         }
         try {
           loadedRoute = await loadRoutePromise;
         } catch (e) {
+          console.error(e);
           window.location.href = newHref;
           return;
         }
@@ -970,25 +1096,38 @@ const QwikRouterProvider = component$((props) => {
         const [routeName, params, mods, menu] = loadedRoute;
         const contentModules = mods;
         const pageModule = contentModules[contentModules.length - 1];
-        const isRedirect = navType === "form" && !isSamePath(trackUrl, prevUrl);
-        if (navigation.dest.search && !isRedirect) {
+        if (navigation.dest.search && !!isSamePath(trackUrl, prevUrl)) {
           trackUrl.search = navigation.dest.search;
         }
+        let shouldForcePrevUrl = false;
+        let shouldForceUrl = false;
+        let shouldForceParams = false;
         if (!isSamePath(trackUrl, prevUrl)) {
-          routeLocation.prevUrl = prevUrl;
+          if (_hasStoreEffects(routeLocation, "prevUrl")) {
+            shouldForcePrevUrl = true;
+          }
+          routeLocationTarget.prevUrl = prevUrl;
+        }
+        if (routeLocationTarget.url !== trackUrl) {
+          if (_hasStoreEffects(routeLocation, "url")) {
+            shouldForceUrl = true;
+          }
+          routeLocationTarget.url = trackUrl;
+        }
+        if (routeLocationTarget.params !== params) {
+          if (_hasStoreEffects(routeLocation, "params")) {
+            shouldForceParams = true;
+          }
+          routeLocationTarget.params = params;
         }
-        routeLocation.url = trackUrl;
-        routeLocation.params = {
-          ...params
-        };
         routeInternal.untrackedValue = {
           type: navType,
           dest: trackUrl
         };
-        const resolvedHead = resolveHead(clientPageData, routeLocation, contentModules, locale);
+        const resolvedHead = resolveHead(clientPageData, routeLocation, contentModules, locale, serverHead);
         content.headings = pageModule.headings;
         content.menu = menu;
-        contentInternal.value = noSerialize(contentModules);
+        contentInternal.untrackedValue = noSerialize(contentModules);
         documentHead.links = resolvedHead.links;
         documentHead.meta = resolvedHead.meta;
         documentHead.styles = resolvedHead.styles;
@@ -996,23 +1135,30 @@ const QwikRouterProvider = component$((props) => {
         documentHead.title = resolvedHead.title;
         documentHead.frontmatter = resolvedHead.frontmatter;
         if (isBrowser) {
-          if (props.viewTransition !== false) {
-            document.__q_view_transition__ = true;
-          }
           let scrollState;
           if (navType === "popstate") {
             scrollState = getScrollHistory();
           }
           const scroller = document.getElementById(QWIK_ROUTER_SCROLLER) ?? document.documentElement;
-          if (navigation.scroll && (!navigation.forceReload || !isSamePath(trackUrl, prevUrl)) && (navType === "link" || navType === "popstate") || isRedirect) {
+          if (navigation.scroll && (!navigation.forceReload || !isSamePath(trackUrl, prevUrl)) && (navType === "link" || navType === "popstate") || navType === "form" && !isSamePath(trackUrl, prevUrl)) {
             document.__q_scroll_restore__ = () => restoreScroll(navType, trackUrl, prevUrl, scroller, scrollState);
           }
           const loaders = clientPageData?.loaders;
-          const win = window;
           if (loaders) {
-            Object.assign(loaderState, loaders);
+            const container2 = _getContextContainer();
+            for (const [key, value] of Object.entries(loaders)) {
+              const signal = loaderState[key];
+              const awaitedValue = await value;
+              loadersObject[key] = awaitedValue;
+              if (!signal) {
+                loaderState[key] = createLoaderSignal(loadersObject, key, trackUrl, DEFAULT_LOADERS_SERIALIZATION_STRATEGY, container2);
+              } else {
+                signal.invalidate();
+              }
+            }
           }
           CLIENT_DATA_CACHE.clear();
+          const win = window;
           if (!win._qRouterSPA) {
             win._qRouterSPA = true;
             history.scrollRestoration = "manual";
@@ -1121,33 +1267,64 @@ const QwikRouterProvider = component$((props) => {
             const scrollState2 = currentScrollState(scroller);
             saveScrollHistory(scrollState2);
           }
-          clientNavigate(window, navType, prevUrl, trackUrl, replaceState);
-          _waitUntilRendered(elm).then(() => {
-            const container = _getQContainerElement(elm);
-            container.setAttribute("q:route", routeName);
+          const navigate = () => {
+            clientNavigate(window, navType, prevUrl, trackUrl, replaceState);
+            contentInternal.force();
+            return _waitUntilRendered(elm);
+          };
+          const _waitNextPage = () => {
+            if (isServer || props?.viewTransition === false) {
+              return navigate();
+            } else {
+              const viewTransition = startViewTransition({
+                update: navigate,
+                types: [
+                  "qwik-navigation"
+                ]
+              });
+              if (!viewTransition) {
+                return Promise.resolve();
+              }
+              return viewTransition.ready;
+            }
+          };
+          _waitNextPage().then(() => {
+            const container2 = _getQContainerElement(elm);
+            container2.setAttribute(Q_ROUTE, routeName);
             const scrollState2 = currentScrollState(scroller);
             saveScrollHistory(scrollState2);
             win._qRouterScrollEnabled = true;
             if (isBrowser) {
               callRestoreScrollOnDocument();
             }
+            if (shouldForcePrevUrl) {
+              forceStoreEffects(routeLocation, "prevUrl");
+            }
+            if (shouldForceUrl) {
+              forceStoreEffects(routeLocation, "url");
+            }
+            if (shouldForceParams) {
+              forceStoreEffects(routeLocation, "params");
+            }
             routeLocation.isNavigating = false;
             navResolver.r?.();
           });
         }
       }
     }
-    const promise = run();
     if (isServer) {
-      return promise;
+      return run();
     } else {
-      return;
+      run();
     }
   });
+};
+const QwikRouterProvider = component$((props) => {
+  useQwikRouter(props);
   return /* @__PURE__ */ jsx(Slot, {});
 });
 const QwikCityProvider = QwikRouterProvider;
-const QwikRouterMockProvider = component$((props) => {
+const useQwikMockRouter = (props) => {
   const urlEnv = props.url ?? "http://localhost/";
   const url = new URL(urlEnv);
   const routeLocation = useStore({
@@ -1158,7 +1335,7 @@ const QwikRouterMockProvider = component$((props) => {
   }, {
     deep: false
   });
-  const loaderState = useSignal({});
+  const loaderState = {};
   const routeInternal = useSignal({
     type: "initial",
     dest: url
@@ -1185,6 +1362,9 @@ const QwikRouterMockProvider = component$((props) => {
   useContextProvider(RouteStateContext, loaderState);
   useContextProvider(RouteActionContext, actionState);
   useContextProvider(RouteInternalContext, routeInternal);
+};
+const QwikRouterMockProvider = component$((props) => {
+  useQwikMockRouter(props);
   return /* @__PURE__ */ jsx(Slot, {});
 });
 const QwikCityMockProvider = QwikRouterMockProvider;
@@ -1193,13 +1373,14 @@ const RouterOutlet = component$(() => {
   if (!serverData) {
     throw new Error("PrefetchServiceWorker component must be rendered on the server.");
   }
-  const { value } = useContext(ContentInternalContext);
-  if (value && value.length > 0) {
-    const contentsLen = value.length;
+  const internalContext = useContext(ContentInternalContext);
+  const contents = internalContext.value;
+  if (contents && contents.length > 0) {
+    const contentsLen = contents.length;
     let cmp = null;
     for (let i = contentsLen - 1; i >= 0; i--) {
-      if (value[i].default) {
-        cmp = jsx$1(value[i].default, {
+      if (contents[i].default) {
+        cmp = jsx$1(contents[i].default, {
           children: cmp
         });
       }
@@ -1403,24 +1584,25 @@ const globalActionQrl = (actionQrl, ...rest) => {
 const routeAction$ = /* @__PURE__ */ implicit$FirstArg(routeActionQrl);
 const globalAction$ = /* @__PURE__ */ implicit$FirstArg(globalActionQrl);
 const routeLoaderQrl = (loaderQrl, ...rest) => {
-  const { id, validators } = getValidators(rest, loaderQrl);
+  const { id, validators, serializationStrategy } = getValidators(rest, loaderQrl);
   function loader() {
-    return useContext(RouteStateContext, (state) => {
-      if (!(id in state)) {
-        throw new Error(`routeLoader$ "${loaderQrl.getSymbol()}" was invoked in a route where it was not declared.
+    const state = _resolveContextWithoutSequentialScope(RouteStateContext);
+    if (!(id in state)) {
+      throw new Error(`routeLoader$ "${loaderQrl.getSymbol()}" was invoked in a route where it was not declared.
     This is because the routeLoader$ was not exported in a 'layout.tsx' or 'index.tsx' file of the existing route.
     For more information check: https://qwik.dev/docs/route-loader/
 
     If your are managing reusable logic or a library it is essential that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
     For more information check: https://qwik.dev/docs/re-exporting-loaders/`);
-      }
-      return _wrapStore(state, id);
-    });
+    }
+    untrack(() => state[id].value);
+    return state[id];
   }
   loader.__brand = "server_loader";
   loader.__qrl = loaderQrl;
   loader.__validators = validators;
   loader.__id = id;
+  loader.__serializationStrategy = serializationStrategy;
   Object.freeze(loader);
   return loader;
 };
@@ -1525,7 +1707,7 @@ const zodQrl = (qrl) => {
           }
         });
         const data = inputData ?? await ev.parseBody();
-        const result = await schema.safeParseAsync(data);
+        const result = await withLocale(ev.locale(), () => schema.safeParseAsync(data));
         if (result.success) {
           return result;
         } else {
@@ -1610,7 +1792,7 @@ const serverQrl = (qrl, options) => {
         const res = await fetch(`${origin}?${QFN_KEY}=${qrlHash}${query}`, config);
         const contentType = res.headers.get("Content-Type");
         if (res.ok && contentType === "text/qwik-json-stream" && res.body) {
-          return async function* () {
+          return (async function* () {
             try {
               for await (const result of deserializeStream(res.body, ctxElm ?? document.documentElement, abortSignal)) {
                 yield result;
@@ -1620,7 +1802,7 @@ const serverQrl = (qrl, options) => {
                 await res.body.cancel();
               }
             }
-          }();
+          })();
         } else if (contentType === "application/qwik-json") {
           const str = await res.text();
           const [obj] = _deserialize(str, ctxElm ?? document.documentElement);
@@ -1649,6 +1831,7 @@ const serverQrl = (qrl, options) => {
 const server$ = /* @__PURE__ */ implicit$FirstArg(serverQrl);
 const getValidators = (rest, qrl) => {
   let id;
+  let serializationStrategy = DEFAULT_LOADERS_SERIALIZATION_STRATEGY;
   const validators = [];
   if (rest.length === 1) {
     const options = rest[0];
@@ -1657,6 +1840,9 @@ const getValidators = (rest, qrl) => {
         validators.push(options);
       } else {
         id = options.id;
+        if (options.serializationStrategy) {
+          serializationStrategy = options.serializationStrategy;
+        }
         if (options.validation) {
           validators.push(...options.validation);
         }
@@ -1677,7 +1863,8 @@ const getValidators = (rest, qrl) => {
   }
   return {
     validators: validators.reverse(),
-    id
+    id,
+    serializationStrategy
   };
 };
 const deserializeStream = async function* (stream, ctxElm, abortSignal) {
@@ -1704,7 +1891,8 @@ const deserializeStream = async function* (stream, ctxElm, abortSignal) {
     reader.releaseLock();
   }
 };
-const ServiceWorkerRegister = (props) => jsx$1("script", {
+const ServiceWorkerRegister = (props) => /* @__PURE__ */ jsx("script", {
+  type: "module",
   dangerouslySetInnerHTML: swRegister,
   nonce: props.nonce
 });
@@ -1828,7 +2016,52 @@ function omitProps(obj, keys) {
   }
   return omittedObj;
 }
+const createRenderer = (getOptions) => {
+  return (opts) => {
+    const { jsx: jsx2, options } = getOptions(opts);
+    return renderToStream(jsx2, options);
+  };
+};
+const DocumentHeadTags = component$((props) => {
+  let head = useDocumentHead();
+  if (props) {
+    head = {
+      ...head,
+      ...props
+    };
+  }
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      head.title && /* @__PURE__ */ jsx("title", {
+        children: head.title
+      }),
+      head.meta.map((m) => /* @__PURE__ */ jsx("meta", {
+        ...m
+      })),
+      head.links.map((l) => /* @__PURE__ */ jsx("link", {
+        ...l
+      })),
+      head.styles.map((s) => {
+        const props2 = s.props || s;
+        return /* @__PURE__ */ createElement("style", {
+          ...props2,
+          dangerouslySetInnerHTML: s.style || props2.dangerouslySetInnerHTML,
+          key: s.key
+        });
+      }),
+      head.scripts.map((s) => {
+        const props2 = s.props || s;
+        return /* @__PURE__ */ createElement("script", {
+          ...props2,
+          dangerouslySetInnerHTML: s.script || props2.dangerouslySetInnerHTML,
+          key: s.key
+        });
+      })
+    ]
+  });
+});
 export {
+  DocumentHeadTags,
   ErrorBoundary,
   Form,
   Link,
@@ -1840,6 +2073,7 @@ export {
   QwikRouterProvider,
   RouterOutlet,
   ServiceWorkerRegister,
+  createRenderer,
   globalAction$,
   globalActionQrl,
   omitProps,
@@ -1856,6 +2090,7 @@ export {
   useNavigate,
   usePreventNavigate$,
   usePreventNavigateQrl,
+  useQwikRouter,
   valibot$,
   valibotQrl,
   validator$,