@crimsonsunset/jsg-logger 1.7.2 → 1.7.5

package/CHANGELOG.md

@@ -5,6 +5,58 @@ All notable changes to the JSG Logger project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.7.5] - 2025-11-06 🎛️ **DevTools Panel UX Improvements**
+
+### Added
+- **Close Button on DevTools Panel** - Added X button in panel header to unload DevTools
+  - Located next to drag handle for easy access
+  - Hover effect (gray → red) for clear visual feedback
+  - Calls `disableDevPanel()` to completely unload the panel
+  - Logs panel closure using `devtools-ui` component
+
+### Changed
+- **DevTools Toggle Button Text** - Improved button labels to be action-oriented
+  - Unloaded state: "Click to load DevTools" (was "✕ DevTools Unloaded")
+  - Loaded state: "Click to unload DevTools" (was "✓ DevTools Loaded")
+  - Clearer indication of what action will occur on click
+
+### Fixed
+- **Button State Synchronization** - Fixed DevTools toggle button getting out of sync
+  - Added `jsg-devtools-destroyed` custom event dispatched when panel is destroyed
+  - App component listens for event to update button state automatically
+  - Button state now stays in sync whether panel is closed via X button or toggle button
+  - Uses event-driven architecture matching existing `devtoolschange` pattern
+
+### Technical Details
+- **Files Modified**: `devtools/src/components/FloatingButton.jsx`, `devtools/src/components/DevToolsPanel.jsx`, `devtools/src/panel-entry.jsx`, `devtools/src/App.jsx`
+- **Event System**: Custom event `jsg-devtools-destroyed` dispatched on panel destruction (both animation and immediate paths)
+- **Result**: Improved UX with clear close action and reliable state synchronization
+
+## [1.7.4] - 2025-11-06 🎛️ **DevTools Logging Cleanup**
+
+### Fixed
+- **Meta-Logger Scope** - Clarified meta-logger is for bootstrap logs only
+  - Removed `'logger'` mode option (now just `true`/`false`)
+  - Updated JSDoc to emphasize "BOOTSTRAP ONLY" usage
+  - Post-init errors now use actual logger if available, fallback to console
+- **DevTools Component-Based Logging** - Fixed DevTools to use proper component logging
+  - Added `devtools-ui` component to `COMPONENT_SCHEME` (🎛️ emoji, purple color)
+  - DevTools controls API (`enableDevPanel`, `disableDevPanel`) now use `devtools-ui` component instead of `core`
+  - All DevTools files now import logger directly instead of using window globals
+  - Removed manual `[JSG-DEVTOOLS]` prefixes from all log messages (logger adds component name automatically)
+  - DevTools logs now show as `🎛️ [DEVTOOLS]` instead of `🎯 [CORE] [JSG-LOGGER]`
+
+### Changed
+- **DevTools Logging Pattern** - Standardized DevTools logging approach
+  - Pattern: `import logger from '../../index.js'; const devtoolsLogger = logger.getComponent('devtools-ui');`
+  - No console fallbacks needed (`getComponent` always returns valid logger)
+  - Clean component-based logging throughout DevTools lifecycle
+
+### Technical Details
+- **Files Modified**: `utils/meta-logger.js`, `index.js`, `config/config-manager.js`, `config/component-schemes.js`
+- **DevTools Files**: `devtools/src/panel-entry.jsx`, `devtools/src/App.jsx`, `devtools/components/GlobalControls.js`, `devtools/components/DevToolsPanel.js`
+- **Result**: Consistent, component-based logging with proper formatting and no manual prefixes
+
 ## [1.7.0] - 2025-01-XX 🎯 **Config-Driven Tree-Shaking & Enhanced Logging**
 
 ### Added

package/config/component-schemes.js

@@ -16,7 +16,8 @@ export const COMPONENT_SCHEME = {
   'websocket': { emoji: '🔗', color: '#1ABC9C', name: 'WEBSOCKET' },
   'notification': { emoji: '🔔', color: '#E74C3C', name: 'NOTIFICATION' },
   'router': { emoji: '🛣️', color: '#3498DB', name: 'ROUTER' },
-  'cache': { emoji: '💨', color: '#95A5A6', name: 'CACHE' }
+  'cache': { emoji: '💨', color: '#95A5A6', name: 'CACHE' },
+  'devtools-ui': { emoji: '🎛️', color: '#8E44AD', name: 'DEVTOOLS' }
 };
 
 export const LEVEL_SCHEME = {

package/config/config-manager.js

@@ -6,6 +6,7 @@
 
 import defaultConfig from './default-config.json' with { type: 'json' };
 import {COMPONENT_SCHEME, LEVEL_SCHEME} from './component-schemes.js';
+import {metaLog} from '../utils/meta-logger.js';
 
 export class ConfigManager {
     constructor() {
@@ -25,11 +26,11 @@ export class ConfigManager {
 
             if (typeof configSource === 'string') {
                 // Load from file path - handle all path formats
-                console.log(`[JSG-LOGGER] Loading config from file: ${configSource}`);
+                metaLog(`[JSG-LOGGER] Loading config from file: ${configSource}`);
                 externalConfig = await this._loadConfigFromPath(configSource);
             } else if (typeof configSource === 'object') {
                 // Direct config object
-                console.log('[JSG-LOGGER] Loading inline config object:', Object.keys(configSource));
+                metaLog('[JSG-LOGGER] Loading inline config object:', Object.keys(configSource));
                 externalConfig = configSource;
             }
 
@@ -46,17 +47,17 @@ export class ConfigManager {
             // Log devtools activation status
             const finalDevtoolsEnabled = this.config.devtools?.enabled ?? false;
             if (finalDevtoolsEnabled !== devtoolsBefore) {
-                console.log(`[JSG-LOGGER] DevTools ${finalDevtoolsEnabled ? 'ENABLED' : 'DISABLED'} via user config (was ${devtoolsBefore ? 'enabled' : 'disabled'} in defaults)`);
+                metaLog(`[JSG-LOGGER] DevTools ${finalDevtoolsEnabled ? 'ENABLED' : 'DISABLED'} via user config (was ${devtoolsBefore ? 'enabled' : 'disabled'} in defaults)`);
                 if (finalDevtoolsEnabled) {
-                    console.log('[JSG-LOGGER] DevTools will be available when enableDevPanel() is called');
+                    metaLog('[JSG-LOGGER] DevTools will be available when enableDevPanel() is called');
                 }
             } else {
-                console.log(`[JSG-LOGGER] DevTools status: ${finalDevtoolsEnabled ? 'ENABLED' : 'DISABLED'} (using default config)`);
+                metaLog(`[JSG-LOGGER] DevTools status: ${finalDevtoolsEnabled ? 'ENABLED' : 'DISABLED'} (using default config)`);
             }
 
             return this.config;
         } catch (error) {
-            console.error('ConfigManager: Error loading configuration:', error);
+            metaError('ConfigManager: Error loading configuration:', error);
             return this.config; // Return default config on error
         }
     }
@@ -92,14 +93,14 @@ export class ConfigManager {
             
             if (config) {
                 this.loadedPaths.push(configPath);
-                console.log(`[JSG-LOGGER] Successfully loaded config from: ${configPath}`);
+                metaLog(`[JSG-LOGGER] Successfully loaded config from: ${configPath}`);
                 return config;
             } else {
-                console.warn(`[JSG-LOGGER] Could not load config from: ${configPath} - using defaults`);
+                metaLog(`[JSG-LOGGER] Could not load config from: ${configPath} - using defaults`);
                 return {};
             }
         } catch (error) {
-            console.warn(`[JSG-LOGGER] Failed to load config from ${configPath}:`, error.message);
+            metaLog(`[JSG-LOGGER] Failed to load config from ${configPath}:`, error.message);
             return {};
         }
     }
@@ -199,7 +200,7 @@ export class ConfigManager {
         if (config.environments) {
             // For now, just log that environment configs exist
             // TODO: Implement environment-based config selection
-            console.log(`[JSG-LOGGER] Found environment configs for: ${Object.keys(config.environments).join(', ')}`);
+            metaLog(`[JSG-LOGGER] Found environment configs for: ${Object.keys(config.environments).join(', ')}`);
         }
         
         // Normalize component configurations

package/config/default-config.json

@@ -2,6 +2,7 @@
   "projectName": "JSG Logger",
   "globalLevel": "info",
   "autoRegister": true,
+  "metaLogging": true,
   "format": {
     "style": "brackets",
     "componentCase": "upper",

package/devtools/dist/__vite-browser-external-2Ng8QIWW-2Ng8QIWW.js

@@ -0,0 +1,5 @@
+const __viteBrowserExternal = {};
+export {
+  __viteBrowserExternal as default
+};
+//# sourceMappingURL=__vite-browser-external-2Ng8QIWW-2Ng8QIWW.js.map

package/devtools/dist/__vite-browser-external-2Ng8QIWW-2Ng8QIWW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__vite-browser-external-2Ng8QIWW-2Ng8QIWW.js","sources":["__vite-browser-external-2Ng8QIWW.js"],"sourcesContent":["const __viteBrowserExternal = {};\nexport {\n  __viteBrowserExternal as default\n};\n//# sourceMappingURL=__vite-browser-external-2Ng8QIWW.js.map\n"],"names":[],"mappings":"AAAK,MAAC,wBAAwB,CAAA;"}

package/devtools/dist/__vite-browser-external-2Ng8QIWW.js

@@ -0,0 +1,5 @@
+const __viteBrowserExternal = {};
+export {
+  __viteBrowserExternal as default
+};
+//# sourceMappingURL=__vite-browser-external-2Ng8QIWW.js.map

package/devtools/dist/__vite-browser-external-2Ng8QIWW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__vite-browser-external-2Ng8QIWW.js","sources":["../__vite-browser-external"],"sourcesContent":["export default {}"],"names":[],"mappings":"AAAA,MAAA,wBAAe,CAAA;"}