✨ (new version) display button if there is a new version.

src/bus/busEvent.ts

@@ -1,3 +0,0 @@
-export enum BusEvent {
-  NEW_VERSION = 'NEW_VERSION'
-}

src/bus/serviceWorkerEventBus.ts

@@ -0,0 +1,3 @@
+import { createEventBus } from 'retrobus'
+
+export const serviceWorkerBusEvent = createEventBus<void>('new-version')

src/components/NewVersion.vue

@@ -0,0 +1,32 @@
+<template>
+  <aside class="new-version" v-if="hasNewVersion">
+    <button class="button is-primary" @click="reload">
+      new version available
+    </button>
+  </aside>
+</template>
+
+<script lang="ts">
+import { serviceWorkerBusEvent } from '@/bus/serviceWorkerEventBus'
+import { defineComponent, onMounted, ref } from 'vue'
+
+export default defineComponent({
+  name: 'NewVersion',
+  setup() {
+    const hasNewVersion = ref(false)
+    onMounted(() => {
+      serviceWorkerBusEvent.addEventBusListener(
+        () => {
+          hasNewVersion.value = true
+        },
+        {
+          once: true,
+          retro: true
+        }
+      )
+    })
+
+    return { hasNewVersion, reload: () => location.reload() }
+  }
+})
+</script>

src/hooks/useLinks.hook.ts

@@ -1,4 +1,4 @@
-import { noteEventBus } from '@/bus/noteBusEvent'
+import { noteEventBus } from '@/bus/noteEventBus'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { onUnmounted } from '@vue/runtime-core'
 

src/hooks/useNote.hook.ts

@@ -1,7 +1,7 @@
 import { computed, onMounted, onUnmounted, watch } from '@vue/runtime-core'
 
 import { NOTE_WIDTH } from '@/constants/note-width'
-import { noteEventBus } from '@/bus/noteBusEvent'
+import { noteEventBus } from '@/bus/noteEventBus'
 import { useFocus } from '@/hooks/useFocus.hook'
 import { useOverlay } from '@/hooks/useOverlay.hook'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'

src/registerServiceWorker.ts

@@ -1,8 +1,7 @@
 /* eslint-disable no-console */
 
+import { serviceWorkerBusEvent } from '@/bus/serviceWorkerEventBus'
 import { register } from 'register-service-worker'
-import { emit } from 'retrobus'
-import { BusEvent } from '@/bus/busEvent'
 
 if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
@@ -23,7 +22,7 @@ if (process.env.NODE_ENV === 'production') {
     },
     updated() {
       console.log('New content is available; please refresh.')
-      emit(BusEvent.NEW_VERSION)
+      serviceWorkerBusEvent.emit()
     },
     offline() {
       console.log(

src/views/Home.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="home content" v-if="!user || !repo">
+    <new-version class="new-version" />
     <welcome-world />
   </div>
   <flux-note :user="user" :repo="repo" :key="routeKey" v-else />
@@ -8,6 +9,7 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import NewVersion from '@/components/NewVersion.vue'
 
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
@@ -19,7 +21,8 @@ export default defineComponent({
   name: 'Home',
   components: {
     WelcomeWorld,
-    FluxNote
+    FluxNote,
+    NewVersion
   },
   props: {
     user: { type: String, required: false, default: '' },
@@ -40,5 +43,11 @@ export default defineComponent({
 .home {
   display: flex;
   flex: 1;
+  flex-direction: column;
+  align-items: center;
+
+  .new-version {
+    margin-top: 1rem;
+  }
 }
 </style>