{"id":15999605,"url":"https://github.com/kcmr/visual-logger","last_synced_at":"2025-03-17T20:30:35.484Z","repository":{"id":38175067,"uuid":"245635096","full_name":"kcmr/visual-logger","owner":"kcmr","description":"WebComponent to display calls to console methods in a visual terminal","archived":false,"fork":false,"pushed_at":"2023-05-08T06:00:02.000Z","size":2029,"stargazers_count":4,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T03:41:16.105Z","etag":null,"topics":["console","custom-elements","logger","terminal","web-components"],"latest_commit_sha":null,"homepage":"https://visual-logger.now.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kcmr.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-07T13:10:41.000Z","updated_at":"2023-08-23T21:59:38.000Z","dependencies_parsed_at":"2024-10-27T16:24:50.199Z","dependency_job_id":null,"html_url":"https://github.com/kcmr/visual-logger","commit_stats":{"total_commits":29,"total_committers":2,"mean_commits":14.5,"dds":0.03448275862068961,"last_synced_commit":"28c9fa0062c2f825507ae07b3d10925fb74b7c1b"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcmr%2Fvisual-logger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcmr%2Fvisual-logger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcmr%2Fvisual-logger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kcmr%2Fvisual-logger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kcmr","download_url":"https://codeload.github.com/kcmr/visual-logger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243878483,"owners_count":20362433,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["console","custom-elements","logger","terminal","web-components"],"created_at":"2024-10-08T09:00:31.873Z","updated_at":"2025-03-17T20:30:35.114Z","avatar_url":"https://github.com/kcmr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u0026lt;visual-logger\u0026gt;\n\n[![Build Status](https://travis-ci.com/kcmr/visual-logger.svg?branch=master)](https://travis-ci.com/kcmr/visual-logger)\n[![npm version](https://badge.fury.io/js/%40kuscamara%2Fvisual-logger.svg)](https://badge.fury.io/js/%40kuscamara%2Fvisual-logger)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@kuscamara/visual-logger)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![codecov](https://codecov.io/gh/kcmr/visual-logger/branch/master/graph/badge.svg)](https://codecov.io/gh/kcmr/visual-logger)\n![Dependency status](https://img.shields.io/david/kcmr/visual-logger.svg)\n\n\n\u003e Displays calls to `window.console` methods in a visual terminal using [Xterm.js](https://xtermjs.org/).\n\n[![Visual Logger demo](https://github.com/kcmr/visual-logger/raw/master/visual-logger.png)](https://visual-logger.now.sh/)\n\n🚀 **Demo:** [https://visual-logger.now.sh/](https://visual-logger.now.sh/)\n\nThis webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.\n\n## Installation\n\n```bash\nnpm i @kuscamara/visual-logger\n```\n\n## Usage\n\n⚠️ **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**.   \n`xterm` is also required as `devDependency` for the tests.\n\nInclude the component in your page and start using `window.console` methods.\n\n```html\n\u003cscript src=\"https://unpkg.com/xterm@4.4.0/lib/xterm.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"module\" src=\"node_modules/@kuscamara/visual-logger/visual-logger.js\"\u003e\u003c/script\u003e\n\n\u003cvisual-logger\u003e\u003c/visual-logger\u003e\n```\n\n## Options\n\n### [API](api.md)\n\nCheck out the **[API docs](api.md)** for the complete list of properties / attributes and methods.\n\n### Disabling browser logging (`window.console`)\n\nSet `noConsole` to `true`.\n\n```html\n\u003cvisual-logger no-console\u003e\u003c/visual-logger\u003e\n```\n\n### Excluding `console` methods\n\nConfig the excluded methods in `excludedLogMethods` (`array`)\n\n```html\n\u003cvisual-logger excluded-log-methods='[\"error\"]'\u003e\u003c/visual-logger\u003e\n```\n\n### Xterm styles\n\nThe 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.\n\n```html\n\u003cvisual-logger stylesheet-uri=\"node_modules/xterm/css/xterm.css\"\u003e\u003c/visual-logger\u003e\n```\n\n### Changing size\n\nThe height (`rows`) and column width (`cols`) can be changed after or before initialization.\n\n```html\n\u003cvisual-logger rows=\"10\" cols=\"120\"\u003e\u003c/visual-logger\u003e\n```\n\n### Customizing styles\n\nThe 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/).\n\nThe component **does not use Shadow DOM**, so it can be customized from the outside using `visual-editor` tag.\n\n```css\nvisual-editor \u003e div {\n  padding: 20px;\n}\n```\n\n### Programmatically usage\n\nEach of the `window.console` methods (`log`, `warn`, `info`, `error`) has a corresponding component method that accepts the same params.\n\n_Note: only the first two params are shown in the terminal._\n\n```html\n\u003cvisual-logger\u003e\u003c/visual-logger\u003e\n\n\u003cscript\u003e\n  document.querySelector('visual-logger').log('Hello world!');\n\u003c/script\u003e\n```\n\n## Development\n\nThe following commands are available for development:\n\n- `npm start`: Starts the development server.\n- `npm t`: Runs the tests with coverage output.\n- `npm run test:watch`: Runs the test in watch mode. The browser runner is available at http://localhost:9876/\n- `npm run lint`: Runs [web component analyzer](https://www.npmjs.com/package/web-component-analyzer), eslint and prettier.\n- `npm run format`: Runs linters fixing errors.\n- `npm run docs`: Updates the API docs in [api.md](api.md) file and `custom-elements.json`.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkcmr%2Fvisual-logger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkcmr%2Fvisual-logger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkcmr%2Fvisual-logger/lists"}