Skip to content

Commit 9f0eece

Browse files
author
Guillaume Chau
committed
feat(ui): Progress and Logs systems
1 parent 61655b1 commit 9f0eece

37 files changed

+1138
-265
lines changed

‎packages/@vue/cli-shared-utils/lib/logger.js

+22-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
11
const chalk = require('chalk')
22
const readline = require('readline')
33
const padStart = require('string.prototype.padstart')
4+
const EventEmitter = require('events')
5+
6+
exports.events = new EventEmitter()
7+
8+
function _log (type, tag, message) {
9+
if (process.env.VUE_CLI_API_MODE && message) {
10+
exports.events.emit('log', {
11+
message,
12+
type,
13+
tag
14+
})
15+
}
16+
}
417

518
const format = (label, msg) => {
619
return msg.split('\n').map((line, i) => {
@@ -12,24 +25,32 @@ const format = (label, msg) => {
1225

1326
const chalkTag = msg => chalk.bgBlackBright.white.dim(` ${msg} `)
1427

15-
exports.log = (msg = '', tag = null) => tag ? console.log(format(chalkTag(tag), msg)) : console.log(msg)
28+
exports.log = (msg = '', tag = null) => {
29+
tag ? console.log(format(chalkTag(tag), msg)) : console.log(msg)
30+
_log('log', tag, msg)
31+
}
1632

1733
exports.info = (msg, tag = null) => {
1834
console.log(format(chalk.bgBlue.black(' INFO ') + (tag ? chalkTag(tag) : ''), msg))
35+
_log('info', tag, msg)
1936
}
2037

2138
exports.done = (msg, tag = null) => {
2239
console.log(format(chalk.bgGreen.black(' DONE ') + (tag ? chalkTag(tag) : ''), msg))
40+
_log('done', tag, msg)
2341
}
2442

2543
exports.warn = (msg, tag = null) => {
2644
console.warn(format(chalk.bgYellow.black(' WARN ') + (tag ? chalkTag(tag) : ''), chalk.yellow(msg)))
45+
_log('warn', tag, msg)
2746
}
2847

2948
exports.error = (msg, tag = null) => {
3049
console.error(format(chalk.bgRed(' ERROR ') + (tag ? chalkTag(tag) : ''), chalk.red(msg)))
50+
_log('error', tag, msg)
3151
if (msg instanceof Error) {
3252
console.error(msg.stack)
53+
_log('error', tag, msg.stack)
3354
}
3455
}
3556

‎packages/@vue/cli-ui/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@vue/cli-service": "^3.0.0-beta.3",
2222
"@vue/eslint-config-standard": "^3.0.0-beta.3",
2323
"@vue/ui": "^0.1.9",
24+
"ansi_up": "^2.0.2",
2425
"apollo-cache-inmemory": "^1.1.10",
2526
"apollo-client": "^2.2.6",
2627
"apollo-link": "^1.2.1",
@@ -38,7 +39,8 @@
3839
"vue-apollo": "^3.0.0-alpha.1",
3940
"vue-cli-plugin-apollo": "^0.4.1",
4041
"vue-router": "^3.0.1",
41-
"vue-template-compiler": "^2.5.13"
42+
"vue-template-compiler": "^2.5.13",
43+
"xterm": "^3.2.0"
4244
},
4345
"browserslist": [
4446
"> 1%",

‎packages/@vue/cli-ui/src/App.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default {
3131
.app
3232
display grid
3333
grid-template-columns 1fr
34-
grid-template-rows auto 28px
34+
grid-template-rows 1fr auto
3535
grid-template-areas "content" "status"
3636
3737
.content

‎packages/@vue/cli-ui/src/components/ListItemInfo.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export default {
5555
justify-content center
5656
5757
.description
58-
color lighten($vue-color-dark, 40%)
58+
color $color-text-light
5959
6060
&.selected
6161
.name

‎packages/@vue/cli-ui/src/components/LoadingScreen.vue

-64
This file was deleted.

‎packages/@vue/cli-ui/src/components/LoggerMessage.vue

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<div
3+
class="logger-message"
4+
:class="[
5+
`type-${message.type}`,
6+
{
7+
'has-type': message.type !== 'log',
8+
'has-tag': message.tag,
9+
pre
10+
}
11+
]"
12+
>
13+
<div v-if="message.type !== 'log'" class="type">{{ message.type }}</div>
14+
<div v-if="message.tag" class="tag">{{ message.tag }}</div>
15+
<div class="message" v-html="formattedMessage"/>
16+
</div>
17+
</template>
18+
19+
<script>
20+
import AU from 'ansi_up'
21+
22+
const ansiUp = new AU()
23+
ansiUp.use_classes = true
24+
25+
export default {
26+
props: {
27+
message: {
28+
type: Object,
29+
required: true
30+
},
31+
32+
pre: {
33+
type: Boolean,
34+
default: false
35+
}
36+
},
37+
38+
computed: {
39+
formattedMessage () {
40+
return ansiUp.ansi_to_html(this.message.message)
41+
}
42+
}
43+
}
44+
</script>
45+
46+
<style lang="stylus" scoped>
47+
@import "~@/style/imports"
48+
49+
.logger-message
50+
h-box()
51+
align-items baseline
52+
font-family 'Roboto Mono', monospace
53+
box-sizing border-box
54+
padding 2px 4px
55+
56+
.type,
57+
.tag
58+
padding 2px 6px
59+
border-radius $br
60+
61+
.type
62+
text-transform uppercase
63+
64+
&.type-warn
65+
.type
66+
background $vue-color-warning
67+
color $vue-color-light
68+
&.type-error
69+
.type
70+
background $vue-color-danger
71+
color $vue-color-light
72+
&.type-info
73+
.type
74+
background $vue-color-info
75+
color $vue-color-light
76+
&.type-done
77+
.type
78+
background $vue-color-success
79+
color $vue-color-light
80+
81+
.tag
82+
background lighten($vue-color-dark, 60%)
83+
84+
&.has-type.has-tag
85+
.type
86+
border-top-right-radius 0
87+
border-bottom-right-radius 0
88+
.tag
89+
border-top-left-radius 0
90+
border-bottom-left-radius 0
91+
92+
.message
93+
flex 100% 1 1
94+
width 0
95+
ellipsis()
96+
97+
&.has-type,
98+
&.has-tag
99+
.message
100+
margin-left 12px
101+
102+
&.pre
103+
.message
104+
white-space pre-wrap
105+
</style>

‎packages/@vue/cli-ui/src/components/LoggerView.vue

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<div class="logger-view">
3+
<ApolloQuery
4+
:query="require('../graphql/consoleLogs.gql')"
5+
fetch-policy="cache-and-network"
6+
class="logs"
7+
>
8+
<ApolloSubscribeToMore
9+
ref="logs"
10+
:document="require('../graphql/consoleLogAdded.gql')"
11+
:update-query="onConsoleLogAdded"
12+
/>
13+
14+
<template slot-scope="{ result: { data } }">
15+
<template v-if="data && data.consoleLogs">
16+
<LoggerMessage
17+
v-for="log of data.consoleLogs"
18+
:key="log.id"
19+
:message="log"
20+
pre
21+
/>
22+
</template>
23+
</template>
24+
</ApolloQuery>
25+
</div>
26+
</template>
27+
28+
<script>
29+
import LoggerMessage from './LoggerMessage'
30+
31+
export default {
32+
components: {
33+
LoggerMessage
34+
},
35+
36+
methods: {
37+
onConsoleLogAdded (previousResult, { subscriptionData }) {
38+
this.scrollToBottom()
39+
return {
40+
consoleLogs: [
41+
...previousResult.consoleLogs,
42+
subscriptionData.data.consoleLogAdded
43+
]
44+
}
45+
},
46+
47+
async scrollToBottom () {
48+
await this.$nextTick()
49+
const list = this.$refs.logs.$el
50+
list.scrollTop = list.scrollHeight
51+
console.log(list.scrollHeight)
52+
},
53+
54+
clearLogs () {
55+
// TODO
56+
}
57+
}
58+
}
59+
</script>
60+
61+
<style lang="stylus" scoped>
62+
@import "~@/style/imports"
63+
64+
.logger-view
65+
background $vue-color-light-neutral
66+
padding $padding-item 0
67+
height 160px
68+
display grid
69+
grid-template-columns 1fr
70+
grid-template-rows 1fr
71+
grid-template-areas "logs"
72+
73+
.logs
74+
grid-area logs
75+
padding 0 $padding-item
76+
overflow-x hidden
77+
overflow-y auto
78+
font-size 12px
79+
80+
.logger-message
81+
&:hover
82+
background lighten(@background, 40%)
83+
</style>

0 commit comments

Comments
 (0)