https://github.com/kcmr/visual-logger
WebComponent to display calls to console methods in a visual terminal
https://github.com/kcmr/visual-logger
console custom-elements logger terminal web-components
Last synced: over 1 year ago
JSON representation
WebComponent to display calls to console methods in a visual terminal
- Host: GitHub
- URL: https://github.com/kcmr/visual-logger
- Owner: kcmr
- License: mit
- Created: 2020-03-07T13:10:41.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-05-08T06:00:02.000Z (about 3 years ago)
- Last Synced: 2025-02-28T03:41:16.105Z (over 1 year ago)
- Topics: console, custom-elements, logger, terminal, web-components
- Language: JavaScript
- Homepage: https://visual-logger.now.sh
- Size: 1.94 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# <visual-logger>
[](https://travis-ci.com/kcmr/visual-logger)
[](https://badge.fury.io/js/%40kuscamara%2Fvisual-logger)
[](https://www.webcomponents.org/element/@kuscamara/visual-logger)
[](http://commitizen.github.io/cz-cli/)
[](https://github.com/semantic-release/semantic-release)
[](https://codecov.io/gh/kcmr/visual-logger)
> Displays calls to `window.console` methods in a visual terminal using [Xterm.js](https://xtermjs.org/).
[](https://visual-logger.now.sh/)
🚀 **Demo:** [https://visual-logger.now.sh/](https://visual-logger.now.sh/)
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
## Installation
```bash
npm i @kuscamara/visual-logger
```
## Usage
⚠️ **Important:** Due to differences in module bundlers ([see issue in xtermjs repo](https://github.com/xtermjs/xterm.js/issues/2486)) handling exports, the component does not import `xterm` by itself and uses `window.Terminal` `constructor`, so **`xterm` should be loaded in `window` before the component**.
`xterm` is also required as `devDependency` for the tests.
Include the component in your page and start using `window.console` methods.
```html
```
## Options
### [API](api.md)
Check out the **[API docs](api.md)** for the complete list of properties / attributes and methods.
### Disabling browser logging (`window.console`)
Set `noConsole` to `true`.
```html
```
### Excluding `console` methods
Config the excluded methods in `excludedLogMethods` (`array`)
```html
```
### Xterm styles
The required styles for the terminal are loaded by default from a CDN (cdnjs.cloudflare.com), so you don't need to import them manually. If you need to load the stylesheet from a different location, use the `stylesheet-uri` attribute to specify the path.
```html
```
### Changing size
The height (`rows`) and column width (`cols`) can be changed after or before initialization.
```html
```
### Customizing styles
The default terminal styles (background, ANSI colors and font styles) can be customized using the [`theme` option of Xterm.js](https://xtermjs.org/docs/api/terminal/interfaces/itheme/).
The component **does not use Shadow DOM**, so it can be customized from the outside using `visual-editor` tag.
```css
visual-editor > div {
padding: 20px;
}
```
### Programmatically usage
Each of the `window.console` methods (`log`, `warn`, `info`, `error`) has a corresponding component method that accepts the same params.
_Note: only the first two params are shown in the terminal._
```html
document.querySelector('visual-logger').log('Hello world!');
```
## Development
The following commands are available for development:
- `npm start`: Starts the development server.
- `npm t`: Runs the tests with coverage output.
- `npm run test:watch`: Runs the test in watch mode. The browser runner is available at http://localhost:9876/
- `npm run lint`: Runs [web component analyzer](https://www.npmjs.com/package/web-component-analyzer), eslint and prettier.
- `npm run format`: Runs linters fixing errors.
- `npm run docs`: Updates the API docs in [api.md](api.md) file and `custom-elements.json`.
## License
This project is licensed under the [MIT License](LICENSE).