@mks2508/better-logger 0.0.2-alpha.2 → 0.3.0

package/src/styling/SmartPresets.ts

@@ -0,0 +1,288 @@
+/**
+ * @fileoverview Smart presets for simplified logger configuration
+ */
+
+import type { LogStyles, LogLayout } from '../types/index.js';
+
+/**
+ * Smart presets that configure the entire log appearance
+ */
+export const SMART_PRESETS: Record<string, LogStyles> = {
+    /**
+     * Default preset - works perfectly out-of-the-box
+     * Clean, readable, automatically adaptive to dark/light themes
+     */
+    default: {
+        layout: {
+            spacing: 'normal',
+            innerPadding: '2px',
+            outerMargin: '1px'
+        },
+        timestamp: {
+            show: true,
+            color: 'auto', // Automatically adaptive
+            font: 'Monaco, Consolas, monospace',
+            size: '11px'
+        },
+        level: {
+            show: true,
+            style: 'badge',
+            uppercase: false,
+            padding: '2px 8px'
+        },
+        prefix: {
+            show: true,
+            style: 'dark', // Automatically adaptive
+            padding: '2px 6px'
+        },
+        message: {
+            show: true,
+            color: 'auto', // Automatically adaptive
+            font: 'system-ui, -apple-system, sans-serif',
+            size: '14px'
+        },
+        location: {
+            show: true,
+            color: 'auto', // Automatically adaptive
+            font: 'Monaco, Consolas, monospace',
+            size: '11px'
+        }
+    },
+
+    /**
+     * Cyberpunk preset - neon colors, glowing effects, dark theme
+     */
+    cyberpunk: {
+        layout: {
+            spacing: 'compact',
+            innerPadding: '1px',
+            outerMargin: '0px'
+        },
+        timestamp: {
+            show: true,
+            color: '#00ffff',
+            font: 'Monaco, Consolas, monospace',
+            size: '10px',
+            style: 'neon'
+        },
+        level: {
+            show: true,
+            style: 'glowing',
+            uppercase: true,
+            padding: '2px 8px'
+        },
+        prefix: {
+            show: true,
+            color: '#ff0080',
+            background: 'rgba(255, 0, 128, 0.1)',
+            border: '1px solid #ff0080',
+            style: 'neon'
+        },
+        message: {
+            show: true,
+            color: '#00ff41',
+            font: 'Monaco, Consolas, monospace',
+            size: '13px'
+        },
+        location: {
+            show: false // Hidden for cleaner look
+        },
+        backdrop: 'blur(2px)',
+        transparency: 0.9
+    },
+
+    /**
+     * Glassmorphism preset - modern blur effects, transparency
+     */
+    glassmorphism: {
+        layout: {
+            spacing: 'spacious',
+            innerPadding: '4px',
+            outerMargin: '2px'
+        },
+        timestamp: {
+            show: true,
+            color: 'auto',
+            font: 'system-ui, sans-serif',
+            size: '11px',
+            style: 'glassmorphic'
+        },
+        level: {
+            show: true,
+            style: 'glassmorphic',
+            uppercase: false,
+            padding: '4px 12px'
+        },
+        prefix: {
+            show: true,
+            style: 'glassmorphic',
+            padding: '3px 8px'
+        },
+        message: {
+            show: true,
+            color: 'auto',
+            font: 'system-ui, sans-serif',
+            size: '14px'
+        },
+        location: {
+            show: true,
+            color: 'auto',
+            font: 'system-ui, sans-serif',
+            size: '11px',
+            style: 'glassmorphic'
+        },
+        backdrop: 'blur(10px)',
+        transparency: 0.8
+    },
+
+    /**
+     * Minimal preset - clean, no decorations, maximum readability
+     */
+    minimal: {
+        layout: {
+            spacing: 'compact',
+            innerPadding: '0px',
+            outerMargin: '0px'
+        },
+        timestamp: {
+            show: false // Hidden for minimal look
+        },
+        level: {
+            show: true,
+            style: 'flat',
+            uppercase: true,
+            padding: '0px 4px',
+            border: 'none',
+            background: 'transparent'
+        },
+        prefix: {
+            show: true,
+            style: 'flat',
+            padding: '0px 4px',
+            border: 'none',
+            background: 'transparent'
+        },
+        message: {
+            show: true,
+            color: 'auto',
+            font: 'system-ui, sans-serif',
+            size: '14px'
+        },
+        location: {
+            show: false // Hidden for minimal look
+        }
+    },
+
+    /**
+     * Debug preset - monospace, detailed, compact for development
+     */
+    debug: {
+        layout: {
+            spacing: 'compact',
+            innerPadding: '1px',
+            outerMargin: '0px'
+        },
+        timestamp: {
+            show: true,
+            color: 'auto',
+            font: 'Monaco, Consolas, monospace',
+            size: '10px'
+        },
+        level: {
+            show: true,
+            style: 'compact',
+            uppercase: true,
+            padding: '1px 4px',
+            font: 'Monaco, Consolas, monospace',
+            size: '10px'
+        },
+        prefix: {
+            show: true,
+            style: 'compact',
+            padding: '1px 4px',
+            font: 'Monaco, Consolas, monospace',
+            size: '10px'
+        },
+        message: {
+            show: true,
+            color: 'auto',
+            font: 'Monaco, Consolas, monospace',
+            size: '12px'
+        },
+        location: {
+            show: true,
+            color: 'auto',
+            font: 'Monaco, Consolas, monospace',
+            size: '10px',
+            style: 'clickable'
+        }
+    },
+
+    /**
+     * Production preset - clean, essential info only
+     */
+    production: {
+        layout: {
+            spacing: 'normal',
+            innerPadding: '2px',
+            outerMargin: '1px'
+        },
+        timestamp: {
+            show: true,
+            color: 'auto',
+            font: 'system-ui, sans-serif',
+            size: '11px'
+        },
+        level: {
+            show: true,
+            style: 'badge',
+            uppercase: false,
+            padding: '2px 6px'
+        },
+        prefix: {
+            show: false // Hidden in production
+        },
+        message: {
+            show: true,
+            color: 'auto',
+            font: 'system-ui, sans-serif',
+            size: '14px'
+        },
+        location: {
+            show: false // Hidden in production
+        }
+    }
+};
+
+/**
+ * Get a smart preset by name
+ */
+export function getSmartPreset(name: string): LogStyles | null {
+    return SMART_PRESETS[name] || null;
+}
+
+/**
+ * List all available smart presets
+ */
+export function getAvailablePresets(): string[] {
+    return Object.keys(SMART_PRESETS);
+}
+
+/**
+ * Check if a preset exists
+ */
+export function hasPreset(name: string): boolean {
+    return name in SMART_PRESETS;
+}
+
+/**
+ * Preset descriptions for help/documentation
+ */
+export const PRESET_DESCRIPTIONS: Record<string, string> = {
+    default: 'Clean, readable, automatically adaptive to dark/light themes',
+    cyberpunk: 'Neon colors, glowing effects, perfect for dark themes',
+    glassmorphism: 'Modern blur effects with transparency and spacious layout',
+    minimal: 'Clean and simple, no decorations, maximum readability',
+    debug: 'Monospace fonts, detailed info, compact layout for development',
+    production: 'Professional look with essential information only'
+};

package/src/styling/StyleBuilder.ts

@@ -84,6 +84,20 @@ export class StyleBuilder {
         return this;
     }
 
+    /**
+     * Set monospace font family (alias for common monospace fonts)
+     */
+    mono(): StyleBuilder {
+        return this.font('Monaco, Consolas, "Courier New", monospace');
+    }
+
+    /**
+     * Set system font family (alias for system fonts)
+     */
+    system(): StyleBuilder {
+        return this.font('system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif');
+    }
+
     /**
      * Add font size
      */

package/src/styling/index.ts

@@ -9,4 +9,19 @@ export {
     THEME_BANNERS, 
     detectBannerCapabilities, 
     displayInitBanner 
-} from './banners.js';
+} from './banners.js';
+export { 
+    TimestampStyler, 
+    LevelStyler, 
+    PrefixStyler, 
+    MessageStyler, 
+    LocationStyler 
+} from './SemanticStyles.js';
+export { LogStyleBuilder, createLogStyleBuilder } from './LogStyleBuilder.js';
+export { 
+    SMART_PRESETS, 
+    getSmartPreset, 
+    getAvailablePresets, 
+    hasPreset, 
+    PRESET_DESCRIPTIONS 
+} from './SmartPresets.js';

package/src/styling-module.ts

@@ -214,7 +214,7 @@ export const groupEnd = () => styledLogger.groupEnd();
 export const time = (label: string) => styledLogger.time(label);
 export const timeEnd = (label: string) => styledLogger.timeEnd(label);
 export const setGlobalPrefix = (prefix: string) => styledLogger.setGlobalPrefix(prefix);
-export const createScopedLogger = (prefix: string) => styledLogger.createScopedLogger(prefix);
+export const scope = (prefix: string) => styledLogger.scope(prefix);
 export const setVerbosity = (level: any) => styledLogger.setVerbosity(level);
 export const setTheme = (theme: ThemeVariant) => styledLogger.setTheme(theme);
 export const setBannerType = (bannerType: BannerType) => styledLogger.setBannerType(bannerType);

package/src/types/core.ts

@@ -28,6 +28,11 @@ export type Verbosity = LogLevel | 'silent';
  */
 export type ThemeVariant = 'default' | 'dark' | 'light' | 'neon' | 'minimal' | 'cyberpunk';
 
+/**
+ * DevTools theme detection
+ */
+export type DevToolsTheme = 'light' | 'dark';
+
 /**
  * Banner types for different visual approaches
  */
@@ -50,6 +55,7 @@ export interface LoggerConfig {
     theme?: ThemeVariant;
     bannerType?: BannerType;
     bufferSize?: number;
+    autoDetectTheme?: boolean;
 }
 
 /**
@@ -77,4 +83,58 @@ export interface StyleOptions {
     width?: number;
     height?: number;
     padding?: string;
+}
+
+/**
+ * Adaptive color configuration for light/dark themes
+ */
+export interface AdaptiveColors {
+    light: string;
+    dark: string;
+}
+
+/**
+ * Spacing configuration for log elements
+ */
+export type SpacingType = 'compact' | 'normal' | 'spacious';
+
+/**
+ * Layout configuration for log structure
+ */
+export interface LogLayout {
+    spacing: SpacingType;
+    innerPadding?: string;
+    outerMargin?: string;
+    separator?: string;
+}
+
+/**
+ * Configuration for individual log parts
+ */
+export interface LogPartConfig {
+    show?: boolean;
+    style?: string;
+    font?: string;
+    size?: string;
+    color?: string; // Automatically adaptive by default
+    background?: string;
+    padding?: string;
+    margin?: string;
+    border?: string;
+    shadow?: string;
+    uppercase?: boolean;
+}
+
+/**
+ * Complete log styles configuration
+ */
+export interface LogStyles {
+    layout?: LogLayout;
+    timestamp?: LogPartConfig;
+    level?: LogPartConfig;
+    prefix?: LogPartConfig;
+    message?: LogPartConfig;
+    location?: LogPartConfig;
+    backdrop?: string;
+    transparency?: number;
 }

package/src/types/index.ts

@@ -7,12 +7,18 @@ export type {
     LogLevel,
     Verbosity,
     ThemeVariant,
+    DevToolsTheme,
     BannerType,
     ExportFormat,
     LoggerConfig,
     StackInfo,
     TimerEntry,
     StyleOptions,
+    AdaptiveColors,
+    SpacingType,
+    LogLayout,
+    LogPartConfig,
+    LogStyles,
 } from './core.js';
 
 export { LOG_LEVELS } from './core.js';

package/src/utils/environment.ts

@@ -0,0 +1,94 @@
+/**
+ * @fileoverview Environment detection utilities for Universal Logger
+ */
+
+/**
+ * Checks if running in Node.js environment
+ */
+export const isNode = typeof process !== 'undefined' && 
+                      process.versions && 
+                      process.versions.node;
+
+/**
+ * Checks if running in browser environment
+ */
+export const isBrowser = typeof window !== 'undefined' && 
+                          typeof document !== 'undefined';
+
+/**
+ * Checks if running in web worker environment
+ */
+export const isWebWorker = typeof self !== 'undefined' && 
+                            typeof (self as any).importScripts === 'function';
+
+/**
+ * Checks if running in Deno environment
+ */
+export const isDeno = typeof globalThis !== 'undefined' && 
+                      'Deno' in globalThis;
+
+/**
+ * Gets the current runtime environment
+ */
+export function getRuntimeEnvironment(): 'node' | 'browser' | 'webworker' | 'deno' | 'unknown' {
+    if (isNode) return 'node';
+    if (isBrowser) return 'browser';
+    if (isWebWorker) return 'webworker';
+    if (isDeno) return 'deno';
+    return 'unknown';
+}
+
+/**
+ * Checks if colors/styling should be supported in current environment
+ */
+export function supportsColors(): boolean {
+    if (isBrowser) {
+        // Browser always supports CSS colors
+        return true;
+    }
+    
+    if (isNode) {
+        // Check if Node.js supports colors
+        return process.stdout?.isTTY === true || 
+               process.env.FORCE_COLOR === '1' ||
+               process.env.FORCE_COLOR === 'true';
+    }
+    
+    return false;
+}
+
+/**
+ * Checks if CSS styling is supported (browser-only feature)
+ */
+export function supportsCSSColors(): boolean {
+    return isBrowser;
+}
+
+/**
+ * Checks if ANSI colors are supported (terminal environments)
+ */
+export function supportsANSIColors(): boolean {
+    if (isNode) {
+        return process.stdout?.isTTY === true || 
+               process.env.FORCE_COLOR === '1' ||
+               process.env.FORCE_COLOR === 'true';
+    }
+    
+    return false;
+}
+
+/**
+ * Gets environment-specific information
+ */
+export function getEnvironmentInfo() {
+    const env = getRuntimeEnvironment();
+    
+    return {
+        runtime: env,
+        supportsColors: supportsColors(),
+        supportsCSSColors: supportsCSSColors(),
+        supportsANSIColors: supportsANSIColors(),
+        isProduction: isNode ? process.env.NODE_ENV === 'production' : false,
+        version: isNode ? process.versions.node : (isBrowser ? navigator.userAgent : 'unknown')
+    };
+}

package/src/utils/formatting.ts

@@ -0,0 +1,142 @@
+/**
+ * @fileoverview Formatting utilities for Universal Logger
+ */
+
+import type { LogLevel, StackInfo } from '../types/index.js';
+import { formatTimestamp } from './timestamps.js';
+
+/**
+ * Creates plain text output for any environment
+ * No colors, no styling - maximum compatibility
+ */
+export function createPlainOutput(
+    level: LogLevel,
+    message: string,
+    prefix?: string,
+    stackInfo?: StackInfo | null
+): string {
+    const timestamp = formatTimestamp();
+    const timeStr = timestamp.slice(11, 23); // HH:MM:SS.mmm
+    
+    let output = `[${timeStr}] [${level.toUpperCase()}]`;
+    
+    if (prefix) {
+        output += ` [${prefix}]`;
+    }
+    
+    output += ` ${message}`;
+    
+    if (stackInfo) {
+        output += ` (${stackInfo.file}:${stackInfo.line}:${stackInfo.column})`;
+    }
+    
+    return output;
+}
+
+/**
+ * Gets the appropriate log method for the level
+ * Uses different console methods for better semantics
+ */
+export function getConsoleMethod(level: LogLevel): 'log' | 'info' | 'warn' | 'error' {
+    switch (level) {
+        case 'debug':
+            return 'log';
+        case 'info':
+            return 'info';
+        case 'warn':
+            return 'warn';
+        case 'error':
+        case 'critical':
+            return 'error';
+        default:
+            return 'log';
+    }
+}
+
+/**
+ * Create a simple log entry object for handlers
+ */
+export function createLogEntry(
+    level: LogLevel,
+    message: string,
+    args: any[],
+    prefix?: string,
+    stackInfo?: StackInfo | null
+) {
+    return {
+        timestamp: formatTimestamp(),
+        level: level.toUpperCase(),
+        prefix,
+        message,
+        args: args.slice(1), // Exclude the first message argument
+        location: stackInfo ? {
+            file: stackInfo.file,
+            line: stackInfo.line,
+            column: stackInfo.column,
+            function: stackInfo.function
+        } : undefined,
+        raw: args
+    };
+}
+
+/**
+ * Format data for table display in plain text
+ */
+export function formatTablePlain(data: any, columns?: string[]): string {
+    try {
+        if (Array.isArray(data)) {
+            if (data.length === 0) return '[Empty Array]';
+            
+            // Simple array formatting
+            if (typeof data[0] !== 'object') {
+                return data.map((item, i) => `${i}: ${item}`).join('\n');
+            }
+            
+            // Object array formatting
+            const keys = columns || Object.keys(data[0] || {});
+            const header = keys.join('\t');
+            const rows = data.map(item => 
+                keys.map(key => String(item[key] || '')).join('\t')
+            );
+            
+            return [header, ...rows].join('\n');
+        }
+        
+        if (typeof data === 'object' && data !== null) {
+            // Simple object formatting
+            return Object.entries(data)
+                .map(([key, value]) => `${key}: ${value}`)
+                .join('\n');
+        }
+        
+        return String(data);
+    } catch (error) {
+        return `[Error formatting table: ${error}]`;
+    }
+}
+
+/**
+ * Safe object serialization for logging
+ */
+export function safeSerialize(obj: any, maxDepth: number = 3, currentDepth: number = 0): any {
+    if (currentDepth >= maxDepth) {
+        return '[Max Depth Reached]';
+    }
+    
+    if (obj === null) return null;
+    if (obj === undefined) return '[undefined]';
+    if (typeof obj === 'function') return '[Function]';
+    if (obj instanceof Error) return `[Error: ${obj.message}]`;
+    if (obj instanceof Date) return obj.toISOString();
+    if (typeof obj !== 'object') return obj;
+    
+    if (Array.isArray(obj)) {
+        return obj.map(item => safeSerialize(item, maxDepth, currentDepth + 1));
+    }
+    
+    const result: any = {};
+    for (const [key, value] of Object.entries(obj)) {
+        result[key] = safeSerialize(value, maxDepth, currentDepth + 1);
+    }
+    return result;
+}

package/src/utils/index.ts

@@ -14,5 +14,8 @@ export {
     generateLogId, 
     escapeHtml, 
     safeStringify,
+    detectDevToolsTheme,
+    getAdaptiveColor,
+    setupThemeChangeListener,
     type LevelStyleConfig 
 } from './output.js';