@qwik.dev/router 2.0.0-beta.1 → 2.0.0-beta.10

package/lib/index.qwik.mjs

@@ -1,11 +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, useSignal, untrack, sync$, isDev, withLocale, event$, useStyles$, isServer, useStore, useContextProvider, useTask$, getLocale, jsx as jsx$1, SkipRender } from "@qwik.dev/core";
+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, _weakSerialize, _getContextElement, _getQContainerElement, _waitUntilRendered, _wrapStore, _getContextEvent, _serialize } from "@qwik.dev/core/internal";
+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) => {
@@ -21,106 +22,25 @@ const ErrorBoundary = component$((props) => {
 const MODULE_CACHE = /* @__PURE__ */ new WeakMap();
 const CLIENT_DATA_CACHE = /* @__PURE__ */ new Map();
 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 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 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 + "/";
-    path = path.length > 1 && path.startsWith("/") ? path.slice(1) : path;
-    p(path, 0.8);
-  }
-};
-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) {
@@ -129,6 +49,10 @@ const loadClientData = async (url, element, opts) => {
       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");
@@ -204,11 +128,108 @@ const getFetchOptions = (action, noCache) => {
       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");
@@ -251,33 +272,38 @@ const Link = component$((props) => {
     }
     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$;
@@ -299,8 +325,9 @@ const Link = component$((props) => {
     ...linkProps,
     onClick$: [
       preventDefault,
+      handlePreload,
       onClick$,
-      handleClick
+      handleClientSideNavigation
     ],
     "data-prefetch": prefetchData,
     onMouseOver$: [
@@ -316,8 +343,8 @@ const Link = component$((props) => {
     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") {
@@ -373,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);
@@ -389,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++);
@@ -490,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) => {
@@ -546,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];
     }
   }
 };
@@ -740,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]);
@@ -779,11 +843,11 @@ const preventNav = {};
 const internalState = {
   navCount: 0
 };
-const QwikRouterProvider = component$((props) => {
+const useQwikRouter = (props) => {
   useStyles$(`
     @layer qwik {
       @supports selector(html:active-view-transition-type(type)) {
-        html:active-view-transition-type(qwik-router-spa) {
+        html:active-view-transition-type(qwik-navigation) {
           :root{view-transition-name:none}
         }
       }
@@ -800,24 +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,
@@ -825,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
@@ -910,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`);
           }
         }
@@ -971,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);
@@ -1016,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;
@@ -1047,15 +1140,25 @@ const QwikRouterProvider = component$((props) => {
             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";
@@ -1166,10 +1269,11 @@ const QwikRouterProvider = component$((props) => {
           }
           const navigate = () => {
             clientNavigate(window, navType, prevUrl, trackUrl, replaceState);
+            contentInternal.force();
             return _waitUntilRendered(elm);
           };
           const _waitNextPage = () => {
-            if (isServer || props.viewTransition === false) {
+            if (isServer || props?.viewTransition === false) {
               return navigate();
             } else {
               const viewTransition = startViewTransition({
@@ -1185,14 +1289,23 @@ const QwikRouterProvider = component$((props) => {
             }
           };
           _waitNextPage().then(() => {
-            const container = _getQContainerElement(elm);
-            container.setAttribute("q:route", routeName);
+            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?.();
           });
@@ -1205,10 +1318,13 @@ const QwikRouterProvider = component$((props) => {
       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({
@@ -1219,7 +1335,7 @@ const QwikRouterMockProvider = component$((props) => {
   }, {
     deep: false
   });
-  const loaderState = useSignal({});
+  const loaderState = {};
   const routeInternal = useSignal({
     type: "initial",
     dest: url
@@ -1246,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;
@@ -1254,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
         });
       }
@@ -1464,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;
 };
@@ -1586,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 {
@@ -1671,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;
@@ -1681,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);
@@ -1710,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];
@@ -1718,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);
         }
@@ -1738,7 +1863,8 @@ const getValidators = (rest, qrl) => {
   }
   return {
     validators: validators.reverse(),
-    id
+    id,
+    serializationStrategy
   };
 };
 const deserializeStream = async function* (stream, ctxElm, abortSignal) {
@@ -1890,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,
@@ -1902,6 +2073,7 @@ export {
   QwikRouterProvider,
   RouterOutlet,
   ServiceWorkerRegister,
+  createRenderer,
   globalAction$,
   globalActionQrl,
   omitProps,
@@ -1918,6 +2090,7 @@ export {
   useNavigate,
   usePreventNavigate$,
   usePreventNavigateQrl,
+  useQwikRouter,
   valibot$,
   valibotQrl,
   validator$,