@qwik.dev/router 2.0.0-beta.3 → 2.0.0-beta.5

package/lib/index.d.ts

@@ -19,6 +19,7 @@ import { RequestEventCommon } from '@qwik.dev/router/middleware/request-handler'
 import { RequestEventLoader } from '@qwik.dev/router/middleware/request-handler';
 import { RequestHandler } from '@qwik.dev/router/middleware/request-handler';
 import type { ResolveSyncValue } from '@qwik.dev/router/middleware/request-handler';
+import type { SerializationStrategy } from '@qwik.dev/core/internal';
 import type * as v from 'valibot';
 import type { ValueOrPromise } from '@qwik.dev/core';
 import { z } from 'zod';
@@ -450,7 +451,9 @@ declare type LoaderConstructorQRL = {
 
 /** @public */
 declare type LoaderOptions = {
-    id?: string;
+    readonly id?: string;
+    readonly validation?: DataValidator[];
+    readonly serializationStrategy?: SerializationStrategy;
 };
 
 /** @public */
@@ -575,7 +578,7 @@ export declare interface QwikRouterProps {
      *
      * @see https://github.com/WICG/view-transitions/blob/main/explainer.md
      * @see https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
-     * @see https://caniuse.com/mdn-api_viewtransition
+     * @see https://caniuse.com/mdn_api_viewtransition
      */
     viewTransition?: boolean;
 }

package/lib/index.qwik.cjs

@@ -39,100 +39,19 @@ const ErrorBoundary = core.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 (core.isBrowser) {
-    path = path.endsWith("/") ? path : path + "/";
-    path = path.length > 1 && path.startsWith("/") ? path.slice(1) : path;
-    preloader.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);
@@ -147,6 +66,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");
@@ -227,6 +150,115 @@ const getFetchOptions = (action, noCache) => {
     };
   }
 };
+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 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 createLoaderSignal = (loadersObject, loaderId, url, serializationStrategy, container) => {
+  return core.createAsyncComputed$(async () => {
+    if (core.isBrowser && loadersObject[loaderId] === internal._UNINITIALIZED) {
+      const data = await loadClientData(url, void 0, {
+        loaderIds: [
+          loaderId
+        ]
+      });
+      loadersObject[loaderId] = data?.loaders[loaderId] ?? internal._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 prefetchSymbols = (path) => {
+  if (core.isBrowser) {
+    path = path.endsWith("/") ? path : path + "/";
+    path = path.length > 1 && path.startsWith("/") ? path.slice(1) : path;
+    preloader.p(path, 0.8);
+  }
+};
 const RouteStateContext = /* @__PURE__ */ core.createContextId("qc-s");
 const ContentContext = /* @__PURE__ */ core.createContextId("qc-c");
 const ContentInternalContext = /* @__PURE__ */ core.createContextId("qc-ic");
@@ -278,7 +310,7 @@ const Link = core.component$((props) => {
       }
     }
   }) : void 0;
-  const preventDefault = clientNavPath ? core.sync$((event, target) => {
+  const preventDefault = clientNavPath ? core.sync$((event) => {
     if (!(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
       event.preventDefault();
     }
@@ -508,18 +540,30 @@ 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 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) => {
@@ -564,9 +608,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];
     }
   }
 };
@@ -758,8 +802,8 @@ const spaInit = core.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]);
@@ -833,9 +877,23 @@ const QwikRouterProvider = core.component$((props) => {
     deep: false
   });
   const navResolver = {};
-  const loaderState = internal._weakSerialize(core.useStore(env.response.loaders, {
-    deep: false
-  }));
+  const container = internal._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[internal.SerializerSymbol] = (obj) => {
+    const loadersSerializationObject = {};
+    for (const [k, v] of Object.entries(obj)) {
+      loadersSerializationObject[k] = getSerializationStrategy(k) === "always" ? v : internal._UNINITIALIZED;
+    }
+    return loadersSerializationObject;
+  };
   const routeInternal = core.useSignal({
     type: "initial",
     dest: url,
@@ -928,7 +986,7 @@ const QwikRouterProvider = core.component$((props) => {
         let scroller = document.getElementById(QWIK_ROUTER_SCROLLER);
         if (!scroller) {
           scroller = document.getElementById(QWIK_CITY_SCROLLER);
-          if (scroller) {
+          if (scroller && core.isDev) {
             console.warn(`Please update your scroller ID to "${QWIK_ROUTER_SCROLLER}" as "${QWIK_CITY_SCROLLER}" is deprecated and will be removed in V3`);
           }
         }
@@ -1069,11 +1127,21 @@ const QwikRouterProvider = core.component$((props) => {
             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 = internal._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";
@@ -1203,8 +1271,8 @@ const QwikRouterProvider = core.component$((props) => {
             }
           };
           _waitNextPage().then(() => {
-            const container = internal._getQContainerElement(elm);
-            container.setAttribute("q:route", routeName);
+            const container2 = internal._getQContainerElement(elm);
+            container2.setAttribute(Q_ROUTE, routeName);
             const scrollState2 = currentScrollState(scroller);
             saveScrollHistory(scrollState2);
             win._qRouterScrollEnabled = true;
@@ -1237,7 +1305,7 @@ const QwikRouterMockProvider = core.component$((props) => {
   }, {
     deep: false
   });
-  const loaderState = core.useSignal({});
+  const loaderState = {};
   const routeInternal = core.useSignal({
     type: "initial",
     dest: url
@@ -1482,24 +1550,26 @@ const globalActionQrl = (actionQrl, ...rest) => {
 const routeAction$ = /* @__PURE__ */ core.implicit$FirstArg(routeActionQrl);
 const globalAction$ = /* @__PURE__ */ core.implicit$FirstArg(globalActionQrl);
 const routeLoaderQrl = (loaderQrl, ...rest) => {
-  const { id, validators } = getValidators(rest, loaderQrl);
+  const { id, validators, serializationStrategy } = getValidators(rest, loaderQrl);
   function loader() {
-    return core.useContext(RouteStateContext, (state) => {
-      if (!(id in state)) {
-        throw new Error(`routeLoader$ "${loaderQrl.getSymbol()}" was invoked in a route where it was not declared.
+    const iCtx = internal._useInvokeContext();
+    const state = iCtx.$container$.resolveContext(iCtx.$hostElement$, 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 internal._wrapStore(state, id);
-    });
+    }
+    core.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;
 };
@@ -1728,6 +1798,7 @@ const serverQrl = (qrl, options) => {
 const server$ = /* @__PURE__ */ core.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];
@@ -1736,6 +1807,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);
         }
@@ -1756,7 +1830,8 @@ const getValidators = (rest, qrl) => {
   }
   return {
     validators: validators.reverse(),
-    id
+    id,
+    serializationStrategy
   };
 };
 const deserializeStream = async function* (stream, ctxElm, abortSignal) {