chore(router): put routes bundles into the bundle graph

Co-authored-by: Wout Mertens <[email protected]>

Author: shairez

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

@@ -19,6 +19,20 @@
       "content": "```typescript\nbasename(path: string, ext?: string): string;\n```\n\n\n<table><thead><tr><th>\n\nParameter\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\npath\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\next\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nstring",
       "mdFile": "qwik.path.basename.md"
     },
+    {
+      "name": "BundleGraphModifier",
+      "id": "bundlegraphmodifier",
+      "hierarchy": [
+        {
+          "name": "BundleGraphModifier",
+          "id": "bundlegraphmodifier"
+        }
+      ],
+      "kind": "TypeAlias",
+      "content": "A function that creates a modified version of the bundle graph. Used to inject routes and their dependencies into the bundle graph.\n\n\n```typescript\nexport type BundleGraphModifier = (graph: QwikBundleGraph, manifest: QwikManifest) => QwikBundleGraph;\n```\n**References:** [QwikBundleGraph](#qwikbundlegraph)<!-- -->, [QwikManifest](#qwikmanifest)",
+      "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/plugins/bundle-graph.ts",
+      "mdFile": "qwik.bundlegraphmodifier.md"
+    },
     {
       "name": "ComponentEntryStrategy",
       "id": "componententrystrategy",
@@ -410,6 +424,20 @@
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts",
       "mdFile": "qwik.qwikbundle.md"
     },
+    {
+      "name": "QwikBundleGraph",
+      "id": "qwikbundlegraph",
+      "hierarchy": [
+        {
+          "name": "QwikBundleGraph",
+          "id": "qwikbundlegraph"
+        }
+      ],
+      "kind": "TypeAlias",
+      "content": "Bundle graph.\n\nFormat: \\[ 'bundle-a.js', 3, 5 // Depends on 'bundle-b.js' and 'bundle-c.js' 'bundle-b.js', 5, // Depends on 'bundle-c.js' 'bundle-c.js', \\]\n\n\n```typescript\nexport type QwikBundleGraph = Array<string | number>;\n```",
+      "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts",
+      "mdFile": "qwik.qwikbundlegraph.md"
+    },
     {
       "name": "QwikManifest",
       "id": "qwikmanifest",
@@ -518,7 +546,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "```typescript\nexport interface QwikVitePluginApi \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[getAssetsDir](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; string \\| undefined\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getClientOutDir](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; string \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getClientPublicOutDir](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; string \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getInsightsManifest](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(clientOutDir?: string \\| null) =&gt; Promise&lt;[InsightManifest](#insightmanifest) \\| null&gt;\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getManifest](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; [QwikManifest](#qwikmanifest) \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getOptimizer](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; [Optimizer](#optimizer) \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getOptions](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; NormalizedQwikPluginOptions\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getRootDir](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; string \\| null\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
+      "content": "```typescript\nexport interface QwikVitePluginApi \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[getAssetsDir](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; string \\| undefined\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getClientOutDir](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; string \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getClientPublicOutDir](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; string \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getInsightsManifest](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(clientOutDir?: string \\| null) =&gt; Promise&lt;[InsightManifest](#insightmanifest) \\| null&gt;\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getManifest](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; [QwikManifest](#qwikmanifest) \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getOptimizer](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; [Optimizer](#optimizer) \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getOptions](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; NormalizedQwikPluginOptions\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[getRootDir](#)\n\n\n</td><td>\n\n\n</td><td>\n\n() =&gt; string \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[registerBundleGraphModifier](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(modifier: [BundleGraphModifier](#bundlegraphmodifier)<!-- -->) =&gt; void\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/plugins/vite.ts",
       "mdFile": "qwik.qwikvitepluginapi.md"
     },

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

@@ -52,6 +52,21 @@ _(Optional)_
 
 string
 
+## BundleGraphModifier
+
+A function that creates a modified version of the bundle graph. Used to inject routes and their dependencies into the bundle graph.
+
+```typescript
+export type BundleGraphModifier = (
+  graph: QwikBundleGraph,
+  manifest: QwikManifest,
+) => QwikBundleGraph;
+```
+
+**References:** [QwikBundleGraph](#qwikbundlegraph), [QwikManifest](#qwikmanifest)
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/plugins/bundle-graph.ts)
+
 ## ComponentEntryStrategy
 
 ```typescript
@@ -1395,6 +1410,18 @@ _(Optional)_
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts)
 
+## QwikBundleGraph
+
+Bundle graph.
+
+Format: [ 'bundle-a.js', 3, 5 // Depends on 'bundle-b.js' and 'bundle-c.js' 'bundle-b.js', 5, // Depends on 'bundle-c.js' 'bundle-c.js', ]
+
+```typescript
+export type QwikBundleGraph = Array<string | number>;
+```
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts)
+
 ## QwikManifest
 
 The metadata of the build. One of its uses is storing where QRL symbols are located.
@@ -2220,6 +2247,19 @@ Description
 
 </td><td>
 
+</td></tr>
+<tr><td>
+
+[registerBundleGraphModifier](#)
+
+</td><td>
+
+</td><td>
+
+(modifier: [BundleGraphModifier](#bundlegraphmodifier)) =&gt; void
+
+</td><td>
+
 </td></tr>
 </tbody></table>
 

packages/qwik-city/src/buildtime/vite/bundle-graph-modifier.ts

@@ -0,0 +1,44 @@
+import type { QwikBundle, QwikBundleGraph, QwikManifest } from '@builder.io/qwik/optimizer';
+import { removeExtension } from '../../utils/fs';
+import type { BuildRoute } from '../types';
+
+export function modifyBundleGraph(
+  routes: BuildRoute[],
+  originalGraph: QwikBundleGraph,
+  manifest: QwikManifest
+) {
+  const graph = [...originalGraph];
+
+  routes.forEach((route) => {
+    const routePath = removeExtension(route.filePath);
+    const layoutPaths = route.layouts
+      ? route.layouts.map((layout) => removeExtension(layout.filePath))
+      : [];
+    const routeAndLayoutPaths = [routePath, ...layoutPaths];
+
+    const routeDeps = [];
+
+    for (const [bundleName, bundle] of Object.entries(manifest.bundles)) {
+      if (isBundlePartOfRoute(bundle, routeAndLayoutPaths)) {
+        const bundleIndex = originalGraph.indexOf(bundleName);
+        if (bundleIndex !== -1) {
+          routeDeps.push(bundleIndex);
+        }
+      }
+    }
+    if (routeDeps.length > 0) {
+      graph.push(route.routeName, ...routeDeps);
+    }
+  });
+  return graph;
+}
+
+function isBundlePartOfRoute(bundle: QwikBundle, routeAndLayoutPaths: string[]) {
+  if (!bundle.origins) {
+    return false;
+  }
+  for (const bundleOrigin of bundle.origins) {
+    const originPath = removeExtension(bundleOrigin);
+    return routeAndLayoutPaths.some((path) => path.endsWith(originPath));
+  }
+}

packages/qwik-city/src/buildtime/vite/bundle-graph-modifier.unit.ts

@@ -0,0 +1,115 @@
+import {
+  type QwikBundle,
+  type QwikBundleGraph,
+  type QwikManifest,
+} from '@builder.io/qwik/optimizer';
+import { describe, expect, test } from 'vitest';
+import type { BuildLayout, BuildRoute } from '../types';
+import { modifyBundleGraph } from './bundle-graph-modifier';
+
+describe('modifyBundleGraph', () => {
+  test(`GIVEN 2 routes, one with a layout
+        AND a manifest with 3 bundles 
+        THEN the bundle graph should contain the routes and their dependencies`, () => {
+    const fakeManifest = {
+      bundles: {
+        'fake-bundle1.js': {
+          size: 0,
+          imports: ['fake-bundle-static-dep.js'],
+          origins: ['src/routes/index.tsx'],
+        },
+        'fake-bundle-static-dep.js': {
+          size: 0,
+          dynamicImports: ['fake-bundle-dynamic-dep.js'],
+        },
+        'fake-bundle-dynamic-dep.js': {
+          size: 0,
+        },
+        'fake-bundle-part-of-sub-route.js': {
+          size: 0,
+          origins: ['src/routes/subroute/index.tsx', 'src/some/other/component.tsx'],
+        },
+        'fake-bundle-part-of-layout.js': {
+          size: 0,
+          origins: ['src/routes/layout.tsx'],
+        },
+      } as Record<string, QwikBundle>,
+    } as QwikManifest;
+
+    const fakeBundleGraph: QwikBundleGraph = [
+      'fake-bundle1.js',
+      2,
+      'fake-bundle-static-dep.js',
+      -1,
+      4,
+      'fake-bundle-dynamic-dep.js',
+      'fake-bundle-part-of-sub-route.js',
+      'fake-bundle-part-of-layout.js',
+    ];
+
+    const fakeRoutes: BuildRoute[] = [
+      {
+        routeName: '/',
+        filePath: '/home/qwik-app/src/routes/index.tsx',
+      },
+      {
+        routeName: '/subroute',
+        filePath: '/home/qwik-app/src/routes/subroute/index.tsx',
+        layouts: [
+          {
+            filePath: '/home/qwik-app/src/routes/layout.tsx',
+          },
+        ] as BuildLayout[],
+      },
+    ] as BuildRoute[];
+
+    const actualResult = modifyBundleGraph(fakeRoutes, fakeBundleGraph, fakeManifest);
+
+    const expectedResult: QwikBundleGraph = [
+      ...fakeBundleGraph,
+      '/',
+      0, // fake-bundle1.js
+      '/subroute',
+      6, // fake-bundle-part-of-sub-route.js
+      7, // fake-bundle-part-of-layout.js
+    ];
+
+    expect(actualResult).toEqual(expectedResult);
+  });
+
+  test(`GIVEN a mismatch between the bundle graph and the manifest
+        THEN the resulted bundle graph routes should not contain -1 (not found) indices `, () => {
+    const fakeManifest = {
+      bundles: {
+        'fake-bundle1.js': {
+          size: 0,
+          origins: ['src/routes/index.tsx'],
+        },
+        // 👇 doesn't exist in the bundle graph for some reason
+        'fake-bundle2.js': {
+          size: 0,
+          origins: ['src/routes/index.tsx'],
+        },
+      } as Record<string, QwikBundle>,
+    } as QwikManifest;
+
+    const fakeBundleGraph: QwikBundleGraph = ['fake-bundle1.js'];
+
+    const fakeRoutes: BuildRoute[] = [
+      {
+        routeName: '/',
+        filePath: '/home/qwik-app/src/routes/index.tsx',
+      },
+    ] as BuildRoute[];
+
+    const actualResult = modifyBundleGraph(fakeRoutes, fakeBundleGraph, fakeManifest);
+
+    const expectedResult: QwikBundleGraph = [
+      ...fakeBundleGraph,
+      '/',
+      0, // fake-bundle1.js
+    ];
+
+    expect(actualResult).toEqual(expectedResult);
+  });
+});

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

@@ -1,33 +1,34 @@
+import type { QwikVitePlugin } from '@builder.io/qwik/optimizer';
 import swRegister from '@qwik-city-sw-register-build';
-import { createMdxTransformer, type MdxTransform } from '../markdown/mdx';
-import { basename, join, resolve, extname } from 'node:path';
-import type { Plugin, PluginOption, UserConfig, Rollup } from 'vite';
+import fs from 'node:fs';
+import { basename, extname, join, resolve } from 'node:path';
+import type { Plugin, PluginOption, Rollup, UserConfig } from 'vite';
 import { loadEnv } from 'vite';
-import { generateQwikCityPlan } from '../runtime-generation/generate-qwik-city-plan';
-import type { BuildContext } from '../types';
-import { createBuildContext, resetBuildContext } from '../context';
+import {
+  NOT_FOUND_PATHS_ID,
+  RESOLVED_NOT_FOUND_PATHS_ID,
+  RESOLVED_STATIC_PATHS_ID,
+  STATIC_PATHS_ID,
+} from '../../adapters/shared/vite';
+import { postBuild } from '../../adapters/shared/vite/post-build';
+import { patchGlobalThis } from '../../middleware/node/node-fetch';
 import { isMenuFileName, normalizePath, removeExtension } from '../../utils/fs';
-import { validatePlugin } from './validate-plugin';
-import type { QwikCityPluginApi, QwikCityVitePluginOptions } from './types';
 import { build } from '../build';
-import { ssrDevMiddleware, staticDistMiddleware } from './dev-server';
+import { createBuildContext, resetBuildContext } from '../context';
+import { createMdxTransformer, type MdxTransform } from '../markdown/mdx';
 import { transformMenu } from '../markdown/menu';
 import { generateQwikCityEntries } from '../runtime-generation/generate-entries';
-import { patchGlobalThis } from '../../middleware/node/node-fetch';
-import type { QwikVitePlugin } from '@builder.io/qwik/optimizer';
-import fs from 'node:fs';
+import { generateQwikCityPlan } from '../runtime-generation/generate-qwik-city-plan';
 import {
   generateServiceWorkerRegister,
   prependManifestToServiceWorker,
 } from '../runtime-generation/generate-service-worker';
-import {
-  NOT_FOUND_PATHS_ID,
-  RESOLVED_NOT_FOUND_PATHS_ID,
-  RESOLVED_STATIC_PATHS_ID,
-  STATIC_PATHS_ID,
-} from '../../adapters/shared/vite';
-import { postBuild } from '../../adapters/shared/vite/post-build';
+import type { BuildContext } from '../types';
+import { modifyBundleGraph } from './bundle-graph-modifier';
+import { ssrDevMiddleware, staticDistMiddleware } from './dev-server';
 import { imagePlugin } from './image-jsx';
+import type { QwikCityPluginApi, QwikCityVitePluginOptions } from './types';
+import { validatePlugin } from './validate-plugin';
 
 /** @public */
 export function qwikCity(userOpts?: QwikCityVitePluginOptions): PluginOption[] {
@@ -172,6 +173,7 @@ function qwikCityPlugin(userOpts?: QwikCityVitePluginOptions): any {
         if (isCityPlan || isSwRegister) {
           if (!ctx.isDevServer && ctx.isDirty) {
             await build(ctx);
+
             ctx.isDirty = false;
             ctx.diagnostics.forEach((d) => {
               this.warn(d.message);
@@ -237,6 +239,10 @@ function qwikCityPlugin(userOpts?: QwikCityVitePluginOptions): any {
     generateBundle(_, bundles) {
       // client bundles
       if (ctx?.target === 'client') {
+        qwikPlugin!.api.registerBundleGraphModifier((graph, manifest) => {
+          return modifyBundleGraph(ctx!.routes, graph, manifest);
+        });
+
         const entries = [...ctx.entries, ...ctx.serviceWorkers].map((entry) => {
           return {
             chunkFileName: entry.chunkFileName,

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

@@ -6,6 +6,9 @@
 
 import type { Plugin as Plugin_2 } from 'vite';
 
+// @public
+export type BundleGraphModifier = (graph: QwikBundleGraph, manifest: QwikManifest) => QwikBundleGraph;
+
 // @public (undocumented)
 export interface ComponentEntryStrategy {
     // (undocumented)
@@ -187,6 +190,9 @@ export interface QwikBundle {
     symbols?: string[];
 }
 
+// @public
+export type QwikBundleGraph = Array<string | number>;
+
 // @public
 export interface QwikManifest {
     bundles: {
@@ -300,6 +306,8 @@ export interface QwikVitePluginApi {
     getOptions: () => NormalizedQwikPluginOptions;
     // (undocumented)
     getRootDir: () => string | null;
+    // (undocumented)
+    registerBundleGraphModifier: (modifier: BundleGraphModifier) => void;
 }
 
 // Warning: (ae-forgotten-export) The symbol "QwikVitePluginCSROptions" needs to be exported by the entry point index.d.ts