@mks2508/better-logger 1.1.0 → 1.2.0

package/src/terminal/terminal-renderer.ts

@@ -0,0 +1,339 @@
+/**
+ * Terminal Renderer - ANSI color rendering for terminal environments
+ * Converts CSS-based styling to ANSI escape sequences for terminal output
+ */
+
+import type { LogLevel } from '../types/index.js';
+import type { LogStyles } from '../types/index.js';
+
+export type ANSIStyle = {
+    text: string;
+    timestamp?: string;
+    level?: string;
+    prefix?: string;
+    message?: string;
+    location?: string;
+    reset: string;
+};
+
+export class TerminalRenderer {
+    private colorCapability: 'full' | 'basic' | 'none';
+
+    constructor(colorCapability: 'full' | 'basic' | 'none' = 'full') {
+        this.colorCapability = colorCapability;
+    }
+
+    /**
+     * Get ANSI color codes for basic colors
+     */
+    private getColorCode(color: string, background: boolean = false): string {
+        const colorCodes: Record<string, { normal: string; bright: string }> = {
+            'black': { normal: '30', bright: '90' },
+            'red': { normal: '31', bright: '91' },
+            'green': { normal: '32', bright: '92' },
+            'yellow': { normal: '33', bright: '93' },
+            'blue': { normal: '34', bright: '94' },
+            'magenta': { normal: '35', bright: '95' },
+            'cyan': { normal: '36', bright: '96' },
+            'white': { normal: '37', bright: '97' },
+            'gray': { normal: '90', bright: '37' },
+            'grey': { normal: '90', bright: '37' }
+        };
+
+        const codes = colorCodes[color.toLowerCase()] || { normal: '37', bright: '97' };
+        const prefix = background ? '4' : '3';
+        return `\x1b[${codes.normal}m`;
+    }
+
+    /**
+     * Get ANSI style codes
+     */
+    private getStyleCode(styles: string[]): string {
+        const styleCodes: Record<string, string> = {
+            'bold': '1',
+            'dim': '2',
+            'italic': '3',
+            'underline': '4',
+            'reset': '0'
+        };
+
+        const codes = styles.map(style => styleCodes[style] || '0').join(';');
+        return codes ? `\x1b[${codes}m` : '';
+    }
+
+    /**
+     * Convert log styles to ANSI formatting
+     */
+    renderTerminal(
+        level: LogLevel,
+        message: string,
+        timestamp?: string,
+        prefix?: string,
+        location?: string,
+        styles?: LogStyles
+    ): ANSIStyle {
+        const reset = '\x1b[0m';
+        const result: ANSIStyle = { text: '', reset };
+
+        // Apply preset styles if provided
+        if (styles) {
+            result.timestamp = this.styleTimestamp(timestamp, styles.timestamp);
+            result.level = this.styleLevel(level, styles.level);
+            result.prefix = this.stylePrefix(prefix, styles.prefix);
+            result.message = this.styleMessage(message, styles.message);
+            result.location = this.styleLocation(location, styles.location);
+        } else {
+            // Default styling based on level
+            result.timestamp = this.styleTimestamp(timestamp);
+            result.level = this.styleLevel(level);
+            result.prefix = this.stylePrefix(prefix);
+            result.message = this.styleMessage(message);
+            result.location = this.styleLocation(location);
+        }
+
+        // Build complete text
+        const parts: string[] = [];
+        if (result.timestamp) parts.push(result.timestamp);
+        if (result.level) parts.push(result.level);
+        if (result.prefix) parts.push(result.prefix);
+        if (result.message) parts.push(result.message);
+        if (result.location) parts.push(result.location);
+
+        result.text = parts.join(' ') + reset;
+        return result;
+    }
+
+    /**
+     * Style timestamp based on preset or defaults
+     */
+    private styleTimestamp(timestamp?: string, style?: LogStyles['timestamp']): string {
+        if (!timestamp || !style?.show) return '';
+
+        if (this.colorCapability === 'none') {
+            return timestamp;
+        }
+
+        const dimStyle = this.getStyleCode(['dim']);
+        return `${dimStyle}${timestamp}${'\x1b[0m'}`;
+    }
+
+    /**
+     * Style level with appropriate colors and formatting
+     */
+    private styleLevel(level: LogLevel, style?: LogStyles['level']): string {
+        if (!style?.show) return '';
+
+        const levelText = this.getLevelText(level);
+        const levelColors: Record<LogLevel, string> = {
+            'debug': 'magenta',
+            'info': 'blue',
+            'warn': 'yellow',
+            'error': 'red',
+            'critical': 'red'
+        };
+
+        if (this.colorCapability === 'none') {
+            return `[${levelText}]`;
+        }
+
+        const color = levelColors[level] || 'white';
+        const colorCode = this.getColorCode(color);
+        const boldStyle = this.getStyleCode(['bold']);
+
+        if (style?.style === 'compact') {
+            return `${colorCode}[${levelText}]${'\x1b[0m'}`;
+        } else {
+            return `${colorCode}${boldStyle}[${levelText}]${'\x1b[0m'}`;
+        }
+    }
+
+    /**
+     * Style prefix based on preset
+     */
+    private stylePrefix(prefix?: string, style?: LogStyles['prefix']): string {
+        if (!prefix || !style?.show) return '';
+
+        if (this.colorCapability === 'none') {
+            return `[${prefix}]`;
+        }
+
+        const colorCode = this.getColorCode('cyan');
+        return `${colorCode}[${prefix}]${'\x1b[0m'}`;
+    }
+
+    /**
+     * Style message based on preset
+     */
+    private styleMessage(message: string, style?: LogStyles['message']): string {
+        if (!style?.show) return message;
+
+        return message; // Messages usually don't need styling
+    }
+
+    /**
+     * Style location (file:line) information
+     */
+    private styleLocation(location?: string, style?: LogStyles['location']): string {
+        if (!location || !style?.show) return '';
+
+        if (this.colorCapability === 'none') {
+            return `(${location})`;
+        }
+
+        const dimStyle = this.getStyleCode(['dim']);
+        if (style?.style === 'clickable') {
+            const underlineStyle = this.getStyleCode(['dim', 'underline']);
+            return `${underlineStyle}(${location})${'\x1b[0m'}`;
+        }
+
+        return `${dimStyle}(${location})${'\x1b[0m'}`;
+    }
+
+    /**
+     * Get text representation of log level
+     */
+    public getLevelText(level: LogLevel): string {
+        const levelMap: Record<LogLevel, string> = {
+            'debug': 'DEBUG',
+            'info': 'INFO',
+            'warn': 'WARN',
+            'error': 'ERROR',
+            'critical': 'CRITICAL'
+        };
+
+        return levelMap[level] || String(level).toUpperCase();
+    }
+
+    /**
+     * Create cyberpunk-style ANSI rendering
+     */
+    renderCyberpunk(
+        level: LogLevel,
+        message: string,
+        timestamp?: string,
+        prefix?: string,
+        location?: string
+    ): ANSIStyle {
+        const reset = '\x1b[0m';
+        const levelColors: Record<LogLevel, string> = {
+            'debug': '\x1b[95m', // Bright magenta
+            'info': '\x1b[94m',  // Bright blue
+            'warn': '\x1b[93m',  // Bright yellow
+            'error': '\x1b[91m', // Bright red
+            'critical': '\x1b[91m\x1b[1m' // Bright red + bold
+        };
+
+        const parts: string[] = [];
+
+        if (timestamp) {
+            parts.push(`\x1b[90m${timestamp}${reset}`);
+        }
+
+        // Cyberpunk level styling
+        const levelColor = levelColors[level] || '\x1b[97m';
+        const bgBlack = '\x1b[40m';
+        parts.push(`${bgBlack}${levelColor} ${this.getLevelText(level)} ${reset}`);
+
+        if (prefix) {
+            parts.push(`\x1b[96m[${prefix}]${reset}`);
+        }
+
+        parts.push(message);
+
+        if (location) {
+            parts.push(`\x1b[90m(${location})${reset}`);
+        }
+
+        return {
+            text: parts.join(' '),
+            reset
+        };
+    }
+
+    /**
+     * Create minimal ANSI rendering
+     */
+    renderMinimal(
+        level: LogLevel,
+        message: string,
+        timestamp?: string,
+        prefix?: string
+    ): ANSIStyle {
+        const reset = '\x1b[0m';
+        const levelColors: Record<LogLevel, string> = {
+            'debug': '\x1b[95m', // Magenta
+            'info': '\x1b[94m',  // Blue
+            'warn': '\x1b[93m',  // Yellow
+            'error': '\x1b[91m', // Red
+            'critical': '\x1b[91m\x1b[1m' // Red + bold
+        };
+
+        const parts: string[] = [];
+
+        if (timestamp) {
+            parts.push(`\x1b[90m${timestamp}${reset}`);
+        }
+
+        const levelColor = levelColors[level] || '\x1b[97m';
+        parts.push(`${levelColor}${this.getLevelText(level)}:${reset}`);
+
+        if (prefix) {
+            parts.push(`\x1b[96m${prefix}${reset}`);
+        }
+
+        parts.push(message);
+
+        return {
+            text: parts.join(' '),
+            reset
+        };
+    }
+
+    /**
+     * Get chalk instance for log level (for compatibility with adapter)
+     */
+    public getChalkForLevel(level: LogLevel): any {
+        const levelColors: Record<LogLevel, string> = {
+            'debug': 'magenta',
+            'info': 'blue',
+            'warn': 'yellow',
+            'error': 'red',
+            'critical': 'red'
+        };
+
+        return {
+            color: (text: string) => {
+                const color = levelColors[level] || 'white';
+                const colorCode = this.getColorCode(color);
+                return `${colorCode}${text}${'\x1b[0m'}`;
+            },
+            bold: (text: string) => {
+                const boldStyle = this.getStyleCode(['bold']);
+                return `${boldStyle}${text}${'\x1b[0m'}`;
+            },
+            dim: (text: string) => {
+                const dimStyle = this.getStyleCode(['dim']);
+                return `${dimStyle}${text}${'\x1b[0m'}`;
+            },
+            bgGray: (text: string) => {
+                return `\x1b[100m${text}${'\x1b[0m'}`;
+            },
+            bgBlue: (text: string) => {
+                return `\x1b[104m${text}${'\x1b[0m'}`;
+            },
+            reset: (text: string) => text,
+            cyan: {
+                bold: (text: string) => {
+                    const cyan = this.getColorCode('cyan');
+                    const bold = this.getStyleCode(['bold']);
+                    return `${cyan}${bold}${text}${'\x1b[0m'}`;
+                },
+                dim: (text: string) => {
+                    const cyan = this.getColorCode('cyan');
+                    const dim = this.getStyleCode(['dim']);
+                    return `${cyan}${dim}${text}${'\x1b[0m'}`;
+                }
+            }
+        };
+    }
+}

package/src/utils/adapter.ts

@@ -0,0 +1,291 @@
+/**
+ * CSS to ANSI Adapter - Converts CSS-based styles to ANSI terminal styles
+ * Bridges the gap between browser styling and terminal rendering
+ */
+
+import type { LogStyles } from '../types/index.js';
+import type { ANSIStyle } from '../terminal/terminal-renderer.js';
+import { TerminalRenderer } from '../terminal/terminal-renderer.js';
+import type { LogLevel } from '../types/index.js';
+import { getColorCapability } from './environment-detector.js';
+
+export class CSS2ANSIAdapter {
+    private renderer: TerminalRenderer;
+
+    constructor() {
+        const colorCapability = getColorCapability();
+        this.renderer = new TerminalRenderer(colorCapability);
+    }
+
+    /**
+     * Convert LogStyles to ANSIStyle for terminal rendering
+     */
+    adaptStyles(
+        level: LogLevel,
+        message: string,
+        timestamp?: string,
+        prefix?: string,
+        location?: string,
+        styles?: LogStyles,
+        presetName?: string
+    ): ANSIStyle {
+        // Special handling for specific presets that need unique terminal representations
+        if (presetName) {
+            switch (presetName) {
+                case 'cyberpunk':
+                    return this.renderer.renderCyberpunk(level, message, timestamp, prefix, location);
+                case 'minimal':
+                    return this.renderer.renderMinimal(level, message, timestamp, prefix);
+                case 'production':
+                    return this.adaptProductionStyles(level, message, timestamp, prefix, location, styles);
+                case 'debug':
+                    return this.adaptDebugStyles(level, message, timestamp, prefix, location, styles);
+                case 'glassmorphism':
+                    return this.adaptGlassmorphismStyles(level, message, timestamp, prefix, location, styles);
+            }
+        }
+
+        // Default adaptation using the renderer
+        return this.renderer.renderTerminal(level, message, timestamp, prefix, location, styles);
+    }
+
+    /**
+     * Adapt production preset for terminal
+     */
+    private adaptProductionStyles(
+        level: LogLevel,
+        message: string,
+        timestamp?: string,
+        prefix?: string,
+        location?: string,
+        styles?: LogStyles
+    ): ANSIStyle {
+        const reset = '\x1b[0m';
+        const levelChalk = this.renderer.getChalkForLevel(level);
+
+        const parts: string[] = [];
+
+        // Production: clean, essential info only
+        if (timestamp && styles?.timestamp?.show) {
+            parts.push(levelChalk.dim(timestamp));
+        }
+
+        if (styles?.level?.show) {
+            parts.push(levelChalk.color(`[${this.renderer['getLevelText'](level)}]`));
+        }
+
+        // Skip prefix in production (as per preset config)
+        if (prefix && styles?.prefix?.show) {
+            parts.push(levelChalk.dim(`[${prefix}]`));
+        }
+
+        if (message && styles?.message?.show) {
+            parts.push(levelChalk.reset(message));
+        }
+
+        // Skip location in production (as per preset config)
+        if (location && styles?.location?.show) {
+            parts.push(levelChalk.dim(`(${location})`));
+        }
+
+        return {
+            text: parts.join(' ') + reset,
+            reset
+        };
+    }
+
+    /**
+     * Adapt debug preset for terminal
+     */
+    private adaptDebugStyles(
+        level: LogLevel,
+        message: string,
+        timestamp?: string,
+        prefix?: string,
+        location?: string,
+        styles?: LogStyles
+    ): ANSIStyle {
+        const reset = '\x1b[0m';
+        const levelChalk = this.renderer.getChalkForLevel(level);
+
+        const parts: string[] = [];
+
+        // Debug: monospace fonts, detailed info, compact layout
+        if (timestamp && styles?.timestamp?.show) {
+            parts.push(levelChalk.dim(timestamp));
+        }
+
+        if (styles?.level?.show) {
+            if (styles?.level?.style === 'compact') {
+                parts.push(levelChalk.color(`[${this.renderer['getLevelText'](level)}]`));
+            } else {
+                parts.push(levelChalk.bold(`[${this.renderer['getLevelText'](level)}]`));
+            }
+        }
+
+        if (prefix && styles?.prefix?.show) {
+            if (styles?.prefix?.style === 'compact') {
+                parts.push(levelChalk.cyan.dim(`[${prefix}]`));
+            } else {
+                parts.push(levelChalk.cyan.bold(`[${prefix}]`));
+            }
+        }
+
+        if (message && styles?.message?.show) {
+            parts.push(levelChalk.reset(message));
+        }
+
+        // Debug usually shows location
+        if (location && styles?.location?.show) {
+            if (styles?.location?.style === 'clickable') {
+                parts.push(levelChalk.dim(`${location} (clickable)`));
+            } else {
+                parts.push(levelChalk.dim(`(${location})`));
+            }
+        }
+
+        return {
+            text: parts.join(' ') + reset,
+            reset
+        };
+    }
+
+    /**
+     * Adapt glassmorphism preset for terminal
+     */
+    private adaptGlassmorphismStyles(
+        level: LogLevel,
+        message: string,
+        timestamp?: string,
+        prefix?: string,
+        location?: string,
+        styles?: LogStyles
+    ): ANSIStyle {
+        const reset = '\x1b[0m';
+        const levelChalk = this.renderer.getChalkForLevel(level);
+
+        const parts: string[] = [];
+
+        // Glassmorphism: subtle, transparent effects
+        if (timestamp && styles?.timestamp?.show) {
+            parts.push(levelChalk.dim(timestamp));
+        }
+
+        if (styles?.level?.show) {
+            // Subtle level styling with dim background effect
+            parts.push(levelChalk.bgGray(` ${this.renderer['getLevelText'](level)} `));
+        }
+
+        if (prefix && styles?.prefix?.show) {
+            parts.push(levelChalk.bgBlue(`[${prefix}]`));
+        }
+
+        if (message && styles?.message?.show) {
+            parts.push(levelChalk.reset(message));
+        }
+
+        if (location && styles?.location?.show) {
+            parts.push(levelChalk.dim(`(${location})`));
+        }
+
+        return {
+            text: parts.join(' ') + reset,
+            reset
+        };
+    }
+
+    /**
+     * Convert CSS color values to ANSI-friendly colors
+     */
+    adaptColor(cssColor: string): string {
+        // Handle hex colors
+        if (cssColor.startsWith('#')) {
+            return cssColor; // TerminalRenderer will handle this
+        }
+
+        // Handle RGB colors
+        if (cssColor.startsWith('rgb(')) {
+            return cssColor; // TerminalRenderer will handle this
+        }
+
+        // Handle CSS gradients - extract primary color
+        if (cssColor.includes('gradient')) {
+            return this.extractColorFromGradient(cssColor);
+        }
+
+        // Handle CSS color names
+        return this.cssNameToANSI(cssColor);
+    }
+
+    /**
+     * Extract primary color from CSS gradient
+     */
+    private extractColorFromGradient(gradient: string): string {
+        // Extract first color from linear-gradient
+        const match = gradient.match(/#[0-9a-fA-F]{6}|rgb\([^)]+\)/);
+        return match ? match[0] : '#ffffff';
+    }
+
+    /**
+     * Convert CSS color names to ANSI-compatible names
+     */
+    private cssNameToANSI(cssColor: string): string {
+        const colorMap: Record<string, string> = {
+            'black': 'black',
+            'white': 'white',
+            'red': 'red',
+            'green': 'green',
+            'blue': 'blue',
+            'yellow': 'yellow',
+            'cyan': 'cyan',
+            'magenta': 'magenta',
+            'gray': 'gray',
+            'grey': 'gray',
+            'orange': 'yellow',
+            'purple': 'magenta',
+            'pink': 'red',
+            'brown': 'yellow',
+            'lightblue': 'cyan',
+            'lightgreen': 'green',
+            'lightgray': 'gray',
+            'lightgrey': 'gray'
+        };
+
+        return colorMap[cssColor.toLowerCase()] || 'white';
+    }
+
+    /**
+     * Check if a style should be rendered in terminal
+     */
+    shouldRenderStyle(styleType: string, styles?: LogStyles): boolean {
+        if (!styles) return true;
+
+        const styleConfig = (styles as any)[styleType];
+        return styleConfig?.show !== false;
+    }
+
+    /**
+     * Get renderer instance for advanced usage
+     */
+    getRenderer(): TerminalRenderer {
+        return this.renderer;
+    }
+}
+
+// Singleton instance for consistent styling
+export const css2ansiAdapter = new CSS2ANSIAdapter();
+
+/**
+ * Convenience function for quick style adaptation
+ */
+export function adaptToTerminal(
+    level: LogLevel,
+    message: string,
+    timestamp?: string,
+    prefix?: string,
+    location?: string,
+    styles?: LogStyles,
+    presetName?: string
+): ANSIStyle {
+    return css2ansiAdapter.adaptStyles(level, message, timestamp, prefix, location, styles, presetName);
+}