Skip to content
This repository was archived by the owner on Feb 15, 2025. It is now read-only.

Commit 7d44dcc

Browse files
bennobuilderbennobuilder
committed
added basic logger docs
1 parent d6ed840 commit 7d44dcc

File tree

4 files changed

+105
-35
lines changed

4 files changed

+105
-35
lines changed

‎docs/packages/core/api/agile-instance/Properties.md

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -60,28 +60,3 @@ assignSharedAgileLoggerConfig({
6060
```
6161

6262
:::
63-
64-
The `logger` is a static property of the `Agile Class`.
65-
It is used internally to log warnings, errors, debug messages, .. to the console.
66-
```ts
67-
Agile.logger.warn("This is a Warning");
68-
Agile.logger.log("This is a normal Log");
69-
Agile.logger.if.tag(["render"]).warn("Logs this Warning if the Logger has the Tag 'rerender' active");
70-
```
71-
![Log Custom Styles Example](../../../../../static/img/docs/logger_example.png)
72-
It can be configured during the creation of an Agile Instance.
73-
```ts
74-
const App = new Agile({
75-
logConfig: {
76-
level: Logger.level.WARN,
77-
active: true,
78-
timestamp: true
79-
}
80-
})
81-
```
82-
83-
### 📄 Return
84-
85-
```ts
86-
Logger
87-
```

‎docs/packages/core/api/computed/Introduction.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ its value from a specified function.
1010
Computed States are a powerful concept,
1111
that lets us build dynamic data depending on other data.
1212
To avoid unnecessary recomputations,
13-
the Computed Class automatically caches the computed value
13+
the Computed Class caches the computed value
1414
and recomputes it only when an actual dependency has changed.
1515
All you need to do to instantiate a Computed State,
1616
is to call `createComputed()` and specify a compute function
@@ -20,10 +20,10 @@ const MY_COMPUTED = createComputed(() => {
2020
return `My name is '${MY_NAME.value}' and I am ${MY_AGE.value} years old.`;
2121
});
2222
```
23-
A `Computed` will magically track used dependencies
23+
A `Computed` magically tracks used dependencies
2424
(such as [States](../state/Introduction.md) or [Collections](../collection/Introduction.md))
2525
and automatically recomputes when one of its dependencies updates.
26-
For example, in the above example, it would recompute
26+
In the above code snippet, it would, for example, recompute
2727
when the current value of `MY_NAME` changes from 'jeff' to 'hans'.
2828
```ts
2929
MY_COMPUTED.value; // Returns "My name is 'jeff' and I am 10 years old"

‎docs/packages/logger/Introduction.md

Lines changed: 92 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,97 @@ slug: /logger
77

88
:::warning
99

10-
WIP Package!
10+
WIP Documentation!
1111

1212
:::
13+
14+
> Simple Javascript Logger
15+
16+
<br />
17+
18+
<a href="https://github.com/agile-ts/agile">
19+
<img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
20+
<a href="https://npm.im/@agile-ts/logger">
21+
<img src="https://img.shields.io/npm/v/@agile-ts/logger.svg?label=npm&style=flat&colorA=293140&colorB=4a4872" alt="npm version"/></a>
22+
<a href="https://npm.im/@agile-ts/logger">
23+
<img src="https://img.shields.io/bundlephobia/min/@agile-ts/logger.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
24+
<a href="https://npm.im/@agile-ts/logger">
25+
<img src="https://img.shields.io/npm/dt/@agile-ts/logger.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
26+
27+
## ❓ `logger`
28+
29+
The `logger` package is a standalone extension for AgileTs that improves the logging experience,
30+
by letting you precisely configure the logging behavior.
31+
Without the `logger` package, AgileTs only logs `warn` and `error` logs.
32+
These logs cannot be customized or turned off.
33+
However, with the `logger` extension installed,
34+
you can completely customize what messages should be logged,
35+
how these messages should look like and much more.
36+
All you need to do to configure the logging behavior of AgileTs,
37+
is to call `assignSharedAgileLoggerConfig()` and specify your customized logger configuration.
38+
```ts
39+
import {assignSharedAgileLoggerConfig, Logger} from '@agile-ts/logger';
40+
41+
assignSharedAgileLoggerConfig({
42+
active: true,
43+
level: Logger.level.DEBUG,
44+
timestamp: true
45+
})
46+
```
47+
48+
## ✍️ Standalone
49+
50+
The AgileTs `Logger Class` can also be used without AgileTs.
51+
```ts
52+
const logger = new Logger();
53+
```
54+
Some of its capabilities are to:
55+
56+
- ### 🎭 categorize log messages
57+
Log messages in different upper categories
58+
to be able to roughly classify log messages.
59+
```ts
60+
logger.log("I'm a log message!");
61+
logger.debug("I'm a debug message!");
62+
logger.info("I'm a info message!");
63+
logger.warn("I'm a warn message!");
64+
logger.error("I'm a error message!");
65+
logger.success("I'm a success message!");
66+
logger.trace("I'm a trace message!");
67+
logger.custom('jeff', "I'm a custom jeff message!");
68+
```
69+
70+
- ### 🎲 filter log messages
71+
Filter log messages by tag or type
72+
in order to see only logs that matter right now.
73+
```ts
74+
// Filter by 'type'
75+
logger.setLevel(Logger.level.WARN);
76+
logger.debug('Boring Debug Message.'); // Doesn't get logged
77+
logger.warn('Important Warning!'); // Does get log
78+
79+
// Filter by 'tags'
80+
logger.if.tag(['runtime']).info(`Created Job '${job._key}'`, job);
81+
```
82+
83+
- ### 🎨 style log messages `(color, font-weight)`
84+
Style log messages to make it easier to distinguish between different log types
85+
and recognise important log messages more quickly.
86+
![Log Custom Styles Example](../../../static/img/docs/logger_example.png)
87+
88+
- ### 🔨 customize log messages `(prefix, timestamp)`
89+
Customize log messages to identify searched logs more swiftly.
90+
```ts
91+
logger.debug('Hello there!'); // Logs: 'Agile: Hello there!'
92+
```
93+
94+
- ### 🚫 disable all log messages
95+
```ts
96+
logger.debug('Exciting Debug Message.'); // Logs: 'Boring Debug Message.'
97+
logger.isActive = false;
98+
logger.debug('Boring Debug Message.'); // Doesn't get logged
99+
logger.warn('Important Warning!'); // Doesn't get logged
100+
```
101+
102+
## 🚀 Quick Links
103+
- [Installation](./Installation.md)

‎docs/packages/react/Introduction.md

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,24 @@ The `react` package helps us to integrate AgileTs into a [React](https://reactjs
2424
and serves as an Interface to React.
2525
Its main task is to bind States to React Components.
2626
This binding ensures that AgileTs rerender the Component whenever a bound State mutates.
27-
It also offers some other valuable functionalities that optimize the workflow using AgileTs in a React project.
27+
It also offers some other valuable functionalities
28+
that optimize the workflow using AgileTs in a React project.
2829

2930
A distinction is made between `Functional` and `Class` Components.
3031
As we prefer to use [`React Hooks`](https://reactjs.org/docs/hooks-intro.html) in Functional Components
3132
but Hooks aren't supported in Class Components.
32-
Therefore, we have created alternatives for Class Components in order to offer the same functionalities there as well.
33+
Therefore, we have created alternatives for Class Components
34+
in order to offer the same functionalities there as well.
3335

3436
### 🐆 Functional Component
3537

3638
In Functional Components we recommend using AgileTs Hooks like [`useAgile()`](api/Hooks.md#useagile).
37-
The `useAgile()` Hook binds [Agile Sub Instances](../../main/Introduction.md#agile-sub-instance) (like States or Collections) to React Components.
39+
The `useAgile()` Hook binds [Agile Sub Instances](../../main/Introduction.md#agile-sub-instance)
40+
(like States or Collections) to React Components.
3841
```ts
3942
// -- MyComponent.jsx ------------------------------------------
4043

41-
// Binds MY_FIRST_STATE to myComponent
44+
// Binds MY_FIRST_STATE to 'MyComponent.jsx'
4245
const myFirstState = useAgile(MY_FIRST_STATE);
4346
```
4447
To find out more about `useAgile()`, and other Hooks provided by AgileTs,
@@ -48,11 +51,12 @@ checkout the [AgileTs Hook documentation](api/Hooks.md).
4851

4952
For Class Components, we provide the `AgileHOC`.
5053
The `AgileHOC` is a Higher Order Component that is wrapped around a React Component.
51-
It takes care of binding [Agile Sub Instances](../../main/Introduction.md#agile-sub-instance) (like States or Collections) to the wrapped React Component.
54+
It takes care of binding [Agile Sub Instances](../../main/Introduction.md#agile-sub-instance)
55+
(like States or Collections) to wrapped React Components.
5256
```ts
5357
// -- MyComponent.jsx ------------------------------------------
5458

55-
// Binds MY_FIRST_STATE to myComponent
59+
// Binds MY_FIRST_STATE to 'MyComponent.jsx'
5660
export default AgileHOC(myComponent, [MY_FIRST_STATE]);
5761
```
5862
To find out more about the `AgileHOC` and AgileTs in Class Components,

0 commit comments

Comments
 (0)