@qwik.dev/router 2.0.0-beta.31 → 2.0.0-beta.32

package/lib/chunks/routing.qwik.mjs

@@ -509,7 +509,7 @@ function findChild(node, part, partLower, parts, partIndex, params) {
   return void 0;
 }
 function findIndexNode(node) {
-  if (node._I || node._G) {
+  if (node._I || node._G != null) {
     return {
       target: node,
       groups: []
@@ -529,7 +529,7 @@ function findIndexNode(node) {
   return void 0;
 }
 function resolveLoaders(root, node, gatheredLayouts) {
-  if (node._G) {
+  if (node._G != null) {
     const keys = node._G.split("/").filter((p) => p.length > 0);
     const target = walkTrieKeys(root, keys);
     if (!target) {
@@ -537,7 +537,7 @@ function resolveLoaders(root, node, gatheredLayouts) {
     }
     let targetNode = target.node;
     const targetLayouts = target.layouts;
-    if (!targetNode._I && !targetNode._G) {
+    if (!targetNode._I && targetNode._G == null) {
       const indexResult = findIndexNode(targetNode);
       if (indexResult) {
         for (const g of indexResult.groups) {
@@ -650,14 +650,14 @@ function matchRouteTree(root = {}, pathname) {
     collectNodeMeta(node, found.groups, layouts, errorLoaderRef, notFoundLoaderRef, menuLoaderRef);
   }
   if (matched && !done && i === len) {
-    if (!node._I && !node._G) {
+    if (!node._I && node._G == null) {
       const indexResult = findIndexNode(node);
       if (indexResult) {
         collectNodeMeta(indexResult.target, indexResult.groups, layouts, errorLoaderRef, notFoundLoaderRef, menuLoaderRef);
         node = indexResult.target;
       }
     }
-    if (!node._I && !node._G && node._A) {
+    if (!node._I && node._G == null && node._A) {
       const next = node._A;
       const paramName = next._P;
       params[paramName] = "";
@@ -670,7 +670,7 @@ function matchRouteTree(root = {}, pathname) {
         menuLoaderRef.v = node._N;
       }
     }
-    if (!node._I && !node._G) {
+    if (!node._I && node._G == null) {
       const restInfo = findRestNode(node);
       if (restInfo) {
         const next = restInfo.next;

package/lib/chunks/worker-thread.qwik.mjs

@@ -280,7 +280,7 @@ function findChild(node, part, partLower, parts, partIndex, params) {
   return void 0;
 }
 function findIndexNode(node) {
-  if (node._I || node._G) {
+  if (node._I || node._G != null) {
     return {
       target: node,
       groups: []
@@ -300,7 +300,7 @@ function findIndexNode(node) {
   return void 0;
 }
 function resolveLoaders(root, node, gatheredLayouts) {
-  if (node._G) {
+  if (node._G != null) {
     const keys = node._G.split("/").filter((p) => p.length > 0);
     const target = walkTrieKeys(root, keys);
     if (!target) {
@@ -308,7 +308,7 @@ function resolveLoaders(root, node, gatheredLayouts) {
     }
     let targetNode = target.node;
     const targetLayouts = target.layouts;
-    if (!targetNode._I && !targetNode._G) {
+    if (!targetNode._I && targetNode._G == null) {
       const indexResult = findIndexNode(targetNode);
       if (indexResult) {
         for (const g of indexResult.groups) {
@@ -421,14 +421,14 @@ function matchRouteTree(root = {}, pathname) {
     collectNodeMeta(node, found.groups, layouts, errorLoaderRef, notFoundLoaderRef, menuLoaderRef);
   }
   if (matched && !done && i === len) {
-    if (!node._I && !node._G) {
+    if (!node._I && node._G == null) {
       const indexResult = findIndexNode(node);
       if (indexResult) {
         collectNodeMeta(indexResult.target, indexResult.groups, layouts, errorLoaderRef, notFoundLoaderRef, menuLoaderRef);
         node = indexResult.target;
       }
     }
-    if (!node._I && !node._G && node._A) {
+    if (!node._I && node._G == null && node._A) {
       const next = node._A;
       const paramName = next._P;
       params[paramName] = "";
@@ -441,7 +441,7 @@ function matchRouteTree(root = {}, pathname) {
         menuLoaderRef.v = node._N;
       }
     }
-    if (!node._I && !node._G) {
+    if (!node._I && node._G == null) {
       const restInfo = findRestNode(node);
       if (restInfo) {
         const next = restInfo.next;

package/lib/index.d.ts

@@ -400,8 +400,6 @@ export declare interface FormProps<O, I> extends Omit<QwikJSX.IntrinsicElements[
      * Defaults to `false`
      */
     spaReset?: boolean;
-    /** Event handler executed right when the form is submitted. */
-    onSubmit$?: QRLEventHandlerMulti<SubmitEvent, HTMLFormElement> | undefined;
     /** Event handler executed right after the action is executed successfully and returns some data. */
     onSubmitCompleted$?: QRLEventHandlerMulti<CustomEvent<FormSubmitSuccessDetail<O>>, HTMLFormElement> | undefined;
     key?: string | number | null;

package/lib/index.qwik.mjs

@@ -176,9 +176,27 @@ const saveScrollHistory = (scrollState) => {
   history.replaceState(state, "");
 };
 
+const Q_ROUTER_POPSTATE_EVENT = "qrouterpopstate";
+const createCurrentPathTracker = (initialPath) => {
+  let currentPath = initialPath;
+  return (nextPath) => {
+    if (currentPath !== nextPath) {
+      currentPath = nextPath;
+      return true;
+    }
+    return false;
+  };
+};
+const dispatchRouterPopstate = (document1, href) => {
+  document1.dispatchEvent(new CustomEvent(Q_ROUTER_POPSTATE_EVENT, {
+    detail: {
+      href
+    }
+  }));
+};
 const spaInit = eventQrl(/* @__PURE__ */ inlinedQrl((_, el) => {
   if (!window._qRouterSPA && !window._qRouterInitPopstate) {
-    const currentPath = location.pathname + location.search;
+    const hasPathChanged = createCurrentPathTracker(location.pathname + location.search);
     const checkAndScroll = (scrollState) => {
       if (scrollState) {
         window.scrollTo(scrollState.x, scrollState.y);
@@ -205,21 +223,8 @@ const spaInit = eventQrl(/* @__PURE__ */ inlinedQrl((_, el) => {
       }
       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);
-        const domContainer = container.qContainer;
-        const hostElement = domContainer.vNodeLocate(el);
-        const nav = domContainer?.resolveContext(hostElement, {
-          id: "qr-n"
-        });
-        if (nav) {
-          nav(location.href, {
-            type: "popstate"
-          });
-        } else {
-          location.reload();
-        }
+      if (hasPathChanged(location.pathname + location.search)) {
+        dispatchRouterPopstate(document, location.href);
       } else {
         if (history.scrollRestoration === "manual") {
           const scrollState = history.state?._qRouterScroll;
@@ -957,12 +962,21 @@ const QwikRouterMockProvider = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inli
 }, "QwikRouterMockProvider_component_IN4dVpT0x74"));
 const QwikCityMockProvider = QwikRouterMockProvider;
 
+const handleRouterPopstate = (nav, event) => {
+  const href = event.detail?.href;
+  if (href) {
+    return nav(href, {
+      type: "popstate"
+    });
+  }
+};
 const RouterOutlet = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
   const serverData = useServerData("containerAttributes");
   if (!serverData) {
     throw new Error("PrefetchServiceWorker component must be rendered on the server.");
   }
   const internalContext = useContext(ContentInternalContext);
+  const nav = useNavigate();
   const contents = internalContext.value;
   if (contents && contents.length > 0) {
     const contentsLen = contents.length;
@@ -977,19 +991,22 @@ const RouterOutlet = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(()
       !__EXPERIMENTAL__.noSPA && /* @__PURE__ */ _jsxSorted("script", {
         "q-d:qinit": _qrlSync(() => {
           ((w, h) => {
-            if (!w._qcs && h.scrollRestoration === "manual") {
+            if (!w._qcs) {
               w._qcs = true;
               const s = h.state?._qRouterScroll;
               if (s) {
+                h.scrollRestoration = "manual";
                 w.scrollTo(s.x, s.y);
               }
               document.dispatchEvent(new Event("qcinit"));
             }
           })(window, history);
-        }, '()=>{((w,h)=>{if(!w._qcs&&h.scrollRestoration==="manual"){w._qcs=!0;const s=h.state?._qRouterScroll;if(s){w.scrollTo(s.x,s.y);}document.dispatchEvent(new Event("qcinit"));}})(window,history);}')
+        }, '()=>{((w,h)=>{if(!w._qcs){w._qcs=!0;const s=h.state?._qRouterScroll;if(s){h.scrollRestoration="manual";w.scrollTo(s.x,s.y);}document.dispatchEvent(new Event("qcinit"));}})(window,history);}'),
+        "q-d:qrouterpopstate": /* @__PURE__ */ inlinedQrl((event, _1, nav2) => handleRouterPopstate(nav2, event), "RouterOutlet_component_Fragment_script_q_d_qrouterpopstate_aRL6GvFyews"),
+        "q:p": nav
       }, {
         "q-d:qcinit": spaInit
-      }, null, 2, "Fn_1")
+      }, null, 6, "Fn_1")
     ], 1, "Fn_2");
   }
   return SkipRender;

package/lib/middleware/aws-lambda/index.d.ts

@@ -1,10 +1,10 @@
-import { Http2ServerRequest } from 'http2';
-import { IncomingMessage } from 'http';
-import { NodeRequestNextFunction } from '@qwik.dev/router/middleware/node';
+import type { Http2ServerRequest } from 'node:http2';
+import type { IncomingMessage } from 'node:http';
+import type { NodeRequestNextFunction } from '@qwik.dev/router/middleware/node';
 import type { QwikManifest } from '@qwik.dev/core/optimizer';
 import type { Render } from '@qwik.dev/core/server';
 import type { ServerRenderOptions } from '@qwik.dev/router/middleware/request-handler';
-import { ServerResponse } from 'http';
+import type { ServerResponse } from 'node:http';
 
 declare interface AwsOpt {
     render: Render;
@@ -18,13 +18,7 @@ declare interface AwsOpt {
 export declare const createQwikCity: typeof createQwikRouter;
 
 /** @public */
-export declare function createQwikRouter(opts: AwsOpt): {
-    fixPath: (pathT: string) => string;
-    router: (req: IncomingMessage | Http2ServerRequest, res: ServerResponse, next: NodeRequestNextFunction) => Promise<void>;
-    staticFile: (req: IncomingMessage | Http2ServerRequest, res: ServerResponse, next: (e?: any) => void) => Promise<void>;
-    notFound: (req: IncomingMessage | Http2ServerRequest, res: ServerResponse, next: (e: any) => void) => Promise<void>;
-    handle: (req: any, res: any) => void;
-};
+export declare function createQwikRouter(opts: AwsOpt): QwikRouterAwsLambdaMiddleware;
 
 /** @public */
 export declare interface PlatformAwsLambda extends Object {
@@ -36,6 +30,16 @@ export declare interface PlatformAwsLambda extends Object {
  */
 export declare type QwikCityAwsLambdaOptions = QwikRouterAwsLambdaOptions;
 
+/** @public */
+export declare interface QwikRouterAwsLambdaMiddleware {
+    fixPath: (pathT: string) => string;
+    router: (req: IncomingMessage | Http2ServerRequest, res: ServerResponse, next: NodeRequestNextFunction) => Promise<void>;
+    staticFile: (req: IncomingMessage | Http2ServerRequest, res: ServerResponse, next: (e?: any) => void) => Promise<void>;
+    /** @deprecated `router` handles 404 responses. Will be removed in V3. */
+    notFound: (req: IncomingMessage | Http2ServerRequest, res: ServerResponse, next: (e?: any) => void) => Promise<void>;
+    handle: (req: any, res: any) => void;
+}
+
 /** @public */
 export declare interface QwikRouterAwsLambdaOptions extends ServerRenderOptions {
 }

package/lib/middleware/aws-lambda/index.mjs

@@ -2,7 +2,7 @@ import { createQwikRouter as createQwikRouter$1 } from '@qwik.dev/router/middlew
 
 function createQwikRouter(opts) {
   try {
-    const { router, staticFile, notFound } = createQwikRouter$1({
+    const { router, staticFile } = createQwikRouter$1({
       render: opts.render,
       manifest: opts.manifest,
       static: {
@@ -31,11 +31,12 @@ function createQwikRouter(opts) {
       req.url = fixPath(req.url);
       staticFile(req, res, () => {
         router(req, res, () => {
-          notFound(req, res, () => {
-          });
         });
       });
     };
+    const notFound = async (_req, _res, next) => {
+      next();
+    };
     return {
       fixPath,
       router,

package/lib/middleware/bun/index.d.ts

@@ -8,11 +8,7 @@ import type { ServerRenderOptions } from '@qwik.dev/router/middleware/request-ha
 export declare const createQwikCity: typeof createQwikRouter;
 
 /** @public */
-export declare function createQwikRouter(opts: QwikRouterBunOptions): {
-    router: (request: Request) => Promise<Response | null>;
-    notFound: (request: Request) => Promise<Response>;
-    staticFile: (request: Request) => Promise<Response | null>;
-};
+export declare function createQwikRouter(opts: QwikRouterBunOptions): QwikRouterBunMiddleware;
 
 /**
  * @deprecated Use `QwikRouterBunOptions` instead. Will be removed in V3
@@ -20,6 +16,14 @@ export declare function createQwikRouter(opts: QwikRouterBunOptions): {
  */
 export declare type QwikCityBunOptions = QwikRouterBunOptions;
 
+/** @public */
+export declare interface QwikRouterBunMiddleware {
+    router: (request: Request) => Promise<Response | null>;
+    /** @deprecated `router` handles 404 responses. Will be removed in V3. */
+    notFound: (request: Request) => Promise<Response>;
+    staticFile: (request: Request) => Promise<Response | null>;
+}
+
 /** @public */
 export declare interface QwikRouterBunOptions extends ServerRenderOptions {
     /** Options for serving static files */

package/lib/middleware/bun/index.mjs

@@ -1,6 +1,6 @@
 import { isDev } from '@qwik.dev/core/build';
 import { setServerPlatform } from '@qwik.dev/core/server';
-import { _TextEncoderStream_polyfill, isStaticPath, getNotFound, mergeHeadersCookies, requestHandler } from '@qwik.dev/router/middleware/request-handler';
+import { _TextEncoderStream_polyfill, isStaticPath, mergeHeadersCookies, requestHandler } from '@qwik.dev/router/middleware/request-handler';
 import { join, extname } from 'node:path';
 import { M as MIME_TYPES, n as normalizeRequestUrl } from '../../chunks/url.mjs';
 
@@ -77,27 +77,8 @@ function createQwikRouter(opts) {
       });
     }
   }
-  const notFound = async (request) => {
-    try {
-      const url = getRequestUrl(request, opts);
-      const notFoundHtml = !request.headers.get("accept")?.includes("text/html") || isStaticPath(request.method || "GET", url) ? "Not Found" : getNotFound(url.pathname);
-      return new Response(notFoundHtml, {
-        status: 404,
-        headers: {
-          "Content-Type": "text/html; charset=utf-8",
-          "X-Not-Found": url.pathname
-        }
-      });
-    } catch (e) {
-      console.error(e);
-      return new Response(isDev ? String(e || "Error") : "Internal Server Error", {
-        status: 500,
-        headers: {
-          "Content-Type": "text/plain; charset=utf-8",
-          "X-Error": "bun-server"
-        }
-      });
-    }
+  const notFound = async (_request) => {
+    return null;
   };
   const openStaticFile = async (url) => {
     const pathname = url.pathname;

package/lib/middleware/deno/index.d.ts

@@ -8,11 +8,7 @@ import type { ServerRenderOptions } from '@qwik.dev/router/middleware/request-ha
 export declare const createQwikCity: typeof createQwikRouter;
 
 /** @public */
-export declare function createQwikRouter(opts: QwikRouterDenoOptions): {
-    router: (request: Request, info: ServeHandlerInfo) => Promise<Response | null>;
-    notFound: (request: Request) => Promise<Response>;
-    staticFile: (request: Request) => Promise<Response | null>;
-};
+export declare function createQwikRouter(opts: QwikRouterDenoOptions): QwikRouterDenoMiddleware;
 
 /** @public */
 export declare interface NetAddr {
@@ -27,6 +23,14 @@ export declare interface NetAddr {
  */
 export declare type QwikCityDenoOptions = QwikRouterDenoOptions;
 
+/** @public */
+export declare interface QwikRouterDenoMiddleware {
+    router: (request: Request, info: ServeHandlerInfo) => Promise<Response | null>;
+    /** @deprecated `router` handles 404 responses. Will be removed in V3. */
+    notFound: (request: Request) => Promise<Response>;
+    staticFile: (request: Request) => Promise<Response | null>;
+}
+
 /** @public */
 export declare interface QwikRouterDenoOptions extends ServerRenderOptions {
     /** Options for serving static files */

package/lib/middleware/deno/index.mjs

@@ -1,5 +1,5 @@
 import { setServerPlatform } from '@qwik.dev/core/server';
-import { isStaticPath, getNotFound, mergeHeadersCookies, requestHandler } from '@qwik.dev/router/middleware/request-handler';
+import { isStaticPath, mergeHeadersCookies, requestHandler } from '@qwik.dev/router/middleware/request-handler';
 import { M as MIME_TYPES, n as normalizeRequestUrl } from '../../chunks/url.mjs';
 import { join, fromFileUrl, extname } from 'https://deno.land/std/path/mod.ts';
 import { isDev } from '@qwik.dev/core/build';
@@ -69,27 +69,8 @@ function createQwikRouter(opts) {
       });
     }
   }
-  const notFound = async (request) => {
-    try {
-      const url = getRequestUrl(request, opts);
-      const notFoundHtml = !request.headers.get("accept")?.includes("text/html") || isStaticPath(request.method || "GET", url) ? "Not Found" : getNotFound(url.pathname);
-      return new Response(notFoundHtml, {
-        status: 404,
-        headers: {
-          "Content-Type": "text/html; charset=utf-8",
-          "X-Not-Found": url.pathname
-        }
-      });
-    } catch (e) {
-      console.error(e);
-      return new Response(isDev ? String(e || "Error") : "Internal Server Error", {
-        status: 500,
-        headers: {
-          "Content-Type": "text/plain; charset=utf-8",
-          "X-Error": "deno-server"
-        }
-      });
-    }
+  const notFound = async (_request) => {
+    return null;
   };
   const openStaticFile = async (url) => {
     const pathname = url.pathname;

package/lib/middleware/firebase/index.mjs

@@ -1,7 +1,7 @@
 import { createQwikRouter as createQwikRouter$1 } from '@qwik.dev/router/middleware/node';
 
 function createQwikRouter(opts) {
-  const { staticFile, notFound, router } = createQwikRouter$1({
+  const { staticFile, router } = createQwikRouter$1({
     render: opts.render,
     manifest: opts.manifest,
     static: {
@@ -16,8 +16,8 @@ function createQwikRouter(opts) {
   });
   const qwikApp = (req, res) => {
     return staticFile(req, res, () => {
-      router(req, res, () => notFound(req, res, () => {
-      }));
+      router(req, res, () => {
+      });
     });
   };
   return qwikApp;

package/lib/middleware/node/index.d.ts

@@ -11,11 +11,7 @@ import type { ServerResponse } from 'node:http';
 export declare const createQwikCity: typeof createQwikRouter;
 
 /** @public */
-export declare function createQwikRouter(opts: QwikRouterNodeRequestOptions | QwikCityNodeRequestOptions): {
-    router: (req: IncomingMessage | Http2ServerRequest, res: ServerResponse, next: NodeRequestNextFunction) => Promise<void>;
-    notFound: (req: IncomingMessage | Http2ServerRequest, res: ServerResponse, next: (e: any) => void) => Promise<void>;
-    staticFile: (req: IncomingMessage | Http2ServerRequest, res: ServerResponse, next: (e?: any) => void) => Promise<void>;
-};
+export declare function createQwikRouter(opts: QwikRouterNodeRequestOptions | QwikCityNodeRequestOptions): QwikRouterNodeMiddleware;
 
 /** @public */
 export declare interface NodeRequestNextFunction {
@@ -35,6 +31,14 @@ export declare interface PlatformNode {
  */
 export declare type QwikCityNodeRequestOptions = QwikRouterNodeRequestOptions;
 
+/** @public */
+export declare interface QwikRouterNodeMiddleware {
+    router: (req: IncomingMessage | Http2ServerRequest, res: ServerResponse, next: NodeRequestNextFunction) => Promise<void>;
+    /** @deprecated `router` handles 404 responses. Will be removed in V3. */
+    notFound: (req: IncomingMessage | Http2ServerRequest, res: ServerResponse, next: (e: any) => void) => Promise<void>;
+    staticFile: (req: IncomingMessage | Http2ServerRequest, res: ServerResponse, next: (e?: any) => void) => Promise<void>;
+}
+
 /** @public */
 export declare interface QwikRouterNodeRequestOptions extends ServerRenderOptions {
     /** Options for serving static files */

package/lib/middleware/node/index.mjs

@@ -1,6 +1,6 @@
 import { isDev } from '@qwik.dev/core';
 import { setServerPlatform } from '@qwik.dev/core/server';
-import { isStaticPath, getNotFound, requestHandler } from '@qwik.dev/router/middleware/request-handler';
+import { isStaticPath, requestHandler } from '@qwik.dev/router/middleware/request-handler';
 import { createReadStream } from 'node:fs';
 import { join, basename, extname } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -152,23 +152,7 @@ function createQwikRouter(opts) {
       next(e);
     }
   };
-  const notFound = async (req, res, next) => {
-    try {
-      if (!res.headersSent) {
-        const origin = computeOrigin(req, opts);
-        const url = getUrl(req, origin);
-        const notFoundHtml = !req.headers.accept?.includes("text/html") || isStaticPath(req.method || "GET", url) ? "Not Found" : getNotFound(url.pathname);
-        res.writeHead(404, {
-          "Content-Type": "text/html; charset=utf-8",
-          "X-Not-Found": url.pathname
-        });
-        res.end(notFoundHtml);
-      }
-    } catch (e) {
-      console.error(e);
-      next(e);
-    }
-  };
+  const notFound = async (_req, _res, next) => next();
   const staticFile = async (req, res, next) => {
     try {
       const origin = computeOrigin(req, opts);

package/lib/vite/index.mjs

@@ -1,4 +1,4 @@
-import { mergeConfig, loadEnv } from 'vite';
+import { mergeConfig, normalizePath as normalizePath$1, loadEnv } from 'vite';
 import fs, { existsSync } from 'node:fs';
 import path, { join, dirname, basename, resolve, isAbsolute, extname } from 'node:path';
 import { g as getExtension, r as removeExtension, i as isIndexModule, a as isErrorName, b as isLayoutModule, c as isEntryName, d as isMenuFileName, e as isServiceWorkerName, f as isPageModuleExt, h as isModuleExt, j as isMarkdownExt, k as normalizePath, l as getPathnameFromDirPath, m as getMenuPathname, o as createFileId, p as parseRouteIndexName, q as isPluginModule, s as isPageExt } from '../chunks/fs.mjs';
@@ -1326,7 +1326,7 @@ function serializeBuildTrie(ctx, qwikPlugin, node, layoutIdMap, routeIdMap, menu
   if (node._9) {
     lines.push(`${nextIndent}_9: ${JSON.stringify(node._9)},`);
   }
-  if (node._G) {
+  if (node._G != null) {
     lines.push(`${nextIndent}_G: ${JSON.stringify(node._G)},`);
   }
   let layoutExpr;
@@ -1756,6 +1756,67 @@ function parseId(originalId) {
   };
 }
 
+const supportedExtensions = [
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".webp",
+  ".gif",
+  ".avif",
+  ".tiff"
+];
+const JSX_QUERY_PARAM = "jsx";
+const INTERNAL_IMAGE_JSX_QUERY_PARAM = "qwik-asset-jsx";
+const VIRTUAL_IMAGE_JSX_PREFIX = "virtual:";
+const VIRTUAL_IMAGE_JSX_SUFFIX = ".qwik.jsx";
+const TO_IMG_ID = "@to-img.qwik.jsx";
+const VIRTUAL_TO_IMG_ID = "virtual:to-img.qwik.jsx";
+function createVirtualImageJsxId(pathId, params) {
+  const query = new URLSearchParams(params);
+  query.delete(INTERNAL_IMAGE_JSX_QUERY_PARAM);
+  const queryString = query.toString();
+  return `${VIRTUAL_IMAGE_JSX_PREFIX}${normalizePath$1(pathId)}${VIRTUAL_IMAGE_JSX_SUFFIX}${queryString ? `?${queryString}` : ""}`;
+}
+function createImageJsxImportId(pathId, params) {
+  const query = new URLSearchParams(params);
+  query.set(INTERNAL_IMAGE_JSX_QUERY_PARAM, "");
+  return `${normalizePath$1(pathId)}?${query.toString()}`;
+}
+function parseVirtualImageJsxId(id) {
+  const parsed = parseId(id);
+  if (!parsed.pathId.startsWith(VIRTUAL_IMAGE_JSX_PREFIX) || !parsed.pathId.endsWith(VIRTUAL_IMAGE_JSX_SUFFIX)) {
+    return null;
+  }
+  const pathId = parsed.pathId.slice(VIRTUAL_IMAGE_JSX_PREFIX.length, -VIRTUAL_IMAGE_JSX_SUFFIX.length);
+  return {
+    ...parsed,
+    extension: path.extname(pathId).toLowerCase(),
+    pathId
+  };
+}
+function getToImg() {
+  return `
+  import { _jsxSplit, _getVarProps as v, _getConstProps as c} from '@qwik.dev/core';
+  const decoding = "async";
+  const loading = "lazy";
+  export default (s, w, h) =>
+    // Try to preserve const attrs by not spreading when props are not provided
+    p => p
+    ? _jsxSplit("img", {decoding, loading, ...v(p)}, {...c(p), height: h, srcSet: s, width: w })
+    : _jsxSplit("img", null, {decoding, height: h, loading, srcSet: s, width: w});
+  `;
+}
+function createImageJsxModule(pathId, params) {
+  return `
+  import { srcSet, width, height } from ${JSON.stringify(createImageJsxImportId(pathId, params))};
+  import toImg from ${JSON.stringify(TO_IMG_ID)};
+
+  export default toImg(srcSet, width, height);
+  `;
+}
+function createSvgJsxModule(attrs) {
+  return `export default p => <svg {...p} {...${JSON.stringify(attrs)}} />`;
+}
 function optimizeSvg({ code, path: path2 }, userOpts) {
   const svgAttributes = {};
   const prefixIdsConfiguration = userOpts?.imageOptimization?.svgo?.prefixIds;
@@ -1771,7 +1832,7 @@ function optimizeSvg({ code, path: path2 }, userOpts) {
       return false;
     }
     if (plugin === "prefixIds" || typeof plugin === "object" && plugin.name === "prefixIds") {
-      console.warn(`You are trying to use the preset-default SVGO plugin. This plugin is already included by default, you can customize it through the prefixIds option.`);
+      console.warn(`You are trying to use the prefixIds SVGO plugin. This plugin is already included by default, you can customize it through the prefixIds option.`);
       return false;
     }
     return true;
@@ -1817,15 +1878,6 @@ function optimizeSvg({ code, path: path2 }, userOpts) {
   };
 }
 function imagePlugin(userOpts) {
-  const supportedExtensions = [
-    ".jpg",
-    ".jpeg",
-    ".png",
-    ".webp",
-    ".gif",
-    ".avif",
-    ".tiff"
-  ];
   return [
     import('vite-imagetools').then((_rawProps) => _rawProps.imagetools({
       exclude: [],
@@ -1853,8 +1905,10 @@ function imagePlugin(userOpts) {
         };
       },
       defaultDirectives: (url) => {
-        if (url.searchParams.has("jsx")) {
-          const { jsx: _, ...params } = Object.fromEntries(url.searchParams.entries());
+        if (url.searchParams.has(JSX_QUERY_PARAM)) {
+          const params = Object.fromEntries(url.searchParams.entries());
+          delete params[JSX_QUERY_PARAM];
+          delete params[INTERNAL_IMAGE_JSX_QUERY_PARAM];
           return new URLSearchParams({
             format: "webp",
             quality: "75",
@@ -1868,66 +1922,139 @@ function imagePlugin(userOpts) {
         return new URLSearchParams();
       }
     })).catch((err) => {
-      console.error("Error loading vite-imagetools, image imports are not available", err);
+      console.error('Error loading vite-imagetools, image imports ("foo.png?jsx") are not available', err);
       return null;
     }),
     {
       name: "qwik-router-image-jsx",
+      resolveId: {
+        order: "pre",
+        async handler(id, importer, options) {
+          if (parseVirtualImageJsxId(id)) {
+            return null;
+          }
+          if (id.endsWith(TO_IMG_ID)) {
+            return VIRTUAL_TO_IMG_ID;
+          }
+          const { pathId, params } = parseId(id);
+          if (!params.has(JSX_QUERY_PARAM) || params.has(INTERNAL_IMAGE_JSX_QUERY_PARAM)) {
+            return null;
+          }
+          const resolved = await this.resolve(pathId, importer, {
+            ...options,
+            skipSelf: true
+          });
+          const resolvedId = parseId((resolved ?? {
+            id: pathId
+          }).id).pathId;
+          const extension = path.extname(resolvedId).toLowerCase();
+          if (extension !== ".svg" && !supportedExtensions.includes(extension)) {
+            return null;
+          }
+          return {
+            id: createVirtualImageJsxId(resolvedId, params),
+            moduleSideEffects: false
+          };
+        }
+      },
       load: {
         order: "pre",
         handler: async (id) => {
-          const { params, pathId } = parseId(id);
-          const extension = path.extname(pathId).toLowerCase();
-          if (extension === ".svg" && params.has("jsx")) {
-            const code = await fs.promises.readFile(pathId, "utf-8");
+          if (id === VIRTUAL_TO_IMG_ID) {
+            return getToImg();
+          }
+          const imageId = parseVirtualImageJsxId(id);
+          if (!imageId) {
+            return null;
+          }
+          if (imageId.extension === ".svg") {
+            const code = await fs.promises.readFile(imageId.pathId, "utf-8");
             return {
               code,
               moduleSideEffects: false
             };
           }
+          return {
+            code: "export default undefined;",
+            moduleSideEffects: false
+          };
         }
       },
-      transform(code, id) {
-        id = id.toLowerCase();
-        const { params, pathId } = parseId(id);
-        if (params.has("jsx")) {
-          const extension = path.extname(pathId).toLowerCase();
-          if (supportedExtensions.includes(extension)) {
-            if (!code.includes("srcSet")) {
-              this.error(`Image '${id}' could not be optimized to JSX`);
-            }
-            const index = code.indexOf("export default");
-            return {
-              code: code.slice(0, index) + `
-  import { _jsxSorted } from '@qwik.dev/core';
-  const PROPS = {srcSet, width, height};
-  export default function (props, key, _, dev) {
-    return _jsxSorted('img', {...{decoding: 'async', loading: 'lazy'}, ...props}, PROPS, undefined, 3, key, dev);
-  }`,
-              map: null
-            };
-          } else if (extension === ".svg") {
+      transform: {
+        order: "pre",
+        handler(code, id) {
+          const imageId = parseVirtualImageJsxId(id);
+          if (!imageId) {
+            return null;
+          }
+          if (imageId.extension === ".svg") {
             const { svgAttributes } = optimizeSvg({
               code,
-              path: pathId
+              path: imageId.pathId
             }, userOpts);
             return {
-              code: `
-  import { _jsxSorted } from '@qwik.dev/core';
-  const PROPS = ${JSON.stringify(svgAttributes)};
-  export default function (props, key, _, dev) {
-    return _jsxSorted('svg', props, PROPS, undefined, 3, key, dev);
-  }`,
+              code: createSvgJsxModule(svgAttributes),
+              map: null
+            };
+          }
+          if (supportedExtensions.includes(imageId.extension)) {
+            return {
+              code: createImageJsxModule(imageId.pathId, imageId.params),
               map: null
             };
           }
+          return null;
         }
-        return null;
       }
     }
   ];
 }
 
+async function collectServerFnModuleIds(ctx, resolvedVirtualId, loadModule) {
+  const serverFnModules = /* @__PURE__ */ new Set();
+  const queuedModuleIds = /* @__PURE__ */ new Set();
+  const seenModuleIds = /* @__PURE__ */ new Set();
+  const routes = ctx.routes;
+  const layouts = ctx.layouts;
+  const serverPlugins = ctx.serverPlugins;
+  for (let i = 0; i < routes.length; i++) {
+    const route = routes[i];
+    queuedModuleIds.add(route.filePath);
+    for (let j = 0; j < route.layouts.length; j++) {
+      const layout = route.layouts[j];
+      queuedModuleIds.add(layout.filePath);
+    }
+  }
+  for (let i = 0; i < layouts.length; i++) {
+    queuedModuleIds.add(layouts[i].filePath);
+  }
+  for (let i = 0; i < serverPlugins.length; i++) {
+    queuedModuleIds.add(serverPlugins[i].filePath);
+  }
+  while (queuedModuleIds.size > 0) {
+    const [id] = queuedModuleIds;
+    queuedModuleIds.delete(id);
+    if (seenModuleIds.has(id) || id === resolvedVirtualId) {
+      continue;
+    }
+    seenModuleIds.add(id);
+    const moduleInfo = await loadModule(id);
+    if (moduleInfo.code?.includes("serverQrl(")) {
+      serverFnModules.add(moduleInfo.id);
+    }
+    const resolvedImports = moduleInfo.importedIdResolutions.concat(moduleInfo.dynamicallyImportedIdResolutions);
+    for (let i = 0; i < resolvedImports.length; i++) {
+      const resolvedImport = resolvedImports[i];
+      if (!resolvedImport.external && !seenModuleIds.has(resolvedImport.id)) {
+        queuedModuleIds.add(resolvedImport.id);
+      }
+    }
+  }
+  return [
+    ...serverFnModules
+  ];
+}
+
 async function validatePlugin(opts) {
   if (typeof opts.routesDir !== "string") {
     throw new Error(`qwikRouter plugin "routesDir" option missing`);
@@ -2187,16 +2314,14 @@ const makeRouterDevMiddleware = (server, ctx) => async (req, res, next) => {
     const render = async (opts) => {
       return await renderer(opts);
     };
-    const { router, staticFile, notFound } = createQwikRouter({
+    const { router, staticFile } = createQwikRouter({
       render,
       // inject the platform from dev middleware options
       platform: ctx.opts.platform
     });
     const wrappedRes = wrapResponseForHtmlTransform(req, res, server);
     staticFile(req, wrappedRes, () => {
-      router(req, wrappedRes, () => {
-        notFound(req, wrappedRes, next);
-      });
+      router(req, wrappedRes, next);
     });
   } catch (e) {
     if (e instanceof Error) {
@@ -2288,7 +2413,7 @@ async function generateServerPackageJson(outDir) {
   const serverPackageJsonCode = JSON.stringify(packageJson, null, 2);
   await fs.promises.writeFile(serverPackageJsonPath, serverPackageJsonCode);
 }
-function qwikRouterPlugin(userOpts) {
+function qwikRouterPlugin(userOpts, buildContextRef) {
   let ctx = null;
   let mdxTransform = null;
   let rootDir = null;
@@ -2411,6 +2536,7 @@ function qwikRouterPlugin(userOpts) {
       rootDir = resolve(config.root);
       const target = config.build?.ssr || config.mode === "ssr" ? "ssr" : "client";
       ctx = createBuildContext(rootDir, config.base, userOpts, target, !userOpts?.staticImportRoutes);
+      buildContextRef.current = ctx;
       await validatePlugin(ctx.opts);
       mdxTransform = await createMdxTransformer(ctx);
       qwikPlugin = config.plugins.find((p) => p.name === "vite-plugin-qwik");
@@ -2578,20 +2704,34 @@ function qwikRouterPlugin(userOpts) {
   };
   return plugin;
 }
-function serverFnsPlugin() {
+function serverFnsPlugin(buildContextRef) {
   const RESOLVED_ID = "\0" + VIRTUAL_SERVER_FNS;
   const serverFnModules = /* @__PURE__ */ new Set();
-  let pendingModules = 0;
-  let resolveServerFns = null;
-  let serverFnsReady;
+  let serverFnsReady = null;
   function reset() {
     serverFnModules.clear();
-    pendingModules = 0;
-    serverFnsReady = new Promise((r) => {
-      resolveServerFns = r;
-    });
+    serverFnsReady = null;
   }
   reset();
+  async function collectServerFnModules() {
+    if (serverFnsReady) {
+      await serverFnsReady;
+      return;
+    }
+    serverFnsReady = (async () => {
+      const ctx = buildContextRef.current;
+      if (!ctx) {
+        return;
+      }
+      const moduleIds = await collectServerFnModuleIds(ctx, RESOLVED_ID, (id) => this.load({
+        id
+      }));
+      for (let i = 0; i < moduleIds.length; i++) {
+        serverFnModules.add(moduleIds[i]);
+      }
+    })();
+    await serverFnsReady;
+  }
   return {
     name: "vite-plugin-qwik-router-server-fns",
     buildStart() {
@@ -2611,7 +2751,7 @@ function serverFnsPlugin() {
         const isServerBuild = this.environment.config.consumer === "server" && this.environment.mode === "build";
         if (id === RESOLVED_ID) {
           if (isServerBuild) {
-            await serverFnsReady;
+            await collectServerFnModules.call(this);
           }
           if (!isServerBuild || serverFnModules.size === 0) {
             return "// No server$ functions";
@@ -2620,35 +2760,18 @@ function serverFnsPlugin() {
             ...serverFnModules
           ].map((mod) => `import ${JSON.stringify(mod)};`).join("\n");
         }
-        if (isServerBuild && id !== RESOLVED_ID) {
-          pendingModules++;
-          this.load({
-            id
-          }).then((result) => {
-            if (typeof result.code === "string" && result.code.includes("serverQrl(")) {
-              serverFnModules.add(id);
-            }
-          }).finally(() => {
-            pendingModules--;
-            if (pendingModules <= 0 && resolveServerFns) {
-              setTimeout(() => {
-                if (pendingModules <= 0 && resolveServerFns) {
-                  resolveServerFns();
-                  resolveServerFns = null;
-                }
-              }, 50);
-            }
-          });
-        }
         return null;
       }
     }
   };
 }
 function qwikRouter(userOpts) {
+  const buildContextRef = {
+    current: null
+  };
   return [
-    qwikRouterPlugin(userOpts),
-    serverFnsPlugin(),
+    qwikRouterPlugin(userOpts, buildContextRef),
+    serverFnsPlugin(buildContextRef),
     ...imagePlugin(userOpts)
   ];
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qwik.dev/router",
   "description": "The router for Qwik.",
-  "version": "2.0.0-beta.31",
+  "version": "2.0.0-beta.32",
   "bugs": "https://github.com/QwikDev/qwik/issues",
   "dependencies": {
     "@azure/functions": "3.5.1",
@@ -40,7 +40,7 @@
     "tsm": "2.3.0",
     "typescript": "5.9.3",
     "uvu": "0.5.6",
-    "@qwik.dev/core": "2.0.0-beta.31"
+    "@qwik.dev/core": "2.0.0-beta.32"
   },
   "engines": {
     "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -169,7 +169,7 @@
   "main": "./lib/index.qwik.mjs",
   "peerDependencies": {
     "vite": ">=6 <9",
-    "@qwik.dev/core": "^2.0.0-beta.31"
+    "@qwik.dev/core": "^2.0.0-beta.32"
   },
   "publishConfig": {
     "access": "public"