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

package/src/main.ts

@@ -14,10 +14,29 @@ import {
   createScopedLogger,
   cli,
   setTheme,
-} from './Logger.ts';
+  setBannerType,
+  showBanner,
+  logWithSVG,
+  logAnimated,
+  createStyle,
+  stylePresets
+} from './index.js';
 
-// The init banner from Logger.ts is displayed automatically on import.
-console.log("Advanced Logger script loaded. Test functions are now available.");
+import {
+  demonstrateBanners,
+  demonstrateThemes,
+  demonstrateSVG,
+  demonstrateAnimations,
+  demonstrateCLI,
+  demonstrateExports,
+  demonstrateAllFeatures as demoAllFeatures
+} from './example.js';
+
+console.log('%cBetter Logger Demo Ready! 🚀', 
+  'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 10px 20px; border-radius: 8px; font-weight: bold; font-size: 14px;');
+  
+console.log('📋 Available test functions: testDebug(), testBanners(), testThemes(), and more!');
+console.log('💻 CLI Available: cli("/help") for commands');
 
 function testDebug() {
   debug("This is a debug message.", { user: "test", id: 123 });
@@ -86,8 +105,33 @@ function testTrace() {
   innerFunction();
 }
 
+// Visual feature tests
+function testBanners() {
+  demonstrateBanners();
+}
+
+function testThemes() {
+  demonstrateThemes();
+}
+
+function testSVG() {
+  demonstrateSVG();
+}
+
+function testAnimations() {
+  demonstrateAnimations();
+}
+
+function testCLI() {
+  demonstrateCLI();
+}
+
+function testExports() {
+  demonstrateExports();
+}
+
 function testAllFeatures() {
-  group("🌟 Demonstrating All Logger Features");
+  group("🌟 Demonstrating Core Logger Features");
   testDebug();
   testInfo();
   testWarn();
@@ -100,10 +144,16 @@ function testAllFeatures() {
   testScopedLogger();
   testTrace();
   groupEnd();
+  
+  setTimeout(() => {
+    info('🎨 Running visual features demo...');
+    demoAllFeatures();
+  }, 2000);
 }
 
 // Expose functions to global scope for onclick attributes in index.html
 if (typeof window !== 'undefined') {
+  // Core logging tests
   (window as any).testDebug = testDebug;
   (window as any).testInfo = testInfo;
   (window as any).testWarn = testWarn;
@@ -117,10 +167,30 @@ if (typeof window !== 'undefined') {
   (window as any).testTrace = testTrace;
   (window as any).testAllFeatures = testAllFeatures;
   
-  // Expose CLI functions globally
+  // Visual feature tests  
+  (window as any).testBanners = testBanners;
+  (window as any).testThemes = testThemes;
+  (window as any).testSVG = testSVG;
+  (window as any).testAnimations = testAnimations;
+  (window as any).testCLI = testCLI;
+  (window as any).testExports = testExports;
+  
+  // Direct access to library functions
   (window as any).cli = cli;
   (window as any).setTheme = setTheme;
+  (window as any).setBannerType = setBannerType;
+  (window as any).showBanner = showBanner;
+  (window as any).logWithSVG = logWithSVG;
+  (window as any).logAnimated = logAnimated;
+  (window as any).createStyle = createStyle;
+  (window as any).stylePresets = stylePresets;
   
-  // Display CLI usage info
-  console.log('%c🚀 Logger CLI Available! Try: cli("/help")', 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 12px; border-radius: 4px; font-weight: bold;');
+  // Display welcome info
+  setTimeout(() => {
+    console.log('%c💡 Quick Start Guide', stylePresets.info);
+    console.log('🎨 Visual: testBanners(), testThemes(), testSVG(), testAnimations()');
+    console.log('📊 Core: testTable(), testGrouping(), testTiming(), testTrace()');
+    console.log('💻 CLI: cli("/help") - Try commands like "/theme neon", "/banner ascii"');
+    console.log('🌟 Full Demo: testAllFeatures()');
+  }, 1000);
 }

package/src/styling-module.ts

@@ -0,0 +1,244 @@
+/**
+ * @fileoverview Styling Module - Advanced visual features for Better Logger
+ * @version 0.0.1
+ * 
+ * This module provides advanced styling features including SVG support, CSS animations,
+ * themed banners, and visual enhancements for console logging.
+ */
+
+// Import core logger
+import { Logger } from './Logger.js';
+
+// Styling imports
+import {
+    StyleBuilder,
+    StylePresets,
+    THEME_PRESETS,
+    THEME_BANNERS,
+    displayInitBanner,
+    BANNER_VARIANTS
+} from './styling/index.js';
+
+// Types
+import type {
+    ThemeVariant,
+    BannerType,
+    StyleOptions
+} from './types/index.js';
+
+/**
+ * Enhanced Logger with advanced styling capabilities
+ * 
+ * @example
+ * ```typescript
+ * import { StyledLogger } from '@mks2508/better-logger/styling';
+ * 
+ * const logger = new StyledLogger();
+ * logger.setTheme('neon');
+ * logger.logAnimated('🌟 Animated message!');
+ * logger.logWithSVG('Custom SVG Logo', svgContent);
+ * ```
+ */
+export class StyledLogger extends Logger {
+    /**
+     * Log with SVG background image
+     * 
+     * @param message - The message to log
+     * @param svgContent - SVG content as string (optional)
+     * @param options - Styling options
+     * 
+     * @example
+     * ```typescript
+     * logger.logWithSVG('My App', '<svg>...</svg>', {
+     *   width: 400,
+     *   height: 80,
+     *   padding: '40px 200px'
+     * });
+     * ```
+     */
+    logWithSVG(message: string, svgContent?: string, options: StyleOptions = {}): void {
+        super.logWithSVG(message, svgContent, options);
+    }
+
+    /**
+     * Log with animated background gradient
+     * 
+     * @param message - The message to log  
+     * @param duration - Animation duration in seconds
+     * 
+     * @example
+     * ```typescript
+     * logger.logAnimated('🚀 Loading...', 2);
+     * ```
+     */
+    logAnimated(message: string, duration: number = 3): void {
+        super.logAnimated(message, duration);
+    }
+
+    /**
+     * Display banner with specified type
+     * 
+     * @param bannerType - Type of banner to display
+     * 
+     * @example
+     * ```typescript
+     * logger.showBanner('animated');
+     * ```
+     */
+    showBanner(bannerType?: BannerType): void {
+        super.showBanner(bannerType);
+    }
+
+    /**
+     * Set banner type for initialization display
+     * 
+     * @param bannerType - Type of banner to display
+     * 
+     * @example
+     * ```typescript
+     * logger.setBannerType('svg');
+     * ```
+     */
+    setBannerType(bannerType: BannerType): void {
+        super.setBannerType(bannerType);
+    }
+
+    /**
+     * Sets the logger theme with visual banner
+     * 
+     * @param theme - Theme variant to apply
+     * 
+     * @example
+     * ```typescript
+     * logger.setTheme('cyberpunk'); // Shows themed banner
+     * ```
+     */
+    setTheme(theme: ThemeVariant): void {
+        super.setTheme(theme);
+    }
+}
+
+// Create singleton instance
+const styledLogger = new StyledLogger();
+
+/**
+ * Utility functions for creating custom styles
+ * 
+ * @example
+ * ```typescript
+ * import { createStyle, StyleBuilder } from '@mks2508/better-logger/styling';
+ * 
+ * const myStyle = createStyle()
+ *   .bg('linear-gradient(45deg, #ff6b6b, #feca57)')
+ *   .color('white')
+ *   .padding('10px')
+ *   .build();
+ * 
+ * console.log('%cCustom Message', myStyle);
+ * ```
+ */
+export const createStyle = () => new StyleBuilder();
+
+/**
+ * Pre-built style presets
+ * 
+ * @example
+ * ```typescript
+ * import { stylePresets } from '@mks2508/better-logger/styling';
+ * 
+ * console.log('%cSuccess!', stylePresets.success);
+ * console.log('%cError!', stylePresets.error);
+ * ```
+ */
+export const stylePresets = {
+    success: StylePresets.success().build(),
+    error: StylePresets.error().build(),
+    warning: StylePresets.warning().build(),
+    info: StylePresets.info().build(),
+    accent: StylePresets.accent().build(),
+};
+
+/**
+ * Available themes for the logger
+ * 
+ * @example
+ * ```typescript
+ * import { themes } from '@mks2508/better-logger/styling';
+ * 
+ * console.log('Available themes:', Object.keys(themes));
+ * ```
+ */
+export const themes = Object.keys(THEME_PRESETS);
+
+/**
+ * Available banner types
+ * 
+ * @example
+ * ```typescript
+ * import { bannerTypes } from '@mks2508/better-logger/styling';
+ * 
+ * console.log('Available banners:', bannerTypes);
+ * ```
+ */
+export const bannerTypes = Object.keys(BANNER_VARIANTS);
+
+/**
+ * Display initialization banner
+ * 
+ * @param bannerType - Type of banner to display
+ * 
+ * @example
+ * ```typescript
+ * import { showInitBanner } from '@mks2508/better-logger/styling';
+ * 
+ * showInitBanner('animated');
+ * ```
+ */
+export const showInitBanner = (bannerType?: BannerType) => {
+    displayInitBanner(bannerType);
+};
+
+/**
+ * Export individual styled logging methods
+ */
+export const debug = (...args: any[]) => styledLogger.debug(...args);
+export const info = (...args: any[]) => styledLogger.info(...args);
+export const warn = (...args: any[]) => styledLogger.warn(...args);
+export const error = (...args: any[]) => styledLogger.error(...args);
+export const success = (...args: any[]) => styledLogger.success(...args);
+export const critical = (...args: any[]) => styledLogger.critical(...args);
+export const trace = (...args: any[]) => styledLogger.trace(...args);
+export const table = (data: any, columns?: string[]) => styledLogger.table(data, columns);
+export const group = (label: string, collapsed?: boolean) => styledLogger.group(label, collapsed);
+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 setVerbosity = (level: any) => styledLogger.setVerbosity(level);
+export const setTheme = (theme: ThemeVariant) => styledLogger.setTheme(theme);
+export const setBannerType = (bannerType: BannerType) => styledLogger.setBannerType(bannerType);
+export const showBanner = (bannerType?: BannerType) => styledLogger.showBanner(bannerType);
+export const logWithSVG = (message: string, svgContent?: string, options?: StyleOptions) => 
+    styledLogger.logWithSVG(message, svgContent, options);
+export const logAnimated = (message: string, duration?: number) => 
+    styledLogger.logAnimated(message, duration);
+
+// Export the singleton as default
+export default styledLogger;
+
+// Re-export styling utilities
+export {
+    StyleBuilder,
+    StylePresets,
+    THEME_PRESETS,
+    THEME_BANNERS,
+    BANNER_VARIANTS
+} from './styling/index.js';
+
+// Re-export types
+export type {
+    ThemeVariant,
+    BannerType,
+    StyleOptions
+} from './types/index.js';

package/src/utils/stackTrace.ts

@@ -10,7 +10,9 @@ import type { StackInfo } from '../types/index.js';
 export function parseStackTrace(): StackInfo | null {
     try {
         const stack = new Error().stack;
-        if (!stack) return null;
+        if (!stack) {
+            return null;
+        }
 
         const lines = stack.split('\n').filter(line => line.trim());
         
@@ -18,6 +20,10 @@ export function parseStackTrace(): StackInfo | null {
         for (let i = 1; i < lines.length; i++) {
             const line = lines[i];
             
+            if (!line) {
+                continue;
+            }
+            
             // Skip if line contains Logger methods or parseStackTrace
             if (line.includes('parseStackTrace') || 
                 line.includes('Logger.') || 
@@ -47,16 +53,39 @@ export function parseStackTrace(): StackInfo | null {
                 }
             }
 
-            if (match) {
-                const [, functionName, file, line, column] = match;
-                
-                return {
-                    file: file?.split('/').pop()?.split('?')[0] || 'unknown',
-                    line: parseInt(line, 10) || 0,
-                    column: parseInt(column, 10) || 0,
-                    function: functionName?.trim() || undefined,
-                };
+            if (!match) {
+                continue;
+            }
+
+            const [, functionName, file, lineStr, columnStr] = match;
+            
+            if (!file) {
+                continue;
+            }
+            
+            // Process file path - remove query params and get filename
+            const fileParts = file.split('/');
+            const fileName = fileParts[fileParts.length - 1];
+            if (!fileName) {
+                continue;
             }
+            const cleanFileName = fileName.split('?')[0];
+            
+            // Parse line and column numbers
+            const lineNum = lineStr ? parseInt(lineStr, 10) : 0;
+            const columnNum = columnStr ? parseInt(columnStr, 10) : 0;
+            
+            // Clean function name
+            const cleanFunction = functionName && functionName.trim() 
+                ? functionName.trim() 
+                : undefined;
+                
+            return {
+                file: cleanFileName ? cleanFileName : 'unknown',
+                line: lineNum,
+                column: columnNum,
+                function: cleanFunction
+            };
         }
         
         return null;

package/src/utils/timestamps.ts

@@ -29,7 +29,7 @@ export function parseRelativeTime(timeStr: string): number {
     const [, amount, unit] = match;
     const multiplier = TIME_UNITS[unit as keyof typeof TIME_UNITS];
     
-    return parseInt(amount, 10) * multiplier;
+    return parseInt(amount || '0', 10) * multiplier;
 }
 
 /**

package/tsconfig.json

@@ -1,24 +1,50 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "node",
     "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
+    
+    /* Library Build Configuration */
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "emitDeclarationOnly": false,
+    
+    /* Module System */
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
     "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
+    "verbatimModuleSyntax": false,
+    
+    /* Type Checking */
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedIndexedAccess": true,
+    
+    /* Advanced */
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": false,
+    "noEmit": false,
+    "incremental": true,
+    "tsBuildInfoFile": "./dist/.tsbuildinfo"
   },
-  "include": ["src"]
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
 }

package/vite.config.ts

@@ -0,0 +1,84 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig({
+  plugins: [
+    dts({
+      include: ['src/**/*'],
+      exclude: ['src/**/*.test.ts', 'src/**/*.spec.ts', 'src/main.ts', 'src/example.ts'],
+      outDir: 'dist/types',
+      rollupTypes: true,
+      insertTypesEntry: true,
+    })
+  ],
+  build: {
+    lib: {
+      entry: {
+        // Main entry - Full logger with all features
+        index: resolve(__dirname, 'src/index.ts'),
+        
+        // Core module - Minimal logger without advanced features
+        core: resolve(__dirname, 'src/core.ts'),
+        
+        // Styling module - Advanced visual features
+        styling: resolve(__dirname, 'src/styling-module.ts'),
+        
+        // Exports module - Export and remote handlers  
+        exports: resolve(__dirname, 'src/exports-module.ts')
+      },
+      name: 'BetterLogger',
+      formats: ['es', 'cjs'],
+      fileName: (format, entryName) => {
+        const ext = format === 'cjs' ? 'cjs' : 'js';
+        return `${entryName}.${ext}`;
+      }
+    },
+    rollupOptions: {
+      external: [],
+      output: {
+        globals: {},
+        exports: 'named',
+        preserveModules: false,
+        chunkFileNames: 'chunks/[name]-[hash].js',
+        manualChunks: (id) => {
+          // Separate styling features into their own chunk
+          if (id.includes('styling/') || id.includes('banners.ts') || id.includes('themes.ts')) {
+            return 'styling';
+          }
+          // Separate export handlers
+          if (id.includes('handlers/Export') || id.includes('handlers/Remote')) {
+            return 'exports';
+          }
+          // Core functionality
+          if (id.includes('src/types/') || id.includes('src/utils/')) {
+            return 'core';
+          }
+        }
+      }
+    },
+    sourcemap: true,
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: false,
+        drop_debugger: true,
+        pure_funcs: ['console.debug'],
+        passes: 2
+      },
+      mangle: {
+        properties: false,
+        keep_classnames: true,
+        keep_fnames: true
+      },
+      format: {
+        comments: false,
+        preserve_annotations: true
+      }
+    },
+    target: 'es2022'
+  },
+  define: {
+    'process.env.NODE_ENV': JSON.stringify('production')
+  }
+})