@crimsonsunset/jsg-logger 1.2.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +47 -0
- package/README.md +20 -16
- package/config/component-schemes.js +13 -1
- package/docs/devtools-roadmap.md +337 -0
- package/docs/next-session.md +110 -127
- package/docs/roadmap.md +73 -5
- package/index.js +47 -11
- package/package.json +17 -3
package/CHANGELOG.md
CHANGED
|
@@ -16,6 +16,53 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
16
16
|
### Fixed
|
|
17
17
|
- None
|
|
18
18
|
|
|
19
|
+
## [1.2.0] - 2025-08-21 🎯 **MAJOR: Fully Generic Logger**
|
|
20
|
+
|
|
21
|
+
### 🚀 **BREAKING CHANGES**
|
|
22
|
+
- **Minimal default config**: Only 'core' component included by default
|
|
23
|
+
- **Projects must define components**: Custom components now required in logger-config.json
|
|
24
|
+
- **Legacy component removal**: All 10 hardcoded legacy components removed
|
|
25
|
+
- **Core component rename**: 'cacp' → 'core' throughout functional code
|
|
26
|
+
|
|
27
|
+
### ✨ **Added**
|
|
28
|
+
- **100% Generic Design**: Zero legacy/project-specific references
|
|
29
|
+
- **Dynamic Alias Generation**: Auto-generate camelCase from kebab-case component names
|
|
30
|
+
- **Smart Component Creation**: Missing components auto-created with sensible defaults
|
|
31
|
+
- **Enhanced Config Normalization**: Better handling of various config formats
|
|
32
|
+
- **Generic Examples**: Updated advanced-config.json with modern component examples
|
|
33
|
+
|
|
34
|
+
### 🔧 **Changed**
|
|
35
|
+
- **Default Configuration**: Minimal config with only 'core' component
|
|
36
|
+
- **Component Schemes**: Cleaned to minimal generic set
|
|
37
|
+
- **Class Names**: CACPLogger → JSGLogger throughout (completed in 1.1.4-1.1.7)
|
|
38
|
+
- **Browser Global**: window.CACP_Logger → window.JSG_Logger
|
|
39
|
+
- **Fallback Logic**: Uses 'core' component instead of hardcoded 'cacp'
|
|
40
|
+
|
|
41
|
+
### 🗑️ **Removed**
|
|
42
|
+
- **Legacy Components**: soundcloud, youtube, site-detector, websocket, popup, background, priority-manager, settings, test
|
|
43
|
+
- **Hardcoded Aliases**: Replaced siteDetector/priorityManager with dynamic generation
|
|
44
|
+
- **Project-Specific Logic**: All hardcoded references to specific use cases
|
|
45
|
+
|
|
46
|
+
### 📚 **Documentation**
|
|
47
|
+
- **Updated Roadmap**: Phase 9 complete, Phase 10 DX enhancements planned
|
|
48
|
+
- **Migration Guide**: Clear upgrade path for existing projects
|
|
49
|
+
- **Generic Examples**: Modern component examples for common project types
|
|
50
|
+
|
|
51
|
+
### 🎯 **Migration Notes**
|
|
52
|
+
Existing projects need to update their logger-config.json to define components:
|
|
53
|
+
|
|
54
|
+
```json
|
|
55
|
+
{
|
|
56
|
+
"components": {
|
|
57
|
+
"core": { "emoji": "🎯", "level": "info" },
|
|
58
|
+
"api": { "emoji": "🌐", "level": "debug" },
|
|
59
|
+
"ui": { "emoji": "🎨", "level": "info" }
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
The logger will auto-create missing components, but explicit definition is recommended.
|
|
65
|
+
|
|
19
66
|
## [1.0.8] - 2025-08-06
|
|
20
67
|
|
|
21
68
|
### Changed
|
package/README.md
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
# JSG Logger
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**100% Generic Multi-Environment Logger with Advanced Configuration**
|
|
4
4
|
|
|
5
|
-
A sophisticated logging system that automatically detects its environment (browser, CLI, server) and provides optimal logging experience for
|
|
5
|
+
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.
|
|
6
6
|
|
|
7
7
|
## ✨ Features
|
|
8
8
|
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
9
|
+
- 🎯 **100% Generic** - *New in v1.2.0!* Zero hardcoded assumptions, works with any project type
|
|
10
|
+
- 🚀 **Zero-Boilerplate Integration** - Eliminates 200+ lines of project setup code
|
|
11
|
+
- 🔧 **Auto-Discovery Components** - Both camelCase and kebab-case component access
|
|
12
|
+
- ⚡ **Built-in Performance Logging** - Static utilities with auto-getInstance
|
|
13
|
+
- 🛡️ **Non-Destructive Error Handling** - Missing components log but don't break apps
|
|
13
14
|
- 🧠 **Smart Environment Detection** - Auto-adapts to browser, CLI, or server
|
|
14
15
|
- 🎨 **Beautiful Visual Output** - Emoji, colors, and structured context display
|
|
15
16
|
- 📱 **Multi-Environment** - Browser console, terminal, and production JSON
|
|
@@ -24,28 +25,31 @@ A sophisticated logging system that automatically detects its environment (brows
|
|
|
24
25
|
|
|
25
26
|
## 🚀 Quick Start
|
|
26
27
|
|
|
27
|
-
### **
|
|
28
|
+
### **v1.2.0: Fully Generic Design - Works with Any Project!**
|
|
29
|
+
|
|
30
|
+
> **⚠️ Breaking Change:** v1.2.0 requires defining components in your logger-config.json. The logger is now 100% generic with no hardcoded assumptions.
|
|
28
31
|
|
|
29
32
|
```javascript
|
|
30
33
|
import JSGLogger from '@crimsonsunset/jsg-logger';
|
|
31
34
|
|
|
32
35
|
// Enhanced singleton with built-in configuration loading
|
|
33
|
-
const logger = JSGLogger.getInstance({
|
|
36
|
+
const logger = await JSGLogger.getInstance({
|
|
34
37
|
configPath: './logger-config.json'
|
|
35
38
|
});
|
|
36
39
|
|
|
37
|
-
//
|
|
38
|
-
logger.
|
|
39
|
-
logger.
|
|
40
|
+
// Use your project-specific components immediately
|
|
41
|
+
logger.api.info('Server started on port 3000');
|
|
42
|
+
logger.database.debug('Query executed', { query: 'SELECT * FROM users' });
|
|
43
|
+
logger.ui.info('Component mounted', { component: 'UserProfile' });
|
|
40
44
|
|
|
41
|
-
// Built-in static performance logging
|
|
45
|
+
// Built-in static performance logging
|
|
42
46
|
const startTime = performance.now();
|
|
43
47
|
// ... do work ...
|
|
44
|
-
JSGLogger.logPerformance('Page Generation', startTime, '
|
|
48
|
+
JSGLogger.logPerformance('Page Generation', startTime, 'api');
|
|
45
49
|
|
|
46
|
-
// Non-destructive error handling
|
|
47
|
-
const
|
|
48
|
-
|
|
50
|
+
// Non-destructive error handling - missing components auto-created
|
|
51
|
+
const dynamicLogger = logger.getComponent('new-feature');
|
|
52
|
+
dynamicLogger.info('Auto-created component!'); // Works immediately
|
|
49
53
|
```
|
|
50
54
|
|
|
51
55
|
### **Traditional Usage (Still Supported)**
|
|
@@ -4,7 +4,19 @@
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const COMPONENT_SCHEME = {
|
|
7
|
-
'core': { emoji: '🎯', color: '#
|
|
7
|
+
'core': { emoji: '🎯', color: '#4A90E2', name: 'JSG-CORE' },
|
|
8
|
+
'api': { emoji: '🔌', color: '#FF5500', name: 'API' },
|
|
9
|
+
'ui': { emoji: '🎨', color: '#FF6B6B', name: 'UI' },
|
|
10
|
+
'database': { emoji: '💾', color: '#00C896', name: 'DATABASE' },
|
|
11
|
+
'test': { emoji: '🧪', color: '#FFEAA7', name: 'TEST' },
|
|
12
|
+
'preact': { emoji: '⚛️', color: '#673ab8', name: 'PREACT' },
|
|
13
|
+
'auth': { emoji: '🔐', color: '#E67E22', name: 'AUTH' },
|
|
14
|
+
'analytics': { emoji: '📊', color: '#9B59B6', name: 'ANALYTICS' },
|
|
15
|
+
'performance': { emoji: '⚡', color: '#F39C12', name: 'PERFORMANCE' },
|
|
16
|
+
'websocket': { emoji: '🔗', color: '#1ABC9C', name: 'WEBSOCKET' },
|
|
17
|
+
'notification': { emoji: '🔔', color: '#E74C3C', name: 'NOTIFICATION' },
|
|
18
|
+
'router': { emoji: '🛣️', color: '#3498DB', name: 'ROUTER' },
|
|
19
|
+
'cache': { emoji: '💨', color: '#95A5A6', name: 'CACHE' }
|
|
8
20
|
};
|
|
9
21
|
|
|
10
22
|
export const LEVEL_SCHEME = {
|
|
@@ -0,0 +1,337 @@
|
|
|
1
|
+
# JSG Logger DevTools Panel - Roadmap
|
|
2
|
+
|
|
3
|
+
## 📋 How to Update This Doc
|
|
4
|
+
|
|
5
|
+
**When starting a new Cursor session:**
|
|
6
|
+
1. **Update "Current Status"** - What's completed since last session
|
|
7
|
+
2. **Update "Recent Progress"** - Add session notes and blockers
|
|
8
|
+
3. **Check off items** in "Implementation Phases" as you complete them
|
|
9
|
+
4. **Add to "Technical Decisions"** if you make architecture choices
|
|
10
|
+
|
|
11
|
+
**Update frequency:**
|
|
12
|
+
- **Current Status** - Every session
|
|
13
|
+
- **Recent Progress** - Every session (can have multiple sessions per day)
|
|
14
|
+
- **Implementation Phases** - As features complete
|
|
15
|
+
- **Vision & Architecture** - Rarely (major changes only)
|
|
16
|
+
- **Technical Decisions** - When making key choices
|
|
17
|
+
|
|
18
|
+
**Note:** Multiple sessions per day are common - just add new progress entries additively rather than replacing previous session work.
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## 🎯 Current Status
|
|
23
|
+
**Last Updated:** October 24, 2025
|
|
24
|
+
**Current Phase:** Phase 2 - Evergreen UI Migration 🎉 **MAJOR BREAKTHROUGH**
|
|
25
|
+
**Status:** 🎛️ **PANEL WORKING** - Floating button renders, minor theme fixes needed
|
|
26
|
+
**Next Phase:** Fix Text theme, complete Phase 2, then Phase 3
|
|
27
|
+
|
|
28
|
+
### Progress Overview
|
|
29
|
+
- ✅ **COMPLETED:** Separate DevTools application architecture (`devtools/` package)
|
|
30
|
+
- ✅ **COMPLETED:** Preact + Evergreen UI integration with proper build system
|
|
31
|
+
- ✅ **COMPLETED:** Professional dark theme system with JSG Logger branding
|
|
32
|
+
- ✅ **COMPLETED:** Vite development server with hot reload on port 5556
|
|
33
|
+
- ✅ **COMPLETED:** Complete test harness UI with comprehensive logger testing
|
|
34
|
+
- ✅ **COMPLETED:** FloatingButton component migration to Evergreen Button + Badge
|
|
35
|
+
- ✅ **COMPLETED:** Theme Provider integration with custom DevTools theme
|
|
36
|
+
- 🔧 **IN PROGRESS:** DevTools panel integration - API/import issues identified
|
|
37
|
+
- 🔧 **IN PROGRESS:** Logger instance initialization in Preact environment
|
|
38
|
+
|
|
39
|
+
### Key Achievements
|
|
40
|
+
- **🚀 BREAKTHROUGH:** Runtime-injected DevTools panel working in browser
|
|
41
|
+
- **📦 Zero Bundle Impact:** Dynamic import prevents bloating main logger
|
|
42
|
+
- **🔧 Complete Integration:** `logger.controls.enableDevPanel()` API ready
|
|
43
|
+
- **⚡ Real-time Controls:** Component toggles affect logging immediately
|
|
44
|
+
- **🎨 Professional UI:** Dark theme, responsive design, smooth animations
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
## 🔮 Vision & Architecture
|
|
49
|
+
|
|
50
|
+
### Core Mission
|
|
51
|
+
**Create a professional, intuitive DevTools panel for JSG Logger that provides surgical control over logging in real-time, with zero impact on production bundles.**
|
|
52
|
+
|
|
53
|
+
### Key Principles
|
|
54
|
+
1. **Zero Bundle Impact** - Panel code only loads when explicitly requested
|
|
55
|
+
2. **Real-time Control** - All changes apply immediately without page reload
|
|
56
|
+
3. **Professional UX** - Clean, dark-themed interface matching dev tool standards
|
|
57
|
+
4. **Non-intrusive** - Floating button, collapsible panel, easy to dismiss
|
|
58
|
+
5. **Development-focused** - Designed for debugging and development workflows
|
|
59
|
+
|
|
60
|
+
### Target Use Cases
|
|
61
|
+
- ✅ **Component Debugging** - Turn individual loggers on/off for focused debugging
|
|
62
|
+
- ✅ **Global Control** - Quick debug/trace mode for all components
|
|
63
|
+
- ✅ **Live Monitoring** - Real-time log statistics and component status
|
|
64
|
+
- 🎯 **File-level Control** - Override logging for specific files (future)
|
|
65
|
+
- 🎯 **Export/Import** - Save and share logger configurations (future)
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## 🚀 Implementation Phases
|
|
70
|
+
|
|
71
|
+
### **Phase 1: Core DevTools Infrastructure** ✅ COMPLETE
|
|
72
|
+
- [x] Inline development structure with jsg-logger
|
|
73
|
+
- [x] Preact component architecture setup
|
|
74
|
+
- [x] Browser-compatible logger for testing
|
|
75
|
+
- [x] Development server with ES module support
|
|
76
|
+
- [x] Runtime panel injection via `enableDevPanel()`
|
|
77
|
+
- [x] Basic floating button UI
|
|
78
|
+
- [x] Collapsible sidebar panel
|
|
79
|
+
- [x] Component filtering with on/off toggles
|
|
80
|
+
- [x] Global controls (Debug All, Trace All, Reset)
|
|
81
|
+
- [x] Live statistics with auto-refresh
|
|
82
|
+
- [x] JSX → h() conversion for browser compatibility
|
|
83
|
+
|
|
84
|
+
### **Phase 2: Evergreen UI Migration & Professional Polish** 🎯 NEXT
|
|
85
|
+
|
|
86
|
+
#### **Step 2.1: Foundation Setup**
|
|
87
|
+
- [ ] **Vite + Evergreen Dependencies** - Install evergreen-ui, vite, preact-compat
|
|
88
|
+
- [ ] **Vite Configuration** - Library mode + minification + preact/compat aliasing
|
|
89
|
+
- [ ] **Package Scripts** - dev, build, preview commands
|
|
90
|
+
- [ ] **Directory Structure** - Proper src/ organization
|
|
91
|
+
|
|
92
|
+
#### **Step 2.2: Theme Foundation**
|
|
93
|
+
- [ ] **Custom Dark Theme** - DevTools-specific dark theme with design tokens
|
|
94
|
+
- [ ] **Theme Provider Setup** - Wrap panel with ThemeProvider
|
|
95
|
+
- [ ] **Color System** - Background (#1E1E1E), text (#FFFFFF), borders (#333)
|
|
96
|
+
|
|
97
|
+
#### **Step 2.3: Component Replacement (Bottom-Up)**
|
|
98
|
+
- [ ] **Text & Typography** - Replace manual text styling with Text/Heading components
|
|
99
|
+
- [ ] **Basic Buttons** - Replace GlobalControls buttons with Button component + variants
|
|
100
|
+
- [ ] **Toggle Switches** - Replace ComponentFilters custom toggles with Switch component
|
|
101
|
+
- [ ] **Floating Button + Badge** - Replace 66-line FloatingButton with Button + Badge
|
|
102
|
+
|
|
103
|
+
#### **Step 2.4: Layout & Containers**
|
|
104
|
+
- [ ] **Panel Container** - Replace PanelContainer with SideSheet or Pane + Card
|
|
105
|
+
- [ ] **Stats Display** - Replace custom stats layout with Table or structured Pane
|
|
106
|
+
- [ ] **Responsive Layout** - Handle different screen sizes with Evergreen primitives
|
|
107
|
+
|
|
108
|
+
#### **Step 2.5: Test Application Integration**
|
|
109
|
+
- [ ] **Test Page Refactor** - Convert test-devtools.html to JSX with Evergreen
|
|
110
|
+
- [ ] **Unified Build Process** - Single Vite build for DevTools and test app
|
|
111
|
+
- [ ] **Component Consistency** - Apply same theme across both applications
|
|
112
|
+
|
|
113
|
+
#### **Step 2.6: Production Optimization**
|
|
114
|
+
- [ ] **Tree Shaking** - Import only needed Evergreen components
|
|
115
|
+
- [ ] **Bundle Analysis** - Measure final bundle size impact
|
|
116
|
+
- [ ] **Runtime Integration** - Update main logger to reference built assets
|
|
117
|
+
|
|
118
|
+
#### **Expected Outcomes:**
|
|
119
|
+
- **Bundle Size**: ~25KB (vs current ~15KB) - acceptable increase for DX improvement
|
|
120
|
+
- **Code Reduction**: 80% reduction in styling maintenance (300+ → ~50 lines)
|
|
121
|
+
- **Professional UI**: Design system consistency, accessibility, dark theme
|
|
122
|
+
|
|
123
|
+
### **Phase 3: Advanced Controls** 🎯 FUTURE
|
|
124
|
+
- [ ] **File-level Overrides** - Panel interface for file-specific controls
|
|
125
|
+
- [ ] **Level Granularity** - Individual level selection per component
|
|
126
|
+
- [ ] **Search/Filter** - Filter components by name or status
|
|
127
|
+
- [ ] **Component Groups** - Organize related components together
|
|
128
|
+
- [ ] **Bulk Actions** - Select multiple components for batch operations
|
|
129
|
+
- [ ] **Preset Configurations** - Save/load common debug configurations
|
|
130
|
+
|
|
131
|
+
### **Phase 4: Data & Persistence** 🎯 FUTURE
|
|
132
|
+
- [ ] **Configuration Export/Import** - Save panel settings to JSON
|
|
133
|
+
- [ ] **Session Persistence** - Remember panel state across page reloads
|
|
134
|
+
- [ ] **Local Storage** - Persist component preferences per site
|
|
135
|
+
- [ ] **Configuration Sharing** - Export/import debug configurations
|
|
136
|
+
- [ ] **Preset Templates** - Common configurations for different scenarios
|
|
137
|
+
|
|
138
|
+
### **Phase 5: Advanced Features** 🎯 FUTURE
|
|
139
|
+
- [ ] **Log History Viewer** - Browse recent logs within the panel
|
|
140
|
+
- [ ] **Real-time Log Preview** - Mini log viewer in panel
|
|
141
|
+
- [ ] **Performance Metrics** - Log performance impact monitoring
|
|
142
|
+
- [ ] **Component Dependency Map** - Visual component relationships
|
|
143
|
+
- [ ] **Auto-discovery** - Detect logger usage patterns
|
|
144
|
+
- [ ] **Integration Helpers** - Framework-specific optimizations
|
|
145
|
+
|
|
146
|
+
### **Phase 6: Professional Polish** 🎯 FUTURE
|
|
147
|
+
- [ ] **Themes** - Light/dark mode toggle
|
|
148
|
+
- [ ] **Customizable UI** - Panel size, position, transparency
|
|
149
|
+
- [ ] **Animation Options** - Panel transitions and micro-interactions
|
|
150
|
+
- [ ] **Tour/Onboarding** - First-time user guidance
|
|
151
|
+
- [ ] **Documentation Panel** - Built-in help and shortcuts
|
|
152
|
+
- [ ] **Telemetry** - Anonymous usage analytics for improvements
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
|
|
156
|
+
## 🔧 Technical Decisions
|
|
157
|
+
|
|
158
|
+
### **Runtime Injection Strategy**
|
|
159
|
+
- **Decision**: Use dynamic import for panel loading
|
|
160
|
+
- **Rationale**: Zero bundle impact when DevTools not used
|
|
161
|
+
- **Implementation**: `import('./devtools/panel-entry.js')` on demand
|
|
162
|
+
|
|
163
|
+
### **Component Architecture**
|
|
164
|
+
- **Decision**: Preact with functional components and hooks
|
|
165
|
+
- **Rationale**: Small bundle size (3KB), React-like API, modern patterns
|
|
166
|
+
- **Benefits**: Fast rendering, familiar development experience
|
|
167
|
+
|
|
168
|
+
### **Styling Approach**
|
|
169
|
+
- **Decision**: Inline styles with JavaScript objects
|
|
170
|
+
- **Rationale**: No CSS bundle conflicts, complete encapsulation
|
|
171
|
+
- **Trade-offs**: Less maintainable but more portable
|
|
172
|
+
|
|
173
|
+
### **JSX vs h() Functions**
|
|
174
|
+
- **Decision**: Use h() function calls for browser compatibility
|
|
175
|
+
- **Rationale**: Avoid build step complexity during initial development
|
|
176
|
+
- **Future**: Convert to JSX with transpilation for better DX (Phase 2)
|
|
177
|
+
|
|
178
|
+
### **Development Server**
|
|
179
|
+
- **Decision**: Custom Node.js server with proper MIME types
|
|
180
|
+
- **Rationale**: ES modules need correct Content-Type headers
|
|
181
|
+
- **Benefits**: Fast iteration, no complex build tools
|
|
182
|
+
|
|
183
|
+
### **Testing Strategy**
|
|
184
|
+
- **Decision**: Browser-compatible logger mock for DevTools development
|
|
185
|
+
- **Rationale**: Test panel without Node.js dependencies
|
|
186
|
+
- **Implementation**: Simplified logger matching real API
|
|
187
|
+
|
|
188
|
+
### **UI Component Library (Phase 2)**
|
|
189
|
+
- **Decision**: Migrate from inline styles to Evergreen UI design system
|
|
190
|
+
- **Rationale**: 300+ lines of manual styling becomes unmaintainable, need professional polish
|
|
191
|
+
- **Benefits**: Design system consistency, accessibility, dark theme, 80% code reduction
|
|
192
|
+
- **Trade-offs**: +10KB bundle size for dramatically better DX and maintainability
|
|
193
|
+
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
## 📈 Recent Progress
|
|
197
|
+
|
|
198
|
+
### October 24, 2025 - Phase 2 Breakthrough: Integration Blocker Resolved 🎉
|
|
199
|
+
- ✅ **Import Path Fixed**: Installed JSG Logger as local file dependency (`npm install file:..`)
|
|
200
|
+
- ✅ **Dependencies Complete**: Parent package dependencies installed in devtools
|
|
201
|
+
- ✅ **ThemeProvider Fixed**: Removed incorrect `value` prop from ThemeProvider
|
|
202
|
+
- ✅ **Panel Renders**: Floating 🎛️ button successfully appears on screen
|
|
203
|
+
- ✅ **13 Components Loaded**: All logger components initialize correctly
|
|
204
|
+
- ⚠️ **Theme Issue**: Text components throw `undefined.colors` (non-blocking)
|
|
205
|
+
|
|
206
|
+
### August 21, 2025 - Phase 2 Major Progress: Evergreen UI Infrastructure 🎨
|
|
207
|
+
- ✅ **Separate DevTools Package**: Independent Preact application in `devtools/` directory
|
|
208
|
+
- ✅ **Professional UI Complete**: Beautiful gradient interface with glass-morphism cards
|
|
209
|
+
- ✅ **Evergreen UI Integration**: Full design system with custom dark theme
|
|
210
|
+
- ✅ **Component Migration**: FloatingButton successfully converted to Evergreen components
|
|
211
|
+
- ✅ **Build System**: Vite library mode with minification, source maps, and hot reload
|
|
212
|
+
- ✅ **Theme System**: Comprehensive dark DevTools theme with JSG Logger color palette
|
|
213
|
+
- 🔧 **Integration Issues**: Logger import and API compatibility problems identified
|
|
214
|
+
|
|
215
|
+
### ✅ RESOLVED Blocking Issues
|
|
216
|
+
- ✅ **Import Path**: Fixed via `npm install file:..` and `@crimsonsunset/jsg-logger` import
|
|
217
|
+
- ✅ **Dependencies**: Installed pino, pino-colada in parent directory
|
|
218
|
+
- ✅ **ThemeProvider**: Fixed Evergreen UI ThemeProvider usage
|
|
219
|
+
- ✅ **Panel Initialization**: Successfully renders floating button
|
|
220
|
+
|
|
221
|
+
### Minor Issues Remaining ⚠️
|
|
222
|
+
- ⚠️ **Text Theme**: Text components missing theme.colors data (non-critical)
|
|
223
|
+
|
|
224
|
+
### August 21, 2025 - Phase 1 Complete: Functional DevTools Panel 🎉
|
|
225
|
+
- ✅ **DevTools Panel Working**: Full floating button + sidebar panel
|
|
226
|
+
- ✅ **Component Toggles**: Real-time on/off switching for individual loggers
|
|
227
|
+
- ✅ **Global Controls**: Debug All, Trace All, Reset All functionality
|
|
228
|
+
- ✅ **Live Stats**: Auto-updating log counts and component status
|
|
229
|
+
- ✅ **Browser Compatibility**: JSX converted to h() calls for direct execution
|
|
230
|
+
- ✅ **Development Environment**: Complete test harness with dev server
|
|
231
|
+
- 🐛 **JSX Syntax Issue**: Fixed "Unexpected token" error by converting to h() calls
|
|
232
|
+
- 🎯 **Real-time Filtering**: Component toggles immediately affect console output
|
|
233
|
+
|
|
234
|
+
### Technical Achievements
|
|
235
|
+
- **Runtime-injected UI**: Panel loads on-demand via `logger.controls.enableDevPanel()`
|
|
236
|
+
- **Zero Build Complexity**: Direct browser execution with CDN imports
|
|
237
|
+
- **Professional UX**: Dark theme, smooth animations, responsive controls
|
|
238
|
+
- **Complete Integration**: Works seamlessly with existing JSG Logger API
|
|
239
|
+
|
|
240
|
+
### Key Learnings
|
|
241
|
+
- **JSX in Browser**: Requires transpilation or h() function approach
|
|
242
|
+
- **ES Module MIME Types**: Custom server needed for proper module loading
|
|
243
|
+
- **Preact CDN**: esm.sh provides excellent CDN-based Preact distribution
|
|
244
|
+
- **Real-time Updates**: useEffect + setInterval provides smooth stats updates
|
|
245
|
+
|
|
246
|
+
---
|
|
247
|
+
|
|
248
|
+
## 🎯 Success Metrics
|
|
249
|
+
|
|
250
|
+
### **Phase 1 Goals** ✅ ACHIEVED
|
|
251
|
+
- ✅ **Functional Panel** - Basic DevTools interface working
|
|
252
|
+
- ✅ **Component Control** - Individual logger on/off toggles
|
|
253
|
+
- ✅ **Global Actions** - System-wide debug/trace/reset controls
|
|
254
|
+
- ✅ **Real-time Updates** - Live stats and immediate effect of changes
|
|
255
|
+
- ✅ **Zero Bundle Impact** - Panel only loads when requested
|
|
256
|
+
- ✅ **Development Ready** - Easy iteration with dev server
|
|
257
|
+
|
|
258
|
+
### **Phase 2 Goals** 🎯 NEXT
|
|
259
|
+
- 🎯 **Evergreen Migration** - Replace 300+ lines of inline styles with design system
|
|
260
|
+
- 🎯 **Professional UI** - Dark theme consistency, accessibility patterns, smooth animations
|
|
261
|
+
- 🎯 **Build System** - Vite setup with proper minification and tree shaking
|
|
262
|
+
- 🎯 **Code Reduction** - 80% reduction in styling maintenance overhead
|
|
263
|
+
- 🎯 **Bundle Optimization** - Keep runtime injection under 30KB total
|
|
264
|
+
|
|
265
|
+
### **Long-term Vision**
|
|
266
|
+
- **Professional Tool** - DevTools-quality interface for logger control
|
|
267
|
+
- **Universal Compatibility** - Works in any project using JSG Logger
|
|
268
|
+
- **Developer Adoption** - Becomes standard tool for JSG Logger debugging
|
|
269
|
+
|
|
270
|
+
---
|
|
271
|
+
|
|
272
|
+
## 🚨 Known Issues & Limitations
|
|
273
|
+
|
|
274
|
+
### **Current Limitations**
|
|
275
|
+
- **Styling Maintenance** - 300+ lines of inline styles across 5 components
|
|
276
|
+
- **No Design System** - Colors, spacing, hover states duplicated everywhere
|
|
277
|
+
- **Development Experience** - h() calls verbose, no build tooling, manual file serving
|
|
278
|
+
- **Limited File Control** - No file-level override interface yet
|
|
279
|
+
|
|
280
|
+
### **Technical Debt (Addressed in Phase 2)**
|
|
281
|
+
- **Inline Style Hell** - Will be replaced with Evergreen design system
|
|
282
|
+
- **Manual Build Process** - Will be replaced with Vite + proper bundling
|
|
283
|
+
- **h() Function Calls** - Will be converted to JSX with Vite transpilation
|
|
284
|
+
- **No Component Reusability** - Will be solved with Evergreen primitives
|
|
285
|
+
|
|
286
|
+
### **Future Considerations**
|
|
287
|
+
- **Bundle Size** - Monitor Preact + components size impact
|
|
288
|
+
- **Performance** - Test with large numbers of components
|
|
289
|
+
- **Browser Compatibility** - Ensure works across all major browsers
|
|
290
|
+
|
|
291
|
+
---
|
|
292
|
+
|
|
293
|
+
## 🎯 Next Steps
|
|
294
|
+
|
|
295
|
+
### **Phase 2: Evergreen Migration Priority List**
|
|
296
|
+
1. **Foundation Setup** - Vite + Evergreen + preact-compat configuration
|
|
297
|
+
2. **Theme Foundation** - Custom dark DevTools theme with design tokens
|
|
298
|
+
3. **Component Replacement** - Replace inline styles with Evergreen components bottom-up
|
|
299
|
+
4. **Layout Migration** - SideSheet/Pane containers + responsive design
|
|
300
|
+
5. **Production Optimization** - Tree shaking + bundle analysis + runtime integration
|
|
301
|
+
|
|
302
|
+
### **Technical Improvements**
|
|
303
|
+
- **Code Organization** - Better file structure as components grow
|
|
304
|
+
- **Type Safety** - Consider TypeScript for better development experience
|
|
305
|
+
- **Testing** - Unit tests for component logic and interactions
|
|
306
|
+
- **Documentation** - Component API documentation and usage examples
|
|
307
|
+
|
|
308
|
+
### **User Experience**
|
|
309
|
+
- **Onboarding** - First-time user experience and feature discovery
|
|
310
|
+
- **Performance** - Optimize rendering and update cycles
|
|
311
|
+
- **Customization** - User preferences and panel personalization
|
|
312
|
+
|
|
313
|
+
---
|
|
314
|
+
|
|
315
|
+
## 💡 Ideas & Future Enhancements
|
|
316
|
+
|
|
317
|
+
### **Developer Experience Ideas**
|
|
318
|
+
- **Hot Reload** - Panel updates without page refresh during development
|
|
319
|
+
- **Component Inspector** - Click components to see their logger settings
|
|
320
|
+
- **Usage Analytics** - Show which components log most frequently
|
|
321
|
+
- **Smart Defaults** - Auto-configure based on detected usage patterns
|
|
322
|
+
|
|
323
|
+
### **Integration Ideas**
|
|
324
|
+
- **Framework Plugins** - React/Vue DevTools integration
|
|
325
|
+
- **CI/CD Integration** - Export configurations for automated testing
|
|
326
|
+
- **Team Sharing** - Share logger configurations with team members
|
|
327
|
+
- **Documentation** - Auto-generate logger documentation from configurations
|
|
328
|
+
|
|
329
|
+
### **Advanced Features**
|
|
330
|
+
- **Time Travel** - Replay log states for debugging
|
|
331
|
+
- **Visual Component Map** - Graph view of component relationships
|
|
332
|
+
- **Performance Impact** - Real-time logging performance monitoring
|
|
333
|
+
- **Smart Filtering** - AI-powered log relevance scoring
|
|
334
|
+
|
|
335
|
+
---
|
|
336
|
+
|
|
337
|
+
**DevTools Panel Status: 🎛️ FUNCTIONAL** - Ready for Phase 2 Evergreen UI migration and professional polish!
|
package/docs/next-session.md
CHANGED
|
@@ -14,139 +14,122 @@
|
|
|
14
14
|
|
|
15
15
|
---
|
|
16
16
|
|
|
17
|
-
**Date:**
|
|
18
|
-
**Session Goal:**
|
|
19
|
-
**Status:**
|
|
17
|
+
**Date:** October 24, 2025
|
|
18
|
+
**Session Goal:** 🎯 **Phase 2 DevTools - Fix Integration Blockers** - Resolve import/API compatibility
|
|
19
|
+
**Status:** 🎉 **MAJOR BREAKTHROUGH** - Panel loads, floating button renders, minor theme issues remain
|
|
20
20
|
|
|
21
21
|
## 🎉 MAJOR ACCOMPLISHMENTS THIS SESSION
|
|
22
22
|
|
|
23
|
-
### ✅
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
35
|
-
-
|
|
36
|
-
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
-
|
|
41
|
-
-
|
|
42
|
-
-
|
|
23
|
+
### ✅ DevTools Integration Blocker RESOLVED (October 24, 2025)
|
|
24
|
+
- **🔧 Import Path Fixed** - Installed JSG Logger as local file dependency
|
|
25
|
+
- **📦 Dependencies Complete** - All parent dependencies installed (pino, pino-colada)
|
|
26
|
+
- **🎯 ThemeProvider Fixed** - Corrected Evergreen UI ThemeProvider syntax
|
|
27
|
+
- **🎛️ Panel Renders** - Floating button successfully appears on screen
|
|
28
|
+
- **✅ Initialization Success** - DevTools panel loads without crashes
|
|
29
|
+
|
|
30
|
+
## 🎉 PREVIOUS SESSION ACCOMPLISHMENTS
|
|
31
|
+
|
|
32
|
+
### ✅ DevTools Phase 2 Infrastructure Complete
|
|
33
|
+
- **🏗️ Dual Architecture** - Separated DevTools test app (`devtools/`) from main logger
|
|
34
|
+
- **⚛️ Preact Application** - Complete test harness with comprehensive UI
|
|
35
|
+
- **🎨 Evergreen UI Integration** - Professional design system with dark theme
|
|
36
|
+
- **🔧 Build Pipeline** - Vite library mode with minification and source maps
|
|
37
|
+
- **🎛️ Professional UI** - Beautiful gradient interface with glass-morphism cards
|
|
38
|
+
|
|
39
|
+
### ✅ Theme System & Component Migration
|
|
40
|
+
- **🌙 Dark DevTools Theme** - Custom theme matching JSG Logger branding colors
|
|
41
|
+
- **🎯 Component Replacement** - FloatingButton migrated to Evergreen Button + Badge
|
|
42
|
+
- **📦 Theme Provider** - Proper Evergreen ThemeProvider integration
|
|
43
|
+
- **🎨 Design Tokens** - Comprehensive color system and typography scales
|
|
44
|
+
- **📱 Component Architecture** - Clean component structure with proper props
|
|
45
|
+
|
|
46
|
+
### ✅ Development Environment
|
|
47
|
+
- **📂 Separate Package** - Independent devtools package.json with proper dependencies
|
|
48
|
+
- **🔥 Hot Reload** - Vite dev server on port 5556 with live updates
|
|
49
|
+
- **🔗 React Compatibility** - Evergreen UI working with Preact via compat aliases
|
|
50
|
+
- **🛠️ Build Tools** - Complete development and production build pipeline
|
|
43
51
|
|
|
44
52
|
## 🎯 Current Status
|
|
45
53
|
|
|
46
|
-
### **
|
|
47
|
-
- **
|
|
48
|
-
- **
|
|
49
|
-
- **
|
|
50
|
-
- **
|
|
51
|
-
|
|
52
|
-
### **What's Working
|
|
53
|
-
- ✅ **
|
|
54
|
-
- ✅ **
|
|
55
|
-
- ✅ **
|
|
56
|
-
- ✅ **
|
|
57
|
-
- ✅ **
|
|
58
|
-
|
|
59
|
-
### **
|
|
60
|
-
- **
|
|
61
|
-
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
**
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
- [x] **
|
|
73
|
-
- [x] **
|
|
74
|
-
- [x] **
|
|
75
|
-
- [x] **
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
-
|
|
82
|
-
-
|
|
83
|
-
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
- **
|
|
87
|
-
- **
|
|
88
|
-
- **
|
|
89
|
-
- **
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
-
|
|
94
|
-
-
|
|
95
|
-
- [ ] **Framework Integration Guides** - React, Vue, Svelte examples
|
|
96
|
-
|
|
97
|
-
## 🔧 Technical Notes
|
|
98
|
-
|
|
99
|
-
### **NPM Publishing Lessons Learned**
|
|
100
|
-
- **Scoped Packages** - Need `--access public` for free publishing
|
|
101
|
-
- **Internal Imports** - Required multiple patch versions (1.0.1-1.0.4) to fix relative paths
|
|
102
|
-
- **Automated Scripts** - `npm run release` handles version bump + publish in one command
|
|
103
|
-
|
|
104
|
-
### **Architecture Highlights**
|
|
105
|
-
- **Browser Logger Breakthrough** - Bypassing Pino for 100% console control
|
|
106
|
-
- **Hierarchical Config** - File > Component > Global precedence
|
|
107
|
-
- **Environment Detection** - Feature detection over user agent parsing
|
|
108
|
-
- **Runtime API** - Complete `logger.controls` interface for dynamic changes
|
|
109
|
-
|
|
110
|
-
### **Integration Success**
|
|
111
|
-
- **Vite Alias Removal** - Cleanly replaced `@logger` alias with NPM import
|
|
112
|
-
- **Build Compatibility** - Extension builds successfully with published package
|
|
113
|
-
- **Zero Disruption** - Existing DeskThing functionality unchanged
|
|
54
|
+
### **DevTools Panel: WORKING with Minor Theme Issues** 🎉
|
|
55
|
+
- **Panel Loads**: Successfully initializes and renders floating button
|
|
56
|
+
- **Logger Integration**: JSG Logger imports and initializes correctly
|
|
57
|
+
- **API Confirmed**: `enableDevPanel()` works, all 13 components loaded
|
|
58
|
+
- **Theme Issue**: Text components missing theme.colors (non-blocking)
|
|
59
|
+
|
|
60
|
+
### **What's Working**
|
|
61
|
+
- ✅ **JSG Logger** - Loads from `@crimsonsunset/jsg-logger` package (file: dependency)
|
|
62
|
+
- ✅ **DevTools Panel** - Initializes and renders floating 🎛️ button
|
|
63
|
+
- ✅ **Vite Dev Server** - Running on port 5556 with hot reload
|
|
64
|
+
- ✅ **Test App** - All logger testing features functional
|
|
65
|
+
- ✅ **Console Logging** - Beautiful formatted output with 13 components
|
|
66
|
+
|
|
67
|
+
### **Minor Issues Remaining** ⚠️
|
|
68
|
+
- ⚠️ **Text Theme**: Evergreen Text components throw `undefined.colors` errors
|
|
69
|
+
- ⚠️ **Panel Content**: May not be fully visible due to theme data issues
|
|
70
|
+
|
|
71
|
+
## 📋 IMMEDIATE PRIORITIES
|
|
72
|
+
|
|
73
|
+
### **🔧 Theme Fixes (Minor):**
|
|
74
|
+
- [ ] **Fix Text Components** - Pass theme data correctly to Evergreen UI Text components
|
|
75
|
+
- [ ] **Test Panel Interaction** - Click floating button and verify panel opens
|
|
76
|
+
- [ ] **Verify Filtering** - Test component toggles affect console output
|
|
77
|
+
- [ ] **Apply Custom Theme** - Implement devtools-theme.js once basic theme works
|
|
78
|
+
|
|
79
|
+
### **✅ COMPLETED:**
|
|
80
|
+
- [x] **Import Resolution** - JSG Logger loads via `@crimsonsunset/jsg-logger` (file: dependency)
|
|
81
|
+
- [x] **Dependencies** - Installed parent package dependencies (pino, pino-colada)
|
|
82
|
+
- [x] **ThemeProvider** - Fixed Evergreen UI ThemeProvider configuration
|
|
83
|
+
- [x] **Panel Initialization** - DevTools panel successfully renders floating button
|
|
84
|
+
|
|
85
|
+
## 🔮 Future Possibilities (Phase 10)
|
|
86
|
+
|
|
87
|
+
### **Developer Experience Enhancements** (Optional)
|
|
88
|
+
**Current friction points identified:**
|
|
89
|
+
- Manual logger-config.json creation
|
|
90
|
+
- Component definition setup
|
|
91
|
+
- New project onboarding
|
|
92
|
+
|
|
93
|
+
**Potential solutions:**
|
|
94
|
+
- **CLI Generator**: `npx create-jsg-logger-config`
|
|
95
|
+
- **Project Templates**: Pre-built configs for React, Node.js, Chrome extensions
|
|
96
|
+
- **Quick Start**: `JSGLogger.quickStart()` with auto-detection
|
|
97
|
+
- **Better Errors**: Helpful validation and suggestions
|
|
98
|
+
|
|
99
|
+
### **Success Metrics for Phase 10:**
|
|
100
|
+
- New project setup in < 30 seconds
|
|
101
|
+
- Zero manual config creation needed
|
|
102
|
+
- Out-of-the-box support for common project types
|
|
114
103
|
|
|
115
104
|
## 🎯 Next Session Possibilities
|
|
116
105
|
|
|
117
|
-
### **
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
-
|
|
141
|
-
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
- **Dependencies**: Only pino for server environments
|
|
148
|
-
- **License**: ISC with "AS IS" protection
|
|
149
|
-
|
|
150
|
-
### **Project Completion Status**: 100% Core Features ✅
|
|
151
|
-
|
|
152
|
-
**The JSG Logger is now a complete, professional, reusable NPM package with comprehensive documentation and legal protection.**
|
|
106
|
+
### **Option 1: Ship v1.2.0 and Monitor** (Recommended)
|
|
107
|
+
- Publish the fully generic logger
|
|
108
|
+
- Monitor adoption and gather feedback
|
|
109
|
+
- Address any issues that emerge from real-world usage
|
|
110
|
+
|
|
111
|
+
### **Option 2: Phase 10 DX Enhancements** (Nice-to-have)
|
|
112
|
+
- Build CLI config generator
|
|
113
|
+
- Create project templates
|
|
114
|
+
- Add quick-start modes
|
|
115
|
+
|
|
116
|
+
### **Option 3: Maintenance Mode**
|
|
117
|
+
- JSG Logger is feature-complete for core logging needs
|
|
118
|
+
- Focus on other projects while monitoring for bug reports
|
|
119
|
+
|
|
120
|
+
## 📊 Phase 9 Impact Summary
|
|
121
|
+
|
|
122
|
+
### **Generic Transformation:**
|
|
123
|
+
- **Before**: 10+ hardcoded legacy components, CACP-specific references
|
|
124
|
+
- **After**: 1 minimal 'core' component, 100% project-agnostic
|
|
125
|
+
- **Breaking Changes**: Projects must define components in config
|
|
126
|
+
- **Migration**: Simple config file creation for existing users
|
|
127
|
+
|
|
128
|
+
### **Code Quality:**
|
|
129
|
+
- **Zero Legacy References**: Exhaustive cleanup completed
|
|
130
|
+
- **Clean Architecture**: No hardcoded project assumptions
|
|
131
|
+
- **Dynamic Systems**: Auto-generation replaces hardcoded logic
|
|
132
|
+
- **Semantic Versioning**: v1.2.0 properly indicates breaking changes
|
|
133
|
+
|
|
134
|
+
### **Deployment Readiness:** ✅ PRODUCTION READY
|
|
135
|
+
**The JSG Logger is now a completely generic, professional logging package that can be deployed in any JavaScript project with minimal configuration.**
|
package/docs/roadmap.md
CHANGED
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
|
|
22
22
|
## 🎯 Current Status
|
|
23
23
|
**Last Updated:** August 21, 2025
|
|
24
|
-
**Current Phase:** Phase
|
|
25
|
-
**Status:**
|
|
26
|
-
**
|
|
24
|
+
**Current Phase:** DevTools Phase 2 - Evergreen UI Migration 🔧 **IN PROGRESS**
|
|
25
|
+
**Status:** 🎨 **UI COMPLETE, DEBUGGING API INTEGRATION** - Professional DevTools UI built, fixing logger compatibility
|
|
26
|
+
**Next Phase:** Complete DevTools Phase 2, then Phase 10 DX Enhancements
|
|
27
27
|
|
|
28
28
|
### Progress Overview
|
|
29
29
|
- ✅ **COMPLETED:** Multi-environment logger with smart detection
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
- ✅ **COMPLETED:** Automated publishing scripts
|
|
38
38
|
- ✅ **COMPLETED:** Documentation structure (LICENSE, CHANGELOG, CONTRIBUTING)
|
|
39
39
|
- ✅ **COMPLETED:** Phase 8 API Enhancement - v1.1.0 with zero-boilerplate integration
|
|
40
|
+
- ✅ **COMPLETED:** Phase 9 Genericization - v1.2.0 with zero legacy references
|
|
40
41
|
|
|
41
42
|
### Key Achievements
|
|
42
43
|
- **🚀 BREAKTHROUGH:** Custom browser logger achieving perfect visual formatting
|
|
@@ -45,6 +46,7 @@
|
|
|
45
46
|
- **⚡ Performance:** Lightweight with smart environment detection
|
|
46
47
|
- **📚 Documentation:** Comprehensive README with examples
|
|
47
48
|
- **✨ PROJECT SIMPLIFICATION:** Phase 8 - 82% boilerplate reduction with v1.1.0 API enhancements
|
|
49
|
+
- **🎯 FULL GENERICIZATION:** Phase 9 - 100% generic logger, zero legacy dependencies
|
|
48
50
|
|
|
49
51
|
---
|
|
50
52
|
|
|
@@ -340,6 +342,15 @@ Console filtering updates
|
|
|
340
342
|
|
|
341
343
|
## 📈 Recent Progress
|
|
342
344
|
|
|
345
|
+
### August 21, 2025 - DevTools Phase 2: Evergreen UI Migration Major Progress 🎨
|
|
346
|
+
- ✅ **Professional UI Architecture** - Complete Preact + Evergreen UI DevTools application
|
|
347
|
+
- ✅ **Separate DevTools Package** - Independent development environment in `devtools/` directory
|
|
348
|
+
- ✅ **Custom Theme System** - Professional dark theme with JSG Logger branding colors
|
|
349
|
+
- ✅ **Component Migration** - FloatingButton successfully converted to Evergreen Button + Badge
|
|
350
|
+
- ✅ **Build Infrastructure** - Vite library mode with hot reload, minification, and source maps
|
|
351
|
+
- 🔧 **Integration Debugging** - Import path and API compatibility issues identified and being resolved
|
|
352
|
+
- 📱 **Beautiful Test UI** - Comprehensive test harness with gradient background and glass-morphism design
|
|
353
|
+
|
|
343
354
|
### August 21, 2025 - Phase 9 Discovery: Legacy Hardcoding Issues 🔍
|
|
344
355
|
- 🐛 **Critical Discovery**: JSG Logger still deeply hardcoded for legacy use cases
|
|
345
356
|
- 🔍 **Issue Identified**: `logger-config.json` files being ignored, falling back to legacy defaults
|
|
@@ -696,8 +707,65 @@ if (this.loggers.core) {
|
|
|
696
707
|
5. **Fix core component** - Use configurable core for init logging
|
|
697
708
|
6. **Update browser global** - `window.JSG_Logger`
|
|
698
709
|
7. **Test with jsg-tech-check-site** - Verify Astro components load correctly
|
|
699
|
-
8. **Version bump** -
|
|
700
|
-
9. **Publish updated package** -
|
|
710
|
+
8. ✅ **Version bump** - v1.2.0 published with breaking changes
|
|
711
|
+
9. ✅ **Publish updated package** - Generic version deployed to NPM
|
|
712
|
+
|
|
713
|
+
---
|
|
714
|
+
|
|
715
|
+
### **Phase 10: Developer Experience Enhancements** 🎯 FUTURE
|
|
716
|
+
**Goal**: Make JSG Logger deployment effortless for new projects with zero friction onboarding
|
|
717
|
+
|
|
718
|
+
**Current State Analysis:**
|
|
719
|
+
- ✅ **Easy to use**: `JSGLogger.getInstance({ configPath: './logger-config.json' })`
|
|
720
|
+
- ✅ **Auto-discovery**: Missing components created automatically
|
|
721
|
+
- ✅ **Multi-environment**: Works everywhere without changes
|
|
722
|
+
- 🤔 **Friction point**: Manual config file creation
|
|
723
|
+
- 🤔 **Friction point**: Component definition setup
|
|
724
|
+
|
|
725
|
+
#### **🚀 Enhancement Ideas**
|
|
726
|
+
|
|
727
|
+
##### **1. Config Generator CLI**
|
|
728
|
+
```bash
|
|
729
|
+
npx create-jsg-logger-config
|
|
730
|
+
# Interactive CLI to generate logger-config.json
|
|
731
|
+
# Prompts for project type, components needed, etc.
|
|
732
|
+
```
|
|
733
|
+
|
|
734
|
+
##### **2. Project Templates**
|
|
735
|
+
**Pre-built configs for common project types:**
|
|
736
|
+
- **React/Next.js**: `api`, `ui`, `hooks`, `components`
|
|
737
|
+
- **Node.js/Express**: `server`, `database`, `auth`, `middleware`
|
|
738
|
+
- **Chrome Extension**: `background`, `content`, `popup`, `storage`
|
|
739
|
+
- **Astro/Static**: `build`, `pages`, `components`, `content`
|
|
740
|
+
|
|
741
|
+
##### **3. Better Error Messages**
|
|
742
|
+
- Config validation with helpful suggestions
|
|
743
|
+
- Missing component guidance: "Did you mean 'api' instead of 'API'?"
|
|
744
|
+
- Environment-specific setup hints
|
|
745
|
+
|
|
746
|
+
##### **4. Quick Start Modes**
|
|
747
|
+
```javascript
|
|
748
|
+
// Instant setup with smart defaults
|
|
749
|
+
import JSGLogger from '@crimsonsunset/jsg-logger';
|
|
750
|
+
|
|
751
|
+
// Zero config - auto-detect project type
|
|
752
|
+
const logger = JSGLogger.quickStart();
|
|
753
|
+
|
|
754
|
+
// Template-based setup
|
|
755
|
+
const logger = JSGLogger.fromTemplate('react');
|
|
756
|
+
const logger = JSGLogger.fromTemplate('node-api');
|
|
757
|
+
```
|
|
758
|
+
|
|
759
|
+
##### **5. Integration Helpers**
|
|
760
|
+
- **Vite plugin**: Auto-inject logger into development
|
|
761
|
+
- **Webpack plugin**: Build-time component detection
|
|
762
|
+
- **ESLint plugin**: Enforce consistent logging patterns
|
|
763
|
+
|
|
764
|
+
#### **Success Criteria**
|
|
765
|
+
- New project setup in < 30 seconds
|
|
766
|
+
- Zero manual config file creation needed
|
|
767
|
+
- Common project types work out-of-the-box
|
|
768
|
+
- Helpful error messages guide users to success
|
|
701
769
|
|
|
702
770
|
---
|
|
703
771
|
|
package/index.js
CHANGED
|
@@ -20,6 +20,7 @@ import {LogStore} from './stores/log-store.js';
|
|
|
20
20
|
class JSGLogger {
|
|
21
21
|
// Static singleton instance
|
|
22
22
|
static _instance = null;
|
|
23
|
+
static _enhancedLoggers = null;
|
|
23
24
|
|
|
24
25
|
constructor() {
|
|
25
26
|
this.loggers = {};
|
|
@@ -32,27 +33,27 @@ class JSGLogger {
|
|
|
32
33
|
/**
|
|
33
34
|
* Get singleton instance with auto-initialization
|
|
34
35
|
* @param {Object} options - Initialization options (only used on first call)
|
|
35
|
-
* @returns {Promise<
|
|
36
|
+
* @returns {Promise<Object>} Enhanced logger exports with controls API
|
|
36
37
|
*/
|
|
37
38
|
static async getInstance(options = {}) {
|
|
38
39
|
if (!JSGLogger._instance) {
|
|
39
40
|
JSGLogger._instance = new JSGLogger();
|
|
40
|
-
await JSGLogger._instance.init(options);
|
|
41
|
+
JSGLogger._enhancedLoggers = await JSGLogger._instance.init(options);
|
|
41
42
|
}
|
|
42
|
-
return JSGLogger.
|
|
43
|
+
return JSGLogger._enhancedLoggers;
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
/**
|
|
46
47
|
* Get singleton instance synchronously (for environments without async support)
|
|
47
48
|
* @param {Object} options - Initialization options (only used on first call)
|
|
48
|
-
* @returns {
|
|
49
|
+
* @returns {Object} Enhanced logger exports with controls API
|
|
49
50
|
*/
|
|
50
51
|
static getInstanceSync(options = {}) {
|
|
51
52
|
if (!JSGLogger._instance) {
|
|
52
53
|
JSGLogger._instance = new JSGLogger();
|
|
53
|
-
JSGLogger._instance.initSync(options);
|
|
54
|
+
JSGLogger._enhancedLoggers = JSGLogger._instance.initSync(options);
|
|
54
55
|
}
|
|
55
|
-
return JSGLogger.
|
|
56
|
+
return JSGLogger._enhancedLoggers;
|
|
56
57
|
}
|
|
57
58
|
|
|
58
59
|
/**
|
|
@@ -337,6 +338,44 @@ class JSGLogger {
|
|
|
337
338
|
return configManager.config.components?.[component]?.level;
|
|
338
339
|
},
|
|
339
340
|
|
|
341
|
+
// DevTools panel controls
|
|
342
|
+
enableDevPanel: async () => {
|
|
343
|
+
if (typeof window === 'undefined') {
|
|
344
|
+
console.warn('[JSG-LOGGER] DevTools panel only available in browser environments');
|
|
345
|
+
return null;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
try {
|
|
349
|
+
// In development: import source files directly for hot reload
|
|
350
|
+
// In production: import built bundle
|
|
351
|
+
const isDev = import.meta.env?.DEV || window.location.hostname === 'localhost';
|
|
352
|
+
|
|
353
|
+
let module;
|
|
354
|
+
if (isDev) {
|
|
355
|
+
console.log('🔥 DEV MODE: Attempting to load DevTools from SOURCE for hot reload');
|
|
356
|
+
try {
|
|
357
|
+
// Fix the import path for Vite dev server
|
|
358
|
+
const importPath = '/src/panel-entry.jsx';
|
|
359
|
+
console.log('🔍 Importing:', importPath);
|
|
360
|
+
module = await import(importPath);
|
|
361
|
+
console.log('✅ Source import successful:', module);
|
|
362
|
+
} catch (sourceError) {
|
|
363
|
+
console.error('❌ Source import failed, falling back to bundle:', sourceError);
|
|
364
|
+
const cacheBuster = Date.now();
|
|
365
|
+
module = await import(`./devtools/dist/panel-entry.js?v=${cacheBuster}`);
|
|
366
|
+
}
|
|
367
|
+
} else {
|
|
368
|
+
console.log('📦 PROD MODE: Loading DevTools from built bundle');
|
|
369
|
+
const cacheBuster = Date.now();
|
|
370
|
+
module = await import(`./devtools/dist/panel-entry.js?v=${cacheBuster}`);
|
|
371
|
+
}
|
|
372
|
+
return module.initializePanel();
|
|
373
|
+
} catch (error) {
|
|
374
|
+
console.error('[JSG-LOGGER] Failed to load DevTools panel:', error);
|
|
375
|
+
return null;
|
|
376
|
+
}
|
|
377
|
+
},
|
|
378
|
+
|
|
340
379
|
// System controls
|
|
341
380
|
refresh: () => this.refreshLoggers(),
|
|
342
381
|
reset: () => {
|
|
@@ -540,12 +579,9 @@ class JSGLogger {
|
|
|
540
579
|
}
|
|
541
580
|
}
|
|
542
581
|
|
|
543
|
-
// Create singleton instance
|
|
544
|
-
const logger = new JSGLogger();
|
|
545
|
-
|
|
546
582
|
// Initialize synchronously with default config for immediate use
|
|
547
583
|
// (Chrome extensions and other environments that don't support top-level await)
|
|
548
|
-
const enhancedLoggers =
|
|
584
|
+
const enhancedLoggers = JSGLogger.getInstanceSync();
|
|
549
585
|
|
|
550
586
|
// Make runtime controls available globally in browser for debugging
|
|
551
587
|
if (isBrowser() && typeof window !== 'undefined') {
|
|
@@ -560,4 +596,4 @@ enhancedLoggers.JSGLogger = JSGLogger;
|
|
|
560
596
|
|
|
561
597
|
// Export both the initialized loggers and the class for advanced usage
|
|
562
598
|
export default enhancedLoggers;
|
|
563
|
-
export {
|
|
599
|
+
export {JSGLogger};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@crimsonsunset/jsg-logger",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "JSG Logger - Multi-environment logger with smart detection, file-level overrides, and beautiful console formatting",
|
|
6
6
|
"main": "index.js",
|
|
@@ -27,10 +27,15 @@
|
|
|
27
27
|
},
|
|
28
28
|
"homepage": "https://github.com/crimsonsunset/jsg-logger#readme",
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"
|
|
30
|
+
"@preact/preset-vite": "^2.10.2",
|
|
31
|
+
"evergreen-ui": "^7.1.9",
|
|
32
|
+
"lodash.merge": "^4.6.2",
|
|
33
|
+
"pino": "^9.7.0",
|
|
34
|
+
"preact": "^10.27.1"
|
|
31
35
|
},
|
|
32
36
|
"devDependencies": {
|
|
33
|
-
"pino-colada": "^2.2.2"
|
|
37
|
+
"pino-colada": "^2.2.2",
|
|
38
|
+
"vite": "^5.1.3"
|
|
34
39
|
},
|
|
35
40
|
"peerDependencies": {
|
|
36
41
|
"pino-colada": "^2.2.2"
|
|
@@ -64,11 +69,20 @@
|
|
|
64
69
|
"./examples/*": "./examples/*"
|
|
65
70
|
},
|
|
66
71
|
"scripts": {
|
|
72
|
+
"dev": "vite",
|
|
73
|
+
"dev:devtools": "vite",
|
|
74
|
+
"test:devtools": "vite",
|
|
75
|
+
"build:devtools": "cd devtools && npm run build",
|
|
67
76
|
"release:patch": "npm version patch && npm publish --access public",
|
|
68
77
|
"release:minor": "npm version minor && npm publish --access public",
|
|
69
78
|
"release:major": "npm version major && npm publish --access public",
|
|
70
79
|
"release": "npm run release:patch",
|
|
71
80
|
"publish:public": "npm publish --access public",
|
|
81
|
+
"publish:github": "npm publish --registry=https://npm.pkg.github.com/ --access public",
|
|
82
|
+
"publish:dual": "npm publish --access public && npm publish --registry=https://npm.pkg.github.com/ --access public",
|
|
83
|
+
"release:dual:patch": "npm version patch && npm run publish:dual",
|
|
84
|
+
"release:dual:minor": "npm version minor && npm run publish:dual",
|
|
85
|
+
"release:dual:major": "npm version major && npm run publish:dual",
|
|
72
86
|
"check": "npm run test && echo 'Package ready for publishing'"
|
|
73
87
|
}
|
|
74
88
|
}
|