refactor(bundle-graph): plugin API, tests, optimization

Author: wmertens

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

@@ -20,18 +20,18 @@
       "mdFile": "qwik.path.basename.md"
     },
     {
-      "name": "BundleGraphModifier",
-      "id": "bundlegraphmodifier",
+      "name": "BundleGraphAdder",
+      "id": "bundlegraphadder",
       "hierarchy": [
         {
-          "name": "BundleGraphModifier",
-          "id": "bundlegraphmodifier"
+          "name": "BundleGraphAdder",
+          "id": "bundlegraphadder"
         }
       ],
       "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)",
+      "content": "A function that returns a map of bundle names to their dependencies.\n\n\n```typescript\nexport type BundleGraphAdder = (manifest: QwikManifest) => Record<string, {\n    imports?: string[];\n    dynamicImports?: string[];\n}>;\n```\n**References:** [QwikManifest](#qwikmanifest)",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/plugins/bundle-graph.ts",
-      "mdFile": "qwik.bundlegraphmodifier.md"
+      "mdFile": "qwik.bundlegraphadder.md"
     },
     {
       "name": "ComponentEntryStrategy",
@@ -546,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<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>",
+      "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[registerBundleGraphAdder](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(adder: [BundleGraphAdder](#bundlegraphadder)<!-- -->) =&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,18 +52,21 @@ _(Optional)_
 
 string
 
-## BundleGraphModifier
+## BundleGraphAdder
 
-A function that creates a modified version of the bundle graph. Used to inject routes and their dependencies into the bundle graph.
+A function that returns a map of bundle names to their dependencies.
 
 ```typescript
-export type BundleGraphModifier = (
-  graph: QwikBundleGraph,
-  manifest: QwikManifest,
-) => QwikBundleGraph;
+export type BundleGraphAdder = (manifest: QwikManifest) => Record<
+  string,
+  {
+    imports?: string[];
+    dynamicImports?: string[];
+  }
+>;
 ```
 
-**References:** [QwikBundleGraph](#qwikbundlegraph), [QwikManifest](#qwikmanifest)
+**References:** [QwikManifest](#qwikmanifest)
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/plugins/bundle-graph.ts)
 
@@ -2250,13 +2253,13 @@ Description
 </td></tr>
 <tr><td>
 
-[registerBundleGraphModifier](#)
+[registerBundleGraphAdder](#)
 
 </td><td>
 
 </td><td>
 
-(modifier: [BundleGraphModifier](#bundlegraphmodifier)) =&gt; void
+(adder: [BundleGraphAdder](#bundlegraphadder)) =&gt; void
 
 </td><td>
 

…/buildtime/vite/bundle-graph-modifier.ts …/src/buildtime/vite/get-route-imports.tspackages/qwik-city/src/buildtime/vite/bundle-graph-modifier.ts renamed to packages/qwik-city/src/buildtime/vite/get-route-imports.ts packages/qwik-city/src/buildtime/vite/bundle-graph-modifier.ts renamed to packages/qwik-city/src/buildtime/vite/get-route-imports.ts

@@ -1,36 +1,28 @@
-import type { QwikBundle, QwikBundleGraph, QwikManifest } from '@builder.io/qwik/optimizer';
+import type { QwikBundle, 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];
-
+export function getRouteImports(routes: BuildRoute[], manifest: QwikManifest) {
+  const result: Record<string, { imports?: string[] }> = {};
   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 = [];
+    const imports = [];
 
     for (const [bundleName, bundle] of Object.entries(manifest.bundles)) {
       if (isBundlePartOfRoute(bundle, routeAndLayoutPaths)) {
-        const bundleIndex = originalGraph.indexOf(bundleName);
-        if (bundleIndex !== -1) {
-          routeDeps.push(bundleIndex);
-        }
+        imports.push(bundleName);
       }
     }
-    if (routeDeps.length > 0) {
-      graph.push(route.routeName, ...routeDeps);
+    if (imports.length > 0) {
+      result[route.routeName] = { imports };
     }
   });
-  return graph;
+  return result;
 }
 
 function isBundlePartOfRoute(bundle: QwikBundle, routeAndLayoutPaths: string[]) {

…dtime/vite/bundle-graph-modifier.unit.ts …buildtime/vite/get-route-imports.unit.tspackages/qwik-city/src/buildtime/vite/bundle-graph-modifier.unit.ts renamed to packages/qwik-city/src/buildtime/vite/get-route-imports.unit.ts packages/qwik-city/src/buildtime/vite/bundle-graph-modifier.unit.ts renamed to packages/qwik-city/src/buildtime/vite/get-route-imports.unit.ts

@@ -1,11 +1,7 @@
-import {
-  type QwikBundle,
-  type QwikBundleGraph,
-  type QwikManifest,
-} from '@builder.io/qwik/optimizer';
+import { type QwikBundle, 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';
+import { getRouteImports } from './get-route-imports';
 
 describe('modifyBundleGraph', () => {
   test(`GIVEN 2 routes, one with a layout
@@ -36,17 +32,6 @@ describe('modifyBundleGraph', () => {
       } 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: '/',
@@ -63,18 +48,22 @@ describe('modifyBundleGraph', () => {
       },
     ] 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);
+    const actualResult = getRouteImports(fakeRoutes, fakeManifest);
+    expect(actualResult).toMatchInlineSnapshot(`
+      {
+        "/": {
+          "imports": [
+            "fake-bundle1.js",
+          ],
+        },
+        "/subroute": {
+          "imports": [
+            "fake-bundle-part-of-sub-route.js",
+            "fake-bundle-part-of-layout.js",
+          ],
+        },
+      }
+    `);
   });
 
   test(`GIVEN a mismatch between the bundle graph and the manifest
@@ -93,23 +82,24 @@ describe('modifyBundleGraph', () => {
       } 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
-    ];
+    const actualResult = getRouteImports(fakeRoutes, fakeManifest);
 
-    expect(actualResult).toEqual(expectedResult);
+    expect(actualResult).toMatchInlineSnapshot(`
+      {
+        "/": {
+          "imports": [
+            "fake-bundle1.js",
+            "fake-bundle2.js",
+          ],
+        },
+      }
+    `);
   });
 });

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

@@ -21,7 +21,7 @@ import { generateQwikCityEntries } from '../runtime-generation/generate-entries'
 import { generateQwikCityPlan } from '../runtime-generation/generate-qwik-city-plan';
 import { generateServiceWorkerRegister } from '../runtime-generation/generate-service-worker';
 import type { BuildContext } from '../types';
-import { modifyBundleGraph } from './bundle-graph-modifier';
+import { getRouteImports } from './get-route-imports';
 import { ssrDevMiddleware, staticDistMiddleware } from './dev-server';
 import { imagePlugin } from './image-jsx';
 import type { QwikCityPluginApi, QwikCityVitePluginOptions } from './types';
@@ -236,8 +236,8 @@ function qwikCityPlugin(userOpts?: QwikCityVitePluginOptions): any {
     generateBundle(_, bundles) {
       // client bundles
       if (ctx?.target === 'client') {
-        qwikPlugin!.api.registerBundleGraphModifier((graph, manifest) => {
-          return modifyBundleGraph(ctx!.routes, graph, manifest);
+        qwikPlugin!.api.registerBundleGraphAdder((manifest) => {
+          return getRouteImports(ctx!.routes, manifest);
         });
 
         const entries = [...ctx.entries, ...ctx.serviceWorkers].map((entry) => {

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

@@ -7,7 +7,10 @@
 import type { Plugin as Plugin_2 } from 'vite';
 
 // @public
-export type BundleGraphModifier = (graph: QwikBundleGraph, manifest: QwikManifest) => QwikBundleGraph;
+export type BundleGraphAdder = (manifest: QwikManifest) => Record<string, {
+    imports?: string[];
+    dynamicImports?: string[];
+}>;
 
 // @public (undocumented)
 export interface ComponentEntryStrategy {
@@ -308,7 +311,7 @@ export interface QwikVitePluginApi {
     // (undocumented)
     getRootDir: () => string | null;
     // (undocumented)
-    registerBundleGraphModifier: (modifier: BundleGraphModifier) => void;
+    registerBundleGraphAdder: (adder: BundleGraphAdder) => void;
 }
 
 // Warning: (ae-forgotten-export) The symbol "QwikVitePluginCSROptions" needs to be exported by the entry point index.d.ts

packages/qwik/src/optimizer/src/index.ts

@@ -48,7 +48,7 @@ export type {
   QwikVitePluginOptions,
 } from './plugins/vite';
 
-export type { BundleGraphModifier } from './plugins/bundle-graph';
+export type { BundleGraphAdder } from './plugins/bundle-graph';
 
 export { qwikRollup } from './plugins/rollup';
 export { qwikVite } from './plugins/vite';

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

@@ -1,6 +1,6 @@
 import type { OutputBundle } from 'rollup';
 import { type NormalizedQwikPluginOptions } from './plugins/plugin';
-import type { GlobalInjections, SegmentAnalysis, Path, QwikBundle, QwikManifest } from './types';
+import type { GlobalInjections, Path, QwikBundle, QwikManifest, SegmentAnalysis } from './types';
 
 // This is just the initial prioritization of the symbols and entries
 // at build time so there's less work during each SSR. However, SSR should
@@ -279,7 +279,6 @@ export function generateManifestFromBundles(
 
     const bundle: QwikBundle = {
       size: outputBundle.code.length,
-      hasSymbols: false,
     };
 
     let hasSymbols = false;
@@ -347,27 +346,40 @@ export function generateManifestFromBundles(
     };
   }
   // To inspect the bundles, uncomment the following lines
-  // and temporarily add the writeFileSync import from fs
-  // writeFileSync(
-  //   'output-bundles.json',
-  //   JSON.stringify(
-  //     Object.entries(outputBundles).map(([n, b]) => [
-  //       n,
+  // import('node:fs').then((fs) =>
+  //   fs.writeFileSync(
+  //     'output-bundles.json',
+  //     JSON.stringify(
   //       {
-  //         ...b,
-  //         code: '<removed>',
-  //         map: '<removed>',
-  //         source: '<removed>',
-  //         modules:
-  //           'modules' in b
-  //             ? Object.fromEntries(
-  //                 Object.entries(b.modules).map(([k, v]) => [k, { ...v, code: '<removed>' }])
-  //               )
-  //             : undefined,
+  //         segments,
+  //         bundles: Object.fromEntries(
+  //           Object.entries(outputBundles).map(([n, b]) => [
+  //             n,
+  //             {
+  //               ...b,
+  //               // code: 'code' in b ? `<removed ${b.code.length} bytes>` : undefined,
+  //               map: 'map' in b ? `<removed>` : undefined,
+  //               source: 'source' in b ? `<removed ${b.source.length} bytes>` : undefined,
+  //               modules:
+  //                 'modules' in b
+  //                   ? Object.fromEntries(
+  //                       Object.entries(b.modules).map(([k, v]) => [
+  //                         k,
+  //                         {
+  //                           ...v,
+  //                           code:
+  //                             'code' in v ? `<removed ${v.code?.length || 0} bytes>` : undefined,
+  //                         },
+  //                       ])
+  //                     )
+  //                   : undefined,
+  //             },
+  //           ])
+  //         ),
   //       },
-  //     ]),
-  //     null,
-  //     '\t'
+  //       null,
+  //       '\t'
+  //     ).replaceAll(process.cwd(), '')
   //   )
   // );