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

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;
@@ -1608,10 +1608,10 @@ function isBundlePartOfRoute(bundle, routeAndLayoutPaths) {
   if (!bundle.origins) {
     return false;
   }
-  for (const bundleOrigin of bundle.origins) {
+  return bundle.origins.some((bundleOrigin) => {
     const originPath = removeExtension(bundleOrigin);
     return routeAndLayoutPaths.some((path) => path.endsWith(originPath));
-  }
+  });
 }
 function getRouteImports(routes, manifest) {
   const result = {};
@@ -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.30",
+  "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.30"
+    "@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.30"
+    "@qwik.dev/core": "^2.0.0-beta.32"
   },
   "publishConfig": {
     "access": "public"