@rakeyshgidwani/roger-ui-bank-theme-harvey 0.2.52 → 0.3.0

package/dist/plugins/performance-monitor.js

@@ -0,0 +1,221 @@
+/**
+ * Performance Monitor Plugin
+ * Implements Phase 3 Performance Optimization: Bundle Size Monitoring
+ *
+ * Tracks:
+ * - CSS bundle sizes (critical vs progressive)
+ * - JavaScript bundle sizes
+ * - Performance metrics and alerts
+ * - Loading performance analysis
+ */
+import fs from 'fs';
+import path from 'path';
+const DEFAULT_CONFIG = {
+    thresholds: {
+        criticalCSS: 50, // KB - Mobile-critical styles should be minimal
+        progressiveCSS: 150, // KB - Desktop enhancement styles
+        totalCSS: 200, // KB - Total CSS budget
+        javascript: 500 // KB - JS bundle threshold
+    },
+    reportPath: 'performance-report.json',
+    enableAlerts: true
+};
+export default function performanceMonitor(config = {}) {
+    const finalConfig = { ...DEFAULT_CONFIG, ...config };
+    const startTime = Date.now();
+    return {
+        name: 'performance-monitor',
+        apply: 'build',
+        generateBundle(_options, bundle) {
+            const analysis = analyzeBundle(bundle, startTime, finalConfig);
+            // Write performance report
+            const reportPath = path.resolve(finalConfig.reportPath);
+            fs.writeFileSync(reportPath, JSON.stringify(analysis, null, 2));
+            // Console output
+            logPerformanceReport(analysis, finalConfig);
+            // Alerts
+            if (finalConfig.enableAlerts && analysis.alerts.length > 0) {
+                console.warn('\n⚠️  Performance Alerts:');
+                analysis.alerts.forEach(alert => console.warn(`   ${alert}`));
+            }
+        }
+    };
+}
+/**
+ * Analyzes bundle contents and generates performance report
+ */
+function analyzeBundle(bundle, startTime, config) {
+    const analysis = {
+        timestamp: new Date().toISOString(),
+        files: {},
+        totals: {
+            criticalCSS: 0,
+            progressiveCSS: 0,
+            totalCSS: 0,
+            javascript: 0,
+            assets: 0,
+            total: 0
+        },
+        performance: {
+            bundleTime: Date.now() - startTime,
+            compressionRatio: 0
+        },
+        alerts: []
+    };
+    // Analyze each file in the bundle
+    Object.entries(bundle).forEach(([fileName, asset]) => {
+        if (asset.type === 'asset' || asset.type === 'chunk') {
+            const size = getAssetSize(asset);
+            const type = getAssetType(fileName);
+            const category = getAssetCategory(fileName);
+            analysis.files[fileName] = {
+                size,
+                type,
+                category
+            };
+            // Update totals
+            if (type === 'css') {
+                if (category === 'critical') {
+                    analysis.totals.criticalCSS += size;
+                }
+                else if (category === 'progressive') {
+                    analysis.totals.progressiveCSS += size;
+                }
+                analysis.totals.totalCSS += size;
+            }
+            else if (type === 'js') {
+                analysis.totals.javascript += size;
+            }
+            else {
+                analysis.totals.assets += size;
+            }
+            analysis.totals.total += size;
+        }
+    });
+    // Calculate content-aware estimated gzip compression ratio
+    const calculateEstimatedGzipRatio = () => {
+        // Realistic gzip compression ratios by content type (compressed size / original size)
+        const cssGzipRatio = 0.15; // CSS compresses to ~15% of original size
+        const jsGzipRatio = 0.25; // JavaScript compresses to ~25% of original size
+        const cssSize = analysis.totals.totalCSS;
+        const jsSize = analysis.totals.javascript;
+        // Only calculate gzip for CSS and JS (assets like fonts/images typically aren't gzipped by CDNs)
+        const compressibleSize = cssSize + jsSize;
+        if (compressibleSize === 0)
+            return 0;
+        // Calculate estimated gzipped size for compressible content only
+        const estimatedGzipSize = (cssSize * cssGzipRatio) +
+            (jsSize * jsGzipRatio);
+        // Return ratio of estimated gzipped size to total compressible size
+        return Math.round((estimatedGzipSize / compressibleSize) * 100) / 100;
+    };
+    analysis.performance.compressionRatio = calculateEstimatedGzipRatio();
+    // Generate alerts
+    analysis.alerts = generateAlerts(analysis.totals, config.thresholds);
+    return analysis;
+}
+/**
+ * Determines asset size in KB
+ */
+function getAssetSize(asset) {
+    const source = asset.source || asset.code || '';
+    const bytes = typeof source === 'string' ? Buffer.byteLength(source, 'utf8') : source.length;
+    return Math.round(bytes / 1024 * 100) / 100; // KB with 2 decimal precision
+}
+/**
+ * Determines asset type from filename
+ */
+function getAssetType(fileName) {
+    if (fileName.endsWith('.css'))
+        return 'css';
+    if (fileName.endsWith('.js') || fileName.endsWith('.mjs'))
+        return 'js';
+    return 'asset';
+}
+/**
+ * Categorizes assets for performance analysis
+ */
+function getAssetCategory(fileName) {
+    if (fileName.includes('critical'))
+        return 'critical';
+    if (fileName.includes('progressive'))
+        return 'progressive';
+    if (fileName.includes('vendor') || fileName.includes('node_modules'))
+        return 'vendor';
+    if (fileName.includes('component'))
+        return 'component';
+    return undefined;
+}
+/**
+ * Generates performance alerts based on thresholds
+ */
+function generateAlerts(totals, thresholds) {
+    const alerts = [];
+    if (totals.criticalCSS > thresholds.criticalCSS) {
+        alerts.push(`Critical CSS size (${totals.criticalCSS}KB) exceeds threshold (${thresholds.criticalCSS}KB)`);
+    }
+    if (totals.progressiveCSS > thresholds.progressiveCSS) {
+        alerts.push(`Progressive CSS size (${totals.progressiveCSS}KB) exceeds threshold (${thresholds.progressiveCSS}KB)`);
+    }
+    if (totals.totalCSS > thresholds.totalCSS) {
+        alerts.push(`Total CSS size (${totals.totalCSS}KB) exceeds threshold (${thresholds.totalCSS}KB)`);
+    }
+    if (totals.javascript > thresholds.javascript) {
+        alerts.push(`JavaScript bundle size (${totals.javascript}KB) exceeds threshold (${thresholds.javascript}KB)`);
+    }
+    return alerts;
+}
+/**
+ * Logs performance report to console
+ */
+function logPerformanceReport(analysis, config) {
+    console.log('\n📊 Performance Analysis Report');
+    console.log('================================');
+    console.log('\n📦 Bundle Sizes:');
+    console.log(`   Critical CSS:    ${analysis.totals.criticalCSS}KB (threshold: ${config.thresholds.criticalCSS}KB)`);
+    console.log(`   Progressive CSS: ${analysis.totals.progressiveCSS}KB (threshold: ${config.thresholds.progressiveCSS}KB)`);
+    console.log(`   Total CSS:       ${analysis.totals.totalCSS}KB (threshold: ${config.thresholds.totalCSS}KB)`);
+    console.log(`   JavaScript:      ${analysis.totals.javascript}KB (threshold: ${config.thresholds.javascript}KB)`);
+    console.log(`   Assets:          ${analysis.totals.assets}KB`);
+    console.log(`   Total Bundle:    ${analysis.totals.total}KB`);
+    console.log('\n⚡ Performance Metrics:');
+    console.log(`   Build Time:      ${analysis.performance.bundleTime}ms`);
+    const compressibleSize = analysis.totals.totalCSS + analysis.totals.javascript;
+    console.log(`   Gzip Ratio:      ${analysis.performance.compressionRatio} (CSS+JS compression)`);
+    console.log(`   Est. Gzip Size:  ~${Math.round(compressibleSize * analysis.performance.compressionRatio)}KB (CSS+JS only)`);
+    console.log(`\n📝 Report saved to: ${config.reportPath}`);
+    if (analysis.alerts.length === 0) {
+        console.log('\n✅ All performance thresholds met!');
+    }
+}
+/**
+ * Creates performance comparison utility
+ */
+export function comparePerformance(currentReport, baselineReport) {
+    if (!baselineReport || !fs.existsSync(baselineReport)) {
+        console.log('\n📈 Baseline report not found. Current report will serve as baseline.');
+        return;
+    }
+    try {
+        const current = JSON.parse(fs.readFileSync(currentReport, 'utf8'));
+        const baseline = JSON.parse(fs.readFileSync(baselineReport, 'utf8'));
+        console.log('\n📈 Performance Comparison (vs baseline)');
+        console.log('======================================');
+        const metrics = [
+            { name: 'Critical CSS', current: current.totals.criticalCSS, baseline: baseline.totals.criticalCSS },
+            { name: 'Progressive CSS', current: current.totals.progressiveCSS, baseline: baseline.totals.progressiveCSS },
+            { name: 'Total CSS', current: current.totals.totalCSS, baseline: baseline.totals.totalCSS },
+            { name: 'JavaScript', current: current.totals.javascript, baseline: baseline.totals.javascript },
+            { name: 'Total Bundle', current: current.totals.total, baseline: baseline.totals.total }
+        ];
+        metrics.forEach(metric => {
+            const diff = metric.current - metric.baseline;
+            const diffPercent = metric.baseline > 0 ? Math.round((diff / metric.baseline) * 100) : 0;
+            const indicator = diff > 0 ? '📈' : diff < 0 ? '📉' : '➡️';
+            console.log(`   ${metric.name.padEnd(15)} ${indicator} ${metric.current}KB (${diff >= 0 ? '+' : ''}${diff}KB, ${diffPercent >= 0 ? '+' : ''}${diffPercent}%)`);
+        });
+    }
+    catch (error) {
+        console.error('Failed to compare performance reports:', error);
+    }
+}

package/dist/plugins/progressive-css-loader.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Progressive CSS Loader Plugin
+ * Implements Phase 3 Performance Optimization: Progressive Enhancement Loading
+ *
+ * Separates CSS into:
+ * - Critical: xs-md breakpoints (mobile-tablet) - loaded immediately
+ * - Progressive: lg-3xl breakpoints (desktop+) - loaded on demand
+ */
+import type { Plugin } from 'vite';
+interface ProgressiveCSSConfig {
+    critical: string[];
+    progressive: string[];
+    progressivePath: string;
+}
+export default function progressiveCSSLoader(config?: Partial<ProgressiveCSSConfig>): Plugin;
+/**
+ * Creates progressive CSS loading script for runtime
+ */
+export declare function createProgressiveLoader(): string;
+export {};
+//# sourceMappingURL=progressive-css-loader.d.ts.map

package/dist/plugins/progressive-css-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progressive-css-loader.d.ts","sourceRoot":"","sources":["../../src/plugins/progressive-css-loader.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAGlC,UAAU,oBAAoB;IAE5B,QAAQ,EAAE,MAAM,EAAE,CAAA;IAElB,WAAW,EAAE,MAAM,EAAE,CAAA;IAErB,eAAe,EAAE,MAAM,CAAA;CACxB;AAQD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,MAAM,GAAE,OAAO,CAAC,oBAAoB,CAAM,GAAG,MAAM,CA6C/F;AAuID;;GAEG;AACH,wBAAgB,uBAAuB,IAAI,MAAM,CA0DhD"}

package/dist/plugins/progressive-css-loader.esm.js

@@ -0,0 +1,227 @@
+/**
+ * Progressive CSS Loader Plugin
+ * Implements Phase 3 Performance Optimization: Progressive Enhancement Loading
+ *
+ * Separates CSS into:
+ * - Critical: xs-md breakpoints (mobile-tablet) - loaded immediately
+ * - Progressive: lg-3xl breakpoints (desktop+) - loaded on demand
+ */
+import postcss from 'postcss';
+const DEFAULT_CONFIG = {
+    critical: ['xs', 'sm', 'md'],
+    progressive: ['lg', 'xl', '2xl', '3xl'],
+    progressivePath: 'progressive.css'
+};
+export default function progressiveCSSLoader(config = {}) {
+    const finalConfig = { ...DEFAULT_CONFIG, ...config };
+    return {
+        name: 'progressive-css-loader',
+        apply: 'build',
+        generateBundle(_options, bundle) {
+            // Find CSS assets in bundle
+            const cssAssets = Object.keys(bundle).filter(key => key.endsWith('.css'));
+            cssAssets.forEach((assetKey, index) => {
+                const asset = bundle[assetKey];
+                if (asset.type === 'asset' && typeof asset.source === 'string') {
+                    const originalSource = asset.source;
+                    // Safely separate CSS into critical and progressive parts
+                    const { critical, progressive } = separateCSS(originalSource, finalConfig);
+                    const originalSize = Math.round(originalSource.length / 1024);
+                    const criticalSize = Math.round(critical.length / 1024);
+                    const progressiveSize = Math.round(progressive.length / 1024);
+                    console.log(`   Split ${assetKey}: ${originalSize}KB -> ${criticalSize}KB critical + ${progressiveSize}KB progressive`);
+                    // Update the main CSS asset to contain only critical CSS
+                    asset.source = critical;
+                    // Create separate progressive CSS file with unique naming for desktop enhancement
+                    if (progressive.trim()) {
+                        const progressiveFileName = index === 0
+                            ? finalConfig.progressivePath
+                            : finalConfig.progressivePath.replace('.css', `-${index}.css`);
+                        this.emitFile({
+                            type: 'asset',
+                            fileName: progressiveFileName,
+                            source: progressive
+                        });
+                        console.log(`   Created ${progressiveFileName} for desktop enhancement (${progressiveSize}KB)`);
+                    }
+                    // Skip creating explicit critical CSS file since main bundle already contains critical styles
+                }
+            });
+        }
+    };
+}
+/**
+ * CSS Variable to pixel value mapping based on design system
+ * This provides the authoritative mapping for breakpoint classification
+ */
+const BREAKPOINT_VALUES = {
+    'xs': 475,
+    'sm': 640,
+    'mobile': 640,
+    'md': 768,
+    'tablet': 768,
+    'lg': 1024,
+    'desktop': 1024,
+    'xl': 1280,
+    'wide': 1280,
+    '2xl': 1536,
+    'ultra': 1536,
+    '3xl': 1920
+};
+/**
+ * Desktop breakpoint threshold - anything >= 1024px is considered desktop
+ */
+const DESKTOP_THRESHOLD = 1024;
+/**
+ * Determines if a media query represents a desktop breakpoint
+ * Uses CSS variable resolution to properly classify breakpoints
+ */
+function isDesktopMediaQuery(mediaQuery) {
+    // Skip max-width queries - they should always stay in critical CSS
+    if (mediaQuery.includes('max-width')) {
+        return false;
+    }
+    // Check for CSS variable-based breakpoints
+    const variableMatch = mediaQuery.match(/var\(--cs-breakpoints-([^)]+)\)/);
+    if (variableMatch) {
+        const breakpointName = variableMatch[1];
+        const pixelValue = BREAKPOINT_VALUES[breakpointName];
+        if (pixelValue !== undefined) {
+            return pixelValue >= DESKTOP_THRESHOLD;
+        }
+        // If we don't recognize the variable, log it and assume it's critical for safety
+        console.warn(`Unknown breakpoint variable: --cs-breakpoints-${breakpointName}`);
+        return false;
+    }
+    // Check for direct pixel values
+    const pixelMatch = mediaQuery.match(/min-width:\s*(\d+)px/);
+    if (pixelMatch) {
+        const pixelValue = parseInt(pixelMatch[1], 10);
+        return pixelValue >= DESKTOP_THRESHOLD;
+    }
+    // If we can't classify it, keep it in critical CSS for safety
+    return false;
+}
+/**
+ * Safely separates CSS content into critical and progressive sections
+ * Critical: < 1024px breakpoints (mobile/tablet) + base styles
+ * Progressive: >= 1024px breakpoints (desktop+) only
+ */
+function separateCSS(cssContent, _config) {
+    try {
+        const desktopRules = [];
+        // Parse CSS using PostCSS
+        const root = postcss.parse(cssContent);
+        // Walk through all rules and find desktop media queries
+        root.walkAtRules('media', (rule) => {
+            const mediaQuery = rule.params;
+            const shouldExtract = isDesktopMediaQuery(mediaQuery);
+            if (shouldExtract) {
+                // Convert the rule back to CSS string and collect it
+                desktopRules.push(rule.toString());
+                // Remove the rule from the original AST
+                rule.remove();
+            }
+        });
+        // Generate the critical CSS (without desktop rules)
+        const criticalCSS = root.toString();
+        const progressiveCSS = desktopRules.join('\n');
+        // Validate CSS syntax by checking for balanced braces
+        const criticalOpenBraces = (criticalCSS.match(/\{/g) || []).length;
+        const criticalCloseBraces = (criticalCSS.match(/\}/g) || []).length;
+        const progressiveOpenBraces = (progressiveCSS.match(/\{/g) || []).length;
+        const progressiveCloseBraces = (progressiveCSS.match(/\}/g) || []).length;
+        if (criticalOpenBraces !== criticalCloseBraces) {
+            console.error(`PostCSS extraction created malformed critical CSS: ${criticalOpenBraces} open braces vs ${criticalCloseBraces} close braces`);
+            console.log('Falling back to original CSS to avoid syntax errors');
+            return {
+                critical: cssContent,
+                progressive: ''
+            };
+        }
+        if (progressiveOpenBraces !== progressiveCloseBraces) {
+            console.error(`PostCSS extraction created malformed progressive CSS: ${progressiveOpenBraces} open braces vs ${progressiveCloseBraces} close braces`);
+            console.log('Falling back to original CSS to avoid syntax errors');
+            return {
+                critical: cssContent,
+                progressive: ''
+            };
+        }
+        console.log(`CSS separation: Extracted ${desktopRules.length} desktop-only media queries using PostCSS`);
+        // Note: Any remaining CSS syntax warnings are from pre-existing CSS generation issues,
+        // not from the progressive CSS extraction process
+        return {
+            critical: criticalCSS,
+            progressive: progressiveCSS
+        };
+    }
+    catch (error) {
+        console.error('PostCSS separation failed, falling back to original CSS:', error);
+        return {
+            critical: cssContent,
+            progressive: ''
+        };
+    }
+}
+/**
+ * Creates progressive CSS loading script for runtime
+ */
+export function createProgressiveLoader() {
+    return `
+// Progressive CSS Loader - Phase 3 Performance Optimization
+(function() {
+  'use strict';
+
+  const DESKTOP_BREAKPOINT = 1024; // lg breakpoint
+  const PROGRESSIVE_CSS_PATH = '/assets/progressive.css';
+
+  let progressiveCSSLoaded = false;
+
+  function loadProgressiveCSS() {
+    if (progressiveCSSLoaded) return;
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = PROGRESSIVE_CSS_PATH;
+    link.media = 'screen and (min-width: ' + DESKTOP_BREAKPOINT + 'px)';
+
+    // Load asynchronously for non-blocking
+    link.onload = function() {
+      console.log('Progressive CSS loaded for desktop');
+      progressiveCSSLoaded = true;
+    };
+
+    document.head.appendChild(link);
+  }
+
+  function checkViewport() {
+    if (window.innerWidth >= DESKTOP_BREAKPOINT) {
+      loadProgressiveCSS();
+    }
+  }
+
+  // Load on resize to desktop
+  let resizeTimeout;
+  window.addEventListener('resize', function() {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(checkViewport, 150);
+  });
+
+  // Check initial viewport
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', checkViewport);
+  } else {
+    checkViewport();
+  }
+
+  // Preload for fast desktop switches
+  if (window.innerWidth >= 768) { // tablet+
+    const preload = document.createElement('link');
+    preload.rel = 'preload';
+    preload.href = PROGRESSIVE_CSS_PATH;
+    preload.as = 'style';
+    document.head.appendChild(preload);
+  }
+})();
+`;
+}