Skip to content

Commit 6d02a39

Browse files
AkryumAkryum
committed
feat: check for vue updates, closes #1181 
1 parent 0bea4d3 commit 6d02a39

File tree

4 files changed

+144
-43
lines changed

4 files changed

+144
-43
lines changed

‎packages/app-frontend/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"pixi.js-legacy": "^5.3.7",
1717
"portal-vue": "^2.1.7",
1818
"scroll-into-view-if-needed": "^2.2.28",
19+
"semver": "^7.3.5",
1920
"stylus": "^0.54.7",
2021
"stylus-loader": "^3.0.2",
2122
"tinycolor2": "^1.4.2",

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

Lines changed: 39 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
<script lang="ts">
22
import AppHeaderSelect from './AppHeaderSelect.vue'
3+
import AppSelectItem from './AppSelectItem.vue'
34
4-
import { watch, defineComponent } from '@vue/composition-api'
5+
import { watch, defineComponent, computed } from '@vue/composition-api'
56
import { BridgeEvents } from '@vue-devtools/shared-utils'
67
import SharedData from '@vue-devtools/shared-utils/lib/shared-data'
78
import { useApps, pendingSelectAppId } from '@front/features/apps'
89
import { useOrientation } from '@front/features/layout/orientation'
910
import { useRouter } from '@front/util/router'
1011
import { useBridge } from '../bridge'
12+
import { useVueVersionCheck } from './vue-version-check'
1113
1214
export default defineComponent({
1315
components: {
14-
AppHeaderSelect
16+
AppHeaderSelect,
17+
AppSelectItem
1518
},
1619
1720
setup () {
@@ -59,11 +62,16 @@ export default defineComponent({
5962
6063
const { orientation } = useOrientation()
6164
65+
// Vue version
66+
const { getLatestVersion } = useVueVersionCheck()
67+
const hasNewVueVersion = computed(() => apps.value.some(app => app.version !== getLatestVersion(app.version)))
68+
6269
return {
6370
currentApp,
6471
apps,
6572
selectApp,
66-
orientation
73+
orientation,
74+
hasNewVueVersion
6775
}
6876
}
6977
})
@@ -84,54 +92,42 @@ export default defineComponent({
8492
'icon-button': orientation === 'portrait'
8593
}"
8694
>
87-
<template v-if="orientation === 'landscape'">
88-
<span v-if="currentApp">
89-
{{ currentApp.name }}
90-
</span>
91-
<span
92-
v-else
93-
class="opacity-50"
94-
>
95-
No app
96-
</span>
97-
</template>
98-
</VueButton>
99-
</template>
100-
101-
<template #default="{ item: app }">
102-
<div class="leading-tight">
103-
<div class="app-button flex items-center">
104-
<span class="truncate flex-1">{{ app.name }}</span>
105-
<span class="flex-none flex items-center">
106-
<img
107-
src="~@front/assets/vue-logo.svg"
108-
class="w-6 h-6"
109-
alt="Vue"
110-
>
111-
<span>{{ app.version }}</span>
112-
</span>
113-
114-
<template v-if="$shared.debugInfo">
95+
<div class="flex items-center space-x-2">
96+
<template v-if="orientation === 'landscape'">
97+
<span v-if="currentApp">
98+
{{ currentApp.name }}
99+
</span>
115100
<span
116-
v-tooltip="'id'"
117-
class="text-white px-1 rounded bg-gray-500 mx-1"
101+
v-else
102+
class="opacity-50"
118103
>
119-
{{ app.id }}
104+
No app
120105
</span>
121106
</template>
122-
</div>
123-
<div
124-
v-if="app.iframe"
125-
class="flex items-center space-x-1 text-2xs font-mono text-gray-500"
126-
>
107+
127108
<VueIcon
128-
icon="web"
129-
class="w-4 h-4"
109+
v-if="hasNewVueVersion"
110+
icon="new_releases"
111+
class="text-green-500"
130112
/>
131-
<span>{{ app.iframe }}</span>
132113
</div>
133-
</div>
114+
</VueButton>
115+
</template>
116+
117+
<template
118+
#default="
119+
{
120+
item
121+
}"
122+
>
123+
<AppSelectItem
124+
:app="item"
125+
/>
126+
</vueicon>
134127
</template>
128+
</vuebutton>
129+
</appheaderselect>
130+
</template></vuebutton>
135131
</AppHeaderSelect>
136132
</template>
137133

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script lang="ts">
2+
import { defineComponent, computed } from '@vue/composition-api'
3+
import { useVueVersionCheck } from './vue-version-check'
4+
5+
export default defineComponent({
6+
props: {
7+
app: {
8+
type: Object,
9+
required: true
10+
}
11+
},
12+
13+
setup (props) {
14+
const { getLatestVersion } = useVueVersionCheck()
15+
const latestVersion = computed(() => getLatestVersion(props.app.version))
16+
const hasNewVersion = computed(() => latestVersion.value !== props.app.version)
17+
18+
return {
19+
latestVersion,
20+
hasNewVersion
21+
}
22+
}
23+
})
24+
</script>
25+
26+
<template>
27+
<div class="leading-tight">
28+
<div class="app-button flex items-center">
29+
<span class="truncate flex-1">{{ app.name }}</span>
30+
<span class="flex-none flex items-center">
31+
<img
32+
src="~@front/assets/vue-logo.svg"
33+
class="w-6 h-6"
34+
alt="Vue"
35+
>
36+
<span>{{ app.version }}</span>
37+
<span
38+
v-if="hasNewVersion"
39+
class="ml-2 text-sm text-green-500 flex items-center space-x-0.5"
40+
>
41+
<VueIcon
42+
icon="new_releases"
43+
class="w-5 h-5"
44+
/>
45+
<span>{{ latestVersion }}</span>
46+
</span>
47+
</span>
48+
49+
<template v-if="$shared.debugInfo">
50+
<span
51+
v-tooltip="'id'"
52+
class="text-white px-1 rounded bg-gray-500 mx-1"
53+
>
54+
{{ app.id }}
55+
</span>
56+
</template>
57+
</div>
58+
<div
59+
v-if="app.iframe"
60+
class="flex items-center space-x-1 text-2xs font-mono text-gray-500"
61+
>
62+
<VueIcon
63+
icon="web"
64+
class="w-4 h-4"
65+
/>
66+
<span>{{ app.iframe }}</span>
67+
</div>
68+
</div>
69+
</template>

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { ref, onMounted } from '@vue/composition-api'
2+
import semver from 'semver'
3+
4+
const packageData = ref<any>(null)
5+
6+
export function useVueVersionCheck () {
7+
onMounted(async () => {
8+
if (!packageData.value) {
9+
try {
10+
const response = await fetch('https://registry.npmjs.org/vue', {
11+
headers: {
12+
mode: 'no-cors'
13+
}
14+
})
15+
const data = await response.json()
16+
packageData.value = data
17+
} catch (e) {
18+
if (process.env.NODE_ENV !== 'development') {
19+
console.error(e)
20+
}
21+
}
22+
}
23+
})
24+
25+
function getLatestVersion (currentVersion: string): string {
26+
if (packageData.value && packageData.value.versions) {
27+
return semver.maxSatisfying(Object.keys(packageData.value.versions), `^${currentVersion}`)
28+
}
29+
return currentVersion
30+
}
31+
32+
return {
33+
getLatestVersion
34+
}
35+
}

0 commit comments

Comments
 (0)