feat: fallback to fetch if ws timesout (#6)

Author: pi0

app/app.vue

@@ -39,6 +39,7 @@
 <style src="./css/fonts.css"></style>
 
 <script>
+import fetch from 'unfetch'
 import capitalizeMixin from './mixins/capitalize'
 import logMixin from './mixins/log'
 import wsMixin from './mixins/ws'
@@ -74,19 +75,54 @@ export default {
   },
 
   mounted() {
-    this.onWSData(window.__STATE__)
+    this.onData(window.__STATE__)
     this.wsConnect('/_loading/ws')
+    this.setTimeout()
   },
 
   methods: {
     onWSData(data) {
+      // We have data from ws. Delay timeout!
+      this.setTimeout()
+
+      this.onData(data)
+    },
+
+    async fetchData() {
+      // Prevent any fetch happening during fetch
+      this.clearTimeout()
+
+      try {
+        const data = await fetch('/_loading/json').then(res => res.json())
+        this.onData(data)
+      } catch (e) {
+        this.logError(e)
+      }
+
+      // Start next timeout
+      this.setTimeout()
+    },
+
+    clearTimeout() {
+      if (this._fetchTimeout) {
+        clearTimeout(this._fetchTimeout)
+      }
+    },
+
+    setTimeout() {
+      this.clearTimeout()
+      this._fetchTimeout = setTimeout(() => this.fetchData(), 1000)
+    },
+
+    onData(data) {
       if (!data || !data.states) {
         return
       }
 
       let isFinished = true
 
       this.bundles = data.states.map(state => state.name.toLowerCase())
+
       // Ignore if not bundle is given
       if (!this.bundles.length) {
         return
@@ -128,12 +164,14 @@ export default {
         return
       }
 
-      // Clear console
-      this.clearConsole()
-
+      // Replace document with new page
       document.open()
       document.write(html)
       document.close()
+
+      // Clear console and timeout
+      this.clearConsole()
+      this.clearTimeout()
     }
   }
 }

lib/loading.js

@@ -10,6 +10,7 @@ class LoadingUI {
 
     this.serveIndex = this.serveIndex.bind(this)
     this.serveWS = this.serveWS.bind(this)
+    this.serveJSON = this.serveJSON.bind(this)
 
     this._lastBroadCast = 0
     this.allDone = true
@@ -23,6 +24,9 @@ class LoadingUI {
     this.wss = new WebSocket.Server({ noServer: true })
     this.app.use('/ws', this.serveWS)
 
+    // Serve dist
+    this.app.use('/json', this.serveJSON)
+
     // Serve dist
     const distPath = path.resolve(__dirname, '..', 'app-dist')
     this.app.use('/', serveStatic(distPath))
@@ -74,6 +78,10 @@ class LoadingUI {
     ))
   }
 
+  serveJSON(req, res) {
+    res.end(JSON.stringify(this.state))
+  }
+
   serveWS(req) {
     this.handleUpgrade(req, req.socket, undefined)
   }

package.json

@@ -33,6 +33,7 @@
     "eslint-plugin-vue": "^5.2.2",
     "poi": "^12.5.7",
     "standard-version": "^5.0.2",
+    "unfetch": "^4.1.0",
     "vue": "^2.6.10",
     "vue-template-compiler": "^2.6.10"
   }

yarn.lock

@@ -7338,6 +7338,11 @@ uglify-js@3.4.x, uglify-js@^3.1.4:
     commander "~2.19.0"
     source-map "~0.6.1"
 
+unfetch@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.1.0.tgz#6ec2dd0de887e58a4dee83a050ded80ffc4137db"
+  integrity sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"