@crimsonsunset/jsg-logger 1.7.5 → 1.7.6

package/CHANGELOG.md

@@ -5,6 +5,59 @@ 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.6] - 2025-11-06 🎛️ **DevTools Singleton Fix & Logging Improvements**
+
+### Added
+- **Static `getControls()` Method** - Added `JSGLogger.getControls()` static method for accessing singleton controls
+  - Returns `controls` object from existing singleton instance without triggering initialization
+  - Provides clean access point for DevTools panel to get logger controls
+  - Returns `null` if singleton not yet initialized
+  - Prevents DevTools from creating new logger instance when accessing controls
+
+### Fixed
+- **DevTools Singleton Re-initialization** - Fixed DevTools panel creating new logger instance on open
+  - DevTools panel now uses `JSGLogger.getControls()` and `JSGLogger.getInstanceSync()` instead of top-level imports
+  - Prevents loss of component loggers when DevTools opens
+  - Component loggers now persist correctly across DevTools open/close cycles
+  - Fixed issue where opening DevTools would reset logger to default config with only "core" component
+- **Component List Duplicates** - Fixed duplicate component entries in DevTools UI
+  - `listComponents()` now returns only kebab-case names from config (e.g., `devtools-ui`)
+  - Removed camelCase aliases from component list display
+  - CamelCase access still available via `logger.components.camelCase()` getters for backward compatibility
+  - UI now shows clean, non-duplicated component list
+- **Circular Reference Errors** - Fixed circular reference errors when logging objects
+  - Added circular reference detection in browser formatter `displayContextData()` function
+  - Removed problematic object logging (theme objects, logger instances, panel instances)
+  - Error logging now extracts only safe properties (`message`, `stack`) to avoid serialization issues
+  - DevTools panel initialization no longer throws circular reference errors
+- **DevTools Logging Format** - Fixed DevTools logs to use proper JSG logger formatting
+  - Replaced all `console.log()` calls in DevTools components with JSG logger calls
+  - DevTools logs now show timestamps, emojis, colors, and structured output
+  - All DevTools component logs (DevToolsPanel, GlobalControls, DisplayControls) use `devtools-ui` component logger
+  - Logs now match standard JSG logger format instead of plain `[JSG-DEVTOOLS]` console messages
+
+### Changed
+- **DevTools Panel Logger Access** - Updated DevTools panel to use singleton access pattern
+  - `panel-entry.jsx` now imports `{ JSGLogger }` class instead of default export
+  - Uses `JSGLogger.getInstanceSync()` for full logger instance access
+  - Uses `JSGLogger.getControls()` for controls API access
+  - Prevents module-level initialization from creating new singleton instance
+- **Component Alias Creation** - Disabled camelCase aliases in `this.loggers` object
+  - Commented out `createAliases()` calls in `init()` and `initSync()` methods
+  - CamelCase aliases no longer added to `this.loggers` (prevents duplicates in `listComponents()`)
+  - CamelCase access still works via `components` getters (e.g., `logger.components.devtoolsUi()`)
+
+### Technical Details
+- **Files Modified**: 
+  - `index.js` - Added `getControls()` static method, disabled `createAliases()` calls, updated `listComponents()` to use `configManager.getAvailableComponents()`
+  - `devtools/src/panel-entry.jsx` - Changed to use singleton access pattern, removed top-level logger import
+  - `devtools/src/components/DevToolsPanel.jsx` - Replaced `console.log` with JSG logger calls
+  - `devtools/src/components/GlobalControls.jsx` - Replaced `console.log` with JSG logger calls
+  - `devtools/src/components/DisplayControls.jsx` - Replaced all `console.log/warn` with JSG logger calls
+  - `devtools/src/App.jsx` - Fixed circular reference errors in error logging
+  - `formatters/browser-formatter.js` - Added circular reference detection in `displayContextData()`
+- **Result**: DevTools panel now correctly uses singleton instance, component loggers persist, no duplicate entries, proper logging format throughout
+
 ## [1.7.5] - 2025-11-06 🎛️ **DevTools Panel UX Improvements**
 
 ### Added

package/formatters/browser-formatter.js

@@ -166,7 +166,20 @@ function extractContextData(logData) {
 function displayContextData(contextData) {
     Object.entries(contextData).forEach(([key, value]) => {
         if (typeof value === 'object' && value !== null) {
-            console.log(`   ├─ %c${key}:`, 'color: #00C896; font-weight: bold;', value);
+            // Check for circular references before logging
+            try {
+                // Try to stringify to detect circular references
+                JSON.stringify(value);
+                console.log(`   ├─ %c${key}:`, 'color: #00C896; font-weight: bold;', value);
+            } catch (error) {
+                // Circular reference detected - log a safe representation
+                if (error.message.includes('circular')) {
+                    console.log(`   ├─ %c${key}:`, 'color: #00C896; font-weight: bold;', '[Circular Reference]', value);
+                } else {
+                    // Other error - log the object directly (browser console can handle it)
+                    console.log(`   ├─ %c${key}:`, 'color: #00C896; font-weight: bold;', value);
+                }
+            }
         } else {
             console.log(`   ├─ %c${key}: %c${value}`, 'color: #00C896; font-weight: bold;', 'color: inherit;');
         }

package/index.js

@@ -140,7 +140,9 @@ class JSGLogger {
             });
 
             // Create legacy compatibility aliases
-            this.createAliases();
+            // Removed: camelCase aliases no longer added to this.loggers
+            // Use logger.components.camelCase() or logger.getComponent('kebab-case') instead
+            // this.createAliases();
 
             // Add utility methods
             this.addUtilityMethods();
@@ -215,7 +217,9 @@ class JSGLogger {
             });
 
             // Create legacy compatibility aliases
-            this.createAliases();
+            // Removed: camelCase aliases no longer added to this.loggers
+            // Use logger.components.camelCase() or logger.getComponent('kebab-case') instead
+            // this.createAliases();
 
             // Add utility methods
             this.addUtilityMethods();
@@ -416,7 +420,7 @@ class JSGLogger {
                 },
 
                 // Component controls
-                listComponents: () => Object.keys(this.loggers),
+                listComponents: () => configManager.getAvailableComponents(),
                 enableDebugMode: () => {
                     Object.keys(this.loggers).forEach(component => {
                         if (this.loggers[component]) {
@@ -774,6 +778,15 @@ class JSGLogger {
             return duration;
         }
     }
+
+    /**
+     * Get singleton controls without triggering initialization
+     * Returns the controls object from the current singleton instance if it exists
+     * @returns {Object|null} Controls object or null if singleton not initialized
+     */
+    static getControls() {
+        return JSGLogger._enhancedLoggers?.controls || null;
+    }
 }
 
 // Initialize synchronously with default config for immediate use

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crimsonsunset/jsg-logger",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "type": "module",
   "description": "Multi-environment logger with smart detection, file-level overrides, and beautiful console formatting. Test it live: https://logger.joesangiorgio.com/",
   "main": "index.js",