A tiny library with builders to help making logs/CLI pretty with a nice DX.
yarn add ansi-fragmentsimport { color, modifier, pad, container } from 'ansi-fragments';
const prettyLog = (level, message) => container(
color('green', modifier('italic', level)),
pad(1),
message
).build();
console.log(prettyLog('success', 'Yay!'));Each fragment implements IFragment interface:
interface IFragment {
build(): string;
}The build method is responsible for traversing the tree of fragments and create a string representation with ANSI escape codes.
color(
ansiColor: AnsiColor,
...children: Array<string | IFragment>
): IFragmentCreates fragment for standard ANSI colors.
color('red', 'Oh no');
color('bgBlue', color('brightBlue', 'Hey'));
color('green', modifier('bold', 'Sup!'));modifier(
ansiModifier: AnsiModifier,
...children: Array<string | IFragment>
): IFragmentCreates fragment for standard ANSI modifiers: dim, bold, hidden, italic, underline, strikethrough.
modifier('underline', 'Hello', 'World');
modifier('italic', modifier('bold', 'Hey'));
modifier('bold', color('green', 'Sup!'));container(...children: Array<string | IFragment>): IFragmentCreates fragment, which sole purpose is to hold and build nested fragments.
container(
color('gray', '[08/01/18 12:00]'),
pad(1),
color('green', 'success'),
pad(1),
'Some message'
)pad(count: number, separator?: string): IFragmentCreates fragment, which repeats given separator (default: ) given number of times.
pad(1);
pad(2, '#')
pad(1, '\n')fixed(
value: number,
bias: 'start' | 'end',
...children: Array<string | IFragment>
): IFragmentCreates fragment, which makes sure the children will always build to given number of non-ANSI characters. It will either trim the results or add necessary amount of spaces. The bias control if trimming/padding should be done at the start of the string representing built children or at the end.
fixed(5, 'start', 'ERR'); // => ' ERR'
fixed(8, 'end', color('green', 'success')); // equals to color('green', 'success') + ' '
fixed(10, 'end', 'Hello', pad(2), 'World') // => 'Hello Wor'ifElse(
condition: Condition,
ifTrueFragment: string | IFragment,
elseFragment: string | IFragment
): IFragment
type ConditionValue = boolean | string | number | null | undefined;
type Condition = ConditionValue | (() => ConditionValue);Change the output based on condition. Condition can ba a primitive value, which can be casted to boolean or a function. If conation or return value of condition is evaluated to true, the first argument - ifTrueFragment will be used, otherwise elseFragment.
let condition = getConditionValue()
ifElse(
() => condition,
color('red', 'ERROR'),
color('yellow', 'WARNING')
)provide<T>(
value: T,
builder: (value: T) => string | IFragment
): IFragmentProvides given value to a builder function, which should return string or fragment. Useful in situations when the output is connected with some calculated value - using provide you only need to calculate final value once and forward it to custom styling logic.
provide(getMessageFromSomewhere(), value => {
switch (value.level) {
case 'error':
return container(
color('red', modifier('bold', value.level.toUpperCase())),
pad(2),
value.log
);
case 'info':
return container(
color('blue', value.level.toUpperCase()),
pad(2),
value.log
);
default:
return container(value.level.toUpperCase(), pad(2), value.log);
}
})