@qwik.dev/router 2.0.0-beta.2 → 2.0.0-beta.21

package/lib/index.qwik.mjs

@@ -1,214 +1,31 @@
-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 { p } from "@qwik.dev/core/preloader";
-import { _deserialize, _weakSerialize, _getContextElement, _getQContainerElement, _waitUntilRendered, _wrapStore, _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 { jsx, Fragment, jsxs } from '@qwik.dev/core/jsx-runtime';
+import { component$, useErrorBoundary, useOnWindow, $, Slot, createContextId, useContext, implicit$FirstArg, noSerialize, useVisibleTask$, useServerData, useSignal, untrack, sync$, isDev, withLocale, event$, isServer, useStyles$, useStore, isBrowser, useContextProvider, useTask$, getLocale, jsx as jsx$1, SkipRender, createElement } from '@qwik.dev/core';
+import { g as getClientNavPath, s as shouldPreload, p as preloadRouteBundles, l as loadClientData, i as isPromise, a as isSamePath, c as createLoaderSignal, t as toUrl, b as isSameOrigin, d as loadRoute, D as DEFAULT_LOADERS_SERIALIZATION_STRATEGY, C as CLIENT_DATA_CACHE, Q as Q_ROUTE, e as clientNavigate, f as deepFreeze, h as QFN_KEY, j as QACTION_KEY, k as QDATA_KEY } from './chunks/routing.qwik.mjs';
+import * as qwikRouterConfig from '@qwik-router-config';
+import { _getContextContainer, SerializerSymbol, _UNINITIALIZED, _hasStoreEffects, forceStoreEffects, _waitUntilRendered, _getContextHostElement, _getContextEvent, _serialize, _deserialize, _resolveContextWithoutSequentialScope } from '@qwik.dev/core/internal';
+import { _asyncRequestStore } from '@qwik.dev/router/middleware/request-handler';
+import * as v from 'valibot';
+import * as z from 'zod';
+export { z } from 'zod';
+import swRegister from '@qwik-router-sw-register';
+import { renderToStream } from '@qwik.dev/core/server';
+import '@qwik.dev/core/preloader';
+import './chunks/types.qwik.mjs';
+
 const ErrorBoundary = component$((props) => {
-  const store2 = useErrorBoundary();
-  useOnWindow("qerror", $((e) => {
-    store2.error = e.detail.error;
-  }));
-  if (store2.error && props.fallback$) {
-    return /* @__PURE__ */ jsx(Fragment, {
-      children: props.fallback$(store2.error)
-    });
+  const store = useErrorBoundary();
+  useOnWindow(
+    "qerror",
+    $((e) => {
+      store.error = e.detail.error;
+    })
+  );
+  if (store.error && props.fallback$) {
+    return /* @__PURE__ */ jsx(Fragment, { children: props.fallback$(store.error) });
   }
   return /* @__PURE__ */ jsx(Slot, {});
 });
-const MODULE_CACHE = /* @__PURE__ */ new WeakMap();
-const CLIENT_DATA_CACHE = /* @__PURE__ */ new Map();
-const QACTION_KEY = "qaction";
-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 pagePathname = url.pathname;
-  const pageSearch = url.search;
-  const clientDataPath = getClientDataPath(pagePathname, pageSearch, opts?.action);
-  let qData;
-  if (!opts?.action) {
-    qData = CLIENT_DATA_CACHE.get(clientDataPath);
-  }
-  if (opts?.prefetchSymbols !== false) {
-    prefetchSymbols(pagePathname);
-  }
-  let resolveFn;
-  if (!qData) {
-    const fetchOptions = getFetchOptions(opts?.action, opts?.clearCache);
-    if (opts?.action) {
-      opts.action.data = void 0;
-    }
-    qData = fetch(clientDataPath, fetchOptions).then((rsp) => {
-      if (rsp.redirected) {
-        const redirectedURL = new URL(rsp.url);
-        const isQData = redirectedURL.pathname.endsWith("/q-data.json");
-        if (!isQData || redirectedURL.origin !== location.origin) {
-          location.href = redirectedURL.href;
-          return;
-        }
-      }
-      if ((rsp.headers.get("content-type") || "").includes("json")) {
-        return rsp.text().then((text) => {
-          const [clientData] = _deserialize(text, element);
-          if (!clientData) {
-            location.href = url.href;
-            return;
-          }
-          if (opts?.clearCache) {
-            CLIENT_DATA_CACHE.delete(clientDataPath);
-          }
-          if (clientData.redirect) {
-            location.href = clientData.redirect;
-          } else if (opts?.action) {
-            const { action } = opts;
-            const actionData = clientData.loaders[action.id];
-            resolveFn = () => {
-              action.resolve({
-                status: rsp.status,
-                result: actionData
-              });
-            };
-          }
-          return clientData;
-        });
-      } else {
-        if (opts?.isPrefetch !== true) {
-          location.href = url.href;
-        }
-        return void 0;
-      }
-    });
-    if (!opts?.action) {
-      CLIENT_DATA_CACHE.set(clientDataPath, qData);
-    }
-  }
-  return qData.then((v) => {
-    if (!v) {
-      CLIENT_DATA_CACHE.delete(clientDataPath);
-    }
-    resolveFn && resolveFn();
-    return v;
-  });
-};
-const getFetchOptions = (action, noCache) => {
-  const actionData = action?.data;
-  if (!actionData) {
-    if (noCache) {
-      return {
-        cache: "no-cache",
-        headers: {
-          "Cache-Control": "no-cache",
-          Pragma: "no-cache"
-        }
-      };
-    }
-    return void 0;
-  }
-  if (actionData instanceof FormData) {
-    return {
-      method: "POST",
-      body: actionData
-    };
-  } else {
-    return {
-      method: "POST",
-      body: JSON.stringify(actionData),
-      headers: {
-        "Content-Type": "application/json, charset=UTF-8"
-      }
-    };
-  }
-};
+
 const RouteStateContext = /* @__PURE__ */ createContextId("qc-s");
 const ContentContext = /* @__PURE__ */ createContextId("qc-c");
 const ContentInternalContext = /* @__PURE__ */ createContextId("qc-ic");
@@ -216,15 +33,17 @@ const DocumentHeadContext = /* @__PURE__ */ createContextId("qc-h");
 const RouteLocationContext = /* @__PURE__ */ createContextId("qc-l");
 const RouteNavigateContext = /* @__PURE__ */ createContextId("qc-n");
 const RouteActionContext = /* @__PURE__ */ createContextId("qc-a");
-const RouteInternalContext = /* @__PURE__ */ createContextId("qc-ir");
 const RoutePreventNavigateContext = /* @__PURE__ */ createContextId("qc-p");
+
 const useContent = () => useContext(ContentContext);
 const useDocumentHead = () => useContext(DocumentHeadContext);
 const useLocation = () => useContext(RouteLocationContext);
 const useNavigate = () => useContext(RouteNavigateContext);
 const usePreventNavigateQrl = (fn) => {
   if (!__EXPERIMENTAL__.preventNavigate) {
-    throw new Error('usePreventNavigate$ is experimental and must be enabled with `experimental: ["preventNavigate"]` in the `qwikVite` plugin.');
+    throw new Error(
+      'usePreventNavigate$ is experimental and must be enabled with `experimental: ["preventNavigate"]` in the `qwikVite` plugin.'
+    );
   }
   const registerPreventNav = useContext(RoutePreventNavigateContext);
   useVisibleTask$(() => registerPreventNav(fn));
@@ -232,59 +51,67 @@ const usePreventNavigateQrl = (fn) => {
 const usePreventNavigate$ = implicit$FirstArg(usePreventNavigateQrl);
 const useAction = () => useContext(RouteActionContext);
 const useQwikRouterEnv = () => noSerialize(useServerData("qwikrouter"));
+
 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));
+  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" || void 0);
-  const prefetch = untrack(() => prefetchData || !!clientNavPath && prefetchProp !== false && shouldPreload(clientNavPath, loc));
+  const prefetchData = !!clientNavPath && prefetchProp !== false && prefetchProp !== "js" || void 0;
+  const prefetch = prefetchData || !!clientNavPath && prefetchProp !== false && untrack(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,
+        loadClientData(url, {
+          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, {
-          forceReload: reload,
-          replaceState,
-          scroll
+        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));
+        handler.flat(10).forEach(
+          (handler2) => handler2?.(event, anchorRef.value)
+        );
       } else {
         handler?.(event, anchorRef.value);
       }
@@ -293,36 +120,37 @@ const Link = component$((props) => {
       handlePrefetch?.(void 0, anchorRef.value);
     }
   });
-  return /* @__PURE__ */ jsx("a", {
-    ref: anchorRef,
-    "q:link": !!clientNavPath,
-    ...linkProps,
-    onClick$: [
-      preventDefault,
-      onClick$,
-      handleClick
-    ],
-    "data-prefetch": prefetchData,
-    onMouseOver$: [
-      linkProps.onMouseOver$,
-      handlePrefetch
-    ],
-    onFocus$: [
-      linkProps.onFocus$,
-      handlePrefetch
-    ],
-    // We need to prevent the onQVisible$ from being called twice since it is handled in the visible task
-    onQVisible$: [],
-    children: /* @__PURE__ */ jsx(Slot, {})
-  });
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ref: anchorRef,
+      ...{ "q:link": !!clientNavPath },
+      ...linkProps,
+      onClick$: [
+        preventDefault,
+        handlePreload,
+        // needs to be in between preventDefault and onClick$ to ensure it starts asap.
+        onClick$,
+        handleClientSideNavigation
+      ],
+      "data-prefetch": prefetchData,
+      onMouseOver$: [linkProps.onMouseOver$, handlePrefetch],
+      onFocus$: [linkProps.onFocus$, handlePrefetch],
+      onQVisible$: [],
+      children: /* @__PURE__ */ jsx(Slot, {})
+    }
+  );
 });
-const resolveHead = (endpoint, routeLocation, contentModules, locale) => {
-  const head = createDocumentHead();
-  const getData = (loaderOrAction) => {
+
+const resolveHead = (endpoint, routeLocation, contentModules, locale, defaults) => withLocale(locale, () => {
+  const head = createDocumentHead(defaults);
+  const getData = ((loaderOrAction) => {
     const id = loaderOrAction.__id;
     if (loaderOrAction.__brand === "server_loader") {
       if (!(id in endpoint.loaders)) {
-        throw new Error("You can not get the returned data of a loader that has not been executed for this request.");
+        throw new Error(
+          "You can not get the returned data of a loader that has not been executed for this request."
+        );
       }
     }
     const data = endpoint.loaders[id];
@@ -330,25 +158,31 @@ const resolveHead = (endpoint, routeLocation, contentModules, locale) => {
       throw new Error("Loaders returning a promise can not be resolved for the head function.");
     }
     return data;
-  };
-  const headProps = {
-    head,
-    withLocale: (fn) => withLocale(locale, fn),
-    resolveValue: getData,
-    ...routeLocation
-  };
-  for (let i = contentModules.length - 1; i >= 0; i--) {
-    const contentModuleHead = contentModules[i] && contentModules[i].head;
+  });
+  const fns = [];
+  for (const contentModule of contentModules) {
+    const contentModuleHead = contentModule?.head;
     if (contentModuleHead) {
       if (typeof contentModuleHead === "function") {
-        resolveDocumentHead(head, withLocale(locale, () => contentModuleHead(headProps)));
+        fns.unshift(contentModuleHead);
       } else if (typeof contentModuleHead === "object") {
         resolveDocumentHead(head, contentModuleHead);
       }
     }
   }
-  return headProps.head;
-};
+  if (fns.length) {
+    const headProps = {
+      head,
+      withLocale: (fn) => fn(),
+      resolveValue: getData,
+      ...routeLocation
+    };
+    for (const fn of fns) {
+      resolveDocumentHead(head, fn(headProps));
+    }
+  }
+  return head;
+});
 const resolveDocumentHead = (resolvedHead, updatedHead) => {
   if (typeof updatedHead.title === "string") {
     resolvedHead.title = updatedHead.title;
@@ -373,207 +207,39 @@ 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);
-  const routeLength = lengthNoTrailingSlash(route);
-  const pathIdx = startIdxSkipSlash(path);
-  const pathLength = lengthNoTrailingSlash(path);
-  return matchRoutePart(route, routeIdx, routeLength, path, pathIdx, pathLength);
-}
-function matchRoutePart(route, routeIdx, routeLength, path, pathIdx, pathLength) {
-  let params = null;
-  while (routeIdx < routeLength) {
-    const routeCh = route.charCodeAt(routeIdx++);
-    const pathCh = path.charCodeAt(pathIdx++);
-    if (routeCh === 91) {
-      const isMany = isThreeDots(route, routeIdx);
-      const paramNameStart = routeIdx + (isMany ? 3 : 0);
-      const paramNameEnd = scan(route, paramNameStart, routeLength, 93);
-      const paramName = route.substring(paramNameStart, paramNameEnd);
-      const paramSuffixEnd = scan(route, paramNameEnd + 1, routeLength, 47);
-      const suffix = route.substring(paramNameEnd + 1, paramSuffixEnd);
-      routeIdx = paramNameEnd + 1;
-      const paramValueStart = pathIdx - 1;
-      if (isMany) {
-        const match = recursiveScan(paramName, suffix, path, paramValueStart, pathLength, route, routeIdx + suffix.length + 1, routeLength);
-        if (match) {
-          return Object.assign(params || (params = {}), match);
-        }
-      }
-      const paramValueEnd = scan(path, paramValueStart, pathLength, 47, suffix);
-      if (paramValueEnd == -1) {
-        return null;
-      }
-      const paramValue = path.substring(paramValueStart, paramValueEnd);
-      if (!isMany && !suffix && !paramValue) {
-        return null;
-      }
-      pathIdx = paramValueEnd;
-      (params || (params = {}))[paramName] = decodeURIComponent(paramValue);
-    } else if (routeCh !== pathCh) {
-      if (!(isNaN(pathCh) && isRestParameter(route, routeIdx))) {
-        return null;
-      }
-    }
-  }
-  if (allConsumed(route, routeIdx) && allConsumed(path, pathIdx)) {
-    return params || {};
-  } else {
-    return null;
-  }
-}
-function isRestParameter(text, idx) {
-  return text.charCodeAt(idx) === 91 && isThreeDots(text, idx + 1);
-}
-function lengthNoTrailingSlash(text) {
-  const length = text.length;
-  return length > 1 && text.charCodeAt(length - 1) === 47 ? length - 1 : length;
-}
-function allConsumed(text, idx) {
-  const length = text.length;
-  return idx >= length || idx == length - 1 && text.charCodeAt(idx) === 47;
-}
-function startIdxSkipSlash(text) {
-  return text.charCodeAt(0) === 47 ? 1 : 0;
-}
-function isThreeDots(text, idx) {
-  return text.charCodeAt(idx) === 46 && text.charCodeAt(idx + 1) === 46 && text.charCodeAt(idx + 2) === 46;
-}
-function scan(text, idx, end, ch, suffix = "") {
-  while (idx < end && text.charCodeAt(idx) !== ch) {
-    idx++;
-  }
-  const suffixLength = suffix.length;
-  for (let i = 0; i < suffixLength; i++) {
-    if (text.charCodeAt(idx - suffixLength + i) !== suffix.charCodeAt(i)) {
-      return -1;
-    }
-  }
-  return idx - suffixLength;
-}
-function recursiveScan(paramName, suffix, path, pathStart, pathLength, route, routeStart, routeLength) {
-  if (path.charCodeAt(pathStart) === 47) {
-    pathStart++;
-  }
-  let pathIdx = pathLength;
-  const sep = suffix + "/";
-  while (pathIdx >= pathStart) {
-    const match = matchRoutePart(route, routeStart, routeLength, path, pathIdx, pathLength);
-    if (match) {
-      let value = path.substring(pathStart, Math.min(pathIdx, pathLength));
-      if (value.endsWith(sep)) {
-        value = value.substring(0, value.length - sep.length);
-      }
-      match[paramName] = decodeURIComponent(value);
-      return match;
-    }
-    const newPathIdx = lastIndexOf(path, pathStart, sep, pathIdx, pathStart - 1) + sep.length;
-    if (pathIdx === newPathIdx) {
-      break;
-    }
-    pathIdx = newPathIdx;
-  }
-  return null;
-}
-function lastIndexOf(text, start, match, searchIdx, notFoundIdx) {
-  let idx = text.lastIndexOf(match, searchIdx);
-  if (idx == searchIdx - match.length) {
-    idx = text.lastIndexOf(match, searchIdx - match.length - 1);
-  }
-  return idx > start ? idx : notFoundIdx;
-}
-const loadRoute = async (routes, menus, cacheModules, pathname) => {
-  if (!Array.isArray(routes)) {
-    return null;
-  }
-  for (const routeData of routes) {
-    const routeName = routeData[0];
-    const params = matchRoute(routeName, pathname);
-    if (!params) {
-      continue;
-    }
-    const loaders = routeData[1];
-    const routeBundleNames = routeData[3];
-    const modules = new Array(loaders.length);
-    const pendingLoads = [];
-    loaders.forEach((moduleLoader, i) => {
-      loadModule(moduleLoader, pendingLoads, (routeModule) => modules[i] = routeModule, cacheModules);
-    });
-    const menuLoader = getMenuLoader(menus, pathname);
-    let menu = void 0;
-    loadModule(menuLoader, pendingLoads, (menuModule) => menu = menuModule?.default, cacheModules);
-    if (pendingLoads.length > 0) {
-      await Promise.all(pendingLoads);
-    }
-    return [
-      routeName,
-      params,
-      modules,
-      deepFreeze(menu),
-      routeBundleNames
-    ];
-  }
-  return null;
-};
-const loadModule = (moduleLoader, pendingLoads, moduleSetter, cacheModules) => {
-  if (typeof moduleLoader === "function") {
-    const loadedModule = MODULE_CACHE.get(moduleLoader);
-    if (loadedModule) {
-      moduleSetter(loadedModule);
-    } else {
-      const moduleOrPromise = moduleLoader();
-      if (typeof moduleOrPromise.then === "function") {
-        pendingLoads.push(moduleOrPromise.then((loadedModule2) => {
-          if (cacheModules !== false) {
-            MODULE_CACHE.set(moduleLoader, loadedModule2);
-          }
-          moduleSetter(loadedModule2);
-        }));
-      } else if (moduleOrPromise) {
-        moduleSetter(moduleOrPromise);
-      }
-    }
-  }
-};
-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("/") ? "" : "/")));
-    if (menu) {
-      return menu[1];
-    }
-  }
-};
+
+const transitionCss = "@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}}}";
+
 function callRestoreScrollOnDocument() {
   if (document.__q_scroll_restore__) {
     document.__q_scroll_restore__();
     document.__q_scroll_restore__ = void 0;
   }
 }
-const restoreScroll = (type, toUrl2, fromUrl, scroller, scrollState) => {
+const restoreScroll = (type, toUrl, fromUrl, scroller, scrollState) => {
   if (type === "popstate" && scrollState) {
     scroller.scrollTo(scrollState.x, scrollState.y);
   } else if (type === "link" || type === "form") {
-    if (!hashScroll(toUrl2, fromUrl)) {
+    if (!hashScroll(toUrl, fromUrl)) {
       scroller.scrollTo(0, 0);
     }
   }
 };
-const hashScroll = (toUrl2, fromUrl) => {
-  const elmId = toUrl2.hash.slice(1);
+const hashScroll = (toUrl, fromUrl) => {
+  const elmId = toUrl.hash.slice(1);
   const elm = elmId && document.getElementById(elmId);
   if (elm) {
     elm.scrollIntoView();
     return true;
-  } else if (!elm && toUrl2.hash && isSamePath(toUrl2, fromUrl)) {
+  } else if (!elm && toUrl.hash && isSamePath(toUrl, fromUrl)) {
     return true;
   }
   return false;
@@ -595,25 +261,16 @@ const saveScrollHistory = (scrollState) => {
   state._qRouterScroll = scrollState;
   history.replaceState(state, "");
 };
+
 const spaInit = event$((_, el) => {
-  const win = window;
-  const spa = "_qRouterSPA";
-  const initPopstate = "_qRouterInitPopstate";
-  const initAnchors = "_qRouterInitAnchors";
-  const initVisibility = "_qRouterInitVisibility";
-  const initScroll = "_qRouterInitScroll";
-  if (!win[spa] && !win[initPopstate] && !win[initAnchors] && !win[initVisibility] && !win[initScroll]) {
+  if (!window._qRouterSPA && !window._qRouterInitPopstate) {
     const currentPath = location.pathname + location.search;
-    const historyPatch = "_qRouterHistoryPatch";
-    const scrollEnabled = "_qRouterScrollEnabled";
-    const debounceTimeout = "_qRouterScrollDebounce";
-    const scrollHistory = "_qRouterScroll";
     const checkAndScroll = (scrollState) => {
       if (scrollState) {
-        win.scrollTo(scrollState.x, scrollState.y);
+        window.scrollTo(scrollState.x, scrollState.y);
       }
     };
-    const currentScrollState2 = () => {
+    const currentScrollState = () => {
       const elm = document.documentElement;
       return {
         x: elm.scrollLeft,
@@ -624,16 +281,16 @@ const spaInit = event$((_, el) => {
     };
     const saveScrollState = (scrollState) => {
       const state = history.state || {};
-      state[scrollHistory] = scrollState || currentScrollState2();
+      state._qRouterScroll = scrollState || currentScrollState();
       history.replaceState(state, "");
     };
     saveScrollState();
-    win[initPopstate] = () => {
-      if (win[spa]) {
+    window._qRouterInitPopstate = () => {
+      if (window._qRouterSPA) {
         return;
       }
-      win[scrollEnabled] = false;
-      clearTimeout(win[debounceTimeout]);
+      window._qRouterScrollEnabled = false;
+      clearTimeout(window._qRouterScrollDebounce);
       if (currentPath !== location.pathname + location.search) {
         const getContainer = (el2) => el2.closest("[q\\:container]:not([q\\:container=html]):not([q\\:container=text])");
         const container = getContainer(el);
@@ -643,36 +300,34 @@ const spaInit = event$((_, el) => {
           id: "qc--n"
         });
         if (nav) {
-          nav(location.href, {
-            type: "popstate"
-          });
+          nav(location.href, { type: "popstate" });
         } else {
           location.reload();
         }
       } else {
         if (history.scrollRestoration === "manual") {
-          const scrollState = history.state?.[scrollHistory];
+          const scrollState = history.state?._qRouterScroll;
           checkAndScroll(scrollState);
-          win[scrollEnabled] = true;
+          window._qRouterScrollEnabled = true;
         }
       }
     };
-    if (!win[historyPatch]) {
-      win[historyPatch] = true;
+    if (!window._qRouterHistoryPatch) {
+      window._qRouterHistoryPatch = true;
       const pushState = history.pushState;
       const replaceState = history.replaceState;
       const prepareState = (state) => {
         if (state === null || typeof state === "undefined") {
           state = {};
         } else if (state?.constructor !== Object) {
-          state = {
-            _data: state
-          };
+          state = { _data: state };
           if (isDev) {
-            console.warn("In a Qwik SPA context, `history.state` is used to store scroll state. Direct calls to `pushState()` and `replaceState()` must supply an actual Object type. We need to be able to automatically attach the scroll state to your state object. A new state object has been created, your data has been moved to: `history.state._data`");
+            console.warn(
+              "In a Qwik SPA context, `history.state` is used to store scroll state. Direct calls to `pushState()` and `replaceState()` must supply an actual Object type. We need to be able to automatically attach the scroll state to your state object. A new state object has been created, your data has been moved to: `history.state._data`"
+            );
           }
         }
-        state._qRouterScroll = state._qRouterScroll || currentScrollState2();
+        state._qRouterScroll = state._qRouterScroll || currentScrollState();
         return state;
       };
       history.pushState = (state, title, url) => {
@@ -684,8 +339,8 @@ const spaInit = event$((_, el) => {
         return replaceState.call(history, state, title, url);
       };
     }
-    win[initAnchors] = (event) => {
-      if (win[spa] || event.defaultPrevented) {
+    window._qRouterInitAnchors = (event) => {
+      if (window._qRouterSPA || event.defaultPrevented) {
         return;
       }
       const target = event.target.closest("a[href]");
@@ -704,13 +359,9 @@ const spaInit = event$((_, el) => {
             if (dest.href.endsWith("#")) {
               window.scrollTo(0, 0);
             } else {
-              win[scrollEnabled] = false;
-              clearTimeout(win[debounceTimeout]);
-              saveScrollState({
-                ...currentScrollState2(),
-                x: 0,
-                y: 0
-              });
+              window._qRouterScrollEnabled = false;
+              clearTimeout(window._qRouterScrollDebounce);
+              saveScrollState({ ...currentScrollState(), x: 0, y: 0 });
               location.reload();
             }
           } else {
@@ -723,36 +374,35 @@ const spaInit = event$((_, el) => {
         }
       }
     };
-    win[initVisibility] = () => {
-      if (!win[spa] && win[scrollEnabled] && document.visibilityState === "hidden") {
+    window._qRouterInitVisibility = () => {
+      if (!window._qRouterSPA && window._qRouterScrollEnabled && document.visibilityState === "hidden") {
         saveScrollState();
       }
     };
-    win[initScroll] = () => {
-      if (win[spa] || !win[scrollEnabled]) {
+    window._qRouterInitScroll = () => {
+      if (window._qRouterSPA || !window._qRouterScrollEnabled) {
         return;
       }
-      clearTimeout(win[debounceTimeout]);
-      win[debounceTimeout] = setTimeout(() => {
+      clearTimeout(window._qRouterScrollDebounce);
+      window._qRouterScrollDebounce = setTimeout(() => {
         saveScrollState();
-        win[debounceTimeout] = void 0;
+        window._qRouterScrollDebounce = void 0;
       }, 200);
     };
-    win[scrollEnabled] = true;
+    window._qRouterScrollEnabled = true;
     setTimeout(() => {
-      addEventListener("popstate", win[initPopstate]);
-      addEventListener("scroll", win[initScroll], {
-        passive: true
-      });
-      document.body.addEventListener("click", win[initAnchors]);
-      if (!win.navigation) {
-        document.addEventListener("visibilitychange", win[initVisibility], {
+      window.addEventListener("popstate", window._qRouterInitPopstate);
+      window.addEventListener("scroll", window._qRouterInitScroll, { passive: true });
+      document.addEventListener("click", window._qRouterInitAnchors);
+      if (!window.navigation) {
+        document.addEventListener("visibilitychange", window._qRouterInitVisibility, {
           passive: true
         });
       }
     }, 0);
   }
 });
+
 const startViewTransition = (params) => {
   if (!params.update) {
     return;
@@ -764,68 +414,81 @@ const startViewTransition = (params) => {
     } catch {
       transition = document.startViewTransition(params.update);
     }
-    const event = new CustomEvent("qviewtransition", {
-      detail: transition
-    });
+    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$(`
-    @layer qwik {
-      @supports selector(html:active-view-transition-type(type)) {
-        html:active-view-transition-type(qwik-router-spa) {
-          :root{view-transition-name:none}
-        }
-      }
-      @supports not selector(html:active-view-transition-type(type)) {
-        :root{view-transition-name:none}
-      }
-    }
-  `);
+const internalState = { navCount: 0 };
+const useQwikRouter = (props) => {
+  if (!isServer) {
+    throw new Error(
+      "useQwikRouter can only run during SSR on the server. If you are seeing this, it means you are re-rendering the root of your application. Fix that or use the <QwikRouterProvider> component around the root of your application."
+    );
+  }
+  useStyles$(transitionCss);
   const env = useQwikRouterEnv();
   if (!env?.params) {
-    throw new Error(`Missing Qwik Router Env Data for help visit https://github.com/QwikDev/qwik/issues/6237`);
+    throw new Error(
+      `Missing Qwik Router Env Data for help visit https://github.com/QwikDev/qwik/issues/6237`
+    );
   }
   const urlEnv = useServerData("url");
   if (!urlEnv) {
     throw new Error(`Missing Qwik URL Env Data`);
   }
-  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 serverHead = useServerData("documentHead");
+  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
-  }, {
-    deep: false
-  });
+  };
+  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,
-    forceReload: false,
-    replaceState: false,
     scroll: true
   });
-  const documentHead = useStore(createDocumentHead);
+  const documentHead = useStore(
+    () => createDocumentHead(serverHead)
+  );
   const content = useStore({
     headings: void 0,
     menu: void 0
@@ -833,32 +496,34 @@ const QwikRouterProvider = component$((props) => {
   const contentInternal = useSignal();
   const currentActionId = env.response.action;
   const currentAction = currentActionId ? env.response.loaders[currentActionId] : void 0;
-  const actionState = useSignal(currentAction ? {
-    id: currentActionId,
-    data: env.response.formData,
-    output: {
-      result: currentAction,
-      status: env.response.status
-    }
-  } : void 0);
+  const actionState = useSignal(
+    currentAction ? {
+      id: currentActionId,
+      data: env.response.formData,
+      output: {
+        result: currentAction,
+        status: env.response.status
+      }
+    } : void 0
+  );
   const registerPreventNav = $((fn$) => {
     if (!isBrowser) {
       return;
     }
-    preventNav.$handler$ || (preventNav.$handler$ = (event) => {
+    preventNav.$handler$ ||= (event) => {
       internalState.navCount++;
       if (!preventNav.$cbs$) {
         return;
       }
-      const prevents = [
-        ...preventNav.$cbs$.values()
-      ].map((cb) => cb.resolved ? cb.resolved() : cb());
+      const prevents = [...preventNav.$cbs$.values()].map(
+        (cb) => cb.resolved ? cb.resolved() : cb()
+      );
       if (prevents.some(Boolean)) {
         event.preventDefault();
         event.returnValue = true;
       }
-    });
-    (preventNav.$cbs$ || (preventNav.$cbs$ = /* @__PURE__ */ new Set())).add(fn$);
+    };
+    (preventNav.$cbs$ ||= /* @__PURE__ */ new Set()).add(fn$);
     fn$.resolve();
     window.addEventListener("beforeunload", preventNav.$handler$);
     return () => {
@@ -872,17 +537,24 @@ const QwikRouterProvider = component$((props) => {
     };
   });
   const goto = $(async (path, opt) => {
-    const { type = "link", forceReload = path === void 0, replaceState = false, scroll = true } = typeof opt === "object" ? opt : {
-      forceReload: opt
-    };
+    const {
+      type = "link",
+      forceReload = path === void 0,
+      // Hack for nav() because this API is already set.
+      replaceState = false,
+      scroll = true
+    } = typeof opt === "object" ? opt : { forceReload: opt };
     internalState.navCount++;
+    if (isBrowser && type === "link" && routeInternal.value.type === "initial") {
+      const url2 = new URL(window.location.href);
+      routeInternal.value.dest = url2;
+      routeLocation.url = url2;
+    }
     const lastDest = routeInternal.value.dest;
     const dest = path === void 0 ? lastDest : typeof path === "number" ? path : toUrl(path, routeLocation.url);
     if (preventNav.$cbs$ && (forceReload || typeof dest === "number" || !isSamePath(dest, lastDest) || !isSameOrigin(dest, lastDest))) {
       const ourNavId = internalState.navCount;
-      const prevents = await Promise.all([
-        ...preventNav.$cbs$.values()
-      ].map((cb) => cb(dest)));
+      const prevents = await Promise.all([...preventNav.$cbs$.values()].map((cb) => cb(dest)));
       if (ourNavId !== internalState.navCount || prevents.some(Boolean)) {
         if (ourNavId === internalState.navCount && type === "popstate") {
           history.pushState(null, "", lastDest);
@@ -910,8 +582,10 @@ const QwikRouterProvider = component$((props) => {
         let scroller = document.getElementById(QWIK_ROUTER_SCROLLER);
         if (!scroller) {
           scroller = document.getElementById(QWIK_CITY_SCROLLER);
-          if (scroller) {
-            console.warn(`Please update your scroller ID to "${QWIK_ROUTER_SCROLLER}" as "${QWIK_CITY_SCROLLER}" is deprecated and will be removed in V3`);
+          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`
+            );
           }
         }
         if (!scroller) {
@@ -932,8 +606,13 @@ const QwikRouterProvider = component$((props) => {
       scroll
     };
     if (isBrowser) {
-      loadClientData(dest, _getContextElement());
-      loadRoute(qwikRouterConfig.routes, qwikRouterConfig.menus, qwikRouterConfig.cacheModules, dest.pathname);
+      loadClientData(dest);
+      loadRoute(
+        qwikRouterConfig.routes,
+        qwikRouterConfig.menus,
+        qwikRouterConfig.cacheModules,
+        dest.pathname
+      );
     }
     actionState.value = void 0;
     routeLocation.isNavigating = true;
@@ -948,14 +627,11 @@ const QwikRouterProvider = component$((props) => {
   useContextProvider(RouteNavigateContext, goto);
   useContextProvider(RouteStateContext, loaderState);
   useContextProvider(RouteActionContext, actionState);
-  useContextProvider(RouteInternalContext, routeInternal);
   useContextProvider(RoutePreventNavigateContext, registerPreventNav);
   useTask$(({ track }) => {
     async function run() {
-      const [navigation, action] = track(() => [
-        routeInternal.value,
-        actionState.value
-      ]);
+      const navigation = track(routeInternal);
+      const action = track(actionState);
       const locale = getLocale("");
       const prevUrl = routeLocation.url;
       const navType = action ? "form" : navigation.type;
@@ -963,7 +639,7 @@ const QwikRouterProvider = component$((props) => {
       let trackUrl;
       let clientPageData;
       let loadedRoute = null;
-      let elm;
+      let container2;
       if (isServer) {
         trackUrl = new URL(navigation.dest, routeLocation.url);
         loadedRoute = env.loadedRoute;
@@ -971,23 +647,25 @@ 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);
-        elm = _getContextElement();
-        const pageData = clientPageData = await loadClientData(trackUrl, elm, {
+        let loadRoutePromise = loadRoute(
+          qwikRouterConfig.routes,
+          qwikRouterConfig.menus,
+          qwikRouterConfig.cacheModules,
+          trackUrl.pathname
+        );
+        container2 = _getContextContainer();
+        const pageData = clientPageData = await loadClientData(trackUrl, {
           action,
           clearCache: true
         });
         if (!pageData) {
-          routeInternal.untrackedValue = {
-            type: navType,
-            dest: trackUrl
-          };
+          routeInternal.untrackedValue = { type: navType, dest: trackUrl };
           return;
         }
         const newHref = pageData.href;
@@ -1016,25 +694,41 @@ 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;
         }
-        routeLocation.url = trackUrl;
-        routeLocation.params = {
-          ...params
-        };
-        routeInternal.untrackedValue = {
-          type: navType,
-          dest: trackUrl
-        };
-        const resolvedHead = resolveHead(clientPageData, routeLocation, contentModules, locale);
+        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;
+        }
+        routeInternal.untrackedValue = { type: navType, dest: trackUrl };
+        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,40 +741,56 @@ 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") || // Action might have responded with a redirect.
+          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 container3 = _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,
+                  container3
+                );
+              } else {
+                signal.invalidate();
+              }
+            }
           }
           CLIENT_DATA_CACHE.clear();
-          if (!win._qRouterSPA) {
-            win._qRouterSPA = true;
+          if (!window._qRouterSPA) {
+            window._qRouterSPA = true;
             history.scrollRestoration = "manual";
-            win.addEventListener("popstate", () => {
-              win._qRouterScrollEnabled = false;
-              clearTimeout(win._qRouterScrollDebounce);
+            window.addEventListener("popstate", () => {
+              window._qRouterScrollEnabled = false;
+              clearTimeout(window._qRouterScrollDebounce);
               goto(location.href, {
                 type: "popstate"
               });
             });
-            win.removeEventListener("popstate", win._qRouterInitPopstate);
-            win._qRouterInitPopstate = void 0;
-            if (!win._qRouterHistoryPatch) {
-              win._qRouterHistoryPatch = true;
+            window.removeEventListener("popstate", window._qRouterInitPopstate);
+            window._qRouterInitPopstate = void 0;
+            if (!window._qRouterHistoryPatch) {
+              window._qRouterHistoryPatch = true;
               const pushState = history.pushState;
               const replaceState2 = history.replaceState;
               const prepareState = (state) => {
                 if (state === null || typeof state === "undefined") {
                   state = {};
                 } else if (state?.constructor !== Object) {
-                  state = {
-                    _data: state
-                  };
+                  state = { _data: state };
                   if (isDev) {
-                    console.warn("In a Qwik SPA context, `history.state` is used to store scroll state. Direct calls to `pushState()` and `replaceState()` must supply an actual Object type. We need to be able to automatically attach the scroll state to your state object. A new state object has been created, your data has been moved to: `history.state._data`");
+                    console.warn(
+                      "In a Qwik SPA context, `history.state` is used to store scroll state. Direct calls to `pushState()` and `replaceState()` must supply an actual Object type. We need to be able to automatically attach the scroll state to your state object. A new state object has been created, your data has been moved to: `history.state._data`"
+                    );
                   }
                 }
                 state._qRouterScroll = state._qRouterScroll || currentScrollState(scroller);
@@ -1095,7 +805,7 @@ const QwikRouterProvider = component$((props) => {
                 return replaceState2.call(history, state, title, url2);
               };
             }
-            document.body.addEventListener("click", (event) => {
+            document.addEventListener("click", (event) => {
               if (event.defaultPrevented) {
                 return;
               }
@@ -1110,8 +820,8 @@ const QwikRouterProvider = component$((props) => {
                     if (dest.href !== prev.href) {
                       history.pushState(null, "", dest);
                     }
-                    win._qRouterScrollEnabled = false;
-                    clearTimeout(win._qRouterScrollDebounce);
+                    window._qRouterScrollEnabled = false;
+                    clearTimeout(window._qRouterScrollDebounce);
                     saveScrollHistory({
                       ...currentScrollState(scroller),
                       x: 0,
@@ -1124,59 +834,64 @@ const QwikRouterProvider = component$((props) => {
                 }
               }
             });
-            document.body.removeEventListener("click", win._qRouterInitAnchors);
-            win._qRouterInitAnchors = void 0;
+            document.removeEventListener("click", window._qRouterInitAnchors);
+            window._qRouterInitAnchors = void 0;
             if (!window.navigation) {
-              document.addEventListener("visibilitychange", () => {
-                if ((win._qRouterScrollEnabled || win._qCityScrollEnabled) && document.visibilityState === "hidden") {
-                  if (win._qCityScrollEnabled) {
-                    console.warn('"_qCityScrollEnabled" is deprecated. Use "_qRouterScrollEnabled" instead.');
+              document.addEventListener(
+                "visibilitychange",
+                () => {
+                  if ((window._qRouterScrollEnabled || window._qCityScrollEnabled) && document.visibilityState === "hidden") {
+                    if (window._qCityScrollEnabled) {
+                      console.warn(
+                        '"_qCityScrollEnabled" is deprecated. Use "_qRouterScrollEnabled" instead.'
+                      );
+                    }
+                    const scrollState2 = currentScrollState(scroller);
+                    saveScrollHistory(scrollState2);
                   }
+                },
+                { passive: true }
+              );
+              document.removeEventListener("visibilitychange", window._qRouterInitVisibility);
+              window._qRouterInitVisibility = void 0;
+            }
+            window.addEventListener(
+              "scroll",
+              () => {
+                if (!window._qRouterScrollEnabled && !window._qCityScrollEnabled) {
+                  return;
+                }
+                clearTimeout(window._qRouterScrollDebounce);
+                window._qRouterScrollDebounce = setTimeout(() => {
                   const scrollState2 = currentScrollState(scroller);
                   saveScrollHistory(scrollState2);
-                }
-              }, {
-                passive: true
-              });
-              document.removeEventListener("visibilitychange", win._qRouterInitVisibility);
-              win._qRouterInitVisibility = void 0;
-            }
-            win.addEventListener("scroll", () => {
-              if (!win._qRouterScrollEnabled && !win._qCityScrollEnabled) {
-                return;
-              }
-              clearTimeout(win._qRouterScrollDebounce);
-              win._qRouterScrollDebounce = setTimeout(() => {
-                const scrollState2 = currentScrollState(scroller);
-                saveScrollHistory(scrollState2);
-                win._qRouterScrollDebounce = void 0;
-              }, 200);
-            }, {
-              passive: true
-            });
-            removeEventListener("scroll", win._qRouterInitScroll);
-            win._qRouterInitScroll = void 0;
+                  window._qRouterScrollDebounce = void 0;
+                }, 200);
+              },
+              { passive: true }
+            );
+            removeEventListener("scroll", window._qRouterInitScroll);
+            window._qRouterInitScroll = void 0;
             spaInit.resolve();
           }
           if (navType !== "popstate") {
-            win._qRouterScrollEnabled = false;
-            clearTimeout(win._qRouterScrollDebounce);
+            window._qRouterScrollEnabled = false;
+            clearTimeout(window._qRouterScrollDebounce);
             const scrollState2 = currentScrollState(scroller);
             saveScrollHistory(scrollState2);
           }
           const navigate = () => {
             clientNavigate(window, navType, prevUrl, trackUrl, replaceState);
-            return _waitUntilRendered(elm);
+            contentInternal.force();
+            return _waitUntilRendered(container2);
           };
           const _waitNextPage = () => {
-            if (isServer || props.viewTransition === false) {
+            if (isServer || props?.viewTransition === false) {
               return navigate();
             } else {
               const viewTransition = startViewTransition({
                 update: navigate,
-                types: [
-                  "qwik-navigation"
-                ]
+                types: ["qwik-navigation"]
               });
               if (!viewTransition) {
                 return Promise.resolve();
@@ -1184,15 +899,26 @@ const QwikRouterProvider = component$((props) => {
               return viewTransition.ready;
             }
           };
-          _waitNextPage().then(() => {
-            const container = _getQContainerElement(elm);
-            container.setAttribute("q:route", routeName);
+          _waitNextPage().catch((err) => {
+            navigate();
+            throw err;
+          }).finally(() => {
+            container2.element.setAttribute?.(Q_ROUTE, routeName);
             const scrollState2 = currentScrollState(scroller);
             saveScrollHistory(scrollState2);
-            win._qRouterScrollEnabled = true;
+            window._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,37 +931,43 @@ 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({
-    url,
-    params: props.params ?? {},
-    isNavigating: false,
-    prevUrl: void 0
-  }, {
-    deep: false
-  });
-  const loaderState = useSignal({});
-  const routeInternal = useSignal({
-    type: "initial",
-    dest: url
-  });
+  const routeLocation = useStore(
+    {
+      url,
+      params: props.params ?? {},
+      isNavigating: false,
+      prevUrl: void 0
+    },
+    { deep: false }
+  );
+  const loadersData = props.loaders?.reduce(
+    (acc, { loader, data }) => {
+      acc[loader.__id] = data;
+      return acc;
+    },
+    {}
+  );
+  const loaderState = useStore(loadersData ?? {}, { deep: false });
   const goto = props.goto ?? $(async () => {
     console.warn("QwikRouterMockProvider: goto not provided");
   });
-  const documentHead = useStore(createDocumentHead, {
-    deep: false
-  });
-  const content = useStore({
-    headings: void 0,
-    menu: void 0
-  }, {
-    deep: false
-  });
+  const documentHead = useStore(createDocumentHead, { deep: false });
+  const content = useStore(
+    {
+      headings: void 0,
+      menu: void 0
+    },
+    { deep: false }
+  );
   const contentInternal = useSignal();
   const actionState = useSignal();
   useContextProvider(ContentContext, content);
@@ -1245,30 +977,53 @@ const QwikRouterMockProvider = component$((props) => {
   useContextProvider(RouteNavigateContext, goto);
   useContextProvider(RouteStateContext, loaderState);
   useContextProvider(RouteActionContext, actionState);
-  useContextProvider(RouteInternalContext, routeInternal);
+  const actionsMocks = props.actions?.reduce(
+    (acc, { action, handler }) => {
+      acc[action.__id] = handler;
+      return acc;
+    },
+    {}
+  );
+  useTask$(async ({ track }) => {
+    const action = track(actionState);
+    if (!action?.resolve) {
+      return;
+    }
+    const mock = actionsMocks?.[action.id];
+    if (mock) {
+      const actionResult = await mock(action.data);
+      action.resolve(actionResult);
+    }
+  });
+};
+const QwikRouterMockProvider = component$((props) => {
+  useQwikMockRouter(props);
   return /* @__PURE__ */ jsx(Slot, {});
 });
 const QwikCityMockProvider = QwikRouterMockProvider;
+
 const RouterOutlet = component$(() => {
   const serverData = useServerData("containerAttributes");
   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
         });
       }
     }
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        cmp,
-        !__EXPERIMENTAL__.noSPA && /* @__PURE__ */ jsx("script", {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      cmp,
+      !__EXPERIMENTAL__.noSPA && /* @__PURE__ */ jsx(
+        "script",
+        {
           "document:onQCInit$": spaInit,
           "document:onQInit$": sync$(() => {
             ((w, h) => {
@@ -1282,83 +1037,14 @@ const RouterOutlet = component$(() => {
               }
             })(window, history);
           })
-        })
-      ]
-    });
+        }
+      )
+    ] });
   }
   return SkipRender;
 });
-var store;
-function getGlobalConfig(config2) {
-  return {
-    lang: config2?.lang ?? store?.lang,
-    message: config2?.message,
-    abortEarly: config2?.abortEarly ?? store?.abortEarly,
-    abortPipeEarly: config2?.abortPipeEarly ?? store?.abortPipeEarly
-  };
-}
-function getDotPath(issue) {
-  if (issue.path) {
-    let key = "";
-    for (const item of issue.path) {
-      if (typeof item.key === "string" || typeof item.key === "number") {
-        if (key) {
-          key += `.${item.key}`;
-        } else {
-          key += item.key;
-        }
-      } else {
-        return null;
-      }
-    }
-    return key;
-  }
-  return null;
-}
-function flatten(issues) {
-  const flatErrors = {};
-  for (const issue of issues) {
-    if (issue.path) {
-      const dotPath = getDotPath(issue);
-      if (dotPath) {
-        if (!flatErrors.nested) {
-          flatErrors.nested = {};
-        }
-        if (flatErrors.nested[dotPath]) {
-          flatErrors.nested[dotPath].push(issue.message);
-        } else {
-          flatErrors.nested[dotPath] = [issue.message];
-        }
-      } else {
-        if (flatErrors.other) {
-          flatErrors.other.push(issue.message);
-        } else {
-          flatErrors.other = [issue.message];
-        }
-      }
-    } else {
-      if (flatErrors.root) {
-        flatErrors.root.push(issue.message);
-      } else {
-        flatErrors.root = [issue.message];
-      }
-    }
-  }
-  return flatErrors;
-}
-async function safeParseAsync(schema, input, config2) {
-  const dataset = await schema._run(
-    { typed: false, value: input },
-    getGlobalConfig(config2)
-  );
-  return {
-    typed: dataset.typed,
-    success: !dataset.issues,
-    output: dataset.value,
-    issues: dataset.issues
-  };
-}
-const routeActionQrl = (actionQrl, ...rest) => {
+
+const routeActionQrl = ((actionQrl, ...rest) => {
   const { id, validators } = getValidators(rest, actionQrl);
   function action() {
     const loc = useLocation();
@@ -1424,16 +1110,15 @@ Action.run() can only be called on the browser, for example when a user clicks a
           if (form.getAttribute("data-spa-reset") === "true") {
             form.reset();
           }
-          const detail = {
-            status,
-            value: result
-          };
-          form.dispatchEvent(new CustomEvent("submitcompleted", {
-            bubbles: false,
-            cancelable: false,
-            composed: false,
-            detail
-          }));
+          const detail = { status, value: result };
+          form.dispatchEvent(
+            new CustomEvent("submitcompleted", {
+              bubbles: false,
+              cancelable: false,
+              composed: false,
+              detail
+            })
+          );
         }
         return {
           status,
@@ -1450,8 +1135,8 @@ Action.run() can only be called on the browser, for example when a user clicks a
   action.__id = id;
   Object.freeze(action);
   return action;
-};
-const globalActionQrl = (actionQrl, ...rest) => {
+});
+const globalActionQrl = ((actionQrl, ...rest) => {
   const action = routeActionQrl(actionQrl, ...rest);
   if (isServer) {
     if (typeof globalThis._qwikActionsMap === "undefined") {
@@ -1460,40 +1145,48 @@ const globalActionQrl = (actionQrl, ...rest) => {
     globalThis._qwikActionsMap.set(action.__id, action);
   }
   return action;
-};
-const routeAction$ = /* @__PURE__ */ implicit$FirstArg(routeActionQrl);
-const globalAction$ = /* @__PURE__ */ implicit$FirstArg(globalActionQrl);
-const routeLoaderQrl = (loaderQrl, ...rest) => {
-  const { id, validators } = getValidators(rest, loaderQrl);
+});
+const routeAction$ = /* @__PURE__ */ implicit$FirstArg(
+  routeActionQrl
+);
+const globalAction$ = /* @__PURE__ */ implicit$FirstArg(
+  globalActionQrl
+);
+const getValue = (obj) => obj.value;
+const routeLoaderQrl = ((loaderQrl, ...rest) => {
+  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);
-    });
+    }
+    const loaderData = state[id];
+    untrack(getValue, loaderData);
+    return loaderData;
   }
   loader.__brand = "server_loader";
   loader.__qrl = loaderQrl;
   loader.__validators = validators;
   loader.__id = id;
+  loader.__serializationStrategy = serializationStrategy;
+  loader.__expires = -1;
   Object.freeze(loader);
   return loader;
-};
+});
 const routeLoader$ = /* @__PURE__ */ implicit$FirstArg(routeLoaderQrl);
-const validatorQrl = (validator) => {
+const validatorQrl = ((validator) => {
   if (isServer) {
     return {
       validate: validator
     };
   }
   return void 0;
-};
+});
 const validator$ = /* @__PURE__ */ implicit$FirstArg(validatorQrl);
 const flattenValibotIssues = (issues) => {
   return issues.reduce((acc, issue) => {
@@ -1516,7 +1209,9 @@ const flattenValibotIssues = (issues) => {
 };
 const valibotQrl = (qrl) => {
   if (!__EXPERIMENTAL__.valibot) {
-    throw new Error('Valibot is an experimental feature and is not enabled. Please enable the feature flag by adding `experimental: ["valibot"]` to your qwikVite plugin options.');
+    throw new Error(
+      'Valibot is an experimental feature and is not enabled. Please enable the feature flag by adding `experimental: ["valibot"]` to your qwikVite plugin options.'
+    );
   }
   if (isServer) {
     return {
@@ -1524,7 +1219,7 @@ const valibotQrl = (qrl) => {
       async validate(ev, inputData) {
         const schema = await qrl.resolve().then((obj) => typeof obj === "function" ? obj(ev) : obj);
         const data = inputData ?? await ev.parseBody();
-        const result = await safeParseAsync(schema, data);
+        const result = await v.safeParseAsync(schema, data);
         if (result.success) {
           return {
             success: true,
@@ -1538,7 +1233,7 @@ const valibotQrl = (qrl) => {
             success: false,
             status: 400,
             error: {
-              formErrors: flatten(result.issues).root ?? [],
+              formErrors: v.flatten(result.issues).root ?? [],
               fieldErrors: flattenValibotIssues(result.issues)
             }
           };
@@ -1550,9 +1245,7 @@ const valibotQrl = (qrl) => {
 };
 const valibot$ = /* @__PURE__ */ implicit$FirstArg(valibotQrl);
 const flattenZodIssues = (issues) => {
-  issues = Array.isArray(issues) ? issues : [
-    issues
-  ];
+  issues = Array.isArray(issues) ? issues : [issues];
   return issues.reduce((acc, issue) => {
     const isExpectingArray = "expected" in issue && issue.expected === "array";
     const hasArrayType = issue.path.some((path) => typeof path === "number") || isExpectingArray;
@@ -1586,7 +1279,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 {
@@ -1611,7 +1304,7 @@ const zod$ = /* @__PURE__ */ implicit$FirstArg(zodQrl);
 const serverQrl = (qrl, options) => {
   if (isServer) {
     const captured = qrl.getCaptured();
-    if (captured && captured.length > 0 && !_getContextElement()) {
+    if (captured && captured.length > 0 && !_getContextHostElement()) {
       throw new Error("For security reasons, we cannot serialize QRLs that capture lexical scope.");
     }
   }
@@ -1619,97 +1312,96 @@ const serverQrl = (qrl, options) => {
   const headers = options?.headers || {};
   const origin = options?.origin || "";
   const fetchOptions = options?.fetchOptions || {};
-  function rpc() {
-    return $(async function(...args) {
-      const abortSignal = args.length > 0 && args[0] instanceof AbortSignal ? args.shift() : void 0;
-      if (isServer) {
-        let requestEvent = globalThis.qcAsyncRequestStore?.getStore();
-        if (!requestEvent) {
-          const contexts = [
-            useQwikRouterEnv()?.ev,
-            this,
-            _getContextEvent()
-          ];
-          requestEvent = contexts.find((v2) => v2 && Object.prototype.hasOwnProperty.call(v2, "sharedMap") && Object.prototype.hasOwnProperty.call(v2, "cookie"));
+  return $(async function(...args) {
+    const abortSignal = args.length > 0 && args[0] instanceof AbortSignal ? args.shift() : void 0;
+    if (isServer) {
+      let requestEvent = _asyncRequestStore?.getStore();
+      if (!requestEvent) {
+        const contexts = [useQwikRouterEnv()?.ev, this, _getContextEvent()];
+        requestEvent = contexts.find(
+          (v2) => v2 && Object.prototype.hasOwnProperty.call(v2, "sharedMap") && Object.prototype.hasOwnProperty.call(v2, "cookie")
+        );
+      }
+      return qrl.apply(requestEvent, isDev ? deepFreeze(args) : args);
+    } else {
+      const filteredArgs = args.map((arg) => {
+        if (arg instanceof SubmitEvent && arg.target instanceof HTMLFormElement) {
+          return new FormData(arg.target);
+        } else if (arg instanceof Event) {
+          return null;
+        } else if (arg instanceof Node) {
+          return null;
         }
-        return qrl.apply(requestEvent, isDev ? deepFreeze(args) : args);
+        return arg;
+      });
+      const qrlHash = qrl.getHash();
+      let query = "";
+      const config = {
+        ...fetchOptions,
+        method,
+        headers: {
+          ...headers,
+          "Content-Type": "application/qwik-json",
+          Accept: "application/json, application/qwik-json, text/qwik-json-stream, text/plain",
+          // Required so we don't call accidentally
+          "X-QRL": qrlHash
+        },
+        signal: abortSignal
+      };
+      const captured = qrl.getCaptured();
+      let toSend;
+      if (captured?.length) {
+        toSend = [filteredArgs, captured];
       } else {
-        const ctxElm = _getContextElement();
-        const filteredArgs = args.map((arg) => {
-          if (arg instanceof SubmitEvent && arg.target instanceof HTMLFormElement) {
-            return new FormData(arg.target);
-          } else if (arg instanceof Event) {
-            return null;
-          } else if (arg instanceof Node) {
-            return null;
-          }
-          return arg;
-        });
-        const qrlHash = qrl.getHash();
-        let query = "";
-        const config = {
-          ...fetchOptions,
-          method,
-          headers: {
-            ...headers,
-            "Content-Type": "application/qwik-json",
-            Accept: "application/json, application/qwik-json, text/qwik-json-stream, text/plain",
-            // Required so we don't call accidentally
-            "X-QRL": qrlHash
-          },
-          signal: abortSignal
-        };
-        const body = await _serialize([
-          qrl,
-          ...filteredArgs
-        ]);
-        if (method === "GET") {
-          query += `&${QDATA_KEY}=${encodeURIComponent(body)}`;
-        } else {
-          config.body = body;
-        }
-        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* () {
-            try {
-              for await (const result of deserializeStream(res.body, ctxElm ?? document.documentElement, abortSignal)) {
-                yield result;
-              }
-            } finally {
-              if (!abortSignal?.aborted) {
-                await res.body.cancel();
-              }
+        toSend = filteredArgs.length ? [filteredArgs] : [];
+      }
+      const body = await _serialize(toSend);
+      if (method === "GET") {
+        query += `&${QDATA_KEY}=${encodeURIComponent(body)}`;
+      } else {
+        config.body = body;
+      }
+      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* () {
+          try {
+            for await (const result of deserializeStream(res.body, abortSignal)) {
+              yield result;
+            }
+          } finally {
+            if (!abortSignal?.aborted) {
+              await res.body.cancel();
             }
-          }();
-        } else if (contentType === "application/qwik-json") {
-          const str = await res.text();
-          const [obj] = _deserialize(str, ctxElm ?? document.documentElement);
-          if (res.status >= 400) {
-            throw obj;
-          }
-          return obj;
-        } else if (contentType === "application/json") {
-          const obj = await res.json();
-          if (res.status >= 400) {
-            throw obj;
-          }
-          return obj;
-        } else if (contentType === "text/plain" || contentType === "text/html") {
-          const str = await res.text();
-          if (res.status >= 400) {
-            throw str;
           }
-          return str;
+        })();
+      } else if (contentType === "application/qwik-json") {
+        const str = await res.text();
+        const [obj] = _deserialize(str);
+        if (res.status >= 400) {
+          throw obj;
+        }
+        return obj;
+      } else if (contentType === "application/json") {
+        const obj = await res.json();
+        if (res.status >= 400) {
+          throw obj;
+        }
+        return obj;
+      } else if (contentType === "text/plain" || contentType === "text/html") {
+        const str = await res.text();
+        if (res.status >= 400) {
+          throw str;
         }
+        return str;
       }
-    });
-  }
-  return rpc();
+    }
+  });
 };
 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 +1410,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,10 +1433,11 @@ const getValidators = (rest, qrl) => {
   }
   return {
     validators: validators.reverse(),
-    id
+    id,
+    serializationStrategy
   };
 };
-const deserializeStream = async function* (stream, ctxElm, abortSignal) {
+const deserializeStream = async function* (stream, abortSignal) {
   const reader = stream.getReader();
   try {
     let buffer = "";
@@ -1751,13 +1447,11 @@ const deserializeStream = async function* (stream, ctxElm, abortSignal) {
       if (result.done) {
         break;
       }
-      buffer += decoder.decode(result.value, {
-        stream: true
-      });
+      buffer += decoder.decode(result.value, { stream: true });
       const lines = buffer.split(/\n/);
       buffer = lines.pop();
       for (const line of lines) {
-        const [deserializedData] = _deserialize(line, ctxElm);
+        const [deserializedData] = _deserialize(line);
         yield deserializedData;
       }
     }
@@ -1765,95 +1459,109 @@ const deserializeStream = async function* (stream, ctxElm, abortSignal) {
     reader.releaseLock();
   }
 };
-const ServiceWorkerRegister = (props) => /* @__PURE__ */ jsx("script", {
-  type: "module",
-  dangerouslySetInnerHTML: swRegister,
-  nonce: props.nonce
-});
+
+const ServiceWorkerRegister = (props) => /* @__PURE__ */ jsx("script", { type: "module", dangerouslySetInnerHTML: swRegister, nonce: props.nonce });
+
 const Form = ({ action, spaReset, reloadDocument, onSubmit$, ...rest }, key) => {
   if (action) {
     const isArrayApi = Array.isArray(onSubmit$);
     if (isArrayApi) {
-      return jsx$1("form", {
+      return jsx$1(
+        "form",
+        {
+          ...rest,
+          action: action.actionPath,
+          "preventdefault:submit": !reloadDocument,
+          onSubmit$: [
+            ...onSubmit$,
+            // action.submit "submitcompleted" event for onSubmitCompleted$ events
+            !reloadDocument ? $((evt) => {
+              if (!action.submitted) {
+                return action.submit(evt);
+              }
+            }) : void 0
+          ],
+          method: "post",
+          ["data-spa-reset"]: spaReset ? "true" : void 0
+        },
+        key
+      );
+    }
+    return jsx$1(
+      "form",
+      {
         ...rest,
         action: action.actionPath,
         "preventdefault:submit": !reloadDocument,
         onSubmit$: [
-          ...onSubmit$,
+          // Since v2, this fires before the action is executed so it can be prevented
+          onSubmit$,
           // action.submit "submitcompleted" event for onSubmitCompleted$ events
-          !reloadDocument ? $((evt) => {
-            if (!action.submitted) {
-              return action.submit(evt);
-            }
-          }) : void 0
+          !reloadDocument ? action.submit : void 0
         ],
         method: "post",
         ["data-spa-reset"]: spaReset ? "true" : void 0
-      }, key);
-    }
-    return jsx$1("form", {
-      ...rest,
-      action: action.actionPath,
-      "preventdefault:submit": !reloadDocument,
-      onSubmit$: [
-        // Since v2, this fires before the action is executed so it can be prevented
-        onSubmit$,
-        // action.submit "submitcompleted" event for onSubmitCompleted$ events
-        !reloadDocument ? action.submit : void 0
-      ],
-      method: "post",
-      ["data-spa-reset"]: spaReset ? "true" : void 0
-    }, key);
+      },
+      key
+    );
   } else {
-    return /* @__PURE__ */ jsx(GetForm, {
-      spaReset,
-      reloadDocument,
-      onSubmit$,
-      ...rest
-    }, key);
+    return /* @__PURE__ */ jsx(
+      GetForm,
+      {
+        spaReset,
+        reloadDocument,
+        onSubmit$,
+        ...rest
+      },
+      key
+    );
   }
 };
-const GetForm = component$(({ action: _0, spaReset, reloadDocument, onSubmit$, ...rest }) => {
-  const nav = useNavigate();
-  return /* @__PURE__ */ jsx("form", {
-    action: "get",
-    "preventdefault:submit": !reloadDocument,
-    "data-spa-reset": spaReset ? "true" : void 0,
-    ...rest,
-    onSubmit$: [
-      ...Array.isArray(onSubmit$) ? onSubmit$ : [
-        onSubmit$
-      ],
-      $(async (_evt, form) => {
-        const formData = new FormData(form);
-        const params = new URLSearchParams();
-        formData.forEach((value, key) => {
-          if (typeof value === "string") {
-            params.append(key, value);
-          }
-        });
-        await nav("?" + params.toString(), {
-          type: "form",
-          forceReload: true
-        });
-      }),
-      $((_evt, form) => {
-        if (form.getAttribute("data-spa-reset") === "true") {
-          form.reset();
-        }
-        form.dispatchEvent(new CustomEvent("submitcompleted", {
-          bubbles: false,
-          cancelable: false,
-          composed: false,
-          detail: {
-            status: 200
-          }
-        }));
-      })
-    ],
-    children: /* @__PURE__ */ jsx(Slot, {})
-  });
-});
+const GetForm = component$(
+  ({ action: _0, spaReset, reloadDocument, onSubmit$, ...rest }) => {
+    const nav = useNavigate();
+    return /* @__PURE__ */ jsx(
+      "form",
+      {
+        action: "get",
+        "preventdefault:submit": !reloadDocument,
+        "data-spa-reset": spaReset ? "true" : void 0,
+        ...rest,
+        onSubmit$: [
+          ...Array.isArray(onSubmit$) ? onSubmit$ : [onSubmit$],
+          $(async (_evt, form) => {
+            const formData = new FormData(form);
+            const params = new URLSearchParams();
+            formData.forEach((value, key) => {
+              if (typeof value === "string") {
+                params.append(key, value);
+              }
+            });
+            await nav("?" + params.toString(), { type: "form", forceReload: true });
+          }),
+          $((_evt, form) => {
+            if (form.getAttribute("data-spa-reset") === "true") {
+              form.reset();
+            }
+            form.dispatchEvent(
+              new CustomEvent("submitcompleted", {
+                bubbles: false,
+                cancelable: false,
+                composed: false,
+                detail: {
+                  status: 200
+                }
+              })
+            );
+          })
+          // end of array
+        ],
+        children: /* @__PURE__ */ jsx(Slot, {})
+      }
+    );
+  }
+);
+
 const untypedAppUrl = function appUrl(route, params, paramsPrefix = "") {
   const path = route.split("/");
   for (let i = 0; i < path.length; i++) {
@@ -1890,39 +1598,46 @@ function omitProps(obj, keys) {
   }
   return omittedObj;
 }
-export {
-  ErrorBoundary,
-  Form,
-  Link,
-  QWIK_CITY_SCROLLER,
-  QWIK_ROUTER_SCROLLER,
-  QwikCityMockProvider,
-  QwikCityProvider,
-  QwikRouterMockProvider,
-  QwikRouterProvider,
-  RouterOutlet,
-  ServiceWorkerRegister,
-  globalAction$,
-  globalActionQrl,
-  omitProps,
-  routeAction$,
-  routeActionQrl,
-  routeLoader$,
-  routeLoaderQrl,
-  server$,
-  serverQrl,
-  untypedAppUrl,
-  useContent,
-  useDocumentHead,
-  useLocation,
-  useNavigate,
-  usePreventNavigate$,
-  usePreventNavigateQrl,
-  valibot$,
-  valibotQrl,
-  validator$,
-  validatorQrl,
-  z2 as z,
-  zod$,
-  zodQrl
+
+const createRenderer = (getOptions) => {
+  return ((opts) => {
+    const { jsx, options } = getOptions(opts);
+    return renderToStream(jsx, 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, QWIK_CITY_SCROLLER, QWIK_ROUTER_SCROLLER, QwikCityMockProvider, QwikCityProvider, QwikRouterMockProvider, QwikRouterProvider, RouterOutlet, ServiceWorkerRegister, createRenderer, globalAction$, globalActionQrl, omitProps, routeAction$, routeActionQrl, routeLoader$, routeLoaderQrl, server$, serverQrl, untypedAppUrl, useContent, useDocumentHead, useLocation, useNavigate, usePreventNavigate$, usePreventNavigateQrl, useQwikRouter, valibot$, valibotQrl, validator$, validatorQrl, zod$, zodQrl };