chore: refactor app

Author: benjamincanac

src/background.js

@@ -1,16 +1,10 @@
 import axios from 'axios'
 import store from './store'
 
-// array to save domain for checking if allready post
-const domainsVisited = []
 const browser = require('webextension-polyfill')
 
-const map = store.getters.dataInfo
 // send url to analyzer
-async function sendUrl (url, domain, tabId) {
-  // loading
-  store.commit('SET_ISLOADING', true)
-
+async function analyze (tabId, url) {
   await axios({
     method: 'GET',
     url: `https://vuetelemetry.com/api/analyze?url=${url}&src=extension`,
@@ -23,16 +17,11 @@ async function sendUrl (url, domain, tabId) {
       tabId,
       path: 'icons/icon-128.png'
     })
-    setMapData(domain, data.body)
+
+    store.commit('SET_SHOWCASE', data.body)
   }).catch((e) => {
-    browser.browserAction.setIcon({
-      tabId,
-      path: 'icons/icon-grey-128.png'
-    })
-    setMapData(domain, e.response.data.statusCode === 400 ? 'noVue' : 'error')
+    store.commit('SET_SHOWCASE', e.response.data.statusCode === 400 ? 'noVue' : 'error')
   })
-
-  store.commit('SET_ISLOADING', false)
 }
 
 // when tab clicked
@@ -57,34 +46,54 @@ async function handleUpdated (tabId, changeInfo, tabInfo) {
 browser.tabs.onActivated.addListener(handleActivated)
 browser.tabs.onUpdated.addListener(handleUpdated)
 
-// detect vue by calling detector and sendUrl
+// detect vue by calling detector and analyze
 async function detectVue (tabId, url) {
-  store.commit('SET_CURRENTDOMAIN', url)
+  browser.browserAction.setIcon({
+    tabId,
+    path: 'icons/icon-grey-128.png'
+  })
+
+  store.commit('SET_DOMAIN', null)
 
   if (!url) {
     return
   }
   if (/^chrome/.test(url) || /^about/.test(url)) {
-    return setMapData(url, 'noVue')
+    return
   }
 
-  await hasVue(tabId).then(({ response }) => {
-    store.commit('SET_CURRENTDOMAIN', response.vueInfo.domain)
+  store.commit('SET_ISLOADING', true)
+
+  try {
+    const { response } = await resolveVue(tabId)
+    const { domain, hasVue } = response.vueInfo
+
+    store.commit('SET_DOMAIN', domain)
 
-    if (!domainsVisited.includes(response.vueInfo.domain)) {
-      domainsVisited.push(response.vueInfo.domain)
+    const showcase = store.getters.showcase
 
-      if (response.vueInfo.hasVue) {
-        sendUrl(url, response.vueInfo.domain, tabId)
+    if (showcase) {
+      if (showcase.id) {
+        browser.browserAction.setIcon({
+          tabId,
+          path: 'icons/icon-128.png'
+        })
+      }
+    } else {
+      if (hasVue) {
+        await analyze(tabId, url)
       } else {
-        setMapData(response.vueInfo.domain, 'noVue')
+        store.commit('SET_SHOWCASE', 'noVue')
       }
     }
-  })
+  } catch (e) {
+  }
+
+  store.commit('SET_ISLOADING', false)
 }
 
 // check vue in content.js and get response
-function hasVue (tabId) {
+function resolveVue (tabId) {
   return new Promise((resolve) => {
     browser.tabs.sendMessage(
       tabId,
@@ -94,8 +103,3 @@ function hasVue (tabId) {
     })
   })
 }
-
-function setMapData (domain, data) {
-  map[domain] = data
-  store.commit('SET_DATAINFO', map)
-}

src/popup/App.vue

@@ -9,7 +9,7 @@
         <div class="flex items-center">
           <a
             v-if="state === 'data'"
-            :href="`https://vuetelemetry.com/explore/${website.slug}`"
+            :href="`https://vuetelemetry.com/explore/${showcase.slug}`"
             target="_blank"
             class="mr-3"
           >
@@ -39,33 +39,33 @@
             <div class="grid grid-cols-3 gap-4">
               <ListBlock label="Vue version" href="https://vuejs.org/">
                 <img :src="getURL('/vue.svg')" alt class="w-6 h-6 mr-2" />
-                <div class="font-semibold">{{ website.vueVersion }}</div>
+                <div class="font-semibold">{{ showcase.vueVersion }}</div>
               </ListBlock>
 
-              <ListBlock v-if="website.framework" label="Framework" :href="website.framework.url">
-                <img :src="getURL(website.framework.imgPath)" alt class="w-6 h-6 mr-2" />
-                <div class="font-semibold">{{ website.framework.name }}</div>
+              <ListBlock v-if="showcase.framework" label="Framework" :href="showcase.framework.url">
+                <img :src="getURL(showcase.framework.imgPath)" alt class="w-6 h-6 mr-2" />
+                <div class="font-semibold">{{ showcase.framework.name }}</div>
               </ListBlock>
 
-              <ListBlock v-if="website.ui" label="UI Framework" :href="website.ui.url">
-                <img :src="getURL(website.ui.imgPath)" alt class="w-6 h-6 mr-2" />
-                <div class="font-semibold">{{ website.ui.name }}</div>
+              <ListBlock v-if="showcase.ui" label="UI Framework" :href="showcase.ui.url">
+                <img :src="getURL(showcase.ui.imgPath)" alt class="w-6 h-6 mr-2" />
+                <div class="font-semibold">{{ showcase.ui.name }}</div>
               </ListBlock>
 
               <ListBlock label="Rendering">
-                <div class="font-semibold">{{ website.hasSSR ? 'Universal' : 'Client-side' }}</div>
+                <div class="font-semibold">{{ showcase.hasSSR ? 'Universal' : 'Client-side' }}</div>
               </ListBlock>
 
               <ListBlock
-                v-if="website.framework && website.framework.slug === 'nuxtjs'"
+                v-if="showcase.framework && showcase.framework.slug === 'nuxtjs'"
                 label="Deployment"
               >
-                <div class="font-semibold">{{ website.isStatic ? 'Static' : 'Server' }}</div>
+                <div class="font-semibold">{{ showcase.isStatic ? 'Static' : 'Server' }}</div>
               </ListBlock>
             </div>
           </div>
 
-          <div v-if="website.plugins.length" class="mb-4">
+          <div v-if="showcase.plugins.length" class="mb-4">
             <div class="mb-4">
               <h3 class="flex items-center font-bold pl-2 text-primary-500 uppercase">
                 <PluginsIcon class="h-6 mr-2 text-primary-500 opacity-50" />Plugins
@@ -74,7 +74,7 @@
 
             <div class="flex flex-wrap">
               <a
-                v-for="plugin in website.plugins"
+                v-for="plugin in showcase.plugins"
                 :key="plugin.id"
                 :href="plugin.url"
                 target="_blank"
@@ -87,7 +87,7 @@
             </div>
           </div>
 
-          <div v-if="website.modules.length">
+          <div v-if="showcase.modules.length">
             <div class="mb-4">
               <h3 class="flex items-center font-bold pl-2 text-primary-500 uppercase">
                 <ModulesIcon class="h-6 mr-2 text-primary-500 opacity-50" />Nuxt Modules
@@ -96,7 +96,7 @@
 
             <div class="flex flex-wrap">
               <a
-                v-for="module in website.modules"
+                v-for="module in showcase.modules"
                 :key="module.id"
                 :href="module.url"
                 target="_blank"
@@ -117,7 +117,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import LogoIcon from '../images/logo.svg?inline'
 import ExternalLinkIcon from '../images/external-link.svg?inline'
@@ -141,20 +141,14 @@ export default {
     ListBlock
   },
   computed: {
-    ...mapState([
-      'dataInfo',
+    ...mapGetters([
       'isLoading',
-      'currentDomain'
+      'showcase'
     ]),
-    website () {
-      return this.dataInfo[this.currentDomain]
-    },
     state () {
-      const website = this.dataInfo[this.currentDomain]
-
-      if (website && website === 'error') {
+      if (this.showcase && this.showcase === 'error') {
         return 'error'
-      } else if (website && website !== 'noVue') {
+      } else if (this.showcase && this.showcase !== 'noVue') {
         return 'data'
       }
 

src/store/actions.js

@@ -1,37 +1,39 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import VuexWebExtensions from 'vuex-webextensions'
-import * as types from './mutation-types'
-import * as actions from './actions'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    dataInfo: {},
+    showcases: {},
     isLoading: false,
-    currentDomain: ''
+    domain: null
   },
   getters: {
-    dataInfo (state) { return state.dataInfo },
     isLoading (state) { return state.isLoading },
-    currentDomain (state) { return state.currentDomain }
+    showcase (state) {
+      return state.domain ? state.showcases[state.domain] : null
+    }
   },
   mutations: {
-    [types.SET_DATAINFO] (state, payload) {
-      state.dataInfo = payload
+    SET_ISLOADING (state, isLoading) {
+      state.isLoading = isLoading
     },
-    [types.SET_ISLOADING] (state, payload) {
-      state.isLoading = payload
+    SET_SHOWCASE (state, showcase) {
+      if (state.domain) {
+        state.showcases = {
+          ...state.showcases,
+          [state.domain]: showcase
+        }
+      }
     },
-    [types.SET_CURRENTDOMAIN] (state, payload) {
-      state.currentDomain = payload
+    SET_DOMAIN (state, domain) {
+      state.domain = domain
     }
   },
-  actions,
   plugins: [
     VuexWebExtensions({
-      persistentStates: ['dataInfo', 'isLoading', 'currentDomain'],
       loggerLevel: 'info'
     })
   ]