Skip to content

Commit 9a61b6f

Browse files
bruno-sartoribruno-sartori
authored
Merge pull request #9 from bruno-sartori/develop
Merge Develop
2 parents 69f4ea2 + 8da88ae commit 9a61b6f

File tree

16 files changed

+752
-599
lines changed

16 files changed

+752
-599
lines changed

‎README.md‎

Lines changed: 69 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import logger from '@bsartori/logger';
2121
logger.configure({
2222
enabled: true,
2323
visual: true,
24+
enableStackTrace: true,
2425
containerStyle: {
2526
position: 'bottom-left',
2627
width: 800,
@@ -42,66 +43,83 @@ logger.success('JSON', { lorem: 'ipsum', dolor: {
4243
sit: 'amet'
4344
}});
4445
logger.highlight('IMPORTANT', 'This is an highlight info');
46+
try {
47+
throw new Error('I can also log Error objects!');
48+
} catch (error: any) {
49+
logger.error('ERROR OBJECT', error);
50+
}
4551
```
4652

47-
This will result in:
53+
On DevTools this will result in:
4854

4955
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/devtools-log.jpg)
5056

51-
52-
### Using visual: true will create the visual logger container on your web project
57+
And in your application:
5358

5459
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-on-web-project.jpg)
5560

56-
### Resizable
61+
You can also resize the container:
5762
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/resizing.gif)
5863

59-
### Available Waifus
60-
```
61-
name: 'akeno'
62-
```
63-
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-akeno.jpg)
64-
```
65-
name: 'alya'
66-
```
67-
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-alya.jpg)
68-
```
69-
name: 'tohka'
70-
```
71-
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-tohka.jpg)
72-
```
73-
name: 'aqua'
74-
```
75-
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-aqua.jpg)
76-
```
77-
name: 'ayano'
78-
```
79-
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-ayano.jpg)
80-
```
81-
name: 'darkness'
82-
```
83-
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-darkness.jpg)
84-
```
85-
name: 'koneko'
86-
```
87-
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-koneko.jpg)
88-
```
89-
name: 'masha'
90-
```
91-
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-masha.jpg)
92-
```
93-
name: 'megumin'
94-
```
95-
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-megumin.jpg)
96-
```
97-
name: 'yuki'
98-
```
99-
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-yuki.jpg)
64+
65+
### Log Message Structure
66+
10067
```
101-
name: 'zerotwo'
68+
// message ---------------------------------------+
69+
// label -------------------------+ |
70+
// time diff from last log ---+ | |
71+
// datetime ---+ | | |
72+
// v v v v
73+
[31/08/24 10:41:21:457] 10ms INFO - Lorem ipsum dolor sit amet
10274
```
103-
![Log in DevTools](https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-zerotwo.jpg)
10475

76+
### Available Waifus
77+
78+
| Name | Description | Name | Description |
79+
|------------|----------------------------------------------------------------------------------------------------------------------------------|----------|---------------------------------------------------------------------------------------------------------------------------------|
80+
| `akeno` | <img src="https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-akeno.jpg" width="375" height="375" /> | `alya` | <img src="https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-alya.jpg" width="375" height="375" /> |
81+
| `tohka` | <img src="https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-tohka.jpg" width="375" height="375" /> | `aqua` | <img src="https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-aqua.jpg" width="375" height="375" /> |
82+
| `ayano` | <img src="https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-ayano.jpg" width="375" height="375" /> | `darkness` | <img src="https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-darkness.jpg" width="375" height="375" /> |
83+
| `koneko` | <img src="https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-koneko.jpg" width="375" height="375" /> | `masha` | <img src="https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-masha.jpg" width="375" height="375" /> |
84+
| `megumin` | <img src="https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-megumin.jpg" width="375" height="375" /> | `yuki` | <img src="https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-yuki.jpg" width="375" height="375" /> |
85+
| `zerotwo` | <img src="https://raw.githubusercontent.com/bruno-sartori/weeb-logger/main/docs/logger-zerotwo.jpg" width="375" height="375" /> | |
86+
87+
## API
88+
89+
### Configuration Object
90+
* *`enabled`: Boolean (default: true)* - Set to `false` to completely disable weeb-logger
91+
* *`visual`: Boolean (default: true)* - Set to `false` to only disable visual container (logging on DevTools or node cmd will still work)
92+
* *`formatStackTrace`: Boolean (default: true)* - Uses [stacktrace.js](https://github.com/stacktracejs/stacktrace.js) to format error stacktraces when the log message is an instance of `Error`. This way stack traces will show original files rather than bundled files. It makes HTTP requests to sourcemaps.
93+
* *`containerStyle`: Object(IWeebLoggerContainerStyle)* - Container style configuration object.
94+
* *`width`: Number (default: 800)* - Width of the container.
95+
* *`height`: Number (default: 800)* - Height of the container.
96+
* *`position`: TWeebLoggerContainerPosition (default: 'bottom-right')* - Available values: `top-right`, `top-left`, `bottom-right` and `bottom-left`.
97+
* *`opacity`: Number (default: 1)* - Decrease this value if you want to see content that is below the visual container.
98+
* *`lineHeight`: Number (default: 20) - Line height for log messages on the visual container.
99+
* *`waifu`: Object(IWeebLoggerWaifu)* - Waifu configuration object.
100+
* *`showWaifu`: (default: true)* - Set to `false` to remove Waifu image.
101+
* *`name`: (default: 'tohka')*: Selects waifu to display. Available values: `akeno`, `alya`, `aqua`, `ayano`, `darkness`, `koneko`, `masha`, `megumin`, `tohka`, `yuki`, `zerotwo`.
102+
* *`useTheme`: (default: true)* - Uses Waifu theme style, set to `false` to use default theme style.
103+
104+
### Methods
105+
106+
#### `logger.info(label: string, message: string | object)` => void
107+
Shows log with a <span style="color:#1b81a8;">*blue*</span> label.
108+
109+
#### `logger.success(label: string, message: string | object)` => void
110+
Shows log with a <span style="color:#108327;">*green*</span> label.
111+
112+
#### `logger.warn(label: string, message: string | object)` => void
113+
Shows log with a <span style="color:#e7f531;">*yellow*</span> label. Shows stacktrace on DevTools.
114+
115+
#### `logger.error(label: string, message: string | object)` => void
116+
Shows log with a <span style="color:#ba1e18;">*red*</span> label. Shows stacktrace on DevTools and if the message is an instance of `Error` object it will also show stack trace on the visual container.
117+
118+
#### `logger.highlight(label: string, message: string | object)` => void
119+
Shows log with a <span style="color:#993d99;">*purple*</span> label.
120+
121+
#### `logger.clear()` => void
122+
Clears the log container and DevTools console screen.
105123

106124
## Testing
107125

@@ -117,7 +135,8 @@ Please make sure all tests pass before submiting a PR
117135
## Roadmap
118136
Would love Pull requests that build towards these objectives and even ideas for new objectives :3
119137
- [x] ~~Decrease package size (As waifu images increase, we'll need to store them on a CDN or something like that)~~ Solved by using GitHub URL to the raw image LOL
120-
- [x] Configure ESLint
138+
- [x] Configure ESLint
139+
- [x] Improve README.md
121140
- [ ] Tests
122141
- [ ] Resize (aparently jest-dom doesn't support getting element dimensions)
123142
- [ ] !isNode (maybe find another way to determine if environment is nodejs or browser other than ```typeof process === 'object' && `${process}\` === '[object process]')```
@@ -134,7 +153,8 @@ Would love Pull requests that build towards these objectives and even ideas for
134153
| [Node.js](https://nodejs.org/en) | Node.js is a Javascript runtime build on Chrome`s V8 JavaScript |
135154
| [Jest](https://jestjs.io/) | Jest is a JavaScript framework for testing |
136155
| [Typescript](https://www.typescriptlang.org) | Typescript extends JavaScript by adding types to the language |
137-
| [Chalk](https://github.com/chalk/chalk) | Chalk is a nodejs dependency for terminal string |
156+
| [Chalk](https://github.com/chalk/chalk) | Chalk is a Node.js dependency for terminal string |
157+
| [stacktrace.js](https://github.com/stacktracejs/stacktrace.js) | stacktrace.js is a Node.js module for formatting JavaScript stack traces in all browsers |
138158
| [Canvas](https://developer.mozilla.org/pt-BR/docs/Web/API/Canvas_API) | Canvas provides a means for drawing graphics via JavaScript and the HTML element |
139159

140160

0 commit comments

Comments
 (0)