feat(insights): add route hints to bundlegraph, refactor

Author: wmertens

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

@@ -196,20 +196,6 @@
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts",
       "mdFile": "qwik.inlineentrystrategy.md"
     },
-    {
-      "name": "InsightManifest",
-      "id": "insightmanifest",
-      "hierarchy": [
-        {
-          "name": "InsightManifest",
-          "id": "insightmanifest"
-        }
-      ],
-      "kind": "Interface",
-      "content": "```typescript\nexport interface InsightManifest \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[manual](#)\n\n\n</td><td>\n\n\n</td><td>\n\nRecord&lt;string, string&gt;\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[prefetch](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ route: string; symbols: string\\[\\]; }\\[\\]\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[type](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'smart'\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/types.ts",
-      "mdFile": "qwik.insightmanifest.md"
-    },
     {
       "name": "isAbsolute",
       "id": "path-isabsolute",
@@ -546,7 +532,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[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>",
+      "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[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

@@ -594,72 +594,6 @@ Description
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts)
 
-## InsightManifest
-
-```typescript
-export interface InsightManifest
-```
-
-<table><thead><tr><th>
-
-Property
-
-</th><th>
-
-Modifiers
-
-</th><th>
-
-Type
-
-</th><th>
-
-Description
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[manual](#)
-
-</td><td>
-
-</td><td>
-
-Record&lt;string, string&gt;
-
-</td><td>
-
-</td></tr>
-<tr><td>
-
-[prefetch](#)
-
-</td><td>
-
-</td><td>
-
-{ route: string; symbols: string[]; }[]
-
-</td><td>
-
-</td></tr>
-<tr><td>
-
-[type](#)
-
-</td><td>
-
-</td><td>
-
-'smart'
-
-</td><td>
-
-</td></tr>
-</tbody></table>
-
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts)
-
 ## isAbsolute
 
 ```typescript
@@ -2188,19 +2122,6 @@ Description
 </td></tr>
 <tr><td>
 
-[getInsightsManifest](#)
-
-</td><td>
-
-</td><td>
-
-(clientOutDir?: string \| null) =&gt; Promise&lt;[InsightManifest](#insightmanifest) \| null&gt;
-
-</td><td>
-
-</td></tr>
-<tr><td>
-
 [getManifest](#)
 
 </td><td>

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

@@ -95,6 +95,9 @@ function qwikCityPlugin(userOpts?: QwikCityVitePluginOptions): any {
       if (!qwikPlugin) {
         throw new Error('Missing vite-plugin-qwik');
       }
+      qwikPlugin.api.registerBundleGraphAdder?.((manifest) => {
+        return getRouteImports(ctx!.routes, manifest);
+      });
 
       // @ts-ignore `format` removed in Vite 5
       if (config.ssr?.format === 'cjs') {
@@ -236,10 +239,6 @@ function qwikCityPlugin(userOpts?: QwikCityVitePluginOptions): any {
     generateBundle(_, bundles) {
       // client bundles
       if (ctx?.target === 'client') {
-        qwikPlugin!.api.registerBundleGraphAdder((manifest) => {
-          return getRouteImports(ctx!.routes, manifest);
-        });
-
         const entries = [...ctx.entries, ...ctx.serviceWorkers].map((entry) => {
           return {
             chunkFileName: entry.chunkFileName,

packages/qwik-labs/src-vite/insights/index.ts

@@ -1,8 +1,7 @@
-import { type QwikVitePluginOptions } from '@builder.io/qwik/optimizer';
-import { existsSync, mkdirSync } from 'fs';
-import { readFile, writeFile } from 'fs/promises';
-import { join } from 'node:path';
-import { resolve } from 'path';
+import { type QwikVitePlugin } from '@builder.io/qwik/optimizer';
+import { existsSync, mkdirSync } from 'node:fs';
+import { readFile, writeFile } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
 import { type PluginOption } from 'vite';
 
 const logWarn = (message?: any, ...rest) => {
@@ -15,35 +14,102 @@ const log = (message?: any) => {
   console.log('\x1b[35m%s\x1b[0m', `qwikInsight(): ${message}`);
 };
 
+/** @public */
+export interface InsightManifest {
+  manual: Record<string, string>;
+  prefetch: { route: string; symbols: string[] }[];
+}
+
 export async function qwikInsights(qwikInsightsOpts: {
   publicApiKey: string;
   baseUrl?: string;
   outDir?: string;
 }): Promise<PluginOption> {
   const { publicApiKey, baseUrl = 'https://insights.qwik.dev', outDir = '' } = qwikInsightsOpts;
   let isProd = false;
+  let jsonDir: string;
+  let jsonFile: string;
+  let data: InsightManifest | null = null;
+  let qwikVitePlugin: QwikVitePlugin | null = null;
+
+  async function loadQwikInsights(): Promise<InsightManifest | null> {
+    if (data) {
+      return data;
+    }
+    if (existsSync(jsonFile)) {
+      log('Reading Qwik Insight data from: ' + jsonFile);
+      return (data = JSON.parse(await readFile(jsonFile, 'utf-8')) as InsightManifest);
+    }
+    return null;
+  }
+
   const vitePlugin: PluginOption = {
     name: 'vite-plugin-qwik-insights',
     enforce: 'pre',
     apply: 'build',
     async config(viteConfig) {
+      jsonDir = resolve(viteConfig.root || '.', outDir);
+      jsonFile = join(jsonDir, 'q-insights.json');
       isProd = viteConfig.mode !== 'ssr';
-      if (isProd) {
-        const qManifest: QwikVitePluginOptions['entryStrategy'] = { type: 'smart' };
-        try {
-          const response = await fetch(`${baseUrl}/api/v1/${publicApiKey}/bundles/strategy/`);
-          const strategy = await response.json();
-          Object.assign(qManifest, strategy);
-          const path = resolve(viteConfig.root || '.', outDir);
-          const pathJson = join(path, 'q-insights.json');
-          mkdirSync(path, { recursive: true });
-          log('Fetched latest Qwik Insight data into: ' + pathJson);
-          await writeFile(pathJson, JSON.stringify(qManifest));
-        } catch (e) {
-          logWarn('Failed to fetch manifest from Insights DB', e);
+    },
+    configResolved: {
+      // we want to register the bundle graph adder last so we overwrite existing routes
+      order: 'post',
+      async handler(config) {
+        qwikVitePlugin = config.plugins.find(
+          (p) => p.name === 'vite-plugin-qwik'
+        ) as QwikVitePlugin;
+        if (!qwikVitePlugin) {
+          throw new Error('Missing vite-plugin-qwik');
         }
-      }
+        const opts = qwikVitePlugin.api.getOptions();
+        if (opts.entryStrategy.type !== 'smart') {
+          return;
+        }
+        if (isProd) {
+          try {
+            const qManifest: InsightManifest = { manual: {}, prefetch: [] };
+            const response = await fetch(`${baseUrl}/api/v1/${publicApiKey}/bundles/strategy/`);
+            const strategy = await response.json();
+            Object.assign(qManifest, strategy);
+            data = qManifest;
+            mkdirSync(jsonDir, { recursive: true });
+            log('Fetched latest Qwik Insight data into: ' + jsonFile);
+            await writeFile(jsonFile, JSON.stringify(qManifest));
+          } catch (e) {
+            logWarn('Failed to fetch manifest from Insights DB', e);
+            await loadQwikInsights();
+          }
+        } else {
+          await loadQwikInsights();
+        }
+
+        if (data) {
+          opts.entryStrategy.manual = { ...data.manual, ...opts.entryStrategy.manual };
+
+          qwikVitePlugin.api.registerBundleGraphAdder(() => {
+            const result: Record<
+              string,
+              { imports?: string[] | undefined; dynamicImports?: string[] | undefined }
+            > = {};
+            for (const item of data?.prefetch || []) {
+              if (item.symbols) {
+                let route = item.route;
+                if (route.startsWith('/')) {
+                  route = route.slice(1);
+                }
+                if (!route.endsWith('/')) {
+                  route += '/';
+                }
+                result[route] = { imports: item.symbols };
+              }
+            }
+            return result;
+          });
+        }
+      },
     },
+
     closeBundle: async () => {
       const path = resolve(outDir, 'q-manifest.json');
       if (isProd && existsSync(path)) {

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

@@ -75,19 +75,6 @@ export interface InlineEntryStrategy {
     type: 'inline';
 }
 
-// @public (undocumented)
-export interface InsightManifest {
-    // (undocumented)
-    manual: Record<string, string>;
-    // (undocumented)
-    prefetch: {
-        route: string;
-        symbols: string[];
-    }[];
-    // (undocumented)
-    type: 'smart';
-}
-
 // @public (undocumented)
 export type MinifyMode = 'simplify' | 'none';
 
@@ -299,8 +286,6 @@ export interface QwikVitePluginApi {
     // (undocumented)
     getClientPublicOutDir: () => string | null;
     // (undocumented)
-    getInsightsManifest: (clientOutDir?: string | null) => Promise<InsightManifest | null>;
-    // (undocumented)
     getManifest: () => QwikManifest | null;
     // (undocumented)
     getOptimizer: () => Optimizer | null;

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

@@ -10,7 +10,6 @@ export type {
   SegmentAnalysis as HookAnalysis,
   SegmentEntryStrategy as HookEntryStrategy,
   InlineEntryStrategy,
-  InsightManifest,
   MinifyMode,
   Optimizer,
   OptimizerOptions,

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

@@ -8,7 +8,6 @@ import type {
   EntryStrategy,
   GlobalInjections,
   SegmentAnalysis,
-  InsightManifest,
   Optimizer,
   OptimizerOptions,
   OptimizerSystem,
@@ -111,7 +110,6 @@ export function createQwikPlugin(optimizerOptions: OptimizerOptions = {}) {
     srcInputs: null as any,
     sourcemap: !!optimizerOptions.sourcemap,
     manifestInput: null,
-    insightsManifest: null,
     manifestOutput: null,
     transformedModuleOutput: null,
     scope: null,
@@ -1011,7 +1009,6 @@ export interface QwikPluginOptions {
   vendorRoots?: string[];
   manifestOutput?: ((manifest: QwikManifest) => Promise<void> | void) | null;
   manifestInput?: QwikManifest | null;
-  insightsManifest?: InsightManifest | null;
   input?: string[] | string | { [entry: string]: string };
   outDir?: string;
   assetsDir?: string;