Build Status NPM Download NPM Version NPM License PRs Welcome Automated Release Notes by gren

log-viewer is a vue component which can display terminal log in browser with high performance.

new-log

中文文档

• Features
• Install
• Usage
• Links
• Reference
• Performance
  • Memory Usage
    • item-mode
    • vfor-mode
  • Render timeline
    • item-mode
    • vfor-mode
• Contributing
• Contributors
• License

• Process some special characters in the log stream
• High performance, and process large amounts of data without jamming
• Customize loading status
• Auto scroll to the bottom

⬆ Back to Top

yarn add @femessage/log-viewer

⬆ Back to Top

<log-viewer :log="log" :loading="isLoading" />

⬆ Back to Top

• design doc

⬆ Back to Top

• thanks to react-lazylog
• travis-ci logs
• http://jafrog.com/2013/11/23/colors-in-terminal.html
• https://en.wikipedia.org/wiki/ANSI_escape_code

⬆ Back to Top

Virtual scrolling use the component:https://github.com/tangbc/vue-virtual-scroll-list

Achieve internal use 'item-mode' so that its performance is better than the 'vfor-mode'.

Use 100,000 lines to test.

The Memory before the component mount: 36.5MB
The Memory after the component mounted: 48MB
Memory Usage: 11.5MB
图片.gif

The Memory before the component mount: 43MB
The Memory after the component mounted: 221MB
Memory Usage: 178MB

item-10e4.gif

Also use 100,000 lines to test.

Render time: 0.63ms
Patch time: 72.18ms
Total time: 72.85ms
item-1e5.gif

Render time: 933.05ms
Patch time: 23.81ms
Total time: 956.86ms
v-for-1e5.gif

⬆ Back to Top

For those who are interested in contributing to this project, such as:

• report a bug
• request new feature
• fix a bug
• implement a new feature

Please refer to our contributing guide.

⬆ Back to Top

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

⬆ Back to Top

MIT

⬆ Back to Top