feat: use SSE for analyzer service (#5)

* teleemetry service with sse

* cleanup

* use serrvice.vuetelemetry.com url

Author: bdrtsky

src/background.js

@@ -28,25 +28,55 @@ browser.runtime.onMessage.addListener(
       const showcase = tabsStorage[tabId]
       if (showcase.hasVue && !showcase.slug) {
         try {
-          const res = await fetch(`https://vuetelemetry.com/api/analyze?url=${message.payload.url}`, {
-            method: 'GET'
-          })
-            .then((response) => {
-              if (!response.ok) {
+          if (typeof EventSource === 'undefined') {
+            console.log('EventSource is not supported in current borwser!')
+            return
+          }
+          const sse = new EventSource(
+          `https://service.vuetelemetry.com?url=${message.payload.url}`
+          )
+          sse.addEventListener('message', (event) => {
+            try {
+              const res = JSON.parse(event.data)
+              if (!res.error && !res.isAdultContent) {
+                showcase.isPublic = res.isPublic
+                showcase.slug = res.slug
+                sse.close()
+
+                // temporary fix when hit CSP
+                if (!showcase.modules.length && res.modules.length) {
+                  showcase.modules = res.modules
+                }
+                if (!showcase.plugins.length && res.plugins.length) {
+                  showcase.plugins = res.plugins
+                }
+              } else {
                 throw new Error('API call to VT failed')
               }
-              return response.json()
-            })
-          showcase.isPublic = res.body.isPublic
-          showcase.slug = res.body.slug
+            } catch (err) {
+              sse.close()
+            }
+          })
 
-          // temporary fix when hit CSP
-          if (!showcase.modules.length && res.body.modules.length) {
-            showcase.modules = res.body.modules
-          }
-          if (!showcase.plugins.length && res.body.plugins.length) {
-            showcase.plugins = res.body.plugins
-          }
+          // const res = await fetch(`https://vuetelemetry.com/api/analyze?url=${message.payload.url}`, {
+          //   method: 'GET'
+          // })
+          //   .then((response) => {
+          //     if (!response.ok) {
+          //       throw new Error('API call to VT failed')
+          //     }
+          //     return response.json()
+          //   })
+          // showcase.isPublic = res.body.isPublic
+          // showcase.slug = res.body.slug
+
+          // // temporary fix when hit CSP
+          // if (!showcase.modules.length && res.body.modules.length) {
+          //   showcase.modules = res.body.modules
+          // }
+          // if (!showcase.plugins.length && res.body.plugins.length) {
+          //   showcase.plugins = res.body.plugins
+          // }
         } catch (err) {}
       }
       // tabsStorage[tabId] = message.payload

src/popup/App.vue

@@ -295,20 +295,43 @@ export default {
       this.saving = true
       this.savingError = false
       try {
-        await fetch(`https://vuetelemetry.com/api/analyze?url=${this.showcase.url}&isPublic=true&force=true`, {
-          method: 'GET'
-        })
-          .then((response) => {
-            if (!response.ok) {
+        if (typeof EventSource === 'undefined') {
+          console.log('EventSource is not supported in current borwser!')
+          return
+        }
+        const sse = new EventSource(
+        `https://service.vuetelemetry.com?url=${this.showcase.url}&isPublic=true&force=true`
+        )
+        sse.addEventListener('message', (event) => {
+          try {
+            const res = JSON.parse(event.data)
+            if (!res.error && !res.isAdultContent) {
+              this.showcase.slug = res.slug
+              this.showcase.isPublic = res.isPublic
+              this.saving = false
+              sse.close()
+            } else {
               throw new Error('API call to VT failed')
             }
-            return response.json()
-          })
-          .then(({ body }) => {
-            this.showcase.slug = body.slug
-            this.showcase.isPublic = body.isPublic
-            this.saving = false
-          })
+          } catch (err) {
+            sse.close()
+          }
+        })
+
+        // await fetch(`https://vuetelemetry.com/api/analyze?url=${this.showcase.url}&isPublic=true&force=true`, {
+        //   method: 'GET'
+        // })
+        //   .then((response) => {
+        //     if (!response.ok) {
+        //       throw new Error('API call to VT failed')
+        //     }
+        //     return response.json()
+        //   })
+        //   .then(({ body }) => {
+        //     this.showcase.slug = body.slug
+        //     this.showcase.isPublic = body.isPublic
+        //     this.saving = false
+        //   })
         const tabId = this.currentTab.id
         await this.sendToBackground({
           from: 'popup',