fix(router,core): provide router meta files during build

also remove the workaround that we needed in core for chunk filenames

Author: wmertens

.changeset/many-tips-win.md

@@ -0,0 +1,6 @@
+---
+'@qwik.dev/core': minor
+'@qwik.dev/router': patch
+---
+
+FEAT: Server output chunk files are now under their own build/ subdir, like the client build. This makes it easier to override the chunk filenames. This is possible because the Router metadata files are now an earlier part of the build process.

packages/qwik-router/src/buildtime/vite/plugin.ts

@@ -71,6 +71,9 @@ function qwikRouterPlugin(userOpts?: QwikRouterVitePluginOptions): any {
 
   type P<T> = Plugin<T> & { api: T };
 
+  let didEmitStaticPaths = false;
+  let didEmitNotFoundPaths = false;
+
   const plugin: P<QwikRouterPluginApi> = {
     name: 'vite-plugin-qwik-router',
     enforce: 'pre',
@@ -164,6 +167,8 @@ function qwikRouterPlugin(userOpts?: QwikRouterVitePluginOptions): any {
     },
 
     buildStart() {
+      didEmitStaticPaths = false;
+      didEmitNotFoundPaths = false;
       resetBuildContext(ctx);
     },
 
@@ -183,17 +188,29 @@ function qwikRouterPlugin(userOpts?: QwikRouterVitePluginOptions): any {
       if (id === QWIK_ROUTER_SW_REGISTER) {
         return join(rootDir!, id);
       }
-      if (id === STATIC_PATHS_ID) {
-        return {
-          id: './' + RESOLVED_STATIC_PATHS_ID,
-          external: true,
-        };
+      if (id.endsWith(STATIC_PATHS_ID)) {
+        const resolvedId = 'virtual:' + RESOLVED_STATIC_PATHS_ID;
+        if (!didEmitStaticPaths) {
+          this.emitFile({
+            type: 'chunk',
+            fileName: RESOLVED_STATIC_PATHS_ID,
+            id,
+          });
+          didEmitStaticPaths = true;
+        }
+        return { id: resolvedId };
       }
-      if (id === NOT_FOUND_PATHS_ID) {
-        return {
-          id: './' + RESOLVED_NOT_FOUND_PATHS_ID,
-          external: true,
-        };
+      if (id.endsWith(NOT_FOUND_PATHS_ID)) {
+        const resolvedId = 'virtual:' + RESOLVED_NOT_FOUND_PATHS_ID;
+        if (!didEmitNotFoundPaths) {
+          this.emitFile({
+            type: 'chunk',
+            fileName: RESOLVED_NOT_FOUND_PATHS_ID,
+            id,
+          });
+          didEmitNotFoundPaths = true;
+        }
+        return { id: resolvedId };
       }
       return null;
     },
@@ -205,12 +222,11 @@ function qwikRouterPlugin(userOpts?: QwikRouterVitePluginOptions): any {
           return generateQwikRouterEntries(ctx);
         }
         const isSerializer = id.endsWith(QWIK_SERIALIZER);
-        const isRouterConfig = id.endsWith(QWIK_ROUTER_CONFIG_ID);
-        const isSwRegister = id.endsWith(QWIK_ROUTER_SW_REGISTER);
-
         if (isSerializer) {
           return `export {_deserialize, _serialize, _verifySerializable} from '@qwik.dev/core'`;
         }
+        const isRouterConfig = id.endsWith(QWIK_ROUTER_CONFIG_ID);
+        const isSwRegister = id.endsWith(QWIK_ROUTER_SW_REGISTER);
         if (isRouterConfig || isSwRegister) {
           if (!ctx.isDevServer && ctx.isDirty) {
             await build(ctx);
@@ -232,6 +248,15 @@ function qwikRouterPlugin(userOpts?: QwikRouterVitePluginOptions): any {
           }
         }
       }
+      // These files are overwritten in post-build.ts
+      const isStaticPaths = id.endsWith(RESOLVED_STATIC_PATHS_ID);
+      if (isStaticPaths) {
+        return `export const isStaticPath = () => false`;
+      }
+      const isNotFoundPathsId = id.endsWith(RESOLVED_NOT_FOUND_PATHS_ID);
+      if (isNotFoundPathsId) {
+        return `export const getNotFound = () => {}`;
+      }
       return null;
     },
 

packages/qwik/src/optimizer/src/plugins/rollup.ts

@@ -151,6 +151,35 @@ export function normalizeRollupOutputOptions(
   };
 }
 
+const getChunkFileName = (
+  prefix: string,
+  opts: NormalizedQwikPluginOptions,
+  optimizer: Optimizer
+) => {
+  if (opts.buildMode === 'production' && !opts.debug) {
+    return `${prefix}build/q-[hash].js`;
+  } else {
+    // Friendlier names in dev or preview with debug mode
+    return (chunkInfo: Rollup.PreRenderedChunk) => {
+      if (chunkInfo.moduleIds?.some((id) => id.endsWith('core.prod.mjs'))) {
+        return `${prefix}build/core.js`;
+      }
+      if (chunkInfo.moduleIds?.some((id) => id.endsWith('qwik-router/lib/index.qwik.mjs'))) {
+        return `${prefix}build/qwik-router.js`;
+      }
+
+      // The chunk name can often be a path. We sanitize it to use dashes instead of slashes, to keep the same folder structure as without debug:true.
+      // Besides, Rollup doesn't accept absolute or relative paths as inputs for the [name] placeholder for the same reason.
+      const relativePath = optimizer.sys.path.relative(optimizer.sys.cwd(), chunkInfo.name);
+      const sanitized = relativePath
+        .replace(/^(\.\.\/)+/, '')
+        .replace(/^\/+/, '')
+        .replace(/\//g, '-');
+      return `${prefix}build/${sanitized}.js`;
+    };
+  }
+};
+
 export function normalizeRollupOutputOptionsObject(
   qwikPlugin: QwikPlugin,
   rollupOutputOptsObj: Rollup.OutputOptions | undefined,
@@ -160,79 +189,40 @@ export function normalizeRollupOutputOptionsObject(
   const opts = qwikPlugin.getOptions();
   const optimizer = qwikPlugin.getOptimizer();
   const manualChunks = qwikPlugin.manualChunks;
-  if (opts.target === 'client') {
-    // client output
-    if (!outputOpts.assetFileNames) {
-      // SEO likes readable asset names
-      const assetFileNames = 'assets/[hash]-[name].[ext]';
-      outputOpts.assetFileNames = useAssetsDir
-        ? `${opts.assetsDir}/${assetFileNames}`
-        : assetFileNames;
-    }
 
-    let fileName: string | ((chunkInfo: Rollup.PreRenderedChunk) => string) | undefined;
-    if (opts.buildMode === 'production' && !opts.debug) {
-      fileName = 'build/q-[hash].js';
-    } else {
-      // Friendlier names in dev or preview with debug mode
-      fileName = (chunkInfo) => {
-        if (chunkInfo.moduleIds?.some((id) => id.endsWith('core.prod.mjs'))) {
-          return 'build/core.js';
-        }
-        if (chunkInfo.moduleIds?.some((id) => id.endsWith('qwik-router/lib/index.qwik.mjs'))) {
-          return 'build/qwik-router.js';
-        }
-
-        // The chunk name can often be a path. We sanitize it to use dashes instead of slashes, to keep the same folder structure as without debug:true.
-        // Besides, Rollup doesn't accept absolute or relative paths as inputs for the [name] placeholder for the same reason.
-        const path = optimizer.sys.path;
-        const relativePath = path.relative(optimizer.sys.cwd(), chunkInfo.name);
-        const sanitized = relativePath
-          .replace(/^(\.\.\/)+/, '')
-          .replace(/^\/+/, '')
-          .replace(/\//g, '-');
-        return `build/${sanitized}.js`;
-      };
-    }
-    // client development/debug output
-    const getFilePath = (fileNamePattern: string | ((info: Rollup.PreRenderedChunk) => string)) =>
-      typeof fileNamePattern === 'string'
-        ? useAssetsDir
-          ? `${opts.assetsDir}/${fileNamePattern}`
-          : fileNamePattern
-        : useAssetsDir
-          ? (chunkInfo: Rollup.PreRenderedChunk) =>
-              `${opts.assetsDir}/${fileNamePattern(chunkInfo)}`
-          : (chunkInfo: Rollup.PreRenderedChunk) => fileNamePattern(chunkInfo);
+  if (!outputOpts.assetFileNames) {
+    // SEO likes readable asset names
+    // assetsDir allows assets to be in a deeper directory for serving, e.g. Astro
+    outputOpts.assetFileNames = `${useAssetsDir ? `${opts.assetsDir}/` : ''}assets/[hash]-[name].[ext]`;
+  }
 
+  const chunkFileName = getChunkFileName(useAssetsDir ? `${opts.assetsDir}` : '', opts, optimizer);
+  if (opts.target === 'client') {
+    // client output
     if (!outputOpts.entryFileNames) {
-      outputOpts.entryFileNames = getFilePath(fileName);
+      // we don't treat entries specially for the client
+      outputOpts.entryFileNames = chunkFileName;
     }
     if (!outputOpts.chunkFileNames) {
-      outputOpts.chunkFileNames = getFilePath(fileName);
+      outputOpts.chunkFileNames = chunkFileName;
     }
-  } else if (opts.buildMode === 'production') {
-    // server production output
-    // everything in same dir so './@qwik-router...' imports work from entry and chunks
-    if (!outputOpts.chunkFileNames) {
-      outputOpts.chunkFileNames = 'q-[hash].js';
-    }
-  }
-  // all other cases, like lib output
-  if (!outputOpts.assetFileNames) {
-    outputOpts.assetFileNames = 'assets/[hash]-[name].[ext]';
-  }
 
-  if (opts.target === 'client') {
     // client should always be es
     outputOpts.format = 'es';
     const prevManualChunks = outputOpts.manualChunks;
     if (prevManualChunks && typeof prevManualChunks !== 'function') {
       throw new Error('manualChunks must be a function');
     }
+
+    // We need custom chunking for the client build
     outputOpts.manualChunks = prevManualChunks
       ? (id, meta) => prevManualChunks(id, meta) || manualChunks(id, meta)
       : manualChunks;
+  } else {
+    // server production output, try to be similar to client
+    if (!outputOpts.chunkFileNames) {
+      outputOpts.chunkFileNames = chunkFileName;
+    }
   }
 
   if (!outputOpts.dir) {