feat: add assets to q-manifest

this allows knowing all the needed files for offline apps

Author: wmertens

.changeset/real-cities-fold.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+FEAT: q-manifest.json now also includes the generated assets

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

@@ -385,6 +385,20 @@
       "content": "",
       "mdFile": "qwik.experimentalfeatures.preventnavigate.md"
     },
+    {
+      "name": "QwikAsset",
+      "id": "qwikasset",
+      "hierarchy": [
+        {
+          "name": "QwikAsset",
+          "id": "qwikasset"
+        }
+      ],
+      "kind": "Interface",
+      "content": "```typescript\nexport interface QwikAsset \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[name](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring \\| undefined\n\n\n</td><td>\n\nName of the asset\n\n\n</td></tr>\n<tr><td>\n\n[size](#)\n\n\n</td><td>\n\n\n</td><td>\n\nnumber\n\n\n</td><td>\n\nSize of the asset\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.qwikasset.md"
+    },
     {
       "name": "QwikBuildMode",
       "id": "qwikbuildmode",
@@ -451,7 +465,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[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>",
+      "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[assets?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[fileName: string\\]: [QwikAsset](#qwikasset)<!-- -->; }\n\n\n</td><td>\n\n_(Optional)_ All assets\n\n\n</td></tr>\n<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

@@ -1231,6 +1231,63 @@ Description
 
 ## preventNavigate
 
+## QwikAsset
+
+```typescript
+export interface QwikAsset
+```
+
+<table><thead><tr><th>
+
+Property
+
+</th><th>
+
+Modifiers
+
+</th><th>
+
+Type
+
+</th><th>
+
+Description
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[name](#)
+
+</td><td>
+
+</td><td>
+
+string \| undefined
+
+</td><td>
+
+Name of the asset
+
+</td></tr>
+<tr><td>
+
+[size](#)
+
+</td><td>
+
+</td><td>
+
+number
+
+</td><td>
+
+Size of the asset
+
+</td></tr>
+</tbody></table>
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts)
+
 ## QwikBuildMode
 
 ```typescript
@@ -1418,6 +1475,21 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+[assets?](#)
+
+</td><td>
+
+</td><td>
+
+\{ [fileName: string]: [QwikAsset](#qwikasset); }
+
+</td><td>
+
+_(Optional)_ All assets
+
+</td></tr>
+<tr><td>
+
 [bundleGraph?](#)
 
 </td><td>

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

@@ -15,6 +15,7 @@ export type {
   OptimizerOptions,
   OptimizerSystem,
   Path,
+  QwikAsset,
   QwikBundle,
   QwikBundleGraph,
   QwikManifest,

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

@@ -397,19 +397,25 @@ export function generateManifestFromBundles(
   debug: (...args: any[]) => void,
   canonPath: (p: string) => string
 ) {
+  // Note that this will be the order of the JSON file
   const manifest: QwikManifest = {
-    manifestHash: '',
-    symbols: {},
-    mapping: {},
-    bundles: {},
-    injections,
     version: '1',
+    manifestHash: '',
     options: {
       target: opts.target,
       buildMode: opts.buildMode,
       // don't copy the insights stuff
       entryStrategy: opts.entryStrategy && { type: opts.entryStrategy.type },
     },
+    core: undefined,
+    preloader: undefined,
+    bundleGraphPath: undefined,
+    injections,
+    mapping: {},
+    bundles: {},
+    assets: {},
+    symbols: {},
+    bundleGraph: undefined,
   };
 
   const getBundleName = (name: string) => {
@@ -424,7 +430,14 @@ export function generateManifestFromBundles(
   // We need to find our QRL exports
   const qrlNames = new Set(segments.map((h) => h.name));
   for (const outputBundle of Object.values(outputBundles)) {
-    if (outputBundle.type !== 'chunk') {
+    if (outputBundle.type === 'asset') {
+      // we don't record map files as assets
+      if (!outputBundle.fileName.endsWith('js.map')) {
+        manifest.assets![outputBundle.fileName] = {
+          name: outputBundle.names[0],
+          size: outputBundle.source.length,
+        };
+      }
       continue;
     }
     const bundleFileName = canonPath(outputBundle.fileName);
@@ -488,14 +501,14 @@ export function generateManifestFromBundles(
     }
     (manifest.bundles[bundle].symbols ||= []).push(symbol);
     manifest.symbols[symbol] = {
-      origin: segment.origin,
       displayName: segment.displayName,
-      canonicalFilename: segment.canonicalFilename,
       hash: segment.hash,
       ctxKind: segment.ctxKind,
       ctxName: segment.ctxName,
       captures: segment.captures,
+      canonicalFilename: segment.canonicalFilename,
       parent: segment.parent,
+      origin: segment.origin,
       loc: segment.loc,
     };
   }

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

@@ -970,6 +970,11 @@ export const manifest = ${JSON.stringify(serverManifest)};\n`;
     });
     manifest.bundleGraphPath = outputAnalyzer.canonPath(ctx.getFileName(bgAsset));
     manifest.bundleGraph = bundleGraph;
+    // we already generated the assets list so we need to update it
+    manifest.assets![manifest.bundleGraphPath] = {
+      name: 'bundle-graph.json',
+      size: bundleGraph.length,
+    };
 
     const manifestStr = JSON.stringify(manifest, null, '\t');
     ctx.emitFile({

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

@@ -160,6 +160,12 @@ export interface Path {
     readonly win32: null;
 }
 
+// @public (undocumented)
+export interface QwikAsset {
+    name: string | undefined;
+    size: number;
+}
+
 // @public (undocumented)
 export type QwikBuildMode = 'production' | 'development';
 
@@ -182,6 +188,9 @@ export type QwikBundleGraph = Array<string | number>;
 
 // @public
 export interface QwikManifest {
+    assets?: {
+        [fileName: string]: QwikAsset;
+    };
     bundleGraph?: QwikBundleGraph;
     bundleGraphPath?: string;
     bundles: {

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

@@ -223,6 +223,8 @@ export interface QwikManifest {
   mapping: { [symbolName: string]: string };
   /** All code bundles, used to know the import graph */
   bundles: { [fileName: string]: QwikBundle };
+  /** All assets */
+  assets?: { [fileName: string]: QwikAsset };
   /** All bundles in a compact graph format with probabilities */
   bundleGraph?: QwikBundleGraph;
   /** The bundle graph fileName */
@@ -311,6 +313,14 @@ export interface QwikBundle {
   origins?: string[];
 }
 
+/** @public */
+export interface QwikAsset {
+  /** Name of the asset */
+  name: string | undefined;
+  /** Size of the asset */
+  size: number;
+}
+
 /** @public */
 export interface GlobalInjections {
   tag: string;