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

package/lib/chunks/routing.qwik.mjs

@@ -0,0 +1,453 @@
+import { createAsyncComputed$, isBrowser } from "@qwik.dev/core";
+import { p } from "@qwik.dev/core/preloader";
+import { _deserialize, _UNINITIALIZED } from "@qwik.dev/core/internal";
+import { R as RouteDataProp, M as MenuDataProp } from "./types.qwik.mjs";
+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 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, {
+    actionId: opts?.action?.id,
+    loaderIds: opts?.loaderIds
+  });
+  let qData;
+  if (!opts?.action) {
+    qData = CLIENT_DATA_CACHE.get(clientDataPath);
+  }
+  if (opts?.preloadRouteBundles !== false) {
+    preloadRouteBundles(pagePathname, 0.8);
+  }
+  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.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");
+        if (!isQData || redirectedURL.origin !== location.origin) {
+          if (!opts?.isPrefetch) {
+            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 toPath = (url) => url.pathname + url.search + url.hash;
+const toUrl = (url, baseUrl) => new URL(url, baseUrl.href);
+const isSameOrigin = (a, b) => a.origin === b.origin;
+const withSlash = (path) => path.endsWith("/") ? path : path + "/";
+const isSamePathname = ({ pathname: a }, { pathname: b }) => {
+  const lDiff = Math.abs(a.length - b.length);
+  return lDiff === 0 ? a === b : lDiff === 1 && withSlash(a) === withSlash(b);
+};
+const isSameSearchQuery = (a, b) => a.search === b.search;
+const isSamePath = (a, b) => isSameSearchQuery(a, b) && isSamePathname(a, b);
+const getClientDataPath = (pathname, pageSearch, options) => {
+  let search = pageSearch ?? "";
+  if (options?.actionId) {
+    search += (search ? "&" : "?") + QACTION_KEY + "=" + encodeURIComponent(options.actionId);
+  }
+  if (options?.loaderIds) {
+    for (const loaderId of options.loaderIds) {
+      search += (search ? "&" : "?") + QLOADER_KEY + "=" + encodeURIComponent(loaderId);
+    }
+  }
+  return pathname + (pathname.endsWith("/") ? "" : "/") + "q-data.json" + search;
+};
+const getClientNavPath = (props, baseUrl) => {
+  const href = props.href;
+  if (typeof href === "string" && typeof props.target !== "string" && !props.reload) {
+    try {
+      const linkUrl = toUrl(href.trim(), baseUrl.url);
+      const currentUrl = toUrl("", baseUrl.url);
+      if (isSameOrigin(linkUrl, currentUrl)) {
+        return toPath(linkUrl);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  } else if (props.reload) {
+    return toPath(toUrl("", baseUrl.url));
+  }
+  return null;
+};
+const shouldPreload = (clientNavPath, currentLoc) => {
+  if (clientNavPath) {
+    const prefetchUrl = toUrl(clientNavPath, currentLoc.url);
+    const currentUrl = toUrl("", currentLoc.url);
+    return !isSamePathname(prefetchUrl, currentUrl);
+  }
+  return false;
+};
+const isPromise = (value) => {
+  return value && typeof value.then === "function";
+};
+const createLoaderSignal = (loadersObject, loaderId, url, serializationStrategy, container) => {
+  return createAsyncComputed$(
+    async () => {
+      if (isBrowser && loadersObject[loaderId] === _UNINITIALIZED) {
+        const data = await loadClientData(url, void 0, {
+          loaderIds: [loaderId]
+        });
+        loadersObject[loaderId] = data?.loaders[loaderId] ?? _UNINITIALIZED;
+      }
+      return loadersObject[loaderId];
+    },
+    {
+      container,
+      serializationStrategy
+    }
+  );
+};
+const clientNavigate = (win, navType, fromURL, toURL, replaceState = false) => {
+  if (navType !== "popstate") {
+    const samePath = isSamePath(fromURL, toURL);
+    const sameHash = fromURL.hash === toURL.hash;
+    if (!samePath || !sameHash) {
+      const newState = {
+        _qRouterScroll: newScrollState()
+      };
+      if (replaceState) {
+        win.history.replaceState(newState, "", toPath(toURL));
+      } else {
+        win.history.pushState(newState, "", toPath(toURL));
+      }
+    }
+  }
+};
+const newScrollState = () => {
+  return {
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0
+  };
+};
+const preloadRouteBundles = (path, probability = 0.8) => {
+  if (isBrowser) {
+    path = path.endsWith("/") ? path : path + "/";
+    path = path.length > 1 && path.startsWith("/") ? path.slice(1) : path;
+    p(path, probability);
+  }
+};
+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) {
+  if (path.startsWith("/build/")) {
+    return null;
+  }
+  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
+        /* CLOSE_BRACKET */
+      );
+      const paramName = route.substring(paramNameStart, paramNameEnd);
+      const paramSuffixEnd = scan(
+        route,
+        paramNameEnd + 1,
+        routeLength,
+        47
+        /* SLASH */
+      );
+      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 deepFreeze = (obj) => {
+  if (obj == null) {
+    return obj;
+  }
+  Object.getOwnPropertyNames(obj).forEach((prop) => {
+    const value = obj[prop];
+    if (value && typeof value === "object" && !Object.isFrozen(value)) {
+      deepFreeze(value);
+    }
+  });
+  return Object.freeze(obj);
+};
+const loadRoute = async (routes, menus, cacheModules, pathname, isInternal) => {
+  if (!Array.isArray(routes)) {
+    return null;
+  }
+  for (const routeData of routes) {
+    const routeName = routeData[RouteDataProp.RouteName];
+    const params = matchRoute(routeName, pathname);
+    if (!params) {
+      continue;
+    }
+    const moduleLoaders = routeData[RouteDataProp.ModuleLoaders];
+    const routeBundleNames = routeData[RouteDataProp.RouteBundleNames];
+    const modules = new Array(moduleLoaders.length);
+    const pendingLoads = [];
+    moduleLoaders.forEach((moduleLoader, i) => {
+      loadModule(
+        moduleLoader,
+        pendingLoads,
+        (routeModule) => modules[i] = routeModule,
+        cacheModules
+      );
+    });
+    let menu = void 0;
+    if (!isInternal) {
+      const menuLoader = getMenuLoader(menus, pathname);
+      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[MenuDataProp.Pathname] === pathname || pathname.startsWith(m[MenuDataProp.Pathname])
+    );
+    if (menu) {
+      return menu[MenuDataProp.MenuLoader];
+    }
+  }
+};
+export {
+  CLIENT_DATA_CACHE as C,
+  DEFAULT_LOADERS_SERIALIZATION_STRATEGY as D,
+  Q_ROUTE as Q,
+  isSamePath as a,
+  isSameOrigin as b,
+  createLoaderSignal as c,
+  loadRoute as d,
+  clientNavigate as e,
+  deepFreeze as f,
+  getClientNavPath as g,
+  QFN_KEY as h,
+  isPromise as i,
+  QACTION_KEY as j,
+  QDATA_KEY as k,
+  loadClientData as l,
+  QLOADER_KEY as m,
+  preloadRouteBundles as p,
+  shouldPreload as s,
+  toUrl as t
+};

package/lib/chunks/types.qwik.cjs

@@ -0,0 +1,24 @@
+"use strict";
+var RouteDataProp = /* @__PURE__ */ ((RouteDataProp2) => {
+  RouteDataProp2[RouteDataProp2["RouteName"] = 0] = "RouteName";
+  RouteDataProp2[RouteDataProp2["ModuleLoaders"] = 1] = "ModuleLoaders";
+  RouteDataProp2[RouteDataProp2["OriginalPathname"] = 2] = "OriginalPathname";
+  RouteDataProp2[RouteDataProp2["RouteBundleNames"] = 3] = "RouteBundleNames";
+  return RouteDataProp2;
+})(RouteDataProp || {});
+var MenuDataProp = /* @__PURE__ */ ((MenuDataProp2) => {
+  MenuDataProp2[MenuDataProp2["Pathname"] = 0] = "Pathname";
+  MenuDataProp2[MenuDataProp2["MenuLoader"] = 1] = "MenuLoader";
+  return MenuDataProp2;
+})(MenuDataProp || {});
+var LoadedRouteProp = /* @__PURE__ */ ((LoadedRouteProp2) => {
+  LoadedRouteProp2[LoadedRouteProp2["RouteName"] = 0] = "RouteName";
+  LoadedRouteProp2[LoadedRouteProp2["Params"] = 1] = "Params";
+  LoadedRouteProp2[LoadedRouteProp2["Mods"] = 2] = "Mods";
+  LoadedRouteProp2[LoadedRouteProp2["Menu"] = 3] = "Menu";
+  LoadedRouteProp2[LoadedRouteProp2["RouteBundleNames"] = 4] = "RouteBundleNames";
+  return LoadedRouteProp2;
+})(LoadedRouteProp || {});
+exports.LoadedRouteProp = LoadedRouteProp;
+exports.MenuDataProp = MenuDataProp;
+exports.RouteDataProp = RouteDataProp;

package/lib/chunks/types.qwik.mjs

@@ -0,0 +1,25 @@
+var RouteDataProp = /* @__PURE__ */ ((RouteDataProp2) => {
+  RouteDataProp2[RouteDataProp2["RouteName"] = 0] = "RouteName";
+  RouteDataProp2[RouteDataProp2["ModuleLoaders"] = 1] = "ModuleLoaders";
+  RouteDataProp2[RouteDataProp2["OriginalPathname"] = 2] = "OriginalPathname";
+  RouteDataProp2[RouteDataProp2["RouteBundleNames"] = 3] = "RouteBundleNames";
+  return RouteDataProp2;
+})(RouteDataProp || {});
+var MenuDataProp = /* @__PURE__ */ ((MenuDataProp2) => {
+  MenuDataProp2[MenuDataProp2["Pathname"] = 0] = "Pathname";
+  MenuDataProp2[MenuDataProp2["MenuLoader"] = 1] = "MenuLoader";
+  return MenuDataProp2;
+})(MenuDataProp || {});
+var LoadedRouteProp = /* @__PURE__ */ ((LoadedRouteProp2) => {
+  LoadedRouteProp2[LoadedRouteProp2["RouteName"] = 0] = "RouteName";
+  LoadedRouteProp2[LoadedRouteProp2["Params"] = 1] = "Params";
+  LoadedRouteProp2[LoadedRouteProp2["Mods"] = 2] = "Mods";
+  LoadedRouteProp2[LoadedRouteProp2["Menu"] = 3] = "Menu";
+  LoadedRouteProp2[LoadedRouteProp2["RouteBundleNames"] = 4] = "RouteBundleNames";
+  return LoadedRouteProp2;
+})(LoadedRouteProp || {});
+export {
+  LoadedRouteProp as L,
+  MenuDataProp as M,
+  RouteDataProp as R
+};

package/lib/index.d.ts

@@ -244,6 +244,7 @@ export declare type DocumentHead = DocumentHeadValue | ((props: DocumentHeadProp
 /** @public */
 export declare interface DocumentHeadProps extends RouteLocation {
     readonly head: ResolvedDocumentHead;
+    /** @deprecated This is not necessary, it works correctly without */
     readonly withLocale: <T>(fn: () => T) => T;
     readonly resolveValue: ResolveSyncValue;
 }
@@ -664,7 +665,7 @@ export declare interface QwikRouterProps {
     viewTransition?: boolean;
 }
 
-/** @public This is a wrapper around the `useQwikRouter()` hook. We recommend using the hook instead of this component. */
+/** @public This is a wrapper around the `useQwikRouter()` hook. We recommend using the hook instead of this component, unless you have a good reason to make your root component reactive. */
 export declare const QwikRouterProvider: Component<QwikRouterProps>;
 
 /** @public */
@@ -705,10 +706,15 @@ export declare const routeAction$: ActionConstructor;
 /* Excluded from this release type: routeActionQrl */
 
 /** @public */
-export declare type RouteData = [routeName: string, loaders: ModuleLoader[]] | [
+export declare type RouteData = [
 routeName: string,
-loaders: ModuleLoader[],
+moduleLoaders: ModuleLoader[]
+] | [
+routeName: string,
+moduleLoaders: ModuleLoader[],
+/** The actual src/routes pathname, not rewritten */
 originalPathname: string,
+/** The bundles that contain the loaders */
 routeBundleNames: string[]
 ];