@qwik.dev/router 2.0.0-alpha.0 → 2.0.0-alpha.10

package/lib/index.qwik.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
 const core = require("@qwik.dev/core");
-const build = require("@qwik.dev/core/build");
+const preloader = require("@qwik.dev/core/preloader");
 const internal = require("@qwik.dev/core/internal");
 const qwikRouterConfig = require("@qwik-router-config");
 const zod = require("zod");
@@ -24,9 +24,20 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const qwikRouterConfig__namespace = /* @__PURE__ */ _interopNamespaceDefault(qwikRouterConfig);
+const ErrorBoundary = core.component$((props) => {
+  const store2 = core.useErrorBoundary();
+  core.useOnWindow("qerror", core.$((e) => {
+    store2.error = e.detail.error;
+  }));
+  if (store2.error && props.fallback$) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: props.fallback$(store2.error)
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {});
+});
 const MODULE_CACHE = /* @__PURE__ */ new WeakMap();
 const CLIENT_DATA_CACHE = /* @__PURE__ */ new Map();
-const PREFETCHED_NAVIGATE_PATHS = /* @__PURE__ */ new Set();
 const QACTION_KEY = "qaction";
 const QFN_KEY = "qfunc";
 const QDATA_KEY = "qdata";
@@ -64,15 +75,7 @@ const getClientNavPath = (props, baseUrl) => {
   }
   return null;
 };
-const shouldPrefetchData = (clientNavPath, currentLoc) => {
-  if (clientNavPath) {
-    const prefetchUrl = toUrl(clientNavPath, currentLoc.url);
-    const currentUrl = toUrl("", currentLoc.url);
-    return !isSamePath(prefetchUrl, currentUrl);
-  }
-  return false;
-};
-const shouldPrefetchSymbols = (clientNavPath, currentLoc) => {
+const shouldPreload = (clientNavPath, currentLoc) => {
   if (clientNavPath) {
     const prefetchUrl = toUrl(clientNavPath, currentLoc.url);
     const currentUrl = toUrl("", currentLoc.url);
@@ -120,18 +123,10 @@ const newScrollState = () => {
   };
 };
 const prefetchSymbols = (path) => {
-  if (build.isBrowser) {
+  if (core.isBrowser) {
     path = path.endsWith("/") ? path : path + "/";
-    if (!PREFETCHED_NAVIGATE_PATHS.has(path)) {
-      PREFETCHED_NAVIGATE_PATHS.add(path);
-      document.dispatchEvent(new CustomEvent("qprefetch", {
-        detail: {
-          links: [
-            path
-          ]
-        }
-      }));
-    }
+    path = path.length > 1 && path.startsWith("/") ? path.slice(1) : path;
+    preloader.p(path, 0.8);
   }
 };
 const loadClientData = async (url, element, opts) => {
@@ -147,7 +142,7 @@ const loadClientData = async (url, element, opts) => {
   }
   let resolveFn;
   if (!qData) {
-    const fetchOptions = getFetchOptions(opts?.action);
+    const fetchOptions = getFetchOptions(opts?.action, opts?.clearCache);
     if (opts?.action) {
       opts.action.data = void 0;
     }
@@ -203,16 +198,19 @@ const loadClientData = async (url, element, opts) => {
     return v;
   });
 };
-const getFetchOptions = (action) => {
+const getFetchOptions = (action, noCache) => {
   const actionData = action?.data;
   if (!actionData) {
-    return {
-      cache: "no-cache",
-      headers: {
-        "Cache-Control": "no-cache",
-        Pragma: "no-cache"
-      }
-    };
+    if (noCache) {
+      return {
+        cache: "no-cache",
+        headers: {
+          "Cache-Control": "no-cache",
+          Pragma: "no-cache"
+        }
+      };
+    }
+    return void 0;
   }
   if (actionData instanceof FormData) {
     return {
@@ -256,14 +254,15 @@ const Link = core.component$((props) => {
   const nav = useNavigate();
   const loc = useLocation();
   const originalHref = props.href;
+  const anchorRef = core.useSignal();
   const { onClick$, prefetch: prefetchProp, reload, replaceState, scroll, ...linkProps } = /* @__PURE__ */ (() => props)();
   const clientNavPath = core.untrack(() => getClientNavPath({
     ...linkProps,
     reload
   }, loc));
   linkProps.href = clientNavPath || originalHref;
-  const prefetchData = core.untrack(() => !!clientNavPath && prefetchProp !== false && prefetchProp !== "js" && shouldPrefetchData(clientNavPath, loc) || void 0);
-  const prefetch = core.untrack(() => prefetchData || !!clientNavPath && prefetchProp !== false && shouldPrefetchSymbols(clientNavPath, loc));
+  const prefetchData = core.untrack(() => !!clientNavPath && prefetchProp !== false && prefetchProp !== "js" || void 0);
+  const prefetch = core.untrack(() => prefetchData || !!clientNavPath && prefetchProp !== false && shouldPreload(clientNavPath, loc));
   const handlePrefetch = prefetch ? core.$((_, elm) => {
     if (navigator.connection?.saveData) {
       return;
@@ -286,11 +285,7 @@ const Link = core.component$((props) => {
   }) : void 0;
   const handleClick = clientNavPath ? core.$(async (event, elm) => {
     if (event.defaultPrevented) {
-      if (elm.hasAttribute("q:nbs")) {
-        await nav(location.href, {
-          type: "popstate"
-        });
-      } else if (elm.href) {
+      if (elm.href) {
         elm.setAttribute("aria-pressed", "true");
         await nav(elm.href, {
           forceReload: reload,
@@ -301,7 +296,14 @@ const Link = core.component$((props) => {
       }
     }
   }) : void 0;
+  core.useVisibleTask$(({ track }) => {
+    track(() => loc.url.pathname);
+    if (!core.isDev && anchorRef.value) {
+      handlePrefetch?.(void 0, anchorRef.value);
+    }
+  });
   return /* @__PURE__ */ jsxRuntime.jsx("a", {
+    ref: anchorRef,
     "q:link": !!clientNavPath,
     ...linkProps,
     onClick$: [
@@ -318,11 +320,6 @@ const Link = core.component$((props) => {
       linkProps.onFocus$,
       handlePrefetch
     ],
-    // Don't prefetch on visible in dev mode
-    onQVisible$: [
-      linkProps.onQVisible$,
-      !build.isDev ? handlePrefetch : void 0
-    ],
     children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
   });
 });
@@ -615,7 +612,6 @@ const spaInit = core.event$((_, el) => {
   if (!win[spa] && !win[initPopstate] && !win[initAnchors] && !win[initVisibility] && !win[initScroll]) {
     const currentPath = location.pathname + location.search;
     const historyPatch = "_qRouterHistoryPatch";
-    const bootstrap = "_qRouterBootstrap";
     const scrollEnabled = "_qRouterScrollEnabled";
     const debounceTimeout = "_qRouterScrollDebounce";
     const scrollHistory = "_qRouterScroll";
@@ -647,15 +643,16 @@ const spaInit = core.event$((_, el) => {
       clearTimeout(win[debounceTimeout]);
       if (currentPath !== location.pathname + location.search) {
         const getContainer = (el2) => el2.closest("[q\\:container]:not([q\\:container=html]):not([q\\:container=text])");
-        const link = getContainer(el)?.querySelector("a[q\\:link]");
-        if (link) {
-          const container = getContainer(link);
-          const bootstrapLink = link.cloneNode();
-          bootstrapLink.setAttribute("q:nbs", "");
-          bootstrapLink.style.display = "none";
-          container.appendChild(bootstrapLink);
-          win[bootstrap] = bootstrapLink;
-          bootstrapLink.click();
+        const container = getContainer(el);
+        const domContainer = container.qContainer;
+        const hostElement = domContainer.vNodeLocate(el);
+        const nav = domContainer?.resolveContext(hostElement, {
+          id: "qc--n"
+        });
+        if (nav) {
+          nav(location.href, {
+            type: "popstate"
+          });
         } else {
           location.reload();
         }
@@ -678,7 +675,7 @@ const spaInit = core.event$((_, el) => {
           state = {
             _data: state
           };
-          if (build.isDev) {
+          if (core.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`");
           }
         }
@@ -816,7 +813,7 @@ const QwikRouterProvider = core.component$((props) => {
     }
   } : void 0);
   const registerPreventNav = core.$((fn$) => {
-    if (!build.isBrowser) {
+    if (!core.isBrowser) {
       return;
     }
     preventNav.$handler$ || (preventNav.$handler$ = (event) => {
@@ -865,19 +862,19 @@ const QwikRouterProvider = core.component$((props) => {
       }
     }
     if (typeof dest === "number") {
-      if (build.isBrowser) {
+      if (core.isBrowser) {
         history.go(dest);
       }
       return;
     }
     if (!isSameOrigin(dest, lastDest)) {
-      if (build.isBrowser) {
+      if (core.isBrowser) {
         location.href = dest.href;
       }
       return;
     }
     if (!forceReload && isSamePath(dest, lastDest)) {
-      if (build.isBrowser) {
+      if (core.isBrowser) {
         if (type === "link" && dest.href !== location.href) {
           history.pushState(null, "", dest);
         }
@@ -905,7 +902,7 @@ const QwikRouterProvider = core.component$((props) => {
       replaceState,
       scroll
     };
-    if (build.isBrowser) {
+    if (core.isBrowser) {
       loadClientData(dest, internal._getContextElement());
       loadRoute(qwikRouterConfig__namespace.routes, qwikRouterConfig__namespace.menus, qwikRouterConfig__namespace.cacheModules, dest.pathname);
     }
@@ -938,7 +935,7 @@ const QwikRouterProvider = core.component$((props) => {
       let clientPageData;
       let loadedRoute = null;
       let elm;
-      if (build.isServer) {
+      if (core.isServer) {
         trackUrl = new URL(navigation.dest, routeLocation.url);
         loadedRoute = env.loadedRoute;
         clientPageData = env.response;
@@ -985,7 +982,9 @@ const QwikRouterProvider = core.component$((props) => {
         if (navigation.dest.search && !isRedirect) {
           trackUrl.search = navigation.dest.search;
         }
-        routeLocation.prevUrl = prevUrl;
+        if (!isSamePath(trackUrl, prevUrl)) {
+          routeLocation.prevUrl = prevUrl;
+        }
         routeLocation.url = trackUrl;
         routeLocation.params = {
           ...params
@@ -1004,7 +1003,7 @@ const QwikRouterProvider = core.component$((props) => {
         documentHead.scripts = resolvedHead.scripts;
         documentHead.title = resolvedHead.title;
         documentHead.frontmatter = resolvedHead.frontmatter;
-        if (build.isBrowser) {
+        if (core.isBrowser) {
           if (props.viewTransition !== false) {
             document.__q_view_transition__ = true;
           }
@@ -1045,7 +1044,7 @@ const QwikRouterProvider = core.component$((props) => {
                   state = {
                     _data: state
                   };
-                  if (build.isDev) {
+                  if (core.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`");
                   }
                 }
@@ -1122,8 +1121,6 @@ const QwikRouterProvider = core.component$((props) => {
             });
             removeEventListener("scroll", win._qRouterInitScroll);
             win._qRouterInitScroll = void 0;
-            win._qRouterBootstrap?.remove();
-            win._qRouterBootstrap = void 0;
             spaInit.resolve();
           }
           if (navType !== "popstate") {
@@ -1139,7 +1136,7 @@ const QwikRouterProvider = core.component$((props) => {
             const scrollState2 = currentScrollState(scroller);
             saveScrollHistory(scrollState2);
             win._qRouterScrollEnabled = true;
-            if (build.isBrowser) {
+            if (core.isBrowser) {
               callRestoreScrollOnDocument();
             }
             routeLocation.isNavigating = false;
@@ -1149,7 +1146,7 @@ const QwikRouterProvider = core.component$((props) => {
       }
     }
     const promise = run();
-    if (build.isServer) {
+    if (core.isServer) {
       return promise;
     } else {
       return;
@@ -1337,7 +1334,7 @@ const routeActionQrl = (actionQrl, ...rest) => {
       return initialState;
     });
     const submit = core.$((input = {}) => {
-      if (build.isServer) {
+      if (core.isServer) {
         throw new Error(`Actions can not be invoked within the server during SSR.
 Action.run() can only be called on the browser, for example when a user clicks a button, or submits a form.`);
       }
@@ -1403,7 +1400,7 @@ Action.run() can only be called on the browser, for example when a user clicks a
 };
 const globalActionQrl = (actionQrl, ...rest) => {
   const action = routeActionQrl(actionQrl, ...rest);
-  if (build.isServer) {
+  if (core.isServer) {
     if (typeof globalThis._qwikActionsMap === "undefined") {
       globalThis._qwikActionsMap = /* @__PURE__ */ new Map();
     }
@@ -1423,9 +1420,9 @@ const routeLoaderQrl = (loaderQrl, ...rest) => {
     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/cookbook/re-exporting-loaders/`);
+    For more information check: https://qwik.dev/docs/re-exporting-loaders/`);
       }
-      return internal._wrapProp(state, id);
+      return internal._wrapStore(state, id);
     });
   }
   loader.__brand = "server_loader";
@@ -1437,7 +1434,7 @@ const routeLoaderQrl = (loaderQrl, ...rest) => {
 };
 const routeLoader$ = /* @__PURE__ */ core.implicit$FirstArg(routeLoaderQrl);
 const validatorQrl = (validator) => {
-  if (build.isServer) {
+  if (core.isServer) {
     return {
       validate: validator
     };
@@ -1468,7 +1465,7 @@ 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.');
   }
-  if (build.isServer) {
+  if (core.isServer) {
     return {
       __brand: "valibot",
       async validate(ev, inputData) {
@@ -1481,7 +1478,7 @@ const valibotQrl = (qrl) => {
             data: result.output
           };
         } else {
-          if (build.isDev) {
+          if (core.isDev) {
             console.error("ERROR: Valibot validation failed", result.issues);
           }
           return {
@@ -1521,7 +1518,7 @@ const flattenZodIssues = (issues) => {
   }, {});
 };
 const zodQrl = (qrl) => {
-  if (build.isServer) {
+  if (core.isServer) {
     return {
       __brand: "zod",
       async validate(ev, inputData) {
@@ -1540,7 +1537,7 @@ const zodQrl = (qrl) => {
         if (result.success) {
           return result;
         } else {
-          if (build.isDev) {
+          if (core.isDev) {
             console.error("ERROR: Zod validation failed", result.error.issues);
           }
           return {
@@ -1559,7 +1556,7 @@ const zodQrl = (qrl) => {
 };
 const zod$ = /* @__PURE__ */ core.implicit$FirstArg(zodQrl);
 const serverQrl = (qrl, options) => {
-  if (build.isServer) {
+  if (core.isServer) {
     const captured = qrl.getCaptured();
     if (captured && captured.length > 0 && !internal._getContextElement()) {
       throw new Error("For security reasons, we cannot serialize QRLs that capture lexical scope.");
@@ -1572,7 +1569,7 @@ const serverQrl = (qrl, options) => {
   function rpc() {
     return core.$(async function(...args) {
       const abortSignal = args.length > 0 && args[0] instanceof AbortSignal ? args.shift() : void 0;
-      if (build.isServer) {
+      if (core.isServer) {
         let requestEvent = globalThis.qcAsyncRequestStore?.getStore();
         if (!requestEvent) {
           const contexts = [
@@ -1582,7 +1579,7 @@ const serverQrl = (qrl, options) => {
           ];
           requestEvent = contexts.find((v2) => v2 && Object.prototype.hasOwnProperty.call(v2, "sharedMap") && Object.prototype.hasOwnProperty.call(v2, "cookie"));
         }
-        return qrl.apply(requestEvent, build.isDev ? deepFreeze(args) : args);
+        return qrl.apply(requestEvent, core.isDev ? deepFreeze(args) : args);
       } else {
         const ctxElm = internal._getContextElement();
         const filteredArgs = args.map((arg) => {
@@ -1603,6 +1600,7 @@ const serverQrl = (qrl, options) => {
           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
           },
@@ -1634,19 +1632,19 @@ const serverQrl = (qrl, options) => {
         } else if (contentType === "application/qwik-json") {
           const str = await res.text();
           const [obj] = internal._deserialize(str, ctxElm ?? document.documentElement);
-          if (res.status === 500) {
+          if (res.status >= 400) {
             throw obj;
           }
           return obj;
         } else if (contentType === "application/json") {
           const obj = await res.json();
-          if (res.status === 500) {
+          if (res.status >= 400) {
             throw obj;
           }
           return obj;
         } else if (contentType === "text/plain" || contentType === "text/html") {
           const str = await res.text();
-          if (res.status === 500) {
+          if (res.status >= 400) {
             throw str;
           }
           return str;
@@ -1676,7 +1674,7 @@ const getValidators = (rest, qrl) => {
     validators.push(...rest.filter((v2) => !!v2));
   }
   if (typeof id === "string") {
-    if (build.isDev) {
+    if (core.isDev) {
       if (!/^[\w/.-]+$/.test(id)) {
         throw new Error(`Invalid id: ${id}, id can only contain [a-zA-Z0-9_.-]`);
       }
@@ -1714,7 +1712,8 @@ const deserializeStream = async function* (stream, ctxElm, abortSignal) {
     reader.releaseLock();
   }
 };
-const ServiceWorkerRegister = (props) => core.jsx("script", {
+const ServiceWorkerRegister = (props) => /* @__PURE__ */ jsxRuntime.jsx("script", {
+  type: "module",
   dangerouslySetInnerHTML: swRegister,
   nonce: props.nonce
 });
@@ -1842,6 +1841,7 @@ Object.defineProperty(exports, "z", {
   enumerable: true,
   get: () => zod.z
 });
+exports.ErrorBoundary = ErrorBoundary;
 exports.Form = Form;
 exports.Link = Link;
 exports.QWIK_CITY_SCROLLER = QWIK_CITY_SCROLLER;