@heojeongbo/log-palette 0.2.0

package/src/__tests__/logger.test.ts

@@ -0,0 +1,204 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createLogger, LogPalette } from '../logger.js'
+
+describe('createLogger', () => {
+  it('returns a Logger instance', () => {
+    const log = createLogger('test')
+    expect(log).toBeDefined()
+    expect(log.domain).toBe('test')
+  })
+
+  it('assigns auto color when no color option provided', () => {
+    const log = createLogger('test')
+    expect(log.color).toMatch(/^hsl\(/)
+  })
+
+  it('uses provided color', () => {
+    const log = createLogger('test', { color: '#ff0000' })
+    expect(log.color).toBe('#ff0000')
+  })
+})
+
+describe('LogPalette', () => {
+  let consoleSpy: {
+    log: ReturnType<typeof vi.spyOn>
+    info: ReturnType<typeof vi.spyOn>
+    warn: ReturnType<typeof vi.spyOn>
+    error: ReturnType<typeof vi.spyOn>
+    debug: ReturnType<typeof vi.spyOn>
+    group: ReturnType<typeof vi.spyOn>
+    groupCollapsed: ReturnType<typeof vi.spyOn>
+    groupEnd: ReturnType<typeof vi.spyOn>
+    time: ReturnType<typeof vi.spyOn>
+    timeEnd: ReturnType<typeof vi.spyOn>
+  }
+
+  beforeEach(() => {
+    consoleSpy = {
+      log: vi.spyOn(console, 'log').mockImplementation(() => {}),
+      info: vi.spyOn(console, 'info').mockImplementation(() => {}),
+      warn: vi.spyOn(console, 'warn').mockImplementation(() => {}),
+      error: vi.spyOn(console, 'error').mockImplementation(() => {}),
+      debug: vi.spyOn(console, 'debug').mockImplementation(() => {}),
+      group: vi.spyOn(console, 'group').mockImplementation(() => {}),
+      groupCollapsed: vi.spyOn(console, 'groupCollapsed').mockImplementation(() => {}),
+      groupEnd: vi.spyOn(console, 'groupEnd').mockImplementation(() => {}),
+      time: vi.spyOn(console, 'time').mockImplementation(() => {}),
+      timeEnd: vi.spyOn(console, 'timeEnd').mockImplementation(() => {}),
+    }
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('calls the correct console method for each level', () => {
+    const log = new LogPalette('test')
+    log.log('a')
+    log.info('b')
+    log.warn('c')
+    log.error('d')
+    log.debug('e')
+
+    expect(consoleSpy.log).toHaveBeenCalledOnce()
+    expect(consoleSpy.info).toHaveBeenCalledOnce()
+    expect(consoleSpy.warn).toHaveBeenCalledOnce()
+    expect(consoleSpy.error).toHaveBeenCalledOnce()
+    expect(consoleSpy.debug).toHaveBeenCalledOnce()
+  })
+
+  it('includes the domain prefix in log output', () => {
+    const log = new LogPalette('auth')
+    log.info('hello')
+
+    const call = consoleSpy.info.mock.calls[0]
+    expect(call[0]).toContain('[....auth]')
+  })
+
+  it('passes additional args to console', () => {
+    const log = new LogPalette('test')
+    const obj = { key: 'value' }
+    log.info('message', obj)
+
+    const call = consoleSpy.info.mock.calls[0]
+    expect(call).toContain(obj)
+  })
+
+  describe('level filtering', () => {
+    it('suppresses levels below the configured minimum', () => {
+      const log = new LogPalette('test', { level: 'warn' })
+      log.debug('no')
+      log.log('no')
+      log.info('no')
+      log.warn('yes')
+      log.error('yes')
+
+      expect(consoleSpy.debug).not.toHaveBeenCalled()
+      expect(consoleSpy.log).not.toHaveBeenCalled()
+      expect(consoleSpy.info).not.toHaveBeenCalled()
+      expect(consoleSpy.warn).toHaveBeenCalledOnce()
+      expect(consoleSpy.error).toHaveBeenCalledOnce()
+    })
+
+    it('setLevel changes the minimum level at runtime', () => {
+      const log = new LogPalette('test')
+      log.setLevel('error')
+      log.info('suppressed')
+      log.error('shown')
+
+      expect(consoleSpy.info).not.toHaveBeenCalled()
+      expect(consoleSpy.error).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('enabled flag', () => {
+    it('suppresses all output when enabled is false', () => {
+      const log = new LogPalette('test', { enabled: false })
+      log.debug('no')
+      log.info('no')
+      log.warn('no')
+      log.error('no')
+
+      expect(consoleSpy.debug).not.toHaveBeenCalled()
+      expect(consoleSpy.info).not.toHaveBeenCalled()
+      expect(consoleSpy.warn).not.toHaveBeenCalled()
+      expect(consoleSpy.error).not.toHaveBeenCalled()
+    })
+
+    it('setEnabled toggles output at runtime', () => {
+      const log = new LogPalette('test')
+      log.setEnabled(false)
+      log.info('suppressed')
+      log.setEnabled(true)
+      log.info('shown')
+
+      expect(consoleSpy.info).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('group()', () => {
+    it('calls console.group with domain prefix in label', () => {
+      const log = new LogPalette('auth')
+      log.group('Login flow')
+
+      expect(consoleSpy.group).toHaveBeenCalledOnce()
+      const call = consoleSpy.group.mock.calls[0]
+      expect(call[0]).toContain('[....auth]')
+      expect(call[0]).toContain('Login flow')
+    })
+
+    it('does not call console.group when disabled', () => {
+      const log = new LogPalette('auth', { enabled: false })
+      log.group('silent')
+      expect(consoleSpy.group).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('groupCollapsed()', () => {
+    it('calls console.groupCollapsed with domain prefix', () => {
+      const log = new LogPalette('api')
+      log.groupCollapsed('Details')
+
+      expect(consoleSpy.groupCollapsed).toHaveBeenCalledOnce()
+      const call = consoleSpy.groupCollapsed.mock.calls[0]
+      expect(call[0]).toContain('[.....api]')
+    })
+  })
+
+  describe('groupEnd()', () => {
+    it('calls console.groupEnd', () => {
+      const log = new LogPalette('test')
+      log.groupEnd()
+      expect(consoleSpy.groupEnd).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('time() / timeEnd()', () => {
+    it('calls console.time with namespaced label', () => {
+      const log = new LogPalette('auth')
+      log.time('login')
+
+      expect(consoleSpy.time).toHaveBeenCalledOnce()
+      const label = consoleSpy.time.mock.calls[0][0]
+      expect(label).toContain('[....auth]')
+      expect(label).toContain('login')
+    })
+
+    it('calls console.timeEnd with the same namespaced label', () => {
+      const log = new LogPalette('auth')
+      log.time('login')
+      log.timeEnd('login')
+
+      expect(consoleSpy.timeEnd).toHaveBeenCalledOnce()
+      const timeLabel = consoleSpy.time.mock.calls[0][0]
+      const timeEndLabel = consoleSpy.timeEnd.mock.calls[0][0]
+      expect(timeLabel).toBe(timeEndLabel)
+    })
+
+    it('does not call console.time when disabled', () => {
+      const log = new LogPalette('test', { enabled: false })
+      log.time('silent')
+      expect(consoleSpy.time).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/__tests__/registry.test.ts

@@ -0,0 +1,88 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { LogPalette } from '../logger.js'
+import { disableAll, enableAll, getAllLoggers, getLogger, setGlobalLevel } from '../registry.js'
+
+// Reset registry between tests by clearing the internal map via module re-import isn't easy,
+// so we use unique domain names per test to avoid cross-test contamination.
+
+describe('getLogger', () => {
+  it('returns a Logger instance', () => {
+    const log = getLogger('reg-test-1')
+    expect(log).toBeInstanceOf(LogPalette)
+    expect(log.domain).toBe('reg-test-1')
+  })
+
+  it('returns the same instance for the same domain', () => {
+    const a = getLogger('reg-singleton')
+    const b = getLogger('reg-singleton')
+    expect(a).toBe(b)
+  })
+
+  it('returns different instances for different domains', () => {
+    const a = getLogger('reg-domain-a')
+    const b = getLogger('reg-domain-b')
+    expect(a).not.toBe(b)
+  })
+
+  it('applies options on first call', () => {
+    const log = getLogger('reg-color', { color: '#ff0000' })
+    expect(log.color).toBe('#ff0000')
+  })
+})
+
+describe('getAllLoggers', () => {
+  it('returns a map containing registered loggers', () => {
+    getLogger('reg-all-1')
+    getLogger('reg-all-2')
+    const all = getAllLoggers()
+    expect(all.has('reg-all-1')).toBe(true)
+    expect(all.has('reg-all-2')).toBe(true)
+  })
+
+  it('is a Map instance', () => {
+    const all = getAllLoggers()
+    expect(all).toBeInstanceOf(Map)
+  })
+})
+
+describe('setGlobalLevel', () => {
+  afterEach(() => vi.restoreAllMocks())
+
+  it('suppresses levels below the new global minimum', () => {
+    const log = getLogger('reg-level-test') as LogPalette
+    const spy = vi.spyOn(console, 'debug').mockImplementation(() => {})
+    const spyInfo = vi.spyOn(console, 'info').mockImplementation(() => {})
+
+    setGlobalLevel('warn')
+    log.debug('no')
+    log.info('no')
+    expect(spy).not.toHaveBeenCalled()
+    expect(spyInfo).not.toHaveBeenCalled()
+
+    // Restore to debug so other tests are not affected
+    setGlobalLevel('debug')
+  })
+})
+
+describe('disableAll / enableAll', () => {
+  afterEach(() => vi.restoreAllMocks())
+
+  it('disableAll silences all loggers', () => {
+    const log = getLogger('reg-disable-test')
+    const spy = vi.spyOn(console, 'info').mockImplementation(() => {})
+
+    disableAll()
+    log.info('silent')
+    expect(spy).not.toHaveBeenCalled()
+  })
+
+  it('enableAll re-activates all loggers', () => {
+    const log = getLogger('reg-enable-test')
+    const spy = vi.spyOn(console, 'info').mockImplementation(() => {})
+
+    disableAll()
+    enableAll()
+    log.info('active')
+    expect(spy).toHaveBeenCalledOnce()
+  })
+})

package/src/color.ts

@@ -0,0 +1,13 @@
+function djb2(str: string): number {
+  let hash = 5381
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) + hash) ^ str.charCodeAt(i)
+    hash = hash >>> 0
+  }
+  return hash
+}
+
+export function domainToColor(domain: string): string {
+  const hue = djb2(domain) % 360
+  return `hsl(${hue}, 75%, 60%)`
+}

package/src/config.ts

@@ -0,0 +1,58 @@
+/**
+ * Global format configuration for log-palette.
+ * Change these settings once to affect all loggers.
+ */
+export interface GlobalConfig {
+  /**
+   * Number of inner characters inside the prefix brackets.
+   * Total prefix width = innerWidth + 2 (for the `[` and `]`).
+   *
+   * - Short domains are left-padded with dots to fill this width.
+   * - Domains longer than this are truncated with `…`.
+   *
+   * @default 8  → prefix is always `[XXXXXXXX]` (10 chars total)
+   */
+  innerWidth: number
+
+  /**
+   * Whether to include a timestamp in each log line.
+   * @default true
+   */
+  timestamp: boolean
+}
+
+const _config: GlobalConfig = {
+  innerWidth: 8,
+  timestamp: true,
+}
+
+/**
+ * Read the current global configuration.
+ * Returns a snapshot — mutating the returned object has no effect.
+ */
+export function getConfig(): Readonly<GlobalConfig> {
+  return { ..._config }
+}
+
+/**
+ * Update one or more global format settings.
+ * Changes apply immediately to all subsequent log calls across all loggers.
+ *
+ * @example
+ * ```ts
+ * // Wider prefix column (good when you have long domain names)
+ * configure({ innerWidth: 12 })
+ *
+ * // Strip timestamps (cleaner in environments that add their own)
+ * configure({ timestamp: false })
+ * ```
+ */
+export function configure(options: Partial<GlobalConfig>): void {
+  if (options.innerWidth !== undefined) {
+    if (options.innerWidth < 1) throw new RangeError('innerWidth must be >= 1')
+    _config.innerWidth = options.innerWidth
+  }
+  if (options.timestamp !== undefined) {
+    _config.timestamp = options.timestamp
+  }
+}

package/src/formatter.ts

@@ -0,0 +1,26 @@
+import { getConfig } from './config.js'
+
+export function formatTimestamp(date: Date): string {
+  const h = String(date.getHours()).padStart(2, '0')
+  const m = String(date.getMinutes()).padStart(2, '0')
+  const s = String(date.getSeconds()).padStart(2, '0')
+  const ms = String(date.getMilliseconds()).padStart(3, '0')
+  return `${h}:${m}:${s}.${ms}`
+}
+
+export function formatPrefix(domain: string): string {
+  const { innerWidth } = getConfig()
+  if (domain.length < innerWidth) {
+    const dots = '.'.repeat(innerWidth - domain.length)
+    return `[${dots}${domain}]`
+  }
+  if (domain.length === innerWidth) {
+    return `[${domain}]`
+  }
+  // Truncate long domains: keep (innerWidth - 1) chars + ellipsis
+  return `[${domain.slice(0, innerWidth - 1)}\u2026]`
+}
+
+export function prefixStyle(color: string): string {
+  return `color: ${color}; font-weight: bold;`
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export type { GlobalConfig } from './config.js'
+export { configure, getConfig } from './config.js'
+export { createLogger, LogPalette } from './logger.js'
+export { disableAll, enableAll, getAllLoggers, getLogger, setGlobalLevel } from './registry.js'
+export type { Logger, LoggerOptions, LogLevel } from './types.js'

package/src/logger.ts

@@ -0,0 +1,169 @@
+import { domainToColor } from './color.js'
+import { getConfig } from './config.js'
+import { formatPrefix, formatTimestamp, prefixStyle } from './formatter.js'
+import type { Logger, LoggerOptions, LogLevel } from './types.js'
+
+const LEVEL_RANK: Record<LogLevel, number> = {
+  debug: 0,
+  log: 1,
+  info: 2,
+  warn: 3,
+  error: 4,
+}
+
+/**
+ * A logger instance tied to a specific domain.
+ * Outputs colored prefix badges to the browser console.
+ *
+ * @example
+ * ```ts
+ * const log = new LogPalette('auth', { color: '#7c3aed', level: 'info' })
+ * log.info('User signed in', { userId: 42 })
+ * // → [....auth] 05:35:41.039 User signed in { userId: 42 }
+ * ```
+ */
+export class LogPalette implements Logger {
+  readonly domain: string
+  readonly color: string
+  private _minLevel: number
+  private _enabled: boolean
+
+  /**
+   * @param domain  Service/feature name shown in the prefix badge (e.g. 'auth', 'api').
+   * @param options Optional configuration for color, level filtering, and enabled state.
+   */
+  constructor(domain: string, options: LoggerOptions = {}) {
+    this.domain = domain
+    this.color = options.color ?? domainToColor(domain)
+    this._minLevel = LEVEL_RANK[options.level ?? 'debug']
+    this._enabled = options.enabled ?? true
+  }
+
+  /**
+   * Dynamically change the minimum log level for this logger.
+   * Useful for adjusting verbosity at runtime without recreating the logger.
+   */
+  setLevel(level: LogLevel): void {
+    this._minLevel = LEVEL_RANK[level]
+  }
+
+  /**
+   * Enable or disable this logger at runtime.
+   * When disabled, all log calls are silently dropped.
+   */
+  setEnabled(enabled: boolean): void {
+    this._enabled = enabled
+  }
+
+  private _log(level: LogLevel, args: unknown[]): void {
+    if (!this._enabled) return
+    if (LEVEL_RANK[level] < this._minLevel) return
+
+    const prefix = formatPrefix(this.domain)
+    const style = prefixStyle(this.color)
+    const { timestamp } = getConfig()
+    const time = timestamp ? ` ${formatTimestamp(new Date())}` : ''
+
+    console[level](`%c${prefix}%c${time}`, style, '', ...args)
+  }
+
+  /** @inheritdoc */
+  log(...args: unknown[]): void {
+    this._log('log', args)
+  }
+  /** @inheritdoc */
+  info(...args: unknown[]): void {
+    this._log('info', args)
+  }
+  /** @inheritdoc */
+  warn(...args: unknown[]): void {
+    this._log('warn', args)
+  }
+  /** @inheritdoc */
+  error(...args: unknown[]): void {
+    this._log('error', args)
+  }
+  /** @inheritdoc */
+  debug(...args: unknown[]): void {
+    this._log('debug', args)
+  }
+
+  /**
+   * Open a DevTools console group with the domain prefix applied to the label.
+   * Always call `groupEnd()` to close it.
+   *
+   * @example
+   * ```ts
+   * apiLog.group('Fetch /users')
+   * apiLog.info('response', data)
+   * apiLog.groupEnd()
+   * ```
+   */
+  group(label: string): void {
+    if (!this._enabled) return
+    const prefix = formatPrefix(this.domain)
+    const style = prefixStyle(this.color)
+    console.group(`%c${prefix}%c ${label}`, style, '')
+  }
+
+  /**
+   * Open a collapsed DevTools console group with the domain prefix applied to the label.
+   * Always call `groupEnd()` to close it.
+   */
+  groupCollapsed(label: string): void {
+    if (!this._enabled) return
+    const prefix = formatPrefix(this.domain)
+    const style = prefixStyle(this.color)
+    console.groupCollapsed(`%c${prefix}%c ${label}`, style, '')
+  }
+
+  /** Close the most recently opened group. */
+  groupEnd(): void {
+    console.groupEnd()
+  }
+
+  /**
+   * Start a named performance timer, namespaced to this domain.
+   * Use `timeEnd(label)` to stop it and log the elapsed time.
+   *
+   * @example
+   * ```ts
+   * authLog.time('login')
+   * await performLogin()
+   * authLog.timeEnd('login')
+   * // DevTools: [....auth] login: 42.1ms
+   * ```
+   */
+  time(label: string): void {
+    if (!this._enabled) return
+    console.time(`${formatPrefix(this.domain)} ${label}`)
+  }
+
+  /**
+   * Stop the named timer started with `time(label)` and log the elapsed duration.
+   * @param label Must match the label passed to `time()`.
+   */
+  timeEnd(label: string): void {
+    if (!this._enabled) return
+    console.timeEnd(`${formatPrefix(this.domain)} ${label}`)
+  }
+}
+
+/**
+ * Create a new logger for the given domain.
+ * Each call creates a fresh instance; use `getLogger()` for singleton behavior.
+ *
+ * @param domain  Service/feature name (e.g. 'auth', 'api', 'payments').
+ * @param options Optional color, level, and enabled settings.
+ *
+ * @example
+ * ```ts
+ * const log = createLogger('auth')
+ * log.info('App started')
+ *
+ * const payLog = createLogger('payments', { color: '#16a34a', level: 'warn' })
+ * ```
+ */
+export function createLogger(domain: string, options?: LoggerOptions): Logger {
+  return new LogPalette(domain, options)
+}

package/src/registry.ts

@@ -0,0 +1,93 @@
+import { LogPalette } from './logger.js'
+import type { Logger, LoggerOptions, LogLevel } from './types.js'
+
+const _registry = new Map<string, LogPalette>()
+
+/**
+ * Get or create a logger for the given domain.
+ * Unlike `createLogger()`, this returns the same instance every time it is
+ * called with the same domain — making it safe to call from multiple modules.
+ *
+ * Options are only applied on first call for a domain; subsequent calls with
+ * the same domain return the existing instance regardless of options.
+ *
+ * @example
+ * ```ts
+ * // In module A
+ * const log = getLogger('api')
+ *
+ * // In module B — same instance
+ * const log = getLogger('api')
+ * ```
+ */
+export function getLogger(domain: string, options?: LoggerOptions): Logger {
+  let logger = _registry.get(domain)
+  if (!logger) {
+    logger = new LogPalette(domain, options)
+    _registry.set(domain, logger)
+  }
+  return logger
+}
+
+/**
+ * Return a read-only snapshot of all registered loggers, keyed by domain.
+ * Useful for debugging or building DevTools integrations.
+ *
+ * @example
+ * ```ts
+ * const loggers = getAllLoggers()
+ * console.log([...loggers.keys()])  // ['api', 'auth', 'payments']
+ * ```
+ */
+export function getAllLoggers(): ReadonlyMap<string, Logger> {
+  return _registry
+}
+
+/**
+ * Set the minimum log level for every registered logger at once.
+ * Loggers created after this call are not affected — they use their own
+ * options or the default ('debug').
+ *
+ * Call this early in your app entry point to control verbosity globally:
+ *
+ * @example
+ * ```ts
+ * // Only show warnings and errors in production
+ * if (import.meta.env.PROD) setGlobalLevel('warn')
+ * ```
+ */
+export function setGlobalLevel(level: LogLevel): void {
+  for (const logger of _registry.values()) {
+    logger.setLevel(level)
+  }
+}
+
+/**
+ * Enable all registered loggers.
+ *
+ * @example
+ * ```ts
+ * enableAll()
+ * ```
+ */
+export function enableAll(): void {
+  for (const logger of _registry.values()) {
+    logger.setEnabled(true)
+  }
+}
+
+/**
+ * Disable all registered loggers. All log calls will be silently dropped
+ * until `enableAll()` or individual `setEnabled(true)` is called.
+ *
+ * @example
+ * ```ts
+ * // Silence everything in production builds
+ * if (import.meta.env.PROD) disableAll()
+ * ```
+ */
+export function disableAll(): void {
+  for (const logger of _registry.values()) {
+    logger.setEnabled(false)
+  }
+}