@revealui/core 0.0.1-pre.4 → 0.2.0

package/dist/optimization/bundle-analyzer.js

@@ -0,0 +1,322 @@
+/**
+ * Bundle Analyzer
+ *
+ * Analyzes bundle size, dependencies, and optimization opportunities
+ */
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { extname, join, relative } from 'node:path';
+/**
+ * Analyze bundle directory
+ */
+export function analyzeBundleDirectory(bundlePath) {
+    const files = [];
+    let totalSize = 0;
+    // Recursively scan directory
+    function scanDirectory(dir) {
+        const entries = readdirSync(dir, { withFileTypes: true });
+        for (const entry of entries) {
+            const fullPath = join(dir, entry.name);
+            if (entry.isDirectory()) {
+                scanDirectory(fullPath);
+            }
+            else if (entry.isFile()) {
+                const stats = statSync(fullPath);
+                const relativePath = relative(bundlePath, fullPath);
+                const ext = extname(entry.name);
+                files.push({
+                    path: relativePath,
+                    size: stats.size,
+                    type: ext,
+                    relativeSize: 0, // Will calculate after total
+                });
+                totalSize += stats.size;
+            }
+        }
+    }
+    scanDirectory(bundlePath);
+    // Calculate relative sizes
+    for (const file of files) {
+        file.relativeSize = (file.size / totalSize) * 100;
+    }
+    // Find large files (>100KB)
+    const largeFiles = files.filter((f) => f.size > 100 * 1024).sort((a, b) => b.size - a.size);
+    return {
+        totalSize,
+        files,
+        chunks: [], // Would need webpack stats for this
+        dependencies: [],
+        duplicates: [],
+        largeFiles,
+    };
+}
+/**
+ * Format file size
+ */
+export function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(2)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+/**
+ * Analyze webpack stats
+ */
+export function analyzeWebpackStats(statsPath) {
+    const statsJson = JSON.parse(readFileSync(statsPath, 'utf-8'));
+    const files = [];
+    const chunks = [];
+    const dependencies = new Map();
+    let totalSize = 0;
+    // Process assets
+    if (statsJson.assets) {
+        for (const asset of statsJson.assets) {
+            files.push({
+                path: asset.name,
+                size: asset.size,
+                type: extname(asset.name),
+                relativeSize: 0,
+            });
+            totalSize += asset.size;
+        }
+    }
+    // Calculate relative sizes
+    for (const file of files) {
+        file.relativeSize = (file.size / totalSize) * 100;
+    }
+    // Process chunks
+    if (statsJson.chunks) {
+        for (const chunk of statsJson.chunks) {
+            chunks.push({
+                name: chunk.names?.[0] || chunk.id,
+                size: chunk.size,
+                files: chunk.files || [],
+                dependencies: [],
+            });
+        }
+    }
+    // Process modules for dependencies
+    if (statsJson.modules) {
+        for (const module of statsJson.modules) {
+            const match = module.name?.match(/node_modules\/(@?[^/]+\/[^/]+|@?[^/]+)/);
+            if (match) {
+                const pkgName = match[1];
+                const existing = dependencies.get(pkgName);
+                if (existing) {
+                    existing.instances++;
+                    existing.size += module.size || 0;
+                }
+                else {
+                    dependencies.set(pkgName, {
+                        name: pkgName,
+                        version: 'unknown',
+                        size: module.size || 0,
+                        instances: 1,
+                        treeshakeable: false,
+                    });
+                }
+            }
+        }
+    }
+    const largeFiles = files.filter((f) => f.size > 100 * 1024).sort((a, b) => b.size - a.size);
+    return {
+        totalSize,
+        files,
+        chunks,
+        dependencies: Array.from(dependencies.values()).sort((a, b) => b.size - a.size),
+        duplicates: [],
+        largeFiles,
+    };
+}
+/**
+ * Find duplicate dependencies
+ */
+export function findDuplicateDependencies(_stats) {
+    const _modules = new Map();
+    // This would need module resolution data
+    // Placeholder implementation
+    return [];
+}
+export function getOptimizationSuggestions(stats) {
+    const suggestions = [];
+    // Check total bundle size
+    if (stats.totalSize > 500 * 1024) {
+        suggestions.push({
+            type: 'bundle-split',
+            severity: 'critical',
+            message: `Total bundle size (${formatSize(stats.totalSize)}) exceeds 500KB. Consider code splitting.`,
+            potentialSavings: stats.totalSize - 500 * 1024,
+        });
+    }
+    // Check for large files
+    for (const file of stats.largeFiles) {
+        if (file.size > 200 * 1024) {
+            suggestions.push({
+                type: 'dynamic-import',
+                severity: 'warning',
+                message: `Large file ${file.path} (${formatSize(file.size)}). Consider lazy loading.`,
+                potentialSavings: file.size * 0.7, // Assume 70% can be deferred
+                file: file.path,
+            });
+        }
+    }
+    // Check for duplicate dependencies
+    if (stats.duplicates.length > 0) {
+        for (const dup of stats.duplicates) {
+            suggestions.push({
+                type: 'dependency',
+                severity: 'warning',
+                message: `Duplicate dependency ${dup.name} found in ${dup.versions.length} versions`,
+                potentialSavings: dup.totalSize * 0.5,
+            });
+        }
+    }
+    // Check for large dependencies
+    for (const dep of stats.dependencies) {
+        if (dep.size > 100 * 1024) {
+            suggestions.push({
+                type: 'tree-shaking',
+                severity: 'info',
+                message: `Large dependency ${dep.name} (${formatSize(dep.size)}). Verify tree shaking.`,
+            });
+        }
+    }
+    return suggestions.sort((a, b) => {
+        const severityOrder = { critical: 0, warning: 1, info: 2 };
+        return severityOrder[a.severity] - severityOrder[b.severity];
+    });
+}
+/**
+ * Generate bundle report
+ */
+export function generateBundleReport(stats) {
+    const suggestions = getOptimizationSuggestions(stats);
+    let report = '# Bundle Analysis Report\n\n';
+    report += `## Summary\n\n`;
+    report += `- Total Size: ${formatSize(stats.totalSize)}\n`;
+    report += `- Files: ${stats.files.length}\n`;
+    report += `- Chunks: ${stats.chunks.length}\n`;
+    report += `- Dependencies: ${stats.dependencies.length}\n`;
+    report += `- Large Files: ${stats.largeFiles.length}\n\n`;
+    if (stats.largeFiles.length > 0) {
+        report += `## Large Files (>100KB)\n\n`;
+        report += `| File | Size | % of Total |\n`;
+        report += `|------|------|------------|\n`;
+        for (const file of stats.largeFiles.slice(0, 10)) {
+            report += `| ${file.path} | ${formatSize(file.size)} | ${file.relativeSize.toFixed(1)}% |\n`;
+        }
+        report += '\n';
+    }
+    if (stats.dependencies.length > 0) {
+        report += `## Top Dependencies\n\n`;
+        report += `| Package | Size | Instances |\n`;
+        report += `|---------|------|----------|\n`;
+        for (const dep of stats.dependencies.slice(0, 10)) {
+            report += `| ${dep.name} | ${formatSize(dep.size)} | ${dep.instances} |\n`;
+        }
+        report += '\n';
+    }
+    if (suggestions.length > 0) {
+        report += `## Optimization Suggestions\n\n`;
+        for (const suggestion of suggestions) {
+            const icon = suggestion.severity === 'critical' ? '🔴' : suggestion.severity === 'warning' ? '⚠️' : 'ℹ️';
+            report += `${icon} **${suggestion.type}**: ${suggestion.message}\n`;
+            if (suggestion.potentialSavings) {
+                report += `   Potential savings: ${formatSize(suggestion.potentialSavings)}\n`;
+            }
+            report += '\n';
+        }
+    }
+    return report;
+}
+export function compareBundles(before, after) {
+    const sizeDiff = after.totalSize - before.totalSize;
+    const sizeChangePercent = (sizeDiff / before.totalSize) * 100;
+    const beforeFiles = new Set(before.files.map((f) => f.path));
+    const afterFiles = new Set(after.files.map((f) => f.path));
+    const filesAdded = after.files.filter((f) => !beforeFiles.has(f.path)).length;
+    const filesRemoved = before.files.filter((f) => !afterFiles.has(f.path)).length;
+    const filesChanged = after.files.filter((f) => {
+        const beforeFile = before.files.find((bf) => bf.path === f.path);
+        return beforeFile && beforeFile.size !== f.size;
+    }).length;
+    const newLargeFiles = after.largeFiles.filter((f) => {
+        const beforeFile = before.files.find((bf) => bf.path === f.path);
+        return !beforeFile || beforeFile.size < 100 * 1024;
+    });
+    const improvements = [];
+    const regressions = [];
+    if (sizeDiff < 0) {
+        improvements.push(`Total bundle size reduced by ${formatSize(Math.abs(sizeDiff))}`);
+    }
+    else if (sizeDiff > 0) {
+        regressions.push(`Total bundle size increased by ${formatSize(sizeDiff)}`);
+    }
+    if (after.largeFiles.length < before.largeFiles.length) {
+        improvements.push(`${before.largeFiles.length - after.largeFiles.length} fewer large files`);
+    }
+    else if (after.largeFiles.length > before.largeFiles.length) {
+        regressions.push(`${after.largeFiles.length - before.largeFiles.length} new large files`);
+    }
+    return {
+        sizeDiff,
+        sizeChangePercent,
+        filesAdded,
+        filesRemoved,
+        filesChanged,
+        newLargeFiles,
+        improvements,
+        regressions,
+    };
+}
+/**
+ * Get bundle health score (0-100)
+ */
+export function getBundleHealthScore(stats) {
+    const factors = [];
+    // Factor 1: Total size (40% weight)
+    let sizeScore = 100;
+    if (stats.totalSize > 1024 * 1024) {
+        sizeScore = Math.max(0, 100 - ((stats.totalSize - 1024 * 1024) / (1024 * 1024)) * 50);
+    }
+    else if (stats.totalSize > 500 * 1024) {
+        sizeScore = 100 - ((stats.totalSize - 500 * 1024) / (500 * 1024)) * 30;
+    }
+    factors.push({
+        name: 'Bundle Size',
+        score: sizeScore,
+        weight: 0.4,
+        reason: `Total size: ${formatSize(stats.totalSize)}`,
+    });
+    // Factor 2: Large files (30% weight)
+    const largeFileScore = Math.max(0, 100 - stats.largeFiles.length * 10);
+    factors.push({
+        name: 'Large Files',
+        score: largeFileScore,
+        weight: 0.3,
+        reason: `${stats.largeFiles.length} files over 100KB`,
+    });
+    // Factor 3: Chunks (20% weight)
+    const optimalChunks = 10;
+    const chunkScore = 100 - Math.abs(stats.chunks.length - optimalChunks) * 5;
+    factors.push({
+        name: 'Code Splitting',
+        score: Math.max(0, chunkScore),
+        weight: 0.2,
+        reason: `${stats.chunks.length} chunks (optimal: ~${optimalChunks})`,
+    });
+    // Factor 4: Duplicates (10% weight)
+    const duplicateScore = Math.max(0, 100 - stats.duplicates.length * 20);
+    factors.push({
+        name: 'Dependencies',
+        score: duplicateScore,
+        weight: 0.1,
+        reason: `${stats.duplicates.length} duplicate dependencies`,
+    });
+    // Calculate weighted score
+    const totalScore = factors.reduce((sum, factor) => sum + factor.score * factor.weight, 0);
+    return {
+        score: Math.round(totalScore),
+        factors,
+    };
+}

package/dist/optimization/code-splitting.d.ts

@@ -0,0 +1,144 @@
+/**
+ * Code Splitting Utilities
+ *
+ * Helpers for dynamic imports, lazy loading, and code splitting
+ */
+import { type ComponentType, type LazyExoticComponent } from 'react';
+/**
+ * Lazy load component with retry logic
+ */
+export interface LazyLoadOptions {
+    maxRetries?: number;
+    retryDelay?: number;
+    fallback?: ComponentType;
+}
+export declare function lazyWithRetry<TProps = Record<string, unknown>>(importFn: () => Promise<{
+    default: ComponentType<TProps>;
+}>, options?: LazyLoadOptions): LazyExoticComponent<ComponentType<TProps>>;
+/**
+ * Preload component
+ */
+export declare function preloadComponent<T = unknown>(importFn: () => Promise<T>): Promise<T>;
+/**
+ * Lazy load with prefetch on hover
+ */
+export declare function lazyWithPrefetch<TProps = Record<string, unknown>>(importFn: () => Promise<{
+    default: ComponentType<TProps>;
+}>): {
+    Component: LazyExoticComponent<ComponentType<TProps>>;
+    prefetch: () => void;
+};
+/**
+ * Route-based code splitting helper
+ */
+export interface RouteConfig<TProps = Record<string, unknown>> {
+    path: string;
+    component: () => Promise<{
+        default: ComponentType<TProps>;
+    }>;
+    preload?: boolean;
+}
+export declare function createRoutes(configs: RouteConfig[]): {
+    path: string;
+    Component: LazyExoticComponent<ComponentType<Record<string, unknown>>>;
+    preload: (() => Promise<{
+        default: ComponentType<Record<string, unknown>>;
+    }>) | undefined;
+}[];
+/**
+ * Chunk naming helper
+ */
+export declare function createChunkName(name: string): string;
+/**
+ * Dynamic import with webpack magic comments
+ */
+export declare function lazyWithChunkName<TProps = Record<string, unknown>>(_chunkName: string, importFn: () => Promise<{
+    default: ComponentType<TProps>;
+}>): LazyExoticComponent<ComponentType<TProps>>;
+/**
+ * Prefetch multiple components
+ */
+export declare function prefetchComponents<T = unknown>(importFns: Array<() => Promise<T>>): Promise<T[]>;
+/**
+ * Idle callback prefetch
+ */
+export declare function prefetchOnIdle(importFn: () => Promise<unknown>): void;
+/**
+ * Intersection observer prefetch
+ */
+export declare function prefetchOnVisible(element: HTMLElement | null, importFn: () => Promise<unknown>, options?: IntersectionObserverInit): () => void;
+/**
+ * Media query based loading
+ */
+export declare function loadOnMediaQuery(query: string, importFn: () => Promise<unknown>): () => void;
+/**
+ * Load on interaction (click, hover, focus)
+ */
+export declare function loadOnInteraction(element: HTMLElement | null, importFn: () => Promise<unknown>, events?: string[]): () => void;
+/**
+ * Split vendors into separate chunks
+ */
+export interface VendorChunkConfig {
+    name: string;
+    test: RegExp;
+    priority?: number;
+}
+export declare const VENDOR_CHUNK_CONFIGS: VendorChunkConfig[];
+/**
+ * Generate webpack splitChunks config
+ */
+export declare function generateSplitChunksConfig(customChunks?: VendorChunkConfig[]): {
+    chunks: string;
+    maxInitialRequests: number;
+    maxAsyncRequests: number;
+    minSize: number;
+    cacheGroups: Record<string, unknown>;
+};
+/**
+ * Module concatenation helper
+ */
+export declare function shouldConcatenateModule(modulePath: string): boolean;
+/**
+ * Tree shaking helper - mark side effects
+ */
+export declare function markPureCall(fn: Function): Function;
+/**
+ * Analyze module dependencies
+ */
+export interface ModuleDependency {
+    name: string;
+    size: number;
+    children: ModuleDependency[];
+}
+export declare function analyzeModuleDependencies(_modulePath: string): ModuleDependency | null;
+/**
+ * Critical CSS helper
+ */
+export declare function extractCriticalCSS(_html: string): string;
+/**
+ * Inline critical scripts
+ */
+export declare function shouldInlineScript(scriptPath: string, size: number): boolean;
+/**
+ * Bundle budget checker
+ */
+export interface BundleBudget {
+    maxSize: number;
+    maxInitialSize: number;
+    maxAsyncSize: number;
+    maxCSSSize: number;
+}
+export declare const DEFAULT_BUDGETS: BundleBudget;
+export interface BudgetViolation {
+    type: 'total' | 'initial' | 'async' | 'css';
+    actual: number;
+    budget: number;
+    exceeded: number;
+}
+export declare function checkBundleBudgets(stats: {
+    totalSize: number;
+    initialSize: number;
+    asyncSizes: number[];
+    cssSize: number;
+}, budgets?: BundleBudget): BudgetViolation[];
+//# sourceMappingURL=code-splitting.d.ts.map

package/dist/optimization/code-splitting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-splitting.d.ts","sourceRoot":"","sources":["../../src/optimization/code-splitting.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,mBAAmB,EAAQ,MAAM,OAAO,CAAA;AAG1E;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,aAAa,CAAA;CACzB;AAED,wBAAgB,aAAa,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5D,QAAQ,EAAE,MAAM,OAAO,CAAC;IAAE,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC,EAC3D,OAAO,GAAE,eAAoB,GAC5B,mBAAmB,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CA6B5C;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,GAAG,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAEpF;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/D,QAAQ,EAAE,MAAM,OAAO,CAAC;IAAE,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC,GAC1D;IACD,SAAS,EAAE,mBAAmB,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAA;IACrD,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAkBA;AAED;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3D,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,OAAO,CAAC;QAAE,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;KAAE,CAAC,CAAA;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,EAAE;;;;;;IAMlD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEpD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,OAAO,CAAC;IAAE,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC,GAC1D,mBAAmB,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAI5C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,EAAE,CAAC,CAEhG;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAOrE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,QAAQ,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,EAChC,OAAO,CAAC,EAAE,wBAAwB,GACjC,MAAM,IAAI,CAiBZ;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,MAAM,IAAI,CAsB5F;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,QAAQ,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,EAChC,MAAM,GAAE,MAAM,EAA4B,GACzC,MAAM,IAAI,CA0BZ;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,EAqBnD,CAAA;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,YAAY,GAAE,iBAAiB,EAAO;;;;;;EAqB/E;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAQnE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAInD;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,gBAAgB,EAAE,CAAA;CAC7B;AAED,wBAAgB,yBAAyB,CAAC,WAAW,EAAE,MAAM,GAAG,gBAAgB,GAAG,IAAI,CAItF;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIxD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAQ5E;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAA;IACf,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,eAAe,EAAE,YAK7B,CAAA;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,CAAA;IAC3C,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE;IACL,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;CAChB,EACD,OAAO,GAAE,YAA8B,GACtC,eAAe,EAAE,CA0CnB"}