feat: replace useHead with ionic-compatible head implementation (#518)

nuxt-modules · May 22, 2024 · b9a4f97 · b9a4f97
1 parent 7a16d0e
commit b9a4f97
Show file tree

Hide file tree

Showing 16 changed files with 441 additions and 66 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -47,7 +47,7 @@ jobs:
         run: pnpm dev:prepare
 
       - name: 🎭 Set up playwright
-        run: pnpm playwright install
+        run: pnpm playwright-core install
 
       - name: 🧪 Test project
         run: pnpm test -- --coverage

diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
     "@ionic/vue": "^8.1.2",
     "@ionic/vue-router": "^8.1.2",
     "@nuxt/kit": "^3.11.2",
+    "@unhead/vue": "^1.9.10",
     "ionicons": "^7.3.1",
     "pathe": "^1.1.2",
     "pkg-types": "^1.0.3",
@@ -73,13 +74,15 @@
     "@nuxt/test-utils": "3.13.1",
     "@types/node": "20.12.12",
     "@vitest/coverage-v8": "1.4.0",
+    "@vue/test-utils": "^2.4.6",
     "bumpp": "9.4.1",
     "eslint": "9.0.0",
     "expect-type": "0.19.0",
+    "happy-dom": "^14.11.0",
     "husky": "9.0.11",
     "lint-staged": "15.2.2",
     "nuxt": "3.11.2",
-    "playwright": "1.43.1",
+    "playwright-core": "1.44.0",
     "typescript": "5.4.5",
     "vitest": "1.4.0",
     "vue": "3.4.27",

diff --git a/playground/components/ExploreContainer.vue b/playground/components/ExploreContainer.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-defineProps({ name: String })
+const props = defineProps({ name: String })
+useHead({
+  title: `Explore Container - ${props.name}`,
+})
 </script>
 
 <template>

diff --git a/playground/pages/overlap.vue b/playground/pages/overlap.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+useHead({
+  title: 'Overlapping - no tabs',
+})
+const isExploreEnabled = ref(true)
+</script>
+
 <template>
   <ion-page>
     <ion-header>
@@ -8,8 +15,22 @@
         <ion-title>Overlapping - no tabs</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content>
-      <ExploreContainer name="Overlapping page" />
+    <ion-content :fullscreen="true">
+      <ExploreContainer
+        v-if="isExploreEnabled"
+        name="Overlap Page"
+      />
+      <p style="text-align: center;">
+        <ion-button
+          class="explorer-toggle-op"
+          fill="solid"
+          color="primary"
+          strong
+          @click="isExploreEnabled = !isExploreEnabled"
+        >
+          Toggle Overlap Explore Container
+        </ion-button>
+      </p>
     </ion-content>
   </ion-page>
 </template>
diff --git a/playground/pages/tabs.vue b/playground/pages/tabs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 useHead({
-  title: 'Nuxt Ionic',
+  title: 'House Tabs',
 })
 </script>
 

diff --git a/playground/pages/tabs/tab1/index.vue b/playground/pages/tabs/tab1/index.vue
@@ -2,6 +2,10 @@
 definePageMeta({
   alias: ['/', '/tabs'],
 })
+useHead({
+  title: 'Tab 1',
+})
+const isExploreEnabled = ref(true)
 </script>
 
 <template>
@@ -15,6 +19,10 @@ definePageMeta({
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
+      <ExploreContainer
+        v-if="isExploreEnabled"
+        name="Tab 1"
+      />
       <ion-header collapse="condense">
         <ion-toolbar>
           <ion-title size="large">
@@ -41,6 +49,18 @@ definePageMeta({
           </ion-badge>
         </ion-item>
       </ion-list>
+
+      <p style="text-align: center;">
+        <ion-button
+          class="explorer-toggle-1"
+          fill="solid"
+          color="primary"
+          strong
+          @click="isExploreEnabled = !isExploreEnabled"
+        >
+          Toggle Explore Container - Tab 1
+        </ion-button>
+      </p>
     </ion-content>
   </ion-page>
 </template>
diff --git a/playground/pages/tabs/tab2/index.vue b/playground/pages/tabs/tab2/index.vue
@@ -2,6 +2,10 @@
 import { actionSheetController } from '@ionic/vue'
 import type { UserPhoto } from '~/composables/usePhotoGallery'
 
+useHead({
+  title: 'Tab 2 - Photos',
+})
+
 const { photos, takePhoto, deletePhoto } = usePhotoGallery()
 
 const showActionSheet = async (photo: UserPhoto) => {

diff --git a/playground/pages/tabs/tab3/index.vue b/playground/pages/tabs/tab3/index.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+useHead({
+  title: 'Tab 3',
+})
+const isExploreEnabled = ref(true)
+</script>
+
 <template>
   <ion-page>
     <ion-header>
@@ -19,7 +26,21 @@
       <ion-button router-link="/overlap">
         Go to overlapping page
       </ion-button>
-      <ExploreContainer name="Tab 3 page" />
+      <ExploreContainer
+        v-if="isExploreEnabled"
+        name="Tab 3"
+      />
+      <p style="text-align: center;">
+        <ion-button
+          class="explorer-toggle-3"
+          fill="solid"
+          color="primary"
+          strong
+          @click="isExploreEnabled = !isExploreEnabled"
+        >
+          Toggle Explore Container - Tab 3
+        </ion-button>
+      </p>
     </ion-content>
   </ion-page>
 </template>
diff --git a/playground/pages/tabs/tab3/page-two.vue b/playground/pages/tabs/tab3/page-two.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+useHead({
+  title: 'Page Two - Tab 3',
+})
+const isExploreEnabled = ref(true)
+</script>
+
 <template>
   <ion-page>
     <ion-header>
@@ -9,7 +16,21 @@
       </ion-toolbar>
     </ion-header>
     <ion-content>
-      <ExploreContainer name="Tab 3 page two" />
+      <ExploreContainer
+        v-if="isExploreEnabled"
+        name="Tab 3 - Page Two"
+      />
+      <p style="text-align: center;">
+        <ion-button
+          class="explorer-toggle-p2"
+          fill="solid"
+          color="primary"
+          strong
+          @click="isExploreEnabled = !isExploreEnabled"
+        >
+          Toggle Explore Container - Tab 3 / Page Two
+        </ion-button>
+      </p>
     </ion-content>
   </ion-page>
 </template>
diff --git a/playground/pages/tabs/tab4/index.vue b/playground/pages/tabs/tab4/index.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+useHead({
+  title: 'Tab 4',
+})
+</script>
+
 <template>
   <ion-page>
     <ion-header>
@@ -32,13 +38,13 @@
             <div class="red-square" />
 
             <div class="buttons">
-              <IonButton @click="animation.play()">
+              <IonButton @click="animation?.play()">
                 Play
               </IonButton>
-              <IonButton @click="animation.pause()">
+              <IonButton @click="animation?.pause()">
                 Pause
               </IonButton>
-              <IonButton @click="animation.stop()">
+              <IonButton @click="animation?.stop()">
                 Stop
               </IonButton>
             </div>
@@ -64,13 +70,13 @@
             <div class="blue-square" />
 
             <div class="buttons">
-              <IonButton @click="animation.play()">
+              <IonButton @click="animation?.play()">
                 Play
               </IonButton>
-              <IonButton @click="animation.pause()">
+              <IonButton @click="animation?.pause()">
                 Pause
               </IonButton>
-              <IonButton @click="animation.stop()">
+              <IonButton @click="animation?.stop()">
                 Stop
               </IonButton>
             </div>
@@ -95,13 +101,13 @@
             <div class="green-square" />
 
             <div class="buttons">
-              <IonButton @click="animation.play()">
+              <IonButton @click="animation?.play()">
                 Play
               </IonButton>
-              <IonButton @click="animation.pause()">
+              <IonButton @click="animation?.pause()">
                 Pause
               </IonButton>
-              <IonButton @click="animation.stop()">
+              <IonButton @click="animation?.stop()">
                 Stop
               </IonButton>
             </div>
@@ -134,13 +140,13 @@
             <div class="red-square" />
 
             <div class="buttons">
-              <IonButton @click="animation.play()">
+              <IonButton @click="animation?.play()">
                 Play
               </IonButton>
-              <IonButton @click="animation.pause()">
+              <IonButton @click="animation?.pause()">
                 Pause
               </IonButton>
-              <IonButton @click="animation.stop()">
+              <IonButton @click="animation?.stop()">
                 Stop
               </IonButton>
             </div>
@@ -174,13 +180,13 @@
             <div class="blue-square" />
 
             <div class="buttons">
-              <IonButton @click="animation.play()">
+              <IonButton @click="animation?.play()">
                 Play
               </IonButton>
-              <IonButton @click="animation.pause()">
+              <IonButton @click="animation?.pause()">
                 Pause
               </IonButton>
-              <IonButton @click="animation.stop()">
+              <IonButton @click="animation?.stop()">
                 Stop
               </IonButton>
             </div>
@@ -208,13 +214,13 @@
             <div class="green-square" />
 
             <div class="buttons">
-              <IonButton @click="animation.play()">
+              <IonButton @click="animation?.play()">
                 Play
               </IonButton>
-              <IonButton @click="animation.pause()">
+              <IonButton @click="animation?.pause()">
                 Pause
               </IonButton>
-              <IonButton @click="animation.stop()">
+              <IonButton @click="animation?.stop()">
                 Stop
               </IonButton>
             </div>