Skip to content

Commit f8c4cb2

Browse files
committed
refactor: further tweak install output
1 parent 61b93a6 commit f8c4cb2

File tree

2 files changed

+45
-1
lines changed

2 files changed

+45
-1
lines changed

packages/@vue/cli/lib/Creator.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ module.exports = class Creator {
122122
// install plugins
123123
stopSpinner()
124124
log(`⚙ Installing CLI plugins. This might take a while...`)
125+
log()
125126
if (isTestOrDebug) {
126127
// in development, avoid installation process
127128
await setupDevProject(context)
@@ -130,6 +131,7 @@ module.exports = class Creator {
130131
}
131132

132133
// run generator
134+
log()
133135
log(`🚀 Invoking generators...`)
134136
const plugins = this.resolvePlugins(options.plugins)
135137
const generator = new Generator(
@@ -142,11 +144,13 @@ module.exports = class Creator {
142144

143145
// install additional deps (injected by generators)
144146
log(`📦 Installing additional dependencies...`)
147+
log()
145148
if (!isTestOrDebug) {
146149
await installDeps(context, packageManager, cliOptions.registry)
147150
}
148151

149152
// run complete cbs if any (injected by generators)
153+
log()
150154
logWithSpinner('⚓', `Running completion hooks...`)
151155
for (const cb of createCompleteCbs) {
152156
await cb()

packages/@vue/cli/lib/util/installDeps.js

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const { URL } = require('url')
22
const https = require('https')
33
const chalk = require('chalk')
44
const execa = require('execa')
5+
const readline = require('readline')
56
const inquirer = require('inquirer')
67
const { loadOptions, saveOptions } = require('../options')
78
const { pauseSpinner, resumeSpinner } = require('@vue/cli-shared-utils')
@@ -74,6 +75,26 @@ const shouldUseTaobao = async (command) => {
7475
return save(useTaobaoRegistry)
7576
}
7677

78+
const toStartOfLine = stream => {
79+
if (!chalk.supportsColor) {
80+
stream.write('\r')
81+
return
82+
}
83+
readline.cursorTo(stream, 0)
84+
}
85+
86+
const renderProgressBar = (curr, total) => {
87+
const ratio = Math.min(Math.max(curr / total, 0), 1)
88+
const bar = ` ${curr}/${total}`
89+
const availableSpace = Math.max(0, process.stderr.columns - bar.length - 3)
90+
const width = Math.min(total, availableSpace)
91+
const completeLength = Math.round(width * ratio)
92+
const complete = `#`.repeat(completeLength)
93+
const incomplete = `-`.repeat(width - completeLength)
94+
toStartOfLine(process.stderr)
95+
process.stderr.write(`[${complete}${incomplete}]${bar}`)
96+
}
97+
7798
module.exports = async function installDeps (targetDir, command, cliRegistry) {
7899
const args = []
79100
if (command === 'npm') {
@@ -105,9 +126,28 @@ module.exports = async function installDeps (targetDir, command, cliRegistry) {
105126
await new Promise((resolve, reject) => {
106127
const child = execa(command, args, {
107128
cwd: targetDir,
108-
stdio: 'inherit'
129+
stdio: ['inherit', 'inherit', command === 'yarn' ? 'pipe' : 'inherit']
109130
})
110131

132+
// filter out unwanted yarn output
133+
if (command === 'yarn') {
134+
child.stderr.on('data', buf => {
135+
const str = buf.toString()
136+
if (/warning/.test(str)) {
137+
return
138+
}
139+
// progress bar
140+
const progressBarMatch = str.match(/\[.*\] (\d+)\/(\d+)/)
141+
if (progressBarMatch) {
142+
// since yarn is in a child process, it's unable to get the width of
143+
// the terminal. reimplement the progress bar ourselves!
144+
renderProgressBar(progressBarMatch[1], progressBarMatch[2])
145+
return
146+
}
147+
process.stderr.write(buf)
148+
})
149+
}
150+
111151
child.on('close', code => {
112152
if (code !== 0) {
113153
reject(`command failed: ${command} ${args.join(' ')}`)

0 commit comments

Comments
 (0)