@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.10

package/dist/utils/bundle-splitting.esm.js

@@ -1,72 +1,72 @@
 // Bundle splitting utilities for optimizing build process and loading performance
 export interface BundleSplitConfig {
-  enabled;
-  strategy;
-  chunkSize;
-  maxChunks;
-  minChunkSize;
-  vendorChunk;
-  commonChunk;
-  asyncChunk;
-  preloadChunks;
-  cacheGroups, any>;
+  enabled: boolean;
+  strategy: 'dynamic' | 'static' | 'hybrid';
+  chunkSize: number;
+  maxChunks: number;
+  minChunkSize: number;
+  vendorChunk: boolean;
+  commonChunk: boolean;
+  asyncChunk: boolean;
+  preloadChunks: boolean;
+  cacheGroups: Record<string, any>;
 }
 
 export interface ChunkAnalysis {
-  name;
-  size;
-  gzippedSize;
-  modules];
-  dependencies];
-  async;
-  vendor;
-  common;
-  loadPriority;
+  name: string;
+  size: number;
+  gzippedSize: number;
+  modules: string[];
+  dependencies: string[];
+  async: boolean;
+  vendor: boolean;
+  common: boolean;
+  loadPriority: 'high' | 'medium' | 'low';
 }
 
 export interface BundleSplitReport {
-  chunks];
-  totalSize;
-  totalGzippedSize;
-  chunkCount;
-  averageChunkSize;
-  optimizationScore;
-  recommendations];
-  timestamp;
+  chunks: ChunkAnalysis[];
+  totalSize: number;
+  totalGzippedSize: number;
+  chunkCount: number;
+  averageChunkSize: number;
+  optimizationScore: number;
+  recommendations: string[];
+  timestamp: number;
 }
 
 export class BundleSplitter {
-  private config;
-  private chunks, ChunkAnalysis>;
-
-  constructor(config= {
-    enabled,
-    strategy,
-    chunkSize, // 244KB
-    maxChunks,
-    minChunkSize, // 30KB
-    vendorChunk,
-    commonChunk,
-    asyncChunk,
-    preloadChunks,
-    cacheGroups}
+  private config: BundleSplitConfig;
+  private chunks: Map<string, ChunkAnalysis>;
+
+  constructor(config: BundleSplitConfig = {
+    enabled: true,
+    strategy: 'hybrid',
+    chunkSize: 244 * 1024, // 244KB
+    maxChunks: 10,
+    minChunkSize: 30 * 1024, // 30KB
+    vendorChunk: true,
+    commonChunk: true,
+    asyncChunk: true,
+    preloadChunks: true,
+    cacheGroups: {}
   }) {
     this.config = config;
     this.chunks = new Map();
   }
 
   // Analyze bundle chunks from build output
-  analyzeChunks(buildOutput)] {
+  analyzeChunks(buildOutput: string): ChunkAnalysis[] {
     if (!this.config.enabled) return [];
 
     const lines = buildOutput.split('\n');
-    const chunks] = [];
+    const chunks: ChunkAnalysis[] = [];
 
     lines.forEach(line => {
       // Handle all dist/ patterns
       if (line.includes('dist/') && line.includes('kB')) {
         // Use a more flexible regex that captures the essential parts
-        const match = line.match(/\s*dist\/(?)?([^\s]+)\s+(\d+\.\d+)\s+kB\s+\│\s*gzip)\s+kB/);
+        const match = line.match(/\s*dist\/(?:assets\/)?([^\s]+)\s+(\d+\.\d+)\s+kB\s+\│\s*gzip:\s*(\d+\.\d+)\s+kB/);
         
         if (match) {
           const [, filename, size, gzip] = match;
@@ -74,20 +74,20 @@ export class BundleSplitter {
           const gzipKB = parseFloat(gzip);
           
           // Extract name and extension from filename
-          const nameMatch = filename.match(/^([^.]+)(?]+\.([^.]+))?$/);
-          const name = nameMatch ? nameMatch[1] ;
-          const ext = nameMatch && nameMatch[2] ? nameMatch[2] ;
+          const nameMatch = filename.match(/^([^.]+)(?:\.[^.]+\.([^.]+))?$/);
+          const name = nameMatch ? nameMatch[1] : filename;
+          const ext = nameMatch && nameMatch[2] ? nameMatch[2] : '';
           
-          const chunk= {
-            name}.${ext}` ,
-            size, // Convert to bytes
-            gzippedSize,
-            modules),
-            dependencies),
-            async),
-            vendor),
-            common),
-            loadPriority, sizeKB)
+          const chunk: ChunkAnalysis = {
+            name: ext ? `${name}.${ext}` : name,
+            size: sizeKB * 1024, // Convert to bytes
+            gzippedSize: gzipKB * 1024,
+            modules: this.estimateModulesForChunk(name),
+            dependencies: this.estimateDependencies(name),
+            async: this.isAsyncChunk(name),
+            vendor: this.isVendorChunk(name),
+            common: this.isCommonChunk(name),
+            loadPriority: this.calculateLoadPriority(name, sizeKB)
           };
 
           chunks.push(chunk);
@@ -100,7 +100,7 @@ export class BundleSplitter {
   }
 
   // Estimate modules for a specific chunk
-  private estimateModulesForChunk(chunkName)] {
+  private estimateModulesForChunk(chunkName: string): string[] {
     if (chunkName.includes('index')) {
       return ['main', 'themes', 'components', 'utils'];
     } else if (chunkName.includes('vendor')) {
@@ -116,7 +116,7 @@ export class BundleSplitter {
   }
 
   // Estimate dependencies for a chunk
-  private estimateDependencies(chunkName)] {
+  private estimateDependencies(chunkName: string): string[] {
     if (chunkName.includes('index')) {
       return ['vendor', 'theme', 'component'];
     } else if (chunkName.includes('vendor')) {
@@ -130,25 +130,29 @@ export class BundleSplitter {
   }
 
   // Check if chunk is async (lazy-loaded)
-  private isAsyncChunk(chunkName)) || 
+  private isAsyncChunk(chunkName: string): boolean {
+    return chunkName.includes('async') || 
            chunkName.includes('lazy') || 
            chunkName.includes('dynamic');
   }
 
   // Check if chunk contains vendor libraries
-  private isVendorChunk(chunkName)) || 
+  private isVendorChunk(chunkName: string): boolean {
+    return chunkName.includes('vendor') || 
            chunkName.includes('lib') || 
            chunkName.includes('node_modules');
   }
 
   // Check if chunk contains common/shared code
-  private isCommonChunk(chunkName)) || 
+  private isCommonChunk(chunkName: string): boolean {
+    return chunkName.includes('common') || 
            chunkName.includes('shared') || 
            chunkName.includes('runtime');
   }
 
   // Calculate load priority for a chunk
-  private calculateLoadPriority(chunkName, sizeKB)) || chunkName.includes('main')) {
+  private calculateLoadPriority(chunkName: string, sizeKB: number): 'high' | 'medium' | 'low' {
+    if (chunkName.includes('index') || chunkName.includes('main')) {
       return 'high';
     } else if (chunkName.includes('vendor') || chunkName.includes('common')) {
       return 'medium';
@@ -159,8 +163,8 @@ export class BundleSplitter {
   }
 
   // Generate bundle splitting recommendations
-  generateRecommendations(chunks])] {
-    const recommendations] = [];
+  generateRecommendations(chunks: ChunkAnalysis[]): string[] {
+    const recommendations: string[] = [];
 
     // Check chunk count
     if (chunks.length > this.config.maxChunks) {
@@ -206,7 +210,8 @@ export class BundleSplitter {
   }
 
   // Calculate optimization score
-  calculateOptimizationScore(chunks])= 100;
+  calculateOptimizationScore(chunks: ChunkAnalysis[]): number {
+    let score = 100;
 
     // Penalize too many chunks
     if (chunks.length > this.config.maxChunks) {
@@ -237,24 +242,29 @@ export class BundleSplitter {
   }
 
   // Generate Vite configuration for bundle splitting
-  generateViteConfig()= {
-      build),
-            chunkFileNames),
-            entryFileNames),
-            assetFileNames)
+  generateViteConfig(): string {
+    const config = {
+      build: {
+        rollupOptions: {
+          output: {
+            manualChunks: this.generateManualChunks(),
+            chunkFileNames: this.generateChunkFileNames(),
+            entryFileNames: this.generateEntryFileNames(),
+            assetFileNames: this.generateAssetFileNames()
           }
         },
-        chunkSizeWarningLimit,
-        minify,
-        sourcemap}
+        chunkSizeWarningLimit: this.config.chunkSize / 1024,
+        minify: 'terser',
+        sourcemap: true
+      }
     };
 
     return JSON.stringify(config, null, 2);
   }
 
   // Generate manual chunk configuration
-  private generateManualChunks(), string[]> {
-    const chunks, string[]> = {};
+  private generateManualChunks(): Record<string, string[]> {
+    const chunks: Record<string, string[]> = {};
 
     if (this.config.vendorChunk) {
       chunks.vendor = [
@@ -283,7 +293,8 @@ export class BundleSplitter {
   }
 
   // Generate chunk file naming pattern
-  private generateChunkFileNames()=== 'dynamic') {
+  private generateChunkFileNames(): string {
+    if (this.config.strategy === 'dynamic') {
       return 'assets/[name]-[hash].js';
     } else if (this.config.strategy === 'static') {
       return 'assets/[name].js';
@@ -293,20 +304,25 @@ export class BundleSplitter {
   }
 
   // Generate entry file naming pattern
-  private generateEntryFileNames()]-[hash].js';
+  private generateEntryFileNames(): string {
+    return 'assets/[name]-[hash].js';
   }
 
   // Generate asset file naming pattern
-  private generateAssetFileNames()]-[hash].[ext]';
+  private generateAssetFileNames(): string {
+    return 'assets/[name]-[hash].[ext]';
   }
 
   // Generate webpack configuration for bundle splitting
-  generateWebpackConfig()= {
-      optimization,
-          minSize,
-          maxSize,
-          maxChunks,
-          cacheGroups)
+  generateWebpackConfig(): string {
+    const config = {
+      optimization: {
+        splitChunks: {
+          chunks: 'all',
+          minSize: this.config.minChunkSize,
+          maxSize: this.config.chunkSize,
+          maxChunks: this.config.maxChunks,
+          cacheGroups: this.generateWebpackCacheGroups()
         }
       }
     };
@@ -315,23 +331,25 @@ export class BundleSplitter {
   }
 
   // Generate webpack cache groups
-  private generateWebpackCacheGroups(), any> {
-    const cacheGroups, any> = {};
+  private generateWebpackCacheGroups(): Record<string, any> {
+    const cacheGroups: Record<string, any> = {};
 
     if (this.config.vendorChunk) {
       cacheGroups.vendor = {
-        test]node_modules[\\/]/,
-        name,
-        chunks,
-        priority};
+        test: /[\\/]node_modules[\\/]/,
+        name: 'vendor',
+        chunks: 'all',
+        priority: 10
+      };
     }
 
     if (this.config.commonChunk) {
       cacheGroups.common = {
-        name,
-        minChunks,
-        chunks,
-        priority};
+        name: 'common',
+        minChunks: 2,
+        chunks: 'all',
+        priority: 5
+      };
     }
 
     // Add custom cache groups from config
@@ -341,8 +359,8 @@ export class BundleSplitter {
   }
 
   // Generate dynamic import patterns for code splitting
-  generateDynamicImports()] {
-    const patterns] = [];
+  generateDynamicImports(): string[] {
+    const patterns: string[] = [];
 
     if (this.config.asyncChunk) {
       patterns.push(
@@ -363,8 +381,8 @@ export class BundleSplitter {
   }
 
   // Generate preload strategies
-  generatePreloadStrategies()] {
-    const strategies] = [];
+  generatePreloadStrategies(): string[] {
+    const strategies: string[] = [];
 
     if (this.config.preloadChunks) {
       strategies.push(
@@ -381,7 +399,7 @@ export class BundleSplitter {
         "};",
         "",
         "// Preload on route change",
-        "const preloadRouteChunk = (route) => {",
+        "const preloadRouteChunk = (route: string) => {",
         "  const link = document.createElement('link');",
         "  link.rel = 'prefetch';",
         "  link.as = 'script';",
@@ -395,18 +413,19 @@ export class BundleSplitter {
   }
 
   // Get bundle splitting statistics
-  getStatistics(chunks]);
-    totalGzippedSize;
-    chunkCount;
-    averageChunkSize;
-    vendorChunkCount;
-    asyncChunkCount;
-    commonChunkCount;
-    optimizationScore;
+  getStatistics(chunks: ChunkAnalysis[]): {
+    totalSize: number;
+    totalGzippedSize: number;
+    chunkCount: number;
+    averageChunkSize: number;
+    vendorChunkCount: number;
+    asyncChunkCount: number;
+    commonChunkCount: number;
+    optimizationScore: number;
   } {
     const totalSize = chunks.reduce((sum, chunk) => sum + chunk.size, 0);
     const totalGzippedSize = chunks.reduce((sum, chunk) => sum + chunk.gzippedSize, 0);
-    const averageChunkSize = chunks.length > 0 ? totalSize / chunks.length ;
+    const averageChunkSize = chunks.length > 0 ? totalSize / chunks.length : 0;
     const vendorChunkCount = chunks.filter(chunk => chunk.vendor).length;
     const asyncChunkCount = chunks.filter(chunk => chunk.async).length;
     const commonChunkCount = chunks.filter(chunk => chunk.common).length;
@@ -415,7 +434,7 @@ export class BundleSplitter {
     return {
       totalSize,
       totalGzippedSize,
-      chunkCount,
+      chunkCount: chunks.length,
       averageChunkSize,
       vendorChunkCount,
       asyncChunkCount,
@@ -425,7 +444,8 @@ export class BundleSplitter {
   }
 
   // Export bundle splitting analysis
-  exportAnalysis(chunks])= this.generateRecommendations(chunks);
+  exportAnalysis(chunks: ChunkAnalysis[]): string {
+    const recommendations = this.generateRecommendations(chunks);
     const statistics = this.getStatistics(chunks);
     const viteConfig = this.generateViteConfig();
     const webpackConfig = this.generateWebpackConfig();
@@ -436,21 +456,26 @@ export class BundleSplitter {
       chunks,
       statistics,
       recommendations,
-      configurations,
-        webpack},
-      codeSplitting,
+      configurations: {
+        vite: viteConfig,
+        webpack: webpackConfig
+      },
+      codeSplitting: {
+        dynamicImports,
         preloadStrategies
       },
-      timestamp).toISOString()
+      timestamp: new Date().toISOString()
     }, null, 2);
   }
 
   // Update configuration
-  updateConfig(newConfig)= { ...this.config, ...newConfig };
+  updateConfig(newConfig: Partial<BundleSplitConfig>): void {
+    this.config = { ...this.config, ...newConfig };
   }
 
   // Get current configuration
-  getConfig()};
+  getConfig(): BundleSplitConfig {
+    return { ...this.config };
   }
 }