@kuscamara/visual-logger
v1.0.0
Published
WebComponent to display calls to console methods in a visual terminal
Downloads
5
Maintainers
Readme
<visual-logger>
Displays calls to
window.console
methods in a visual terminal using Xterm.js.
🚀 Demo: https://visual-logger.now.sh/
This webcomponent follows the open-wc recommendation.
Installation
npm i @kuscamara/visual-logger
Usage
⚠️ Important: Due to differences in module bundlers (see issue in xtermjs repo) 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.
<script src="https://unpkg.com/[email protected]/lib/xterm.js"></script>
<script type="module" src="node_modules/@kuscamara/visual-logger/visual-logger.js"></script>
<visual-logger></visual-logger>
Options
API
Check out the API docs for the complete list of properties / attributes and methods.
Disabling browser logging (window.console
)
Set noConsole
to true
.
<visual-logger no-console></visual-logger>
Excluding console
methods
Config the excluded methods in excludedLogMethods
(array
)
<visual-logger excluded-log-methods='["error"]'></visual-logger>
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.
<visual-logger stylesheet-uri="node_modules/xterm/css/xterm.css"></visual-logger>
Changing size
The height (rows
) and column width (cols
) can be changed after or before initialization.
<visual-logger rows="10" cols="120"></visual-logger>
Customizing styles
The default terminal styles (background, ANSI colors and font styles) can be customized using the theme
option of Xterm.js.
The component does not use Shadow DOM, so it can be customized from the outside using visual-editor
tag.
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.
<visual-logger></visual-logger>
<script>
document.querySelector('visual-logger').log('Hello world!');
</script>
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, eslint and prettier.npm run format
: Runs linters fixing errors.npm run docs
: Updates the API docs in api.md file andcustom-elements.json
.
License
This project is licensed under the MIT License.