Merge branch 'dev'

Author: levy

.github/badge.yml

@@ -1,8 +1,12 @@
 types:
   feat: 'enhancement'
-  fix: 'bug'
+  fix:
+    hack: 'hack'
+    default: 'bug'
+  hack: 'hack'
   docs: 'documentation'
   refactor: 'refactor'
+  style: 'style'
   test: 'test'
   perf: 'performance'
   chore:

.grenrc.js

@@ -25,6 +25,8 @@ module.exports = {
     '♻️ Tests:': ['test'],
     '🚀 Performance:': ['performance'],
     '⚓ Dependency upgrades:': ['dependencies'],
-    '🏡 Chore:': ['chore']
+    '🏡 Chore:': ['chore'],
+    '💄 Style:': ['style'],
+    '🎩 Hack': ['hack']
   }
 }

.stylelintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "no-empty-source": null
+  }
+}

README-zh.md

@@ -1,33 +1,41 @@
 # log-viewer
 
-[![Build Status](https://travis-ci.com/FEMessage/log-viewer.svg?branch=master)](https://travis-ci.com/FEMessage/log-viewer)
-[![NPM Download](https://img.shields.io/npm/dm/@femessage/log-viewer.svg)](https://www.npmjs.com/package/@femessage/log-viewer)
-[![NPM Version](https://img.shields.io/npm/v/@femessage/log-viewer.svg)](https://www.npmjs.com/package/@femessage/log-viewer)
-[![NPM License](https://img.shields.io/npm/l/@femessage/log-viewer.svg)](https://github.com/FEMessage/log-viewer/blob/master/LICENSE)
+[![Build Status](https://badgen.net/travis/FEMessage/log-viewer/master)](https://travis-ci.com/FEMessage/log-viewer)
+[![NPM Download](https://badgen.net/npm/dm/@femessage/log-viewer)](https://www.npmjs.com/package/@femessage/log-viewer)
+[![NPM Version](https://badgen.net/npm/v/@femessage/log-viewer)](https://www.npmjs.com/package/@femessage/log-viewer)
+[![NPM License](https://badgen.net/npm/license/@femessage/log-viewer)](https://github.com/FEMessage/log-viewer/blob/master/LICENSE)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/FEMessage/log-viewer/pulls)
 [![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)
 
 日志查看组件，将终端日志内容展示在页面中
 
-![1.gif](https://cdn.nlark.com/yuque/0/2019/gif/298847/1563414930214-34da6e0b-bdbe-4c59-b531-772afa146417.gif#align=left&display=inline&height=837&name=1.gif&originHeight=837&originWidth=1118&size=78547&status=done&width=1118)
+![new-log](https://user-images.githubusercontent.com/53422750/65296811-4cb5b700-db98-11e9-9b55-1a5c8633ae8f.gif)
 
 [English](./README-en.md)
 
 ## Table of Contents
 
-* [Features](#Features)
-* [Install](#Install)
-* [Usage](#Usage)
-* [Performance](#performance)
-* [Contributors](#Contributors)
-* [MIT](#MIT)
+- [Features](#features)
+- [Install](#install)
+- [Usage](#usage)
+- [Reference](#reference)
+- [Performance](#performance)
+  - [内存占用](#内存占用)
+    - [item-mode](#item-mode)
+    - [vfor-mode](#vfor-mode)
+  - [render 耗时](#render-耗时)
+    - [item-mode](#item-mode-1)
+    - [vfor-mode](#vfor-mode-1)
+- [Contributing](#contributing)
+- [Contributors](#contributors)
+- [License](#license)
 
 ## Features
 
-* 对日志流中特殊字符进行了处理
-* 高性能，处理大量数据不卡顿
-* 可自定义 loading 样式
-* 可自动滚动到底部
+- 对日志流中特殊字符进行了处理
+- 高性能，处理大量数据不卡顿
+- 可自定义 loading 样式
+- 可自动滚动到底部
 
 [⬆ Back to Top](#table-of-contents)
 
@@ -42,20 +50,17 @@ yarn add @femessage/log-viewer
 ## Usage
 
 ```html
-<log-viewer
-    :log="log"
-    :loading="isLoading"
-/>
+<log-viewer :log="log" :loading="isLoading" />
 ```
 
 [⬆ Back to Top](#table-of-contents)
 
 ## Reference
 
-* [thanks to react-lazylog](https://github.com/mozilla-frontend-infra/react-lazylog)
-* [travis-ci logs](https://travis-ci.org/)
-* [http://jafrog.com/2013/11/23/colors-in-terminal.html](http://jafrog.com/2013/11/23/colors-in-terminal.html)
-* [https://en.wikipedia.org/wiki/ANSI_escape_code](https://en.wikipedia.org/wiki/ANSI_escape_code)
+- [thanks to react-lazylog](https://github.com/mozilla-frontend-infra/react-lazylog)
+- [travis-ci logs](https://travis-ci.org/)
+- [http://jafrog.com/2013/11/23/colors-in-terminal.html](http://jafrog.com/2013/11/23/colors-in-terminal.html)
+- [https://en.wikipedia.org/wiki/ANSI_escape_code](https://en.wikipedia.org/wiki/ANSI_escape_code)
 
 [⬆ Back to Top](#table-of-contents)
 
@@ -101,6 +106,19 @@ patch 时间： 23.81ms<br />
 
 [⬆ Back to Top](#table-of-contents)
 
+## Contributing
+
+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](https://github.com/FEMessage/.github/blob/master/CONTRIBUTING.md).
+
+[⬆ Back to Top](#table-of-contents)
+
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

README.md

@@ -1,33 +1,41 @@
 # log-viewer
 
-[![Build Status](https://travis-ci.com/FEMessage/log-viewer.svg?branch=master)](https://travis-ci.com/FEMessage/log-viewer)
-[![NPM Download](https://img.shields.io/npm/dm/@femessage/log-viewer.svg)](https://www.npmjs.com/package/@femessage/log-viewer)
-[![NPM Version](https://img.shields.io/npm/v/@femessage/log-viewer.svg)](https://www.npmjs.com/package/@femessage/log-viewer)
-[![NPM License](https://img.shields.io/npm/l/@femessage/log-viewer.svg)](https://github.com/FEMessage/log-viewer/blob/master/LICENSE)
+[![Build Status](https://badgen.net/travis/FEMessage/log-viewer/master)](https://travis-ci.com/FEMessage/log-viewer)
+[![NPM Download](https://badgen.net/npm/dm/@femessage/log-viewer)](https://www.npmjs.com/package/@femessage/log-viewer)
+[![NPM Version](https://badgen.net/npm/v/@femessage/log-viewer)](https://www.npmjs.com/package/@femessage/log-viewer)
+[![NPM License](https://badgen.net/npm/license/@femessage/log-viewer)](https://github.com/FEMessage/log-viewer/blob/master/LICENSE)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/FEMessage/log-viewer/pulls)
 [![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)
 
 log-viewer is a vue component which can display terminal log in browser with high performance.
 
-![1.gif](https://cdn.nlark.com/yuque/0/2019/gif/298847/1563414930214-34da6e0b-bdbe-4c59-b531-772afa146417.gif#align=left&display=inline&height=837&name=1.gif&originHeight=837&originWidth=1118&size=78547&status=done&width=1118)
+![new-log](https://user-images.githubusercontent.com/53422750/65296811-4cb5b700-db98-11e9-9b55-1a5c8633ae8f.gif)
 
 [中文文档](./README-zh.md)
 
 ## Table of Contents
 
-* [Features](#Features)
-* [Install](#Install)
-* [Usage](#Usage)
-* [Performance](#performance)
-* [Contributors](#Contributors)
-* [MIT](#MIT)
+- [Features](#features)
+- [Install](#install)
+- [Usage](#usage)
+- [Reference](#reference)
+- [Performance](#performance)
+  - [Memory Usage](#memory-usage)
+    - [item-mode](#item-mode)
+    - [vfor-mode](#vfor-mode)
+  - [Render timeline](#render-timeline)
+    - [item-mode](#item-mode-1)
+    - [vfor-mode](#vfor-mode-1)
+- [Contributing](#contributing)
+- [Contributors](#contributors)
+- [License](#license)
 
 ## Features
 
-* 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
+- 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](#table-of-contents)
 
@@ -42,20 +50,17 @@ yarn add @femessage/log-viewer
 ## Usage
 
 ```html
-<log-viewer
-    :log="log"
-    :loading="isLoading"
-/>
+<log-viewer :log="log" :loading="isLoading" />
 ```
 
 [⬆ Back to Top](#table-of-contents)
 
 ## Reference
 
-* [thanks to react-lazylog](https://github.com/mozilla-frontend-infra/react-lazylog)
-* [travis-ci logs](https://travis-ci.org/)
-* [http://jafrog.com/2013/11/23/colors-in-terminal.html](http://jafrog.com/2013/11/23/colors-in-terminal.html)
-* [https://en.wikipedia.org/wiki/ANSI_escape_code](https://en.wikipedia.org/wiki/ANSI_escape_code)
+- [thanks to react-lazylog](https://github.com/mozilla-frontend-infra/react-lazylog)
+- [travis-ci logs](https://travis-ci.org/)
+- [http://jafrog.com/2013/11/23/colors-in-terminal.html](http://jafrog.com/2013/11/23/colors-in-terminal.html)
+- [https://en.wikipedia.org/wiki/ANSI_escape_code](https://en.wikipedia.org/wiki/ANSI_escape_code)
 
 [⬆ Back to Top](#table-of-contents)
 
@@ -104,6 +109,19 @@ Total time: 956.86ms<br />
 
 [⬆ Back to Top](#table-of-contents)
 
+## Contributing
+
+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](https://github.com/FEMessage/.github/blob/master/CONTRIBUTING.md).
+
+[⬆ Back to Top](#table-of-contents)
+
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@femessage/log-viewer",
   "version": "1.0.1",
-  "description": "",
+  "description": "💻 View terminal logs in browser",
   "author": "https://github.com/FEMessage",
   "license": "MIT",
   "repository": {
@@ -15,8 +15,7 @@
   ],
   "files": [
     "src",
-    "dist",
-    "yarn.lock"
+    "dist"
   ],
   "main": "dist/log-viewer.umd.js",
   "module": "dist/log-viewer.esm.js",
@@ -26,7 +25,7 @@
   },
   "scripts": {
     "dev": "vue-styleguidist server",
-    "test": "jest",
+    "test": "jest --verbose",
     "doc": "vue-styleguidist build",
     "build": "npm run build:unpkg & npm run build:es & npm run build:umd & npm run doc",
     "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/log-viewer.umd.js",
@@ -47,29 +46,32 @@
     "file-loader": "^3.0.1",
     "github-release-notes": "^0.17.0",
     "glob": "^7.1.3",
-    "husky": "^0.14.3",
+    "husky": "1.3.1",
     "jest": "^24.8.0",
+    "less": "^3.9.0",
+    "less-loader": "^5.0.0",
+    "lint-staged": "^8.1.0",
     "minimist": "^1.2.0",
-    "prettier": "1.12.1",
+    "prettier": "1.18.2",
     "pretty-quick": "^1.4.1",
     "rollup": "^1.9.0",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-terser": "^4.0.4",
     "rollup-plugin-vue": "^4.7.2",
     "standard-version": "^6.0.1",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.2",
-    "vue": "^2.5.16",
-    "vue-loader": "^15.7.0",
-    "vue-styleguidist": "3.11.4",
+    "stylelint": "^9.10.0",
+    "stylelint-config-standard": "^18.2.0",
+    "vue": "^2.6.10",
+    "vue-loader": "^15.7.1",
+    "vue-styleguidist": "^3.16.3",
     "vue-template-compiler": "^2.5.16",
     "webpack": "^4.29.6"
   },
   "publishConfig": {
     "access": "public"
   },
-  "vue-sfc-cli": "1.10.3",
+  "vue-sfc-cli": "1.10.7",
   "engines": {
     "node": ">= 4.0.0",
     "npm": ">= 3.0.0"
@@ -78,5 +80,22 @@
     "moduleNameMapper": {
       "^@/(.*)$": "<rootDir>/src/$1"
     }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "post-commit": "git update-index --again"
+    }
+  },
+  "lint-staged": {
+    "*.(js|md|json)": [
+      "prettier --write",
+      "git add"
+    ],
+    "*.vue": [
+      "prettier --write",
+      "stylelint --fix",
+      "git add"
+    ]
   }
 }

src/components/line-number.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="line-number" :class="className">{{number}}</div>
+  <div class="line-number" :class="className">{{ number }}</div>
 </template>
 <script>
 export default {

src/components/line-wrapper.vue

@@ -58,31 +58,33 @@ export default {
   }
 }
 </script>
-<style lang="stylus">
+<style lang="less">
 .line-wrapper {
   color: #f1f1f1;
   line-height: 20px;
   height: 20px;
   white-space: nowrap;
   // word-break: break-all;
   box-sizing: border-box;
-  padding-left: 16px
+  padding-left: 16px;
 
   &:hover {
     background-color: #444;
   }
-  .line-number{
-    display:inline-block;
+
+  .line-number {
+    display: inline-block;
     min-width: 40px;
     text-align: right;
     color: #666;
     padding-right: 8px;
-    -webkit-user-select:none;
-    -moz-user-select:none;
-    -ms-user-select:none;
-    user-select:none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
   }
-  .line-content{
+
+  .line-content {
     display: inline-block;
   }
 }