@crimsonsunset/jsg-logger 1.6.0 → 1.7.2

package/index.js

@@ -6,13 +6,38 @@
 import pino from 'pino';
 import {configManager} from './config/config-manager.js';
 import {COMPONENT_SCHEME} from './config/component-schemes.js';
-import defaultConfig from './config/default-config.json' with { type: 'json' };
-import {getEnvironment, isBrowser, isCLI, forceEnvironment} from './utils/environment-detector.js';
+import defaultConfig from './config/default-config.json' with {type: 'json'};
+import {forceEnvironment, getEnvironment, isBrowser, isCLI} from './utils/environment-detector.js';
 import {createBrowserFormatter} from './formatters/browser-formatter.js';
 import {createCLIFormatter} from './formatters/cli-formatter.js';
 import {createServerFormatter, getServerConfig} from './formatters/server-formatter.js';
 import {LogStore} from './stores/log-store.js';
 
+// Check default config for devtools at module load time
+// This allows bundlers to tree-shake if disabled
+const defaultDevtoolsEnabled = defaultConfig.devtools?.enabled ?? false;
+
+// Conditional static import - bundlers can eliminate if condition is false
+// If defaultDevtoolsEnabled is false, bundler removes this entire block
+// Use lazy initialization to avoid top-level await (which would make module async)
+let devtoolsModule = null;
+let devtoolsModulePromise = null;
+if (defaultDevtoolsEnabled) {
+    console.log('[JSG-LOGGER] DevTools module pre-loading started (default config enabled)');
+    // Start loading immediately but don't await (non-blocking)
+    // Bundlers can still analyze this static import for tree-shaking
+    devtoolsModulePromise = import('./devtools/dist/panel-entry.js').then(module => {
+        devtoolsModule = module;
+        console.log('[JSG-LOGGER] DevTools module pre-loaded successfully');
+        return module;
+    }).catch(error => {
+        console.error('[JSG-LOGGER] DevTools module pre-load failed:', error);
+        return null;
+    });
+} else {
+    console.log('[JSG-LOGGER] DevTools module NOT pre-loaded (default config disabled - will tree-shake)');
+}
+
 /**
  * Main Logger Class
  * Manages logger instances and provides the public API
@@ -28,6 +53,9 @@ class JSGLogger {
         this.environment = null; // Will be set after config loads
         this.initialized = false;
         this.components = {}; // Auto-discovery getters
+        
+        // Initialize component getters with safe factories that always return loggers
+        this._initializeSafeComponentGetters();
     }
 
     /**
@@ -36,21 +64,39 @@ class JSGLogger {
      * @returns {Promise<Object>} Enhanced logger exports with controls API
      */
     static async getInstance(options = {}) {
+        const hasOptions = options && Object.keys(options).length > 0;
+
         if (!JSGLogger._instance) {
+            // First time initialization
             JSGLogger._instance = new JSGLogger();
             JSGLogger._enhancedLoggers = await JSGLogger._instance.init(options);
+            
+            // Make runtime controls available globally in browser for debugging
+            if (isBrowser() && typeof window !== 'undefined' && JSGLogger._enhancedLoggers?.controls) {
+                window.JSG_Logger = JSGLogger._enhancedLoggers.controls;
+            }
+        } else if (hasOptions) {
+            // Instance exists but new options provided - reinitialize
+            JSGLogger._enhancedLoggers = await JSGLogger._instance.init(options);
+            
+            // Make runtime controls available globally in browser for debugging
+            // (same as getInstanceSync behavior)
+            if (isBrowser() && typeof window !== 'undefined' && JSGLogger._enhancedLoggers?.controls) {
+                window.JSG_Logger = JSGLogger._enhancedLoggers.controls;
+            }
         }
+
         return JSGLogger._enhancedLoggers;
     }
 
     /**
      * Get singleton instance synchronously (for environments without async support)
-     * @param {Object} options - Initialization options (only used on first call) 
+     * @param {Object} options - Initialization options (only used on first call)
      * @returns {Object} Enhanced logger exports with controls API
      */
     static getInstanceSync(options = {}) {
         const hasOptions = options && Object.keys(options).length > 0;
-        
+
         if (!JSGLogger._instance) {
             // First time initialization
             JSGLogger._instance = new JSGLogger();
@@ -59,7 +105,7 @@ class JSGLogger {
             // Instance exists but new options provided - reinitialize
             JSGLogger._enhancedLoggers = JSGLogger._instance.initSync(options);
         }
-        
+
         return JSGLogger._enhancedLoggers;
     }
 
@@ -70,6 +116,8 @@ class JSGLogger {
      */
     async init(options = {}) {
         try {
+            console.log('[JSG-LOGGER] Initializing logger...', options.configPath ? `configPath: ${options.configPath}` : options.config ? 'inline config provided' : 'using defaults');
+            
             // Load configuration FIRST (before environment detection)
             if (options.configPath || options.config) {
                 await configManager.loadConfig(options.configPath || options.config);
@@ -132,8 +180,14 @@ class JSGLogger {
         try {
             // Load inline config if provided (sync loading for objects)
             if (options && Object.keys(options).length > 0) {
-                // Merge inline config with existing config
-                configManager.config = configManager.mergeConfigs(configManager.config, options);
+                // Reset to default config for clean reinitialization
+                // This ensures each reinit starts from a known state
+                configManager.config = {...defaultConfig};
+
+                // Normalize the inline config first
+                const normalizedOptions = configManager._normalizeConfigStructure(options);
+                // Merge inline config with default config
+                configManager.config = configManager.mergeConfigs(configManager.config, normalizedOptions);
             }
 
             // Apply forceEnvironment if specified in config
@@ -144,6 +198,10 @@ class JSGLogger {
             // NOW determine environment (after config is loaded and forceEnvironment is applied)
             this.environment = getEnvironment();
 
+            // Clear existing loggers for clean reinitialization
+            this.loggers = {};
+            this.components = {};
+
             // Create loggers for all available components using default config
             const components = configManager.getAvailableComponents();
 
@@ -287,7 +345,7 @@ class JSGLogger {
     addUtilityMethods() {
         // Store reference to original createLogger before overriding
         const originalCreateLogger = this.createLogger.bind(this);
-        
+
         // Create logger on demand (reuses existing loggers)
         this.createLogger = (componentName) => {
             if (!this.loggers[componentName]) {
@@ -295,7 +353,7 @@ class JSGLogger {
             }
             return this.loggers[componentName];
         };
-        
+
         // Store the original for internal use
         this._createLoggerOriginal = originalCreateLogger;
     }
@@ -412,6 +470,8 @@ class JSGLogger {
 
                 // Statistics and debugging
                 getStats: () => this.logStore.getStats(),
+                subscribe: (callback) => this.logStore.subscribe(callback),
+                clearLogs: () => this.logStore.clear(),
                 getConfigSummary: () => configManager.getSummary(),
 
                 // Advanced configuration
@@ -428,42 +488,64 @@ class JSGLogger {
 
                 // DevTools panel controls
                 enableDevPanel: async () => {
+                    // Early config check - uses consumer's runtime config
+                    const runtimeDevtoolsEnabled = configManager.config.devtools?.enabled ?? false;
+                    
+                    console.log(`[JSG-LOGGER] enableDevPanel() called - runtime config: ${runtimeDevtoolsEnabled ? 'ENABLED' : 'DISABLED'}`);
+                    
+                    if (!runtimeDevtoolsEnabled) {
+                        console.warn('[JSG-LOGGER] DevTools disabled via config. Set devtools.enabled: true to enable.');
+                        return null;
+                    }
+
                     if (typeof window === 'undefined') {
                         console.warn('[JSG-LOGGER] DevTools panel only available in browser environments');
                         return null;
                     }
 
                     try {
-                        // In development: import source files directly for hot reload
-                        // In production: import built bundle
-                        const isDev = import.meta.env?.DEV || window.location.hostname === 'localhost';
-                        
-                        let module;
-                        if (isDev) {
-                            console.log('🔥 DEV MODE: Attempting to load DevTools from SOURCE for hot reload');
-                            try {
-                                // Fix the import path for Vite dev server
-                                const importPath = '/src/panel-entry.jsx';
-                                console.log('🔍 Importing:', importPath);
-                                module = await import(importPath);
-                                console.log('✅ Source import successful:', module);
-                            } catch (sourceError) {
-                                console.error('❌ Source import failed, falling back to bundle:', sourceError);
-                                const cacheBuster = Date.now();
-                                module = await import(`./devtools/dist/panel-entry.js?v=${cacheBuster}`);
+                        // Use pre-loaded module (from default config) or load dynamically (consumer's runtime config override)
+                        if (!devtoolsModule) {
+                            // Check if we have a promise for pre-loading
+                            if (devtoolsModulePromise) {
+                                console.log('[JSG-LOGGER] Waiting for pre-loaded DevTools module...');
+                                // Wait for pre-load to complete
+                                devtoolsModule = await devtoolsModulePromise;
+                            } else {
+                                // Runtime config override: consumer enabled devtools but default was disabled
+                                // Load on demand via dynamic import
+                                console.log('[JSG-LOGGER] Loading DevTools module dynamically (runtime config override)...');
+                                devtoolsModule = await import('./devtools/dist/panel-entry.js');
                             }
                         } else {
-                            console.log('📦 PROD MODE: Loading DevTools from built bundle');
-                            const cacheBuster = Date.now();
-                            module = await import(`./devtools/dist/panel-entry.js?v=${cacheBuster}`);
+                            console.log('[JSG-LOGGER] Using pre-loaded DevTools module');
+                        }
+                        
+                        if (!devtoolsModule || !devtoolsModule.initializePanel) {
+                            throw new Error('DevTools panel module missing initializePanel export');
                         }
-                        return module.initializePanel();
+                        
+                        console.log('[JSG-LOGGER] Initializing DevTools panel...');
+                        const panel = devtoolsModule.initializePanel();
+                        console.log('[JSG-LOGGER] DevTools panel initialized successfully');
+                        return panel;
                     } catch (error) {
                         console.error('[JSG-LOGGER] Failed to load DevTools panel:', error);
+                        console.error('[JSG-LOGGER] If using npm link, ensure Vite config has: server.fs.allow: [\'..\']');
                         return null;
                     }
                 },
 
+                disableDevPanel: () => {
+                    if (typeof window !== 'undefined' && window.JSG_DevTools?.destroy) {
+                        window.JSG_DevTools.destroy();
+                        console.log('[JSG-LOGGER] DevTools panel disabled and destroyed');
+                        return true;
+                    }
+                    console.warn('[JSG-LOGGER] DevTools panel not loaded or already destroyed');
+                    return false;
+                },
+
                 // System controls
                 refresh: () => this.refreshLoggers(),
                 reset: () => {
@@ -483,19 +565,19 @@ class JSGLogger {
     createDirectBrowserLogger(componentName) {
         const formatter = createBrowserFormatter(componentName, this.logStore);
         const levels = ['trace', 'debug', 'info', 'warn', 'error', 'fatal'];
-        const levelMap = { trace: 10, debug: 20, info: 30, warn: 40, error: 50, fatal: 60 };
-        
+        const levelMap = {trace: 10, debug: 20, info: 30, warn: 40, error: 50, fatal: 60};
+
         const logger = {};
-        
+
         levels.forEach(level => {
             logger[level] = (first, ...args) => {
                 const logLevel = levelMap[level];
-                
+
                 // Check if level should be logged
                 const effectiveLevel = configManager.getEffectiveLevel(componentName);
                 const minLevel = levelMap[effectiveLevel] || 30;
                 if (logLevel < minLevel) return;
-                
+
                 // Create log data object
                 let logData = {
                     level: logLevel,
@@ -503,7 +585,7 @@ class JSGLogger {
                     name: componentName,
                     v: 1
                 };
-                
+
                 // Handle different argument patterns
                 if (typeof first === 'string') {
                     logData.msg = first;
@@ -519,18 +601,18 @@ class JSGLogger {
                         logData.msg = args[0];
                     }
                 }
-                
+
                 // Use our beautiful formatter
                 formatter.write(JSON.stringify(logData));
             };
         });
-        
+
         // Add Pino-compatible properties
         logger._componentEmoji = configManager.getComponentConfig(componentName).emoji;
         logger._componentName = componentName;
         logger._effectiveLevel = configManager.getEffectiveLevel(componentName);
         logger.level = configManager.getEffectiveLevel(componentName);
-        
+
         return logger;
     }
 
@@ -558,9 +640,13 @@ class JSGLogger {
             fatal: console.error
         };
 
+        // No-op logger factory for getComponent
+        const noOpLogger = () => fallback;
+
         return {
             core: fallback,
             createLogger: () => fallback,
+            getComponent: noOpLogger,
             config: {environment: 'fallback'},
             logStore: {getRecent: () => [], clear: () => {}},
             controls: {
@@ -574,20 +660,46 @@ class JSGLogger {
     }
 
     /**
-     * Create auto-discovery getters for easy component access
-     * Supports both kebab-case (original) and camelCase naming
+     * Initialize safe component getters that always return logger factories
+     * This ensures components can be accessed even before initialization
      * @private
      */
+    _initializeSafeComponentGetters() {
+        // Create safe getters for common components that always return a logger factory
+        // These will work even if logger isn't initialized yet
+        const commonComponents = [
+            'reactComponents', 'react-components',
+            'astroComponents', 'astro-components',
+            'astroBuild', 'astro-build',
+            'astroIntegration', 'astro-integration',
+            'contentProcessing', 'content-processing',
+            'textUtils', 'text-utils',
+            'dateUtils', 'date-utils',
+            'pages', 'webComponents', 'web-components',
+            'core', 'api', 'ui', 'database', 'test', 'preact',
+            'auth', 'analytics', 'performance', 'websocket',
+            'notification', 'router', 'cache',
+            'config', 'seo', 'devServer', 'dev-server'
+        ];
+
+        commonComponents.forEach(name => {
+            // Create getter that always returns a logger (no-op if not initialized)
+            this.components[name] = () => this.getComponent(name);
+        });
+    }
+
     _createAutoDiscoveryGetters() {
-        this.components = {};
-        
+        // Don't reset components - preserve safe getters created in constructor
+        // Only add getters for newly created loggers
         Object.keys(this.loggers).forEach(name => {
-            // Original kebab-case name
-            this.components[name] = () => this.getComponent(name);
-            
+            // Only add if not already exists (preserve safe getters)
+            if (!this.components[name]) {
+                this.components[name] = () => this.getComponent(name);
+            }
+
             // camelCase convenience getter
             const camelName = name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
-            if (camelName !== name) {
+            if (camelName !== name && !this.components[camelName]) {
                 this.components[camelName] = () => this.getComponent(name);
             }
         });
@@ -595,35 +707,68 @@ class JSGLogger {
 
     /**
      * Get a specific component logger with auto-creation for custom components
+     * Always returns a logger instance (no-op if initialization failed)
      * @param {string} componentName - Component name to retrieve
-     * @returns {Object} Logger instance (auto-created if needed)
+     * @returns {Object} Logger instance (always returns logger, never undefined)
      */
     getComponent(componentName) {
-        // If logger doesn't exist, auto-create it for custom components
-        if (!this.loggers[componentName]) {
+        // If logger instance isn't initialized, return no-op logger
+        if (!this.initialized || !this.loggers) {
+            return this._createNoOpLogger(componentName);
+        }
+
+        // If logger exists, return it
+        if (this.loggers[componentName]) {
+            return this.loggers[componentName];
+        }
+
+        // Try to create logger - if it fails, return no-op logger
+        try {
             // Check if this is a configured component or custom component
             const hasConfig = configManager.config.components?.[componentName];
             const hasScheme = COMPONENT_SCHEME[componentName];
-            
+
             if (!hasConfig && !hasScheme) {
                 // Custom component - log info and auto-create
                 if (this.loggers.core) {
                     this.loggers.core.debug(`Auto-creating custom component logger: ${componentName}`);
                 }
             }
-            
+
             // Create the logger (getComponentConfig will auto-generate config for custom components)
             this.loggers[componentName] = this.createLogger(componentName);
-            
+
             // Also add to auto-discovery getters
             this.components[componentName] = () => this.getComponent(componentName);
             const camelName = componentName.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
             if (camelName !== componentName) {
                 this.components[camelName] = () => this.getComponent(componentName);
             }
+
+            return this.loggers[componentName];
+        } catch (error) {
+            // If logger creation fails, return no-op logger to prevent crashes
+            console.warn(`[JSG-LOGGER] Failed to create logger for component '${componentName}', using no-op logger:`, error);
+            return this._createNoOpLogger(componentName);
         }
-        
-        return this.loggers[componentName];
+    }
+
+    /**
+     * Create a silent no-op logger that can be safely used when logger isn't available
+     * @param {string} componentName - Component name (for consistency)
+     * @returns {Object} Logger instance with all methods as no-ops
+     * @private
+     */
+    _createNoOpLogger(componentName) {
+        // Silent no-op logger - all methods do nothing
+        return {
+            trace: () => {},
+            debug: () => {},
+            info: () => {},
+            warn: () => {},
+            error: () => {},
+            fatal: () => {}
+        };
     }
 
     /**
@@ -635,7 +780,7 @@ class JSGLogger {
     _createErrorLogger(componentName) {
         const prefix = `[${componentName.toUpperCase()}]`;
         const errorMsg = '⚠️ Component not configured -';
-        
+
         return {
             trace: (msg, ...args) => console.log(`${prefix} ${errorMsg}`, msg, ...args),
             debug: (msg, ...args) => console.log(`${prefix} ${errorMsg}`, msg, ...args),
@@ -658,7 +803,7 @@ class JSGLogger {
             const instance = await JSGLogger.getInstance();
             const logger = instance.getComponent(component);
             const duration = performance.now() - startTime;
-            
+
             if (duration > 1000) {
                 logger.warn(`${operation} took ${duration.toFixed(2)}ms (slow)`);
             } else if (duration > 100) {
@@ -666,7 +811,7 @@ class JSGLogger {
             } else {
                 logger.debug(`${operation} took ${duration.toFixed(2)}ms (fast)`);
             }
-            
+
             return duration;
         } catch (error) {
             // Fallback to console if logger fails

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@crimsonsunset/jsg-logger",
-  "version": "1.6.0",
+  "version": "1.7.2",
   "type": "module",
-  "description": "JSG Logger - Multi-environment logger with smart detection, file-level overrides, and beautiful console formatting",
+  "description": "Multi-environment logger with smart detection, file-level overrides, and beautiful console formatting. Test it live: https://logger.joesangiorgio.com/",
   "main": "index.js",
+  "types": "./index.d.ts",
   "keywords": [
     "logging",
     "pino",
@@ -27,30 +28,48 @@
   },
   "homepage": "https://github.com/crimsonsunset/jsg-logger#readme",
   "dependencies": {
-    "@preact/preset-vite": "^2.10.2",
-    "evergreen-ui": "^7.1.9",
     "lodash.merge": "^4.6.2",
-    "pino": "^9.7.0",
-    "preact": "^10.27.1"
+    "pino": "^9.7.0"
+  },
+  "peerDependencies": {
+    "preact": "^10.27.1",
+    "evergreen-ui": "^7.1.9"
+  },
+  "peerDependenciesMeta": {
+    "preact": {
+      "optional": true
+    },
+    "evergreen-ui": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@preact/preset-vite": "^2.10.2",
+    "evergreen-ui": "^7.1.9",
+    "preact": "^10.27.1",
     "vite": "^5.1.3"
   },
   "files": [
     "index.js",
+    "index.d.ts",
     "config/",
     "formatters/",
     "stores/",
     "utils/",
     "examples/",
     "docs/",
+    "devtools/dist/",
     "README.md",
     "CHANGELOG.md",
     "CONTRIBUTING.md",
     "LICENSE"
   ],
   "exports": {
-    ".": "./index.js",
+    ".": {
+      "import": "./index.js",
+      "require": "./index.js",
+      "types": "./index.d.ts"
+    },
     "./config": "./config/config-manager.js",
     "./config/manager": "./config/config-manager.js",
     "./config/schemes": "./config/component-schemes.js",
@@ -62,25 +81,23 @@
     "./stores/log-store": "./stores/log-store.js",
     "./utils": "./utils/environment-detector.js",
     "./utils/environment": "./utils/environment-detector.js",
+    "./devtools": "./devtools/dist/panel-entry.js",
     "./examples/*": "./examples/*"
   },
   "scripts": {
     "test": "node tests/run-all.js",
     "test:watch": "nodemon --watch . --ext js --exec 'npm test'",
     "dev": "vite",
-    "dev:devtools": "vite",
+    "dev:devtools": "cd devtools && npm run dev",
     "test:devtools": "vite",
     "build:devtools": "cd devtools && npm run build",
-    "release:patch": "npm version patch && npm publish --access public",
-    "release:minor": "npm version minor && npm publish --access public",
-    "release:major": "npm version major && npm publish --access public",
-    "release": "npm run release:patch",
+    "build:devtools:netlify": "npm install && cd devtools && npm install && npm run build:netlify",
+    "preview:devtools": "cd devtools && npm run preview",
+    "release:patch": "node scripts/release.js patch",
+    "release:minor": "node scripts/release.js minor",
+    "release:major": "node scripts/release.js major",
     "publish:public": "npm publish --access public",
     "publish:github": "npm publish --registry=https://npm.pkg.github.com/ --access public",
-    "publish:dual": "npm publish --access public && npm publish --registry=https://npm.pkg.github.com/ --access public",
-    "release:dual:patch": "npm version patch && npm run publish:dual",
-    "release:dual:minor": "npm version minor && npm run publish:dual",
-    "release:dual:major": "npm version major && npm run publish:dual",
     "check": "npm run test && echo 'Package ready for publishing'"
   }
 }