@scrippsproduct/console-logger

A powerful TypeScript singleton wrapper for enhanced console logging with namespace support, color styling, and flexible configuration.

Features

• 🎯 Singleton Pattern - Single instance across your entire application
• 🏷️ Namespace Support - Organize logs with custom namespaces and components
• 🎨 Color Styling - Browser-compatible CSS styling for enhanced readability
• 🔧 Configurable - Enable/disable logging, custom background colors
• 📦 TypeScript - Full TypeScript support with type definitions

Installation

npm install --save-dev @scrippsproduct/console-logger 

Quick Start

import logger from '@scrippsproduct/console-logger';

// Basic logging
logger.log('Hello world!');
logger.info('Information message');
logger.warn('Warning message');
logger.error('Error message');

Advanced Usage

Namespaces and Components

import logger from '@scrippsproduct/console-logger';

// Set a namespace for your application
logger.setNamespace('MyApp');
logger.log('Application started'); // [MyApp] Application started

// Add component-specific logging
logger.setComponent('UserService');
logger.info('User authenticated'); // [MyApp]: UserService : User authenticated

// Component without namespace
logger.clearNamespace();
logger.log('Service message'); // : UserService : Service message

Styling and Colors

// Set background color for all logs
logger.setBackgroundColor('#ff0000');
logger.info('Message with red background');

// Clear styling
logger.clearBackgroundColor();

Control Logging

// Disable all logging (useful for production)
logger.setShouldLog(false);
logger.log('This will not appear');

// Re-enable logging
logger.setShouldLog(true);
logger.log('This will appear');

Multiple Arguments

const user = { name: 'John', id: 123 };
const items = ['item1', 'item2'];

logger.log('User data:', user, items);
logger.error('Failed to process:', user, 'Error code:', 500);

API Reference

Logging Methods

• logger.log(message, ...args) - Standard log output
• logger.info(message, ...args) - Information output (blue)
• logger.warn(message, ...args) - Warning output (orange)
• logger.error(message, ...args) - Error output (red)

Namespace Management

• logger.setNamespace(namespace: string) - Set application namespace
• logger.getNamespace(): string - Get current namespace
• logger.clearNamespace() - Remove namespace

Component Management

• logger.setComponent(component: string) - Set component identifier
• logger.getComponent(): string - Get current component
• logger.clearComponent() - Remove component

Logging Control

• logger.setShouldLog(enabled: boolean) - Enable/disable logging
• logger.getShouldLog(): boolean - Check if logging is enabled

Styling

• logger.setBackgroundColor(color: string) - Set background color
• logger.getBackgroundColor(): string - Get current background color
• logger.clearBackgroundColor() - Reset to transparent background

Import Options

// ES6 default import
import logger from '@scrippsproduct/console-logger';

// ES6 named import
import { logger } from '@scrippsproduct/console-logger';

// CommonJS
const logger = require('@scrippsproduct/console-logger').default;

Development

Building

# Build the project
npm run build

# Watch for changes and rebuild
npm run build:watch

# Clean the dist folder
npm run clean

Testing

# Run tests
npm test

# Run tests once
npm run test:run

# Run tests with coverage
npm run test:coverage

# Visual test interface
npm run test:ui

# Watch mode for development
npm run test:watch

Linting

# Lint the code
npm run lint

# Auto-fix linting issues
npm run lint:fix

Demo

# Run the demonstration
npm run demo

Example Output

When using namespaces and components, your console output will look like:

[MyApp]: UserService : User login successful
[MyApp]: DatabaseService : Connection established
[API]: AuthController : Token validated

Each log level has distinct colors:

• Log: Gray text
• Info: Blue text
• Warn: Orange text
• Error: Red text

TypeScript Support

Full TypeScript definitions are included:

import logger, { LogLevels, Colors } from '@scrippsproduct/console-logger';

// Type-safe log levels
const level: LogLevels = 'info';

// Custom color configuration type
const colors: Colors = {
  log: '#gray',
  info: '#blue', 
  warn: '#orange',
  error: '#red'
};

Browser Compatibility

The logger uses %c CSS styling for browsers and falls back gracefully for environments that don't support it. Tested in:

• Chrome/Chromium
• Firefox
• Safari
• Node.js
• Electron

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Run tests (npm test)
4. Commit your changes (git commit -m 'Add some amazing feature')
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a Pull Request

License

ISC - See LICENSE file for details

Author

EW Scripps