From 726a581addae43fdd01c2f21a40fec71dbf01abc Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 28 Dec 2022 15:08:03 +0100
Subject: [PATCH] refactor: use nuxt plugin to provide pwa helpers globally
 (#604)

---
 components/pwa/PwaBadge.client.vue               |  8 ++------
 components/pwa/PwaPrompt.client.vue              | 10 +++-------
 config/pwa.ts                                    |  4 +---
 .../pwa/index.ts => plugins/pwa.client.ts        | 16 +++++++++-------
 4 files changed, 15 insertions(+), 23 deletions(-)
 rename composables/pwa/index.ts => plugins/pwa.client.ts (81%)

diff --git a/components/pwa/PwaBadge.client.vue b/components/pwa/PwaBadge.client.vue
index 5ab45c79..cd9ce608 100644
--- a/components/pwa/PwaBadge.client.vue
+++ b/components/pwa/PwaBadge.client.vue
@@ -1,13 +1,9 @@
-<script setup>
-import { pwa } from '~/composables/pwa'
-</script>
-
 <template>
   <button
-    v-if="pwa.needRefresh"
+    v-if="$pwa?.needRefresh"
     bg="fade" relative rounded
     flex="~ gap-1 center" px3 py1 text-primary
-    @click="pwa.updateServiceWorker()"
+    @click="$pwa.updateServiceWorker()"
   >
     <div i-ri-download-cloud-2-line />
     <h2 flex="~ gap-2" items-center>
diff --git a/components/pwa/PwaPrompt.client.vue b/components/pwa/PwaPrompt.client.vue
index a0335a9c..3d57eb0e 100644
--- a/components/pwa/PwaPrompt.client.vue
+++ b/components/pwa/PwaPrompt.client.vue
@@ -1,10 +1,6 @@
-<script setup>
-import { pwa } from '~/composables/pwa'
-</script>
-
 <template>
   <div
-    v-if="pwa.needRefresh"
+    v-if="$pwa?.needRefresh"
     m-2 p5 bg="fade" relative
     rounded-lg of-hidden
     flex="~ col gap-3"
@@ -13,10 +9,10 @@ import { pwa } from '~/composables/pwa'
       {{ $t('pwa.title') }}
     </h2>
     <div flex="~ gap-1">
-      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="pwa.updateServiceWorker()">
+      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="$pwa.updateServiceWorker()">
         {{ $t('pwa.update') }}
       </button>
-      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="pwa.close()">
+      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.close()">
         {{ $t('pwa.dismiss') }}
       </button>
     </div>
diff --git a/config/pwa.ts b/config/pwa.ts
index 63ffc356..1eb7d7d0 100644
--- a/config/pwa.ts
+++ b/config/pwa.ts
@@ -3,7 +3,7 @@ import type { VitePWANuxtOptions } from '../modules/pwa/types'
 
 const isPreview = process.env.PULL_REQUEST === 'true'
 
-const pwa: VitePWANuxtOptions = {
+export const pwa: VitePWANuxtOptions = {
   mode: isCI ? 'production' : 'development',
   // disable PWA only when in preview mode
   disable: /* temporarily test in CI isPreview || */ (isDevelopment && process.env.VITE_DEV_PWA !== 'true'),
@@ -49,5 +49,3 @@ const pwa: VitePWANuxtOptions = {
     type: 'module',
   },
 }
-
-export { pwa }
diff --git a/composables/pwa/index.ts b/plugins/pwa.client.ts
similarity index 81%
rename from composables/pwa/index.ts
rename to plugins/pwa.client.ts
index 95cacb65..1bc21afa 100644
--- a/composables/pwa/index.ts
+++ b/plugins/pwa.client.ts
@@ -1,6 +1,6 @@
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 
-export function usePWA() {
+export default defineNuxtPlugin(() => {
   const online = useOnline()
 
   const {
@@ -34,10 +34,12 @@ export function usePWA() {
   }
 
   return {
-    needRefresh,
-    updateServiceWorker,
-    close,
+    provide: {
+      pwa: reactive({
+        needRefresh,
+        updateServiceWorker,
+        close,
+      }),
+    },
   }
-}
-
-export const pwa = reactive(usePWA())
+})