@crimsonsunset/jsg-logger 1.5.2 → 1.5.3

package/CHANGELOG.md

@@ -8,13 +8,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
-- None
+- **Conditional DevTools Bundling** - DevTools panel now optional via config, with tree-shaking support
+  - Added `devtools.enabled` config flag (default: `false`)
+  - Moved Preact & Evergreen UI to optional peerDependencies
+  - When disabled, devtools code is tree-shaken out (zero bundle impact)
+  - When enabled, requires peer dependencies: `npm install preact evergreen-ui`
+  - Function constructor used for dynamic imports to bypass Vite static analysis
 
-### Changed  
-- None
+### Changed
+- **DevTools Dependencies** - Preact and Evergreen UI moved to peerDependencies for optional installation
+- **DevTools Import** - Uses Function constructor instead of template literals to prevent Vite static analysis failures
 
 ### Fixed
-- None
+- **Vite Build Failures** - Fixed dynamic import issues that caused Vite dev server startup failures
+- **DevTools Bundle Size** - Zero impact when disabled (default), only loads when explicitly enabled
 
 ## [1.5.2] - 2025-10-25 🐛 **PATCH: CLI Formatter Custom Component Display**
 

package/README.md

@@ -4,16 +4,19 @@
 
 A sophisticated, fully generic logging system that automatically detects its environment (browser, CLI, server) and provides optimal logging experience for any JavaScript project, with powerful file-level overrides and granular control.
 
+> 🎮 **[Try the Interactive DevTools Playground →](https://logger.joesangiorgio.com/)**  
+> Test all features in your browser with live examples and real-time controls!
+
 ## ✨ Features
 
-- 🎯 **100% Generic** - *New in v1.2.0!* Zero hardcoded assumptions, works with any project type
+- 🎯 **100% Generic** - Zero hardcoded assumptions, works with any project type
 - 🚀 **Zero-Boilerplate Integration** - Eliminates 200+ lines of project setup code
 - 🔧 **Auto-Discovery Components** - Both camelCase and kebab-case component access  
 - ⚡ **Built-in Performance Logging** - Static utilities with auto-getInstance
 - 🛡️ **Non-Destructive Error Handling** - Missing components log but don't break apps
-- 🎨 **Custom Component Names** - *New in v1.5.0!* Use ANY component name, auto-generated styling
-- 🔧 **Force Environment Override** - *New in v1.5.0!* Override auto-detection for CLI tools
-- 🧠 **Enhanced Environment Detection** - *New in v1.5.0!* Robust CLI detection with fallbacks
+- 🎨 **Custom Component Names** - Use ANY component name, auto-generated styling
+- 🔧 **Force Environment Override** - Override auto-detection for CLI tools
+- 🧠 **Enhanced Environment Detection** - Robust CLI detection with fallbacks
 - 🎨 **Beautiful Visual Output** - Emoji, colors, and structured context display
 - 📱 **Multi-Environment** - Browser console, terminal, and production JSON
 - 🏪 **Log Store** - In-memory storage for debugging and popup interfaces
@@ -27,14 +30,12 @@ A sophisticated, fully generic logging system that automatically detects its env
 
 ## 🚀 Quick Start
 
-### **v1.5.0: Custom Components & Force Environment - Perfect for CLI Tools!**
-
-> **✨ New in v1.5.0:** Use ANY component name (not just pre-defined ones) and force CLI mode for terminal applications!
+### **Custom Components & Force Environment for CLI Tools**
 
 ```javascript
 import JSGLogger from '@crimsonsunset/jsg-logger';
 
-// ✨ NEW: Force environment for CLI tools (fixes terminal detection)
+// Force environment for CLI tools (fixes terminal detection)
 const logger = JSGLogger.getInstanceSync({
   forceEnvironment: 'cli',  // Forces pretty terminal output
   globalLevel: 'info',
@@ -46,7 +47,7 @@ const logger = JSGLogger.getInstanceSync({
   }
 });
 
-// ✨ NEW: Custom components work immediately
+// Custom components work immediately
 const sysLog = logger.getComponent('system');
 sysLog.info('✓ macOS version compatible', { version: '14.2', build: '23C64' });
 // Output: Pretty formatted terminal output with colors AND context data!
@@ -59,12 +60,10 @@ installLog.info('✓ Applications installed', { installed: 25, duration: '5m' })
 // 21:32:11.8 📦 [INSTALLER] ✓ Applications installed
 //    ├─ installed: 25
 //    └─ duration: 5m
-// No more JSON blobs in terminal! 🎉
+// No more JSON blobs in terminal!
 ```
 
-### **v1.2.0: Fully Generic Design - Works with Any Project!**  
-
-> **⚠️ Breaking Change:** v1.2.0 requires defining components in your logger-config.json. The logger is now 100% generic with no hardcoded assumptions. 
+### **Standard Usage**
 
 ```javascript
 import JSGLogger from '@crimsonsunset/jsg-logger';
@@ -84,12 +83,12 @@ const startTime = performance.now();
 // ... do work ...
 JSGLogger.logPerformance('Page Generation', startTime, 'api');
 
-// ✨ NEW: Custom components auto-created on demand
+// Custom components auto-created on demand
 const dynamicLogger = logger.getComponent('new-feature');
 dynamicLogger.info('Auto-created component!'); // Works immediately
 ```
 
-### **Traditional Usage (Still Supported)**
+### **Alternative Usage**
 
 ```javascript
 import logger from '@crimsonsunset/jsg-logger';
@@ -119,7 +118,7 @@ This allows surgical debugging - you can turn on trace logging for just one prob
 
 ## ⚙️ **Advanced Configuration**
 
-### **Force Environment Override** ✨ *New in v1.5.0*
+### **Force Environment Override**
 
 Perfect for CLI tools that get mis-detected as "server" mode:
 
@@ -153,7 +152,7 @@ Or in `logger-config.json`:
 - Testing different output formats
 - Production deployments with specific requirements
 
-### **Custom Component Names** ✨ *New in v1.5.0*
+### **Custom Component Names**
 
 Use ANY component name - no need to pre-define in COMPONENT_SCHEME:
 
@@ -229,6 +228,9 @@ log4.info('This works!'); // Uses auto-generated styling
         "jsonPayload": false
       }
     }
+  },
+  "devtools": {
+    "enabled": false
   }
 }
 ```
@@ -351,7 +353,7 @@ logger.controls.addFileOverride('src/popup.js', {
 
 ### **Context Data**
 
-✨ **New in v1.5.0:** Context data now displays in CLI/terminal mode with tree formatting!
+Context data displays in CLI/terminal mode with tree formatting:
 
 ```javascript
 logger.api.error('Request failed', {
@@ -414,12 +416,10 @@ logger.controls.getTimestampMode()                   // Get current mode
 logger.controls.getTimestampModes()                  // List available modes
 ```
 
-### **System Controls**
+### **DevTools Panel Controls**
 ```javascript
-logger.controls.refresh()                            // Refresh all loggers
-logger.controls.reset()                              // Reset to defaults
-logger.controls.getConfigSummary()                   // Get config summary
-logger.controls.getStats()                           // Get logging stats
+logger.controls.enableDevPanel()   // Enable DevTools panel (requires devtools.enabled: true)
+logger.controls.disableDevPanel()   // Disable DevTools panel
 ```
 
 ## 📊 **Log Store & Statistics**
@@ -509,26 +509,15 @@ The logger automatically detects its environment and uses optimal implementation
 - **CLI**: Uses pino-colada for beautiful terminal output  
 - **Server**: Uses structured JSON for production logging
 
-### **Enhanced CLI Detection** ✨ *Improved in v1.5.0*
+### **Enhanced CLI Detection**
 
-The CLI detection now checks multiple signals:
+The CLI detection checks multiple signals:
 1. **TTY Check**: `process.stdout.isTTY` or `process.stderr.isTTY`
 2. **Terminal Environment**: `process.env.TERM` or `process.env.COLORTERM`
 3. **Non-CI Context**: Not running in CI/GitHub Actions
 
 This fixes detection issues in various terminal contexts where `isTTY` may be undefined.
 
-### **Force Environment Override** ✨ *New in v1.5.0*
-
-If auto-detection fails, you can force the environment:
-
-```javascript
-const logger = JSGLogger.getInstanceSync({
-  forceEnvironment: 'cli',  // Override auto-detection
-  // ... rest of config
-});
-```
-
 **Why Browser is Different:**
 Our testing revealed that Pino's browser detection was interfering with custom formatters, especially in Chrome extensions. By creating a custom direct browser logger that bypasses Pino entirely, we achieved:
 - Perfect emoji and color display
@@ -567,6 +556,42 @@ logger.controls.addFileOverride('src/popup.js', {           // Debug popup
 });
 ```
 
+## 🎛️ **DevTools Panel (Optional)**
+
+JSG Logger includes an optional DevTools panel for visual debugging. The panel is **disabled by default** to keep bundle size minimal.
+
+### **Enabling DevTools**
+
+1. **Enable in config:**
+```json
+{
+  "devtools": {
+    "enabled": true
+  }
+}
+```
+
+2. **Install peer dependencies** (only needed when devtools enabled):
+```bash
+npm install preact evergreen-ui
+```
+
+3. **Enable the panel:**
+```javascript
+// Enable DevTools panel (only works if devtools.enabled: true in config)
+await logger.controls.enableDevPanel();
+```
+
+### **DevTools Features**
+
+- 🎛️ Visual component filter controls
+- 📊 Real-time log statistics
+- 🔧 Runtime level adjustment
+- ⚙️ Display option toggles
+- 📈 Component-level monitoring
+
+**Note:** When `devtools.enabled: false` (default), devtools dependencies are completely tree-shaken out, resulting in zero bundle impact. Only enable when you need the visual debugging interface.
+
 ## 🔧 **Browser Developer Tools**
 
 In browser environments, runtime controls are available globally:
@@ -577,6 +602,7 @@ JSG_Logger.enableDebugMode();
 JSG_Logger.setDisplayOption('level', true);
 JSG_Logger.addFileOverride('src/popup.js', { level: 'trace' });
 JSG_Logger.getStats();
+JSG_Logger.enableDevPanel(); // Enable DevTools panel (requires devtools.enabled: true)
 ```
 
 ## ⚠️ **Disclaimer**

package/config/config-manager.js

@@ -133,7 +133,7 @@ export class ConfigManager {
         
         try {
             // Try dynamic import first (works with ES modules)
-            const module = await import(path, { assert: { type: 'json' } });
+            const module = await import(/* @vite-ignore */ path, { assert: { type: 'json' } });
             return module.default || module;
         } catch (error) {
             try {
@@ -156,7 +156,7 @@ export class ConfigManager {
     async _loadConfigBrowserImport(path) {
         try {
             // Some bundlers can handle dynamic imports of JSON files
-            const module = await import(path);
+            const module = await import(/* @vite-ignore */ path);
             return module.default || module;
         } catch (error) {
             return null;

package/config/default-config.json

@@ -33,5 +33,8 @@
     }
   },
   "fileOverrides": {
+  },
+  "devtools": {
+    "enabled": false
   }
 }