refactor: improve build indicator (#5832)

[release]

packages/cli/src/command.js

@@ -94,6 +94,9 @@ export default class NuxtCommand {
   async getNuxtConfig(extraOptions = {}) {
     const rootDir = path.resolve(this.argv._[0] || '.')
 
+    // Flag to indicate nuxt is running with CLI (not programmatic)
+    extraOptions._cli = true
+
     // Typescript support
     extraOptions._typescript = await detectTypeScript(rootDir, {
       transpileOnly: this.cmd.name === 'start'

packages/config/src/options.js

@@ -370,6 +370,10 @@ export function getNuxtConfig(_options) {
   // Add loading screen
   if (options.dev) {
     options.devModules.push('@nuxt/loading-screen')
+    // Disable build indicator for programmatic users
+    if (!options._cli) {
+      options.build.indicator = false
+    }
   }
 
   return options

packages/vue-app/template/components/nuxt-build-indicator.vue

@@ -29,22 +29,31 @@ export default {
     if (WebSocket === undefined) {
       return // Unsupported
     }
-    this.wsConnect('<%= router.base %>_loading/ws')
+    this.wsConnect()
   },
   beforeDestroy() {
     this.wsClose()
+    clearInterval(this._progressAnimation)
+  },
+  computed: {
+    wsURL() {
+      const _path = '<%= router.base %>_loading/ws'
+      const _protocol = location.protocol === 'https:' ? 'wss' : 'ws'
+      return `${_protocol}://${location.hostname}:${location.port}${_path}`
+    }
   },
   watch: {
     progress(val, oldVal) {
-      // Cancel old animation
-      clearInterval(this._progressAnimation)
       // Average progress may decrease but ignore it!
       if (val < oldVal) {
         return
       }
-      // Jump to edge imediately
+      // Cancel old animation
+      clearInterval(this._progressAnimation)
+      // Jump to edge immediately
       if (val < 10 || val > 90) {
         this.animatedProgress = val
+        return
       }
       // Animate to value
       this._progressAnimation = setInterval(() => {
@@ -58,51 +67,40 @@ export default {
     }
   },
   methods: {
-    wsConnect(path) {
+    wsConnect() {
-      if (path) {
+      if (this._connecting) {
-        const protocol = location.protocol === 'https:' ? 'wss' : 'ws'
+        return
-        this.wsURL = `${protocol}://${location.hostname}:${location.port}${path}`
       }
-
+      this._connecting = true
+      this.wsClose()
       this.ws = new WebSocket(this.wsURL)
-      this.ws.onclose = this.onWSClose.bind(this)
-      this.ws.onerror = this.onWSError.bind(this)
       this.ws.onmessage = this.onWSMessage.bind(this)
+      this.ws.onclose = this.wsReconnect.bind(this)
+      this.ws.onerror = this.wsReconnect.bind(this)
+      setTimeout(() => {
+        this._connecting = false
+        if (this.ws.readyState !== WebSocket.OPEN) {
+          this.wsReconnect()
+        }
+      }, 5000)
     },
 
-    wsReconnect(e) {
+    wsReconnect() {
-      this.reconnectAttempts++
+      if (this._reconnecting || this.reconnectAttempts++ > 10) {
-      if (this.reconnectAttempts > 10) {
         return
       }
-      setTimeout(() => { this.wsConnect() }, 1000)
+      this._reconnecting = true
+      setTimeout(() => {
+        this._reconnecting = false
+        this.wsConnect()
+      }, 1000)
     },
 
-    onWSClose(e) {
+    onWSMessage(message) {
-      // https://tools.ietf.org/html/rfc6455#section-11.7
+      const data = JSON.parse(message.data)
-      if (e.code !== 1000 && e.code !== 1005) {
-        this.wsReconnect() // Unkown error
-      }
-    },
-
-    onWSError(error) {
-      if (error.code === 'ECONNREFUSED') {
-        this.wsReconnect(error)
-      }
-    },
-
-    onWSMessage(msg) {
-      let data = msg.data
-
-      try {
-        if (data[0] === '{') {
-          data = JSON.parse(data)
-        }
-      } catch (e) {
-        return
-      }
 
       this.progress = Math.round(data.states.reduce((p, s) => p + s.progress, 0) / data.states.length)
+
       if (!data.allDone) {
         this.building = true
       } else {