npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kuscamara/visual-logger

v1.0.0

Published

WebComponent to display calls to console methods in a visual terminal

Downloads

5

Readme

<visual-logger>

Displays calls to window.console methods in a visual terminal using Xterm.js.

Visual Logger demo

🚀 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 and custom-elements.json.

License

This project is licensed under the MIT License.