@heojeongbo/log-palette 0.2.0 → 0.2.1
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/README.md +145 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
# log-palette
|
|
2
|
+
|
|
3
|
+
Browser logging library with domain-based colored prefix badges.
|
|
4
|
+
|
|
5
|
+
Each logger is bound to a named domain (e.g. `auth`, `api`, `payments`) and outputs a fixed-width, color-coded badge in the browser DevTools console — making it easy to visually filter log output in complex frontend applications.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @heojeongbo/log-palette
|
|
11
|
+
# or
|
|
12
|
+
bun add @heojeongbo/log-palette
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Quick Start
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
import { createLogger } from '@heojeongbo/log-palette'
|
|
19
|
+
|
|
20
|
+
const log = createLogger('auth')
|
|
21
|
+
|
|
22
|
+
log.info('User signed in', { userId: 42 })
|
|
23
|
+
// → [....auth] 05:35:41.039 User signed in { userId: 42 }
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## API
|
|
27
|
+
|
|
28
|
+
### `createLogger(domain, options?)`
|
|
29
|
+
|
|
30
|
+
Creates a new logger instance. Each call returns a fresh instance.
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
const log = createLogger('payments', { color: '#16a34a', level: 'warn' })
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### `getLogger(domain, options?)`
|
|
37
|
+
|
|
38
|
+
Returns a singleton logger for the given domain — the same instance is returned every time the same domain is used. Options are only applied on first call.
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
// In module A
|
|
42
|
+
const log = getLogger('api')
|
|
43
|
+
|
|
44
|
+
// In module B — same instance
|
|
45
|
+
const log = getLogger('api')
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Logger Methods
|
|
49
|
+
|
|
50
|
+
| Method | Description |
|
|
51
|
+
|---|---|
|
|
52
|
+
| `log(...args)` | Log at `log` level |
|
|
53
|
+
| `info(...args)` | Log at `info` level |
|
|
54
|
+
| `warn(...args)` | Log at `warn` level |
|
|
55
|
+
| `error(...args)` | Log at `error` level |
|
|
56
|
+
| `debug(...args)` | Log at `debug` level |
|
|
57
|
+
| `group(label)` | Open a collapsible DevTools group |
|
|
58
|
+
| `groupCollapsed(label)` | Open a collapsed DevTools group |
|
|
59
|
+
| `groupEnd()` | Close the most recently opened group |
|
|
60
|
+
| `time(label)` | Start a named performance timer |
|
|
61
|
+
| `timeEnd(label)` | Stop the timer and log elapsed time |
|
|
62
|
+
| `setLevel(level)` | Change the minimum log level at runtime |
|
|
63
|
+
| `setEnabled(enabled)` | Enable or disable this logger at runtime |
|
|
64
|
+
|
|
65
|
+
### `LoggerOptions`
|
|
66
|
+
|
|
67
|
+
| Option | Type | Default | Description |
|
|
68
|
+
|---|---|---|---|
|
|
69
|
+
| `color` | `string` | auto | CSS color for the prefix badge. If omitted, a color is derived from the domain name via djb2 hash. |
|
|
70
|
+
| `level` | `LogLevel` | `'debug'` | Minimum log level. Levels below this are silently dropped. |
|
|
71
|
+
| `enabled` | `boolean` | `true` | When `false`, all output is suppressed. |
|
|
72
|
+
|
|
73
|
+
**Log level order (lowest → highest):** `debug` < `log` < `info` < `warn` < `error`
|
|
74
|
+
|
|
75
|
+
### Global Configuration
|
|
76
|
+
|
|
77
|
+
Use `configure()` to change formatting settings that apply to all loggers.
|
|
78
|
+
|
|
79
|
+
```ts
|
|
80
|
+
import { configure } from '@heojeongbo/log-palette'
|
|
81
|
+
|
|
82
|
+
// Wider prefix column (useful for long domain names)
|
|
83
|
+
configure({ innerWidth: 12 })
|
|
84
|
+
|
|
85
|
+
// Disable timestamps
|
|
86
|
+
configure({ timestamp: false })
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
| Option | Type | Default | Description |
|
|
90
|
+
|---|---|---|---|
|
|
91
|
+
| `innerWidth` | `number` | `8` | Number of characters inside the prefix brackets. Short domains are left-padded with dots; long domains are truncated with `…`. |
|
|
92
|
+
| `timestamp` | `boolean` | `true` | Whether to include a timestamp in each log line. |
|
|
93
|
+
|
|
94
|
+
### Registry Utilities
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
import { getAllLoggers, setGlobalLevel, enableAll, disableAll } from '@heojeongbo/log-palette'
|
|
98
|
+
|
|
99
|
+
// Only show warnings and errors in production
|
|
100
|
+
if (import.meta.env.PROD) setGlobalLevel('warn')
|
|
101
|
+
|
|
102
|
+
// Silence all loggers
|
|
103
|
+
disableAll()
|
|
104
|
+
|
|
105
|
+
// Re-enable all loggers
|
|
106
|
+
enableAll()
|
|
107
|
+
|
|
108
|
+
// Inspect all registered loggers
|
|
109
|
+
const loggers = getAllLoggers()
|
|
110
|
+
console.log([...loggers.keys()]) // ['api', 'auth', 'payments']
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## Examples
|
|
114
|
+
|
|
115
|
+
### Group & Timer
|
|
116
|
+
|
|
117
|
+
```ts
|
|
118
|
+
const apiLog = createLogger('api')
|
|
119
|
+
|
|
120
|
+
apiLog.group('Fetch /users')
|
|
121
|
+
apiLog.info('response', data)
|
|
122
|
+
apiLog.groupEnd()
|
|
123
|
+
|
|
124
|
+
apiLog.time('login')
|
|
125
|
+
await performLogin()
|
|
126
|
+
apiLog.timeEnd('login')
|
|
127
|
+
// DevTools: [.......api] login: 42.1ms
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Production Setup
|
|
131
|
+
|
|
132
|
+
```ts
|
|
133
|
+
import { configure, setGlobalLevel, disableAll } from '@heojeongbo/log-palette'
|
|
134
|
+
|
|
135
|
+
if (import.meta.env.PROD) {
|
|
136
|
+
disableAll()
|
|
137
|
+
} else {
|
|
138
|
+
configure({ timestamp: true })
|
|
139
|
+
setGlobalLevel('debug')
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## License
|
|
144
|
+
|
|
145
|
+
MIT
|