📦 SETUP • ⚙️ CONFIGURATION
|
Logginlys is a lightweight, high-performance TypeScript logging library designed to provide a consistent visual experience across both Node.js (Terminal) and Browser environments.
Forget about messy `console.log` statements. Logginlys automatically detects your environment and applies beautiful ANSI styles or CSS badges to keep your debugging process organized and readable. |
About
Requirements
Installation
Usage
Configuration
node >= 22.17.0
bun >= 1.1.0
bun i -D logginlys
npm i -D logginlys
pnpm i -D logginlys
yarn i -D logginlys
General use is as simple as importing the log object and calling its methods:
import { log } from 'logginlys';
log.info('This is an info message');
log.success('This is a success message');
log.error('This is an error message');
log.warning('This is a warning message');
log.debug('This is a debug message');
log.log('This is a log message');
log.blank();
log.setup('This is a setup message');
log.http({
url: 'https://example.com/api/data?query=123',
method: 'GET',
status: 200,
time: 150
});
log.httpError('This is a HTTP error message', {
url: 'https://example.com/api/data?query=123',
method: 'POST',
status: 500,
time: 300
});The result will be this:
You can customize the logger by passing an options object to the Logger class constructor or to each log method. The options object can have the following properties:
prefix(string): A custom prefix to be added before each log message.isDev(boolean): A flag to enable or disable logging. If set tofalse, all log methods will be no-ops.showTimestamp(boolean): A flag to enable or disable timestamps in log messages.showBadge(boolean): A flag to enable or disable badges in log messages.blankAbove(boolean): A flag to add a blank line above the log message.blankBelow(boolean): A flag to add a blank line below the log message.icon(string): A custom icon to be displayed before the log message (only for ansi).emoji(string): A custom emoji to be displayed before the log message (only for browser).ansi(object): An object to customize ANSI styles for terminal logs, with propertiescolorandbgfor text color and background color respectively.css(object): An object to customize CSS styles for browser logs, with propertiescolorandbgfor text color and background color respectively.
log,info,http,debug,error,setup,warning,success(object): Objects to customize styles for specific log levels, with the same properties as above.http(object): An object to customize styles for HTTP logs, with the same properties as above.httpError(object): An object to customize styles for HTTP error logs, with the same properties as above.box(object): An object to customize styles for box logs, with the same properties as above.loader(object): An object to customize styles for loader logs, with the same properties as above.
To customize the logger globally, you can do the following:
import { LogManager } from 'logginlys';
const logger = new LogManager({
prefix: '[My App]',
isDev: true,
showTimestamp: true,
blankAbove: false,
blankBelow: false,
info: {
icon: '\uebc6',
emoji: 'ℹ️',
},
setup: {
icon: '\uebd7',
emoji: '⚙️',
ansi: {
color: '\u001b[0;36m',
bg: '\u001b[46m'
}
},
});
logger.info('This is an info message');
logger.setup('This is a setup message');Resulting in this:
In case you want to customize one log message you can do the following:
import { LogManager } from 'logginlys';
const log = new LogManager();
log.info('This is an info message with custom styles', {
prefix: '[Custom Prefix]',
showTimestamp: false,
icon: '\uebc6',
emoji: 'ℹ️',
ansi: {
color: '\u001b[0;36m',
bg: '\u001b[46m'
}
});
log.success('This is a success message', { blankAbove: true });Resulting in this:
To log box messages, you can use the log.box method:
import { LogManager } from 'logginlys';
const log = new LogManager();
log.box('Box message');
log.box('Box message', {
blankAbove: true,
blankBelow: true,
boxStyle: 'bold',
width: 40,
height: 7,
ansi: {
color: colorAnsi.green,
borderColor: colorAnsi.blue
},
css: {
color: colorCss.green,
borderColor: colorCss.blue,
bgColor: colorCss.bgBlack,
padding: '10px 15px'
}
});Resulting in this:
To use loader logs, you can use the log.loader method:
const loader = logger.loader({
message: 'Loading...',
position: 'left',
color: colorAnsi.cyan,
});
loader.start();
loader.stop('Finished loading!', icon.check);
You have the option to customize the loader message, position and color. You can also use different icons to indicate the status of the loader.
message(string): The message to be displayed next to the loader.position(string): The position of the loader, can be 'left', 'right' or 'center'.color(string): The color of the loader, can be any valid ANSI color code for terminal or any valid CSS color for browser.showTimestamp(boolean): A flag to enable or disable timestamps in loader messages.type(string): The type of the loader animation, can be 'line', 'dots', 'bounce' or 'circle' or 'grow'.
Column logs are also available using the loggerColumn method:
logger.info(`Column example:\n\n${loggerColumn(columnMessage, { width: 80, padding: 4 })}`);Resulting in this:
Custom style text can be created using the loggerStyle method:
// Ansi example
logger.info(loggerStyle.ansi('Styled message', {
bold: true,
color: colorAnsi.blue,
bg: colorAnsi.bgYellow
}));
// CSS example
logger.info(loggerStyle.css('Styled message', {
color: colorCss.blue,
'background-color': colorCss.bgYellow,
padding: '5px 10px',
'border-radius': '5px'
}));Resulting in this:
In case you want to create your own custom log method, you can extend the LogManager class and add your custom method:
class MyCustomLogger extends LogManager {
typescript(message: string, options?: LoggerStyleParameters) {
const tsStyle: LoggerStyleParameters = {
ansi: { color: '\u001b[36m' },
showBadge: false,
emoji: '🟦',
icon: 'TS'
};
this.custom(message, { ...options, ...tsStyle });
}
}
const log = new MyCustomLogger();
log.typescript('This is a custom TypeScript log message');
BACK TO TOP
Copyright © All rights reserved, developed by LuisdaByte and
