Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flexdinesh/babel-plugin-render-logger
⚙️ Babel plugin that automatically adds a console statement to React components and makes debugging easier
https://github.com/flexdinesh/babel-plugin-render-logger
babel babel-plugin debugging-tool developer-tools reactjs
Last synced: 3 months ago
JSON representation
⚙️ Babel plugin that automatically adds a console statement to React components and makes debugging easier
- Host: GitHub
- URL: https://github.com/flexdinesh/babel-plugin-render-logger
- Owner: flexdinesh
- Created: 2019-11-20T00:56:44.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-11T07:46:29.000Z (over 3 years ago)
- Last Synced: 2024-05-27T22:16:40.678Z (7 months ago)
- Topics: babel, babel-plugin, debugging-tool, developer-tools, reactjs
- Language: JavaScript
- Homepage:
- Size: 585 KB
- Stars: 7
- Watchers: 3
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# babel-plugin-render-logger
Babel plugin that automatically adds a console statement to React components and makes debugging easier.
## Install
_NOTE: This package is not published to npm yet_
```sh
yarn add --dev babel-plugin-render-logger
```
## Example
Transforms
```jsx
const HelloWorld = () => {
return Hello World;
};
class HelloWorld extends React.Component {
render() {
return Hello World;
}
}
```
to
```jsx
const HelloWorld = () => {
console.log('>> RenderLog >>', 'HelloWorld');
return Hello World;
};
class HelloWorld extends React.Component {
render() {
console.log('>> RenderLog >>', 'HelloWorld');
return Hello World;
}
}
```
## Usage
`.babelrc`
Use the logger only in `development`.
```json
{
"presets": ["react-app"],
"env": {
"development": {
"plugins": ["render-logger"]
}
}
}
```
### Config
#### name
All components will log by default. You can pass in the component name as a string or regex and only components that match the name will be logged.
Log all components matching the name "Hello"
```json
{
"plugins": [
["render-logger", {
"name": "Hello"
}]
]
}
```
Log all components matching the name "Hello" or "Welcome"
```json
{
"plugins": [
["render-logger", {
"name": "Hello|Welcome"
}]
]
}
```
#### disableConsoleStyles
Disable the styles in console statements. To differentiate the log noise, the console statements are colored by default.
```json
{
"plugins": [
["render-logger", {
"name": "Hello|Welcome",
"disableConsoleStyles": true
}]
]
}
```
#### consoleMethod
Default console method is `info` (`console.info()`). You can choose to use a different method. Accepts `warn`, `error`, `trace`, `info` and `log`;
```json
{
"plugins": [
["render-logger", {
"name": "Hello|Welcome",
"disableConsoleStyles": true,
"consoleMethod": "warn"
}]
]
}
```
## License
MIT © Dinesh Pandiyan