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

package/src/utils/opentui-detection.ts

@@ -0,0 +1,138 @@
+/**
+ * @fileoverview OpenTUI detection and enhancement utilities for core logger
+ */
+
+import { isNode } from './environment.js';
+
+/**
+ * Check if OpenTUI packages are available
+ */
+export async function hasOpenTUI(): Promise<boolean> {
+    if (!isNode) {
+        return false; // OpenTUI is Node.js only
+    }
+    
+    try {
+        // Try to dynamically import OpenTUI core
+        // @ts-expect-error - Optional dependency, may not be installed
+        await import('@opentui/core');
+        return true;
+    } catch (error) {
+        return false;
+    }
+}
+
+/**
+ * Check if OpenTUI enhancement package is available
+ */
+export async function hasOpenTUILogHandler(): Promise<boolean> {
+    if (!isNode) {
+        return false;
+    }
+    
+    try {
+        // @ts-expect-error - Optional dependency, may not be installed
+        await import('@mks2508/better-logger-nodejs-opentui');
+        return true;
+    } catch (error) {
+        return false;
+    }
+}
+
+/**
+ * Dynamically enhance logger with OpenTUI if available
+ */
+export async function tryEnhanceWithOpenTUI(logger: any): Promise<boolean> {
+    try {
+        // Check if both OpenTUI and our enhancement package are available
+        const [hasCore, hasEnhancer] = await Promise.all([
+            hasOpenTUI(),
+            hasOpenTUILogHandler()
+        ]);
+        
+        if (!hasCore || !hasEnhancer) {
+            return false;
+        }
+        
+        // Dynamically import and apply enhancement
+        // @ts-expect-error - Optional dependency, may not be installed
+        const { enhanceLoggerWithOpenTUI } = await import('@mks2508/better-logger-nodejs-opentui');
+        
+        const enhanced = await enhanceLoggerWithOpenTUI(logger, {
+            renderer: {
+                animated: true,
+                theme: 'auto',
+                components: {
+                    badges: true,
+                    progressBars: false,
+                    tables: false,
+                    charts: false
+                }
+            }
+        });
+        
+        return enhanced;
+    } catch (error) {
+        console.warn('Failed to enhance logger with OpenTUI:', error);
+        return false;
+    }
+}
+
+/**
+ * Get OpenTUI environment information
+ */
+export async function getOpenTUIInfo(): Promise<{
+    available: boolean;
+    coreAvailable: boolean;
+    handlerAvailable: boolean;
+    nodeVersion: string | null;
+    terminalSupport: boolean;
+}> {
+    const [coreAvailable, handlerAvailable] = await Promise.all([
+        hasOpenTUI(),
+        hasOpenTUILogHandler()
+    ]);
+    
+    return {
+        available: coreAvailable && handlerAvailable,
+        coreAvailable,
+        handlerAvailable,
+        nodeVersion: isNode ? process.version : null,
+        terminalSupport: isNode ? process.stdout?.isTTY === true : false
+    };
+}
+
+/**
+ * Auto-enhance logger with best available rendering
+ */
+export async function autoEnhanceLogger(logger: any): Promise<{
+    enhanced: boolean;
+    method: 'opentui' | 'ansi' | 'plain';
+    info?: any;
+}> {
+    // Try OpenTUI first
+    const openTUIEnhanced = await tryEnhanceWithOpenTUI(logger);
+    if (openTUIEnhanced) {
+        return {
+            enhanced: true,
+            method: 'opentui',
+            info: await getOpenTUIInfo()
+        };
+    }
+    
+    // Fallback to ANSI colors if in Node.js
+    if (isNode && process.stdout?.isTTY) {
+        return {
+            enhanced: false,
+            method: 'ansi',
+            info: { reason: 'OpenTUI not available, using ANSI colors' }
+        };
+    }
+    
+    // Plain text fallback
+    return {
+        enhanced: false,
+        method: 'plain',
+        info: { reason: 'No enhanced rendering available' }
+    };
+}

package/src/utils/output.ts

@@ -2,9 +2,10 @@
  * @fileoverview Styled output creation utilities for Advanced Logger
  */
 
-import type { LogLevel, StackInfo } from '../types/index.js';
+import type { LogLevel, StackInfo, DevToolsTheme, AdaptiveColors } from '../types/index.js';
 import { formatTimestamp } from './timestamps.js';
 import { StyleBuilder } from '../styling/index.js';
+import { ADAPTIVE_COLORS } from '../constants.js';
 
 /**
  * Style configuration for each log level
@@ -18,6 +19,61 @@ export interface LevelStyleConfig {
     shadow: string;
 }
 
+/**
+ * Detects the current DevTools theme preference
+ */
+export function detectDevToolsTheme(): DevToolsTheme {
+    try {
+        if (typeof window === 'undefined' || !window.matchMedia) {
+            return 'light'; // Safe fallback for SSR or older browsers
+        }
+        
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        return mediaQuery.matches ? 'dark' : 'light';
+    } catch (error) {
+        console.warn('Failed to detect DevTools theme:', error);
+        return 'light'; // Fallback to light theme
+    }
+}
+
+/**
+ * Gets adaptive color based on current DevTools theme
+ */
+export function getAdaptiveColor(colors: AdaptiveColors, theme?: DevToolsTheme): string {
+    const currentTheme = theme ?? detectDevToolsTheme();
+    return colors[currentTheme];
+}
+
+/**
+ * Sets up theme change listener for dynamic updates
+ */
+export function setupThemeChangeListener(callback: (theme: DevToolsTheme) => void): (() => void) | null {
+    try {
+        if (typeof window === 'undefined' || !window.matchMedia) {
+            return null;
+        }
+
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handler = (e: MediaQueryListEvent) => {
+            callback(e.matches ? 'dark' : 'light');
+        };
+
+        // Use newer addEventListener if available, fallback to addListener
+        if (mediaQuery.addEventListener) {
+            mediaQuery.addEventListener('change', handler);
+            return () => mediaQuery.removeEventListener('change', handler);
+        } else if (mediaQuery.addListener) {
+            mediaQuery.addListener(handler);
+            return () => mediaQuery.removeListener?.(handler);
+        }
+
+        return null;
+    } catch (error) {
+        console.warn('Failed to set up theme change listener:', error);
+        return null;
+    }
+}
+
 
 /**
  * Creates styled console output with multiple %c formatters
@@ -27,14 +83,16 @@ export function createStyledOutput(
     levelStyles: Record<LogLevel | 'success', LevelStyleConfig>,
     prefix: string | undefined,
     message: string,
-    stackInfo: StackInfo | null
+    stackInfo: StackInfo | null,
+    autoDetectTheme: boolean = true
 ): [string, ...string[]] {
     const levelConfig = levelStyles[level];
     const timestamp = formatTimestamp();
+    const currentTheme = autoDetectTheme ? detectDevToolsTheme() : 'light';
 
-    // Base styles
+    // Base styles with adaptive colors
     const timestampStyle = new StyleBuilder()
-        .color('#666')
+        .color(getAdaptiveColor(ADAPTIVE_COLORS.timestamp, currentTheme))
         .size('11px')
         .font('Monaco, Consolas, monospace')
         .build();
@@ -52,8 +110,8 @@ export function createStyledOutput(
         .build();
 
     const prefixStyle = new StyleBuilder()
-        .bg('#2d3748')
-        .color('#e2e8f0')
+        .bg(getAdaptiveColor(ADAPTIVE_COLORS.prefixBackground, currentTheme))
+        .color(getAdaptiveColor(ADAPTIVE_COLORS.prefix, currentTheme))
         .padding('2px 6px')
         .rounded('3px')
         .bold()
@@ -62,13 +120,13 @@ export function createStyledOutput(
         .build();
 
     const messageStyle = new StyleBuilder()
-        .color('#2d3748')
+        .color(getAdaptiveColor(ADAPTIVE_COLORS.messageText, currentTheme))
         .font('system-ui, -apple-system, sans-serif')
         .size('14px')
         .build();
 
     const locationStyle = new StyleBuilder()
-        .color('#718096')
+        .color(getAdaptiveColor(ADAPTIVE_COLORS.location, currentTheme))
         .size('11px')
         .font('Monaco, Consolas, monospace')
         .build();

package/test-core-browser.html

@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Core Logger Browser Test</title>
+    <style>
+        body { 
+            font-family: system-ui, sans-serif; 
+            max-width: 800px; 
+            margin: 0 auto; 
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .test-section {
+            background: white;
+            margin: 20px 0;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        button {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            margin: 5px;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        button:hover { background: #0056b3; }
+        .console-note {
+            background: #e9ecef;
+            padding: 10px;
+            border-left: 4px solid #007bff;
+            margin: 10px 0;
+        }
+        .success { color: #28a745; font-weight: bold; }
+        .error { color: #dc3545; font-weight: bold; }
+    </style>
+</head>
+<body>
+    <h1>🧪 Core Logger Browser Test</h1>
+    
+    <div class="console-note">
+        <strong>📋 Instructions:</strong> Open your browser's Developer Console (F12) to see the log output.
+        All tests will show styled output in browser console with CSS formatting.
+    </div>
+
+    <div class="test-section">
+        <h2>Environment Detection</h2>
+        <button onclick="testEnvironment()">Test Environment Detection</button>
+        <div id="env-info"></div>
+    </div>
+
+    <div class="test-section">
+        <h2>Basic Logging</h2>
+        <button onclick="testBasicLogging()">Test Basic Levels</button>
+        <p>Check console for styled output with gradients and colors.</p>
+    </div>
+
+    <div class="test-section">
+        <h2>Scoped Logger</h2>
+        <button onclick="testScopedLogger()">Test Scoped Logging</button>
+        <p>Should show prefixed messages in console.</p>
+    </div>
+
+    <div class="test-section">
+        <h2>Advanced Features</h2>
+        <button onclick="testAdvancedFeatures()">Test Tables & Groups</button>
+        <p>Should use native browser console.table() and grouping.</p>
+    </div>
+
+    <div class="test-section">
+        <h2>Performance Timers</h2>
+        <button onclick="testTimers()">Test Timers</button>
+        <p>Should measure and log execution time.</p>
+    </div>
+
+    <div class="test-section">
+        <h2>Custom Handlers</h2>
+        <button onclick="testHandlers()">Test Custom Handler</button>
+        <p>Should trigger custom handler alongside console output.</p>
+    </div>
+
+    <div class="test-section">
+        <h2>Results</h2>
+        <div id="results"></div>
+    </div>
+
+    <script type="module">
+        // Import the core logger
+        import logger from './packages/core/dist/index.js';
+        
+        // Make logger available globally for tests
+        window.logger = logger;
+        window.testResults = [];
+
+        // Test functions
+        window.testEnvironment = function() {
+            console.log('=== Environment Detection Test ===');
+            
+            const info = {
+                userAgent: navigator.userAgent,
+                platform: navigator.platform,
+                language: navigator.language,
+                cookiesEnabled: navigator.cookieEnabled,
+                onLine: navigator.onLine,
+                colorScheme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+            };
+            
+            logger.info('Browser environment detected');
+            logger.info('User Agent: ' + info.userAgent);
+            logger.info('Platform: ' + info.platform);
+            logger.info('Color Scheme: ' + info.colorScheme);
+            
+            document.getElementById('env-info').innerHTML = `
+                <p><strong>Platform:</strong> ${info.platform}</p>
+                <p><strong>Color Scheme:</strong> ${info.colorScheme}</p>
+                <p class="success">✅ Environment detection working</p>
+            `;
+            
+            window.testResults.push('Environment: ✅ Passed');
+            updateResults();
+        };
+
+        window.testBasicLogging = function() {
+            console.log('=== Basic Logging Test ===');
+            
+            logger.debug('Debug message - should be styled with gray gradient');
+            logger.info('Info message - should be styled with blue gradient');
+            logger.warn('Warning message - should be styled with yellow gradient');
+            logger.error('Error message - should be styled with red gradient');
+            logger.critical('Critical message - should be styled with dark red gradient');
+            
+            console.log('Check above for styled console output with gradients and colors');
+            window.testResults.push('Basic Logging: ✅ Passed');
+            updateResults();
+        };
+
+        window.testScopedLogger = function() {
+            console.log('=== Scoped Logger Test ===');
+            
+            const apiLogger = logger.scope('API');
+            const dbLogger = logger.scope('DATABASE');
+            
+            apiLogger.info('API request started');
+            apiLogger.warn('API rate limit warning');
+            apiLogger.error('API request failed');
+            
+            dbLogger.info('Database connection established');
+            dbLogger.warn('Slow query detected');
+            
+            window.testResults.push('Scoped Logging: ✅ Passed');
+            updateResults();
+        };
+
+        window.testAdvancedFeatures = function() {
+            console.log('=== Advanced Features Test ===');
+            
+            // Test table
+            const sampleData = [
+                { name: 'Alice', age: 25, role: 'Developer' },
+                { name: 'Bob', age: 30, role: 'Designer' },
+                { name: 'Carol', age: 28, role: 'Manager' }
+            ];
+            
+            logger.table(sampleData);
+            
+            // Test groups
+            logger.group('Database Operations');
+            logger.info('Connecting to database');
+            logger.info('Executing complex query');
+            logger.group('Transaction Details', true); // collapsed
+            logger.info('Transaction started');
+            logger.info('Updating records');
+            logger.groupEnd();
+            logger.info('Transaction completed');
+            logger.groupEnd();
+            
+            window.testResults.push('Advanced Features: ✅ Passed');
+            updateResults();
+        };
+
+        window.testTimers = function() {
+            console.log('=== Performance Timers Test ===');
+            
+            logger.time('operation-1');
+            logger.time('operation-2');
+            
+            setTimeout(() => {
+                logger.timeEnd('operation-1');
+                
+                setTimeout(() => {
+                    logger.timeEnd('operation-2');
+                    window.testResults.push('Timers: ✅ Passed');
+                    updateResults();
+                }, 150);
+            }, 100);
+        };
+
+        window.testHandlers = function() {
+            console.log('=== Custom Handlers Test ===');
+            
+            let handlerCalled = false;
+            const testHandler = {
+                handle: (level, message, args, metadata) => {
+                    console.log('🔧 Custom handler received:', { level, message, timestamp: metadata.timestamp });
+                    handlerCalled = true;
+                }
+            };
+            
+            logger.addHandler(testHandler);
+            logger.info('This message should trigger the custom handler');
+            
+            setTimeout(() => {
+                if (handlerCalled) {
+                    window.testResults.push('Custom Handlers: ✅ Passed');
+                } else {
+                    window.testResults.push('Custom Handlers: ❌ Failed');
+                }
+                updateResults();
+            }, 50);
+        };
+
+        function updateResults() {
+            const resultsDiv = document.getElementById('results');
+            resultsDiv.innerHTML = '<h3>Test Results:</h3>' + 
+                window.testResults.map(result => `<p>${result}</p>`).join('');
+        }
+
+        // Auto-run environment test
+        console.log('🚀 Core Logger Browser Test Started');
+        console.log('📍 Check console output for styled logs with CSS gradients');
+    </script>
+</body>
+</html>

package/test-core-node.js

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+
+/**
+ * Test script for core logger in Node.js environment
+ */
+console.log('=== Testing Core Logger in Node.js ===\n');
+
+// Test ES module import
+import logger from './packages/core/dist/index.js';
+
+console.log('Environment detection:');
+console.log('- Runtime:', process.versions.node ? 'Node.js' : 'Unknown');
+console.log('- Colors supported:', process.stdout.isTTY);
+console.log('- File system available:', 'Yes (Node.js)');
+console.log();
+
+console.log('Testing basic logging:');
+logger.info('Hello from Node.js!');
+logger.warn('This is a warning message');
+logger.error('This is an error message');
+logger.critical('This should work in Node.js (critical level)');
+console.log();
+
+console.log('Testing scoped logger:');
+const apiLogger = logger.scope('API');
+apiLogger.info('API request started');
+apiLogger.error('API request failed');
+console.log();
+
+console.log('Testing timers:');
+logger.time('test-operation');
+setTimeout(() => {
+    logger.timeEnd('test-operation');
+    console.log();
+    
+    console.log('Testing table (Node.js plain text):');
+    const data = [
+        { name: 'Alice', age: 25, role: 'Developer' },
+        { name: 'Bob', age: 30, role: 'Designer' },
+        { name: 'Carol', age: 28, role: 'Manager' }
+    ];
+    logger.table(data);
+    console.log();
+    
+    console.log('Testing groups:');
+    logger.group('Database Operations');
+    logger.info('Connecting to database');
+    logger.info('Executing query');
+    logger.groupEnd();
+    console.log();
+    
+    console.log('Testing custom handler (mock):');
+    const mockHandler = {
+        handle: (level, message, args, metadata) => {
+            console.log(`Custom handler received: [${level.toUpperCase()}] ${message}`);
+        }
+    };
+    logger.addHandler(mockHandler);
+    logger.info('This should trigger custom handler');
+    console.log();
+    
+    console.log('✅ Node.js tests completed successfully!');
+}, 100);