@crimsonsunset/jsg-logger 1.5.5 → 1.7.0

package/CHANGELOG.md

@@ -5,23 +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).
 
-## [Unreleased]
+## [1.6.0] - 2025-01-XX 🎯 **Config-Driven Tree-Shaking & Enhanced Logging**
 
 ### Added
-- **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
+- **Config-Driven Tree-Shaking** - DevTools panel tree-shaking now based on default config at module load time
+  - Tree-shaking determined by `defaultConfig.devtools.enabled` (default: `false`)
+  - When disabled, devtools code completely tree-shaken (zero bundle impact)
+  - When enabled via runtime config, loads dynamically on demand
+  - Static import analysis allows bundlers to eliminate unused code paths
+- **Comprehensive DevTools Logging** - Added detailed logging throughout DevTools lifecycle
+  - Module load: logs default config tree-shaking status
+  - Config loading: logs when devtools enabled/disabled via user config
+  - DevTools activation: logs pre-load status, dynamic loading, and initialization steps
+  - Config merge: logs devtools status changes between defaults and user config
 
 ### 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
+- **DevTools Import Strategy** - Simplified to relative path imports
+  - Removed complex Function constructor + package export path logic
+  - Uses simple relative path: `./devtools/dist/panel-entry.js`
+  - Works in production builds, requires `server.fs.allow: ['..']` for npm link dev
+- **Config Loading Logging** - Enhanced visibility into config loading process
+  - Logs config source (file path vs inline object)
+  - Logs devtools status before/after config merge
+  - Logs initialization start with config source information
 
 ### Fixed
-- **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
+- **Tree-Shaking Detection** - Bundlers can now properly analyze and eliminate devtools code when disabled
+- **DevTools Pre-loading** - Non-blocking pre-load when default config enables devtools
+- **Runtime Config Override** - Dynamic loading works correctly when runtime config enables devtools but default disabled
+
+### Technical Details
+- **File**: `index.js`
+  - Added conditional static import based on `defaultConfig.devtools.enabled`
+  - Lazy initialization pattern to avoid top-level await
+  - Enhanced `enableDevPanel()` with comprehensive logging
+  - Pre-loads devtools module when default config enables it
+  
+- **File**: `config/config-manager.js`
+  - Added logging for config loading (file vs inline)
+  - Added devtools status logging before/after config merge
+  - Enhanced visibility into config changes
+
+### Migration Notes
+No breaking changes. Existing code continues to work.
+
+**For consumers:**
+- DevTools code tree-shaken by default (zero bundle impact)
+- Enable via runtime config: `{ devtools: { enabled: true } }`
+- DevTools loads dynamically when `enableDevPanel()` called
+- No special Vite config needed for production builds
+- npm link users: add `server.fs.allow: ['..']` to Vite config for dev
+
+## [Unreleased]
 
 ## [1.5.2] - 2025-10-25 🐛 **PATCH: CLI Formatter Custom Component Display**
 

package/README.md

@@ -560,6 +560,14 @@ logger.controls.addFileOverride('src/popup.js', {           // Debug popup
 
 JSG Logger includes an optional DevTools panel for visual debugging. The panel is **disabled by default** to keep bundle size minimal.
 
+### **How Tree-Shaking Works**
+
+Tree-shaking is based on the **default config** (`devtools.enabled: false` by default). This means:
+
+- **Default behavior**: DevTools code is completely tree-shaken out, resulting in zero bundle impact
+- **Consumer config override**: If you enable devtools in your runtime config (`{ devtools: { enabled: true } }`), it loads dynamically when needed
+- **Best of both worlds**: Zero bundle by default, but runtime flexibility when needed
+
 ### **Enabling DevTools**
 
 1. **Enable in config:**
@@ -571,12 +579,14 @@ JSG Logger includes an optional DevTools panel for visual debugging. The panel i
 }
 ```
 
-2. **Install peer dependencies** (only needed when devtools enabled):
-```bash
-npm install preact evergreen-ui
+Or enable at runtime:
+```javascript
+const logger = JSGLogger.getInstance({
+  devtools: { enabled: true }
+});
 ```
 
-3. **Enable the panel:**
+2. **Enable the panel:**
 ```javascript
 // Enable DevTools panel (only works if devtools.enabled: true in config)
 await logger.controls.enableDevPanel();
@@ -590,7 +600,19 @@ await logger.controls.enableDevPanel();
 - ⚙️ 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.
+**Bundle Size:**
+- When `devtools.enabled: false` (default): Zero bundle impact (tree-shaken)
+- When enabled: ~81KB gzipped (includes Preact + Evergreen UI, self-contained)
+
+**Note for npm link users:** When developing with `npm link`, ensure your Vite config includes:
+```typescript
+server: {
+  fs: {
+    allow: ['..']
+  }
+}
+```
+This allows Vite to serve files from the symlinked package directory.
 
 ## 🔧 **Browser Developer Tools**
 

package/config/config-manager.js

@@ -25,18 +25,35 @@ export class ConfigManager {
 
             if (typeof configSource === 'string') {
                 // Load from file path - handle all path formats
+                console.log(`[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));
                 externalConfig = configSource;
             }
 
             // Normalize external config to match expected structure
             const normalizedConfig = this._normalizeConfigStructure(externalConfig);
             
+            // Log devtools status before merge
+            const devtoolsBefore = this.config.devtools?.enabled ?? false;
+            const devtoolsAfter = normalizedConfig.devtools?.enabled ?? devtoolsBefore;
+            
             // Merge configurations - project configs override defaults
             this.config = this.mergeConfigs(this.config, normalizedConfig);
 
+            // 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)`);
+                if (finalDevtoolsEnabled) {
+                    console.log('[JSG-LOGGER] DevTools will be available when enableDevPanel() is called');
+                }
+            } else {
+                console.log(`[JSG-LOGGER] DevTools status: ${finalDevtoolsEnabled ? 'ENABLED' : 'DISABLED'} (using default config)`);
+            }
+
             return this.config;
         } catch (error) {
             console.error('ConfigManager: Error loading configuration:', error);