fix(core): bundlegraph as asset

- don't assume path of bundlegraph during render
- move bundlegraph to standard assets location
- refactor preloader script output

Author: wmertens

.changeset/good-mammals-grab.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': minor
+---
+
+FIX: the preloader bundle graph file is now built as an asset. This is cleaner and avoids i18n translation of the file.

packages/docs/src/routes/api/qwik-optimizer/api.json

@@ -451,7 +451,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "The metadata of the build. One of its uses is storing where QRL symbols are located.\n\n\n```typescript\nexport interface QwikManifest \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[bundleGraph?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[QwikBundleGraph](#qwikbundlegraph)\n\n\n</td><td>\n\n_(Optional)_ All bundles in a compact graph format with probabilities\n\n\n</td></tr>\n<tr><td>\n\n[bundles](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[fileName: string\\]: [QwikBundle](#qwikbundle)<!-- -->; }\n\n\n</td><td>\n\nAll code bundles, used to know the import graph\n\n\n</td></tr>\n<tr><td>\n\n[core?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n_(Optional)_ The Qwik core bundle fileName\n\n\n</td></tr>\n<tr><td>\n\n[injections?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[GlobalInjections](#globalinjections)<!-- -->\\[\\]\n\n\n</td><td>\n\n_(Optional)_ CSS etc to inject in the document head\n\n\n</td></tr>\n<tr><td>\n\n[manifestHash](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\nContent hash of the manifest, if this changes, the code changed\n\n\n</td></tr>\n<tr><td>\n\n[mapping](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: string; }\n\n\n</td><td>\n\nWhere QRLs are located\n\n\n</td></tr>\n<tr><td>\n\n[options?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ target?: string; buildMode?: string; entryStrategy?: { type: [EntryStrategy](#entrystrategy)<!-- -->\\['type'\\]; }; }\n\n\n</td><td>\n\n_(Optional)_ The options used to build the manifest\n\n\n</td></tr>\n<tr><td>\n\n[platform?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[name: string\\]: string; }\n\n\n</td><td>\n\n_(Optional)_ The platform used to build the manifest\n\n\n</td></tr>\n<tr><td>\n\n[preloader?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n_(Optional)_ The preloader bundle fileName\n\n\n</td></tr>\n<tr><td>\n\n[symbols](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: [QwikSymbol](#qwiksymbol)<!-- -->; }\n\n\n</td><td>\n\nQRL symbols\n\n\n</td></tr>\n<tr><td>\n\n[version](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\nThe version of the manifest\n\n\n</td></tr>\n</tbody></table>",
+      "content": "The metadata of the build. One of its uses is storing where QRL symbols are located.\n\n\n```typescript\nexport interface QwikManifest \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[bundleGraph?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[QwikBundleGraph](#qwikbundlegraph)\n\n\n</td><td>\n\n_(Optional)_ All bundles in a compact graph format with probabilities\n\n\n</td></tr>\n<tr><td>\n\n[bundleGraphPath?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n_(Optional)_ The bundle graph fileName\n\n\n</td></tr>\n<tr><td>\n\n[bundles](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[fileName: string\\]: [QwikBundle](#qwikbundle)<!-- -->; }\n\n\n</td><td>\n\nAll code bundles, used to know the import graph\n\n\n</td></tr>\n<tr><td>\n\n[core?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n_(Optional)_ The Qwik core bundle fileName\n\n\n</td></tr>\n<tr><td>\n\n[injections?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[GlobalInjections](#globalinjections)<!-- -->\\[\\]\n\n\n</td><td>\n\n_(Optional)_ CSS etc to inject in the document head\n\n\n</td></tr>\n<tr><td>\n\n[manifestHash](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\nContent hash of the manifest, if this changes, the code changed\n\n\n</td></tr>\n<tr><td>\n\n[mapping](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: string; }\n\n\n</td><td>\n\nWhere QRLs are located\n\n\n</td></tr>\n<tr><td>\n\n[options?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ target?: string; buildMode?: string; entryStrategy?: { type: [EntryStrategy](#entrystrategy)<!-- -->\\['type'\\]; }; }\n\n\n</td><td>\n\n_(Optional)_ The options used to build the manifest\n\n\n</td></tr>\n<tr><td>\n\n[platform?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[name: string\\]: string; }\n\n\n</td><td>\n\n_(Optional)_ The platform used to build the manifest\n\n\n</td></tr>\n<tr><td>\n\n[preloader?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n_(Optional)_ The preloader bundle fileName\n\n\n</td></tr>\n<tr><td>\n\n[symbols](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: [QwikSymbol](#qwiksymbol)<!-- -->; }\n\n\n</td><td>\n\nQRL symbols\n\n\n</td></tr>\n<tr><td>\n\n[version](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\nThe version of the manifest\n\n\n</td></tr>\n</tbody></table>",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts",
       "mdFile": "qwik.qwikmanifest.md"
     },

packages/docs/src/routes/api/qwik-optimizer/index.mdx

@@ -1433,6 +1433,21 @@ _(Optional)_ All bundles in a compact graph format with probabilities
 </td></tr>
 <tr><td>
 
+[bundleGraphPath?](#)
+
+</td><td>
+
+</td><td>
+
+string
+
+</td><td>
+
+_(Optional)_ The bundle graph fileName
+
+</td></tr>
+<tr><td>
+
 [bundles](#)
 
 </td><td>

packages/qwik/src/optimizer/src/manifest.ts

@@ -394,7 +394,8 @@ export function generateManifestFromBundles(
   injections: GlobalInjections[],
   outputBundles: OutputBundle,
   opts: NormalizedQwikPluginOptions,
-  debug: (...args: any[]) => void
+  debug: (...args: any[]) => void,
+  canonPath: (p: string) => string
 ) {
   const manifest: QwikManifest = {
     manifestHash: '',
@@ -411,9 +412,6 @@ export function generateManifestFromBundles(
     },
   };
 
-  const buildPath = path.resolve(opts.rootDir, opts.outDir, 'build');
-  const canonPath = (p: string) =>
-    path.relative(buildPath, path.resolve(opts.rootDir, opts.outDir, p));
   const getBundleName = (name: string) => {
     const bundle = outputBundles[name];
     if (!bundle) {

packages/qwik/src/optimizer/src/plugins/bundle-graph.unit.ts

@@ -162,7 +162,8 @@ describe('convertManifestToBundleGraph', () => {
       [],
       outputBundles.bundles as any,
       { rootDir: '/', outDir: '/' } as any,
-      console.error
+      console.error,
+      (p) => path.relative('build', p)
     );
 
     // Interactivity scores

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

@@ -776,15 +776,28 @@ export function createQwikPlugin(optimizerOptions: OptimizerOptions = {}) {
     return null;
   };
 
+  type OutputAnalyzer = {
+    addInjection: (b: GlobalInjections) => void;
+    generateManifest: (extra?: Partial<QwikManifest>) => Promise<QwikManifest>;
+    canonPath: (p: string) => string;
+  };
+
   const createOutputAnalyzer = (rollupBundle: OutputBundle) => {
     const injections: GlobalInjections[] = [];
 
-    const addInjection = (b: GlobalInjections) => injections.push(b);
+    const outputAnalyzer: OutputAnalyzer = {
+      addInjection: (b: GlobalInjections) => injections.push(b),
+    } as Partial<OutputAnalyzer> as OutputAnalyzer;
 
-    const generateManifest = async (extra?: Partial<QwikManifest>) => {
+    outputAnalyzer.generateManifest = async (extra?: Partial<QwikManifest>) => {
       const optimizer = getOptimizer();
       const path = optimizer.sys.path;
 
+      const buildPath = path.resolve(opts.rootDir, opts.outDir, 'build');
+      const canonPath = (p: string) =>
+        path.relative(buildPath, path.resolve(opts.rootDir, opts.outDir, p));
+      outputAnalyzer.canonPath = canonPath;
+
       const segments = Array.from(clientResults.values())
         .flatMap((r) => r.modules)
         .map((mod) => mod.segment)
@@ -796,7 +809,8 @@ export function createQwikPlugin(optimizerOptions: OptimizerOptions = {}) {
         injections,
         rollupBundle,
         opts,
-        debug
+        debug,
+        canonPath
       );
       if (extra) {
         Object.assign(manifest, extra);
@@ -824,7 +838,7 @@ export function createQwikPlugin(optimizerOptions: OptimizerOptions = {}) {
       return manifest;
     };
 
-    return { addInjection, generateManifest };
+    return outputAnalyzer;
   };
 
   const getOptions = () => opts;
@@ -871,6 +885,7 @@ export const isDev = ${JSON.stringify(isDev)};
         mapping: manifest.mapping,
         preloader: manifest.preloader,
         core: manifest.core,
+        bundleGraphPath: manifest.bundleGraphPath,
       };
     }
     return `// @qwik-client-manifest
@@ -947,19 +962,13 @@ export const manifest = ${JSON.stringify(serverManifest)};\n`;
       manifest.platform!.node = process.versions.node;
     }
 
-    const assetsDir = opts.assetsDir;
-    const useAssetsDir = !!assetsDir && assetsDir !== '_astro';
     const bundleGraph = convertManifestToBundleGraph(manifest, bundleGraphAdders);
-    ctx.emitFile({
+    const bgAsset = ctx.emitFile({
       type: 'asset',
-      fileName: optimizer.sys.path.join(
-        useAssetsDir ? assetsDir : '',
-        'build',
-        `q-bundle-graph-${manifest.manifestHash}.json`
-      ),
+      name: 'bundle-graph.json',
       source: JSON.stringify(bundleGraph),
     });
-
+    manifest.bundleGraphPath = outputAnalyzer.canonPath(ctx.getFileName(bgAsset));
     manifest.bundleGraph = bundleGraph;
 
     const manifestStr = JSON.stringify(manifest, null, '\t');

packages/qwik/src/optimizer/src/qwik.optimizer.api.md

@@ -183,6 +183,7 @@ export type QwikBundleGraph = Array<string | number>;
 // @public
 export interface QwikManifest {
     bundleGraph?: QwikBundleGraph;
+    bundleGraphPath?: string;
     bundles: {
         [fileName: string]: QwikBundle;
     };

packages/qwik/src/optimizer/src/types.ts

@@ -225,6 +225,8 @@ export interface QwikManifest {
   bundles: { [fileName: string]: QwikBundle };
   /** All bundles in a compact graph format with probabilities */
   bundleGraph?: QwikBundleGraph;
+  /** The bundle graph fileName */
+  bundleGraphPath?: string;
   /** The preloader bundle fileName */
   preloader?: string;
   /** The Qwik core bundle fileName */
@@ -249,7 +251,13 @@ export interface QwikManifest {
  */
 export type ServerQwikManifest = Pick<
   QwikManifest,
-  'manifestHash' | 'injections' | 'bundleGraph' | 'mapping' | 'preloader' | 'core'
+  | 'manifestHash'
+  | 'injections'
+  | 'bundleGraph'
+  | 'bundleGraphPath'
+  | 'mapping'
+  | 'preloader'
+  | 'core'
 >;
 
 /**

packages/qwik/src/server/preload-impl.ts

@@ -5,15 +5,32 @@ import type { PreloaderOptions, RenderToStreamOptions, SnapshotResult } from './
 import { initPreloader } from '../core/preloader/bundle-graph';
 import { getPreloadPaths } from './preload-strategy';
 
+const simplifyPath = (base: string, path: string | null | undefined) => {
+  if (path == null) {
+    return null;
+  }
+  const segments = `${base}${path}`.split('/');
+  const simplified = [];
+  for (const segment of segments) {
+    if (segment === '..' && simplified.length > 0) {
+      simplified.pop();
+    } else {
+      simplified.push(segment);
+    }
+  }
+  return simplified.join('/');
+};
+
 export const preloaderPre = (
   base: string,
   resolvedManifest: ResolvedManifest | undefined,
   options: PreloaderOptions | false | undefined,
   beforeContent: JSXNode<string>[],
   nonce?: string
 ) => {
-  const preloadChunk = resolvedManifest?.manifest?.preloader;
-  if (preloadChunk && options !== false) {
+  const preloaderPath = simplifyPath(base, resolvedManifest?.manifest?.preloader);
+  const bundleGraphPath = simplifyPath(base, resolvedManifest?.manifest.bundleGraphPath);
+  if (preloaderPath && bundleGraphPath && options !== false) {
     // Initialize the SSR preloader
     const preloaderOpts: Parameters<typeof initPreloader>[1] =
       typeof options === 'object'
@@ -37,11 +54,9 @@ export const preloaderPre = (
     }
     const optsStr = opts.length ? `,{${opts.join(',')}}` : '';
 
-    const hash = resolvedManifest?.manifest.manifestHash;
-
     const script =
-      `let b=fetch("${base}q-bundle-graph-${hash}.json");` +
-      `import("${base}${preloadChunk}").then(({l})=>` +
+      `let b=fetch("${bundleGraphPath}");` +
+      `import("${preloaderPath}").then(({l})=>` +
       `l(${JSON.stringify(base)},b${optsStr})` +
       `);`;
 
@@ -50,10 +65,10 @@ export const preloaderPre = (
        * We add modulepreloads even when the script is at the top because they already fire during
        * html download
        */
-      jsx('link', { rel: 'modulepreload', href: `${base}${preloadChunk}` }),
+      jsx('link', { rel: 'modulepreload', href: preloaderPath }),
       jsx('link', {
         rel: 'preload',
-        href: `${base}q-bundle-graph-${resolvedManifest?.manifest.manifestHash}.json`,
+        href: bundleGraphPath,
         as: 'fetch',
         crossorigin: 'anonymous',
       }),
@@ -64,11 +79,11 @@ export const preloaderPre = (
         nonce,
       })
     );
+  }
 
-    const core = resolvedManifest?.manifest.core;
-    if (core) {
-      beforeContent.push(jsx('link', { rel: 'modulepreload', href: `${base}${core}` }));
-    }
+  const corePath = simplifyPath(base, resolvedManifest?.manifest.core);
+  if (corePath) {
+    beforeContent.push(jsx('link', { rel: 'modulepreload', href: corePath }));
   }
 };
 
@@ -102,6 +117,8 @@ export const includePreloader = (
 
   const manifestHash = resolvedManifest?.manifest.manifestHash;
   if (allowed) {
+    const preloaderBundle = resolvedManifest?.manifest.preloader;
+    const coreBundle = resolvedManifest?.manifest.core;
     const expandedBundles = expandBundles(referencedBundles, resolvedManifest);
     // Keep the same as in getQueue (but *10)
     let probability = 4;
@@ -111,6 +128,10 @@ export const includePreloader = (
         if (probability < tenXMinProbability) {
           break;
         }
+        // we already preload the preloader and core bundles
+        if (hrefOrProbability === preloaderBundle || hrefOrProbability === coreBundle) {
+          continue;
+        }
         links.push(hrefOrProbability);
         if (--allowed === 0) {
           break;
@@ -121,41 +142,43 @@ export const includePreloader = (
     }
   }
 
-  const preloadChunk = manifestHash && resolvedManifest?.manifest.preloader;
-  if (preloadChunk) {
-    const insertLinks = links.length
-      ? /**
-         * We only use modulepreload links because they behave best. Older browsers can rely on the
-         * preloader which does feature detection and which will be available soon after inserting these
-         * links.
-         */
-        `${JSON.stringify(links)}.map((l,e)=>{` +
-        `e=document.createElement('link');` +
-        `e.rel='modulepreload';` +
-        `e.href=${JSON.stringify(base)}+l;` +
-        `document.head.appendChild(e)` +
-        `});`
-      : '';
-    // We are super careful not to interfere with the page loading.
-    const script =
-      insertLinks +
-      // First we wait for the onload event
+  const preloaderPath = simplifyPath(base, manifestHash && resolvedManifest?.manifest.preloader);
+  const insertLinks = links.length
+    ? /**
+       * We only use modulepreload links because they behave best. Older browsers can rely on the
+       * preloader which does feature detection and which will be available soon after inserting these
+       * links.
+       */
+      `${JSON.stringify(links)}.map((l,e)=>{` +
+      `e=document.createElement('link');` +
+      `e.rel='modulepreload';` +
+      `e.href=${JSON.stringify(base)}+l;` +
+      `document.head.appendChild(e)` +
+      `});`
+    : '';
+  // We are super careful not to interfere with the page loading.
+  let script = insertLinks;
+  if (preloaderPath) {
+    // First we wait for the onload event
+    script +=
       `window.addEventListener('load',f=>{` +
-      `f=_=>import("${base}${preloadChunk}").then(({p})=>p(${JSON.stringify(referencedBundles)}));` +
+      `f=_=>import("${preloaderPath}").then(({p})=>p(${JSON.stringify(referencedBundles)}));` +
       // then we ask for idle callback
       `try{requestIdleCallback(f,{timeout:2000})}` +
       // some browsers don't support requestIdleCallback
       `catch(e){setTimeout(f,200)}` +
       `})`;
-    /**
-     * Uses the preloader chunk to add the `<link>` elements at runtime. This allows core to simply
-     * import the preloader as well and have all the state there, plus it makes it easy to write a
-     * complex implementation.
-     *
-     * Note that we don't preload the preloader or bundlegraph, they are requested after the SSR
-     * preloads because they are not as important. Also the preloader includes the vitePreload
-     * function and will in fact already be in that list.
-     */
+  }
+  /**
+   * Uses the preloader chunk to add the `<link>` elements at runtime. This allows core to simply
+   * import the preloader as well and have all the state there, plus it makes it easy to write a
+   * complex implementation.
+   *
+   * Note that we don't preload the preloader or bundlegraph, they are requested after the SSR
+   * preloads because they are not as important. Also the preloader includes the vitePreload
+   * function and will in fact already be in that list.
+   */
+  if (script) {
     nodes.push(
       jsx('script', {
         type: 'module',

packages/qwik/src/server/preload-strategy.ts

@@ -74,8 +74,5 @@ export const expandBundles = (names: string[], resolvedManifest?: ResolvedManife
     probability *= 0.85;
   }
 
-  return getQueue().filter(
-    (name) =>
-      name !== resolvedManifest?.manifest.preloader && name !== resolvedManifest?.manifest.core
-  );
+  return getQueue();
 };