1.0.0 • Published 4 years ago
@zhigamovsky/styled-console-log v1.0.0
@zhigamovsky/styled-console-log
Installation
npm install @zhigamovsky/styled-console-log
Import
import Log from '@zhigamovsky/styled-console-log'Just for example I define dummy variables
let a = { key: 'value', value: 'value', k: 2 };
let c = 2;
let dummy = { a, b: ['value', 'value', 'value'], c, d: 'asdasdsad', l: { } };v1.0.0
We have new Major Version v1.0.0. What's new?
The collection of templates has expanded!
Log.hazel('Some test message', a);
Log.check('If you are checking some conditional', a);
Log.event('Log with this types, when some events are emitting', a);
Log.zelda('Just beautiful green template', a);
Log.render('Log with "render", when your render something', a);
Log.merge('Find a use for this template', a);
Log.rozy('I just liked the color', a);
Log.ruddy('Endlessly red template', a);
Log.$1('Hah, yes, it is radial gradient', a);
Log.$2('It is linear gradient', a);
Log.$3('Other some template with gradient', a);
Log.$4('Other some template with gradient', a);
Log.$5('Other some template with gradient', a);
Log.$6('Other some template with gradient', a);
Log.$7('Other some template with gradient', a);
Log.$8('Lorem ipsum dolor sit amet, ...');
The collection of dividers has expanded also!
Log.divided(Types.hazel);
Log.divided(Types.check);
Log.divided(Types.event);
Log.divided(Types.zelda);
Log.divided(Types.render);
Log.divided(Types.merge);
Log.divided(Types.rozy);
Log.divided(Types.ruddy);
Log.divided(Types.$1);
Log.divided(Types.$2);
Log.divided(Types.$3);
Log.divided(Types.$4);
Log.divided(Types.$5);
Log.divided(Types.$6);
Log.divided(Types.$7);
Log.divided(Types.$8);
We have new Environment - Timing!
Log.setEnvironmentTiming();
Log.setTimingLocale(locale);
Log.setTimingExtendedFormat();
Log.setTimingMinifiedFormat();
Log.disableEnvironmentTiming();
Log.setTimingConfig(config);Go to Environments Docs Section
Documentation
Simple usage
1. Log with different ready-made templates
Log.error('Oh, god damn!', c, a, dummy);
Log.warn('Warn you about a warning!', c, a, dummy);
Log.success('Got it!', c, a, dummy);
Log.dark('Devil within, boo-ga-ga', c, a, dummy);
Log.light('Angel within', c, a, dummy);
Log.info('Lorem ipsum dolor... As trivially as this message', c, a, dummy);
2. Yes! You can display any image in console
Log.image('https://download.seaicons.com/download/i45781/tatice/cristal-intense/tatice-cristal-intense-apple-grey.ico');
2.1 Also you can configuring size image in console
For configuring logging your need to import log (not Log)
import { log } from '@zhigamovsky/styled-console-log'
log.image('https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/SARS-CoV-2_without_background.png/1020px-SARS-CoV-2_without_background.png')({
background: 'red',
height: 150,
width: 150
});
3. Of course you can display any gif file. Yes, GIFs are animated
By default gif has 100x100. For configuring logging your need to import log (not Log).
import Log, { log } from '@zhigamovsky/styled-console-log'
log.gif('https://media2.giphy.com/media/S2vSPMhKtLp9I6VMDY/giphy.gif')({
background: '#435444',
height: 250,
width: 250
});
Log.gif('https://media2.giphy.com/media/S2vSPMhKtLp9I6VMDY/giphy.gif');
4. Override ready-made template Styles and Icons
Of course, you can override any Styles or Icons of the templates as you like.
Instead of Types.warn you can use just 'warn', but I Strongly recommended use Types
import Log, { Types } from '@zhigamovsky/styled-console-log'
Log.warn('Warn Template before overriding styles and icon...', c, a, dummy);
Log.overrideStyles(Types.warn, 'background: #353535; color: pink; border-style: dash; border-width: 2px;');
Log.overrideIcons(Types.warn, '⚠️');
Log.warn('Warn Template after overriding styles and icon...', c, a, dummy);
5. Divider like sense of life
Just useful features for divided porridge from the code in real project. Divider use background-color and border from his template. If
By default Log.divided() use 'info' template.
Instead of Types.warn | Types.error | etc... you can use just 'warn', 'error', but I Strongly recommended use Types
import Log, { Types } from '@zhigamovsky/styled-console-log'
Log.divided();
Log.divided(Types.error);
Log.divided(Types.warn);
Log.divided(Types.success);
Log.divided(Types.light);
Log.divided(Types.dark);
5.1 Overriding make sense
If you are override some template, template's divider alse change style to according to new css rules
Log.overrideStyles(type: string, styles: inlineCss)
import Log, { Types } from '@zhigamovsky/styled-console-log'
Log.divided(Types.warn);
Log.warn('Warn Template before overriding styles and icon...', c, a, dummy);
Log.overrideStyles(Types.warn, 'background: #353535; color: pink; border-style: dash; border-width: 2px;');
Log.overrideIcons(Types.warn, '⚠️')
Log.warn('Warn Template after overriding styles and icon...', c, a, dummy);
Log.divided(Types.warn);
6. Create and add own template
If you are not enough ready-made templates, you can create and add your own
After creation you can use Log with new template. Divider also works!
Do not be afraid to experiment!
addOwnTemplate(identifier: string)(icon: string)(styles: inlineCss)
import Log, { Types } from '@zhigamovsky/styled-console-log'
Log.addOwnTemplate('jolly')('🦠')('color: lightgreen; padding: 3px; border: 2px solid lightgreen; background: #353535; font-weight: 800;');
Log.jolly('Some text to your own custom template :)', dummy, c, a);
Log.divided(Types.jolly);
7. Environments
The most important thing for me is the environment.
Now are available thre environments. Release, Debug and Timing.
I know well how console.log loads the browser, so I made this environments.
Environment - Debug
Log.setEnvironmentDebug();So you can set Debug, all of console.log with Log or log are shown.
Environment - Release
Log.setEnvironmentRelease();But if you set up Release - all of console.log will be hidden without the need to remove them in code. And you can return to debugging at any time without restoring all the logs.
Environment - Timing
Log.setEnvironmentTiming();This environment does not conflict with previous ones, and works with them. If you want to see times (and dates) of all logs, see Timing Environment
After that, absolutely all logs will have a date and time of their execution.
Alse you can disable it:
Log.disableEnvironmentTiming();At now are available two appearance - extended and minified. To set one of this try:
Log.setTimingExtendedFormat();
Log.hazel('Some test message', a);
Log.check('If you are checking some conditional', a);
Log.event('Log with this types, when some events are emitting', a);
Log.zelda('Just beautiful green template', a);
Log.render('Log with "render", when your render something', a);
Log.merge('Find a use for this template', a);
Log.rozy('I just liked the color', a);
Log.ruddy('Endlessly red template', a);
or
Log.setTimingMinifiedFormat();
Log.hazel('Some test message', a);
Log.check('If you are checking some conditional', a);
Log.event('Log with this types, when some events are emitting', a);
Log.zelda('Just beautiful green template', a);
Log.render('Log with "render", when your render something', a);
Log.merge('Find a use for this template', a);
Log.rozy('I just liked the color', a);
Log.ruddy('Endlessly red template', a);
You can configuring datetime locale
Log.setTimingLocale(locale);typeof locale - section "locale" see there:
https://www.w3schools.com/jsref/jsref_tolocalestring.asp
http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
https://tools.ietf.org/html/rfc5646
by default locale - default browser locale
You can configuring datetime display format
Log.setTimingConfig(config);typeof config - section "options" see there:
https://www.w3schools.com/jsref/jsref_tolocalestring.asp
by default config:
{
month: 'long',
day: 'numeric',
weekday: 'long',
timezone: 'UTC',
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
}