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

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

Author: wmertens

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) {