feat: check for vue updates, closes #1181

packages/app-frontend/package.json

@@ -16,6 +16,7 @@
     "pixi.js-legacy": "^5.3.7",
     "portal-vue": "^2.1.7",
     "scroll-into-view-if-needed": "^2.2.28",
+    "semver": "^7.3.5",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "tinycolor2": "^1.4.2",

packages/app-frontend/src/features/header/AppSelect.vue

@@ -1,17 +1,20 @@
 <script lang="ts">
 import AppHeaderSelect from './AppHeaderSelect.vue'
+import AppSelectItem from './AppSelectItem.vue'
 
-import { watch, defineComponent } from '@vue/composition-api'
+import { watch, defineComponent, computed } from '@vue/composition-api'
 import { BridgeEvents } from '@vue-devtools/shared-utils'
 import SharedData from '@vue-devtools/shared-utils/lib/shared-data'
 import { useApps, pendingSelectAppId } from '@front/features/apps'
 import { useOrientation } from '@front/features/layout/orientation'
 import { useRouter } from '@front/util/router'
 import { useBridge } from '../bridge'
+import { useVueVersionCheck } from './vue-version-check'
 
 export default defineComponent({
   components: {
-    AppHeaderSelect
+    AppHeaderSelect,
+    AppSelectItem
   },
 
   setup () {
@@ -59,11 +62,16 @@ export default defineComponent({
 
     const { orientation } = useOrientation()
 
+    // Vue version
+    const { getLatestVersion } = useVueVersionCheck()
+    const hasNewVueVersion = computed(() => apps.value.some(app => app.version !== getLatestVersion(app.version)))
+
     return {
       currentApp,
       apps,
       selectApp,
-      orientation
+      orientation,
+      hasNewVueVersion
     }
   }
 })
@@ -84,53 +92,32 @@ export default defineComponent({
           'icon-button': orientation === 'portrait'
         }"
       >
-        <template v-if="orientation === 'landscape'">
-          <span v-if="currentApp">
-            {{ currentApp.name }}
-          </span>
-          <span
-            v-else
-            class="opacity-50"
-          >
-            No app
-          </span>
-        </template>
-      </VueButton>
-    </template>
-
-    <template #default="{ item: app }">
-      <div class="leading-tight">
-        <div class="app-button flex items-center">
-          <span class="truncate flex-1">{{ app.name }}</span>
-          <span class="flex-none flex items-center">
-            <img
-              src="~@front/assets/vue-logo.svg"
-              class="w-6 h-6"
-              alt="Vue"
-            >
-            <span>{{ app.version }}</span>
-          </span>
-
-          <template v-if="$shared.debugInfo">
+        <div class="flex items-center space-x-2">
+          <template v-if="orientation === 'landscape'">
+            <span v-if="currentApp">
+              {{ currentApp.name }}
+            </span>
             <span
-              v-tooltip="'id'"
-              class="text-white px-1 rounded bg-gray-500 mx-1"
+              v-else
+              class="opacity-50"
             >
-              {{ app.id }}
+              No app
             </span>
           </template>
-        </div>
-        <div
-          v-if="app.iframe"
-          class="flex items-center space-x-1 text-2xs font-mono text-gray-500"
-        >
+
           <VueIcon
-            icon="web"
-            class="w-4 h-4"
+            v-if="hasNewVueVersion"
+            icon="new_releases"
+            class="text-green-500"
           />
-          <span>{{ app.iframe }}</span>
         </div>
-      </div>
+      </VueButton>
+    </template>
+
+    <template #default="{ item }">
+      <AppSelectItem
+        :app="item"
+      />
     </template>
   </AppHeaderSelect>
 </template>

packages/app-frontend/src/features/header/AppSelectItem.vue

@@ -0,0 +1,69 @@
+<script lang="ts">
+import { defineComponent, computed } from '@vue/composition-api'
+import { useVueVersionCheck } from './vue-version-check'
+
+export default defineComponent({
+  props: {
+    app: {
+      type: Object,
+      required: true
+    }
+  },
+
+  setup (props) {
+    const { getLatestVersion } = useVueVersionCheck()
+    const latestVersion = computed(() => getLatestVersion(props.app.version))
+    const hasNewVersion = computed(() => latestVersion.value !== props.app.version)
+
+    return {
+      latestVersion,
+      hasNewVersion
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="leading-tight">
+    <div class="app-button flex items-center">
+      <span class="truncate flex-1">{{ app.name }}</span>
+      <span class="flex-none flex items-center">
+        <img
+          src="~@front/assets/vue-logo.svg"
+          class="w-6 h-6"
+          alt="Vue"
+        >
+        <span>{{ app.version }}</span>
+        <span
+          v-if="hasNewVersion"
+          class="ml-2 text-sm text-green-500 flex items-center space-x-0.5"
+        >
+          <VueIcon
+            icon="new_releases"
+            class="w-5 h-5"
+          />
+          <span>{{ latestVersion }}</span>
+        </span>
+      </span>
+
+      <template v-if="$shared.debugInfo">
+        <span
+          v-tooltip="'id'"
+          class="text-white px-1 rounded bg-gray-500 mx-1"
+        >
+          {{ app.id }}
+        </span>
+      </template>
+    </div>
+    <div
+      v-if="app.iframe"
+      class="flex items-center space-x-1 text-2xs font-mono text-gray-500"
+    >
+      <VueIcon
+        icon="web"
+        class="w-4 h-4"
+      />
+      <span>{{ app.iframe }}</span>
+    </div>
+  </div>
+</template>

packages/app-frontend/src/features/header/vue-version-check.ts

@@ -0,0 +1,35 @@
+import { ref, onMounted } from '@vue/composition-api'
+import semver from 'semver'
+
+const packageData = ref<any>(null)
+
+export function useVueVersionCheck () {
+  onMounted(async () => {
+    if (!packageData.value) {
+      try {
+        const response = await fetch('https://registry.npmjs.org/vue', {
+          headers: {
+            mode: 'no-cors'
+          }
+        })
+        const data = await response.json()
+        packageData.value = data
+      } catch (e) {
+        if (process.env.NODE_ENV !== 'development') {
+          console.error(e)
+        }
+      }
+    }
+  })
+
+  function getLatestVersion (currentVersion: string): string {
+    if (packageData.value && packageData.value.versions) {
+      return semver.maxSatisfying(Object.keys(packageData.value.versions), `^${currentVersion}`)
+    }
+    return currentVersion
+  }
+
+  return {
+    getLatestVersion
+  }
+}