docs: add examples

Author: BioPhoton

packages/plugin-bundle-stats/code-pushup.large-angular.config.ts

@@ -28,7 +28,7 @@ const config = {
   plugins: [
     await bundleStatsPlugin({
       artefactsPath:
-        './packages/plugin-bundle-stats/mocks/fixtures/stats/entain-bundle-stats.json',
+        './packages/plugin-bundle-stats/mocks/fixtures/stats/entain-host-app-main-bundle-stats.json',
       bundler: 'esbuild',
       grouping: [...DEFAULT_GROUPING],
       configs: [
@@ -40,22 +40,24 @@ const config = {
             artefactSize: [100 * 1024, 500 * 1024],
           },
         },
-        // commented out for later
-        /*
         {
           title: 'Shared Chunks',
           include: ['**\/chunk-*.js'],
           thresholds: {
             totalSize: [10, 100 * 1024],
           },
+          pruning: {
+            maxChildren: 10,
+            maxDepth: 3,
+          },
         },
         {
           title: 'CSS Assets',
           include: ['**\/*.css'],
           thresholds: {
             totalSize: [1 * 1024, 50 * 1024],
           },
-        },*/
+        },
       ],
       penalty: {
         errorWeight: 1,

…/fixtures/stats/entain-bundle-stats.json …s/entain-host-app-main-bundle-stats.jsonpackages/plugin-bundle-stats/mocks/fixtures/stats/entain-bundle-stats.json renamed to packages/plugin-bundle-stats/mocks/fixtures/stats/entain-host-app-main-bundle-stats.json packages/plugin-bundle-stats/mocks/fixtures/stats/entain-bundle-stats.json renamed to packages/plugin-bundle-stats/mocks/fixtures/stats/entain-host-app-main-bundle-stats.json

@@ -21,10 +21,7 @@ export const DEFAULT_GROUPING: GroupingRule[] = [
   },
   {
     title: 'preact',
-    patterns: [
-      '**/node_modules/preact/**',
-      '**/node_modules/preact-render-to-string/**',
-    ],
+    patterns: ['**/node_modules/preact/**', '**/node_modules/preact-*/**'],
     icon: '🪐',
   },
   {
@@ -34,10 +31,7 @@ export const DEFAULT_GROUPING: GroupingRule[] = [
   },
   {
     title: 'solid',
-    patterns: [
-      '**/node_modules/solid-js/**',
-      '**/node_modules/solid-app-router/**',
-    ],
+    patterns: ['**/node_modules/solid-js/**', '**/node_modules/solid-*/**'],
     icon: '🟢',
   },
   {

packages/plugin-bundle-stats/src/lib/constants.ts

@@ -122,23 +122,6 @@ export function formatNodeLabel(node: BundleStatsNode): string {
   return `${icon} ${displayName}${sizeInfo}`;
 }
 
-/**
- * Enhanced tree connector that uses appropriate icons
- */
-export function formatTreeConnector(
-  node: BundleStatsNode,
-  isLast: boolean,
-): string {
-  const baseConnector = isLast ? '└─ ' : '├─ ';
-
-  if (node.values.type === 'import') {
-    const arrow = node.values.importKind === 'dynamic' ? '▷' : '▶';
-    return `${baseConnector}${arrow} `;
-  }
-
-  return baseConnector;
-}
-
 export const short = (p: string): string =>
   truncateText((p || '').replace(process.cwd(), '⟨CWD⟩'), { maxChars: 80 });
 
@@ -214,18 +197,34 @@ export function getNodeIconAndPrefix(
 
   switch (node.values.type) {
     case 'chunk':
+      if (node.values.path?.endsWith('.css') || node.name.endsWith('.css')) {
+        return { icon: '🎨', prefix: '' };
+      }
       return { icon: '📄', prefix: '' };
     case 'import':
-      const arrow = node.values.importKind === 'dynamic' ? '▷' : '▶';
-      return { icon: arrow, prefix: 'imported from ' };
+      if (node.values.path?.endsWith('.css') || node.name.endsWith('.css')) {
+        return { icon: '🎨', prefix: '' };
+      }
+      return { icon: '📄', prefix: '' };
     case 'input':
       if (node.values.path?.endsWith('.css') || node.name.endsWith('.css')) {
         return { icon: '🎨', prefix: '' };
       }
       return { icon: '📄', prefix: '' };
     case 'asset':
+      if (node.values.path?.endsWith('.css') || node.name.endsWith('.css')) {
+        return { icon: '🎨', prefix: '' };
+      }
       return { icon: '📄', prefix: '' };
     case 'group':
+      // Check for CSS-related group names first
+      if (
+        node.name.includes('css-assets') ||
+        node.name.includes('css') ||
+        node.name.includes('styles')
+      ) {
+        return { icon: '🎨', prefix: '' };
+      }
       // Group nodes use custom icons from grouping rules
       return { icon: (node.values as any).icon || '📦', prefix: '' };
     default: