Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
May 22, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
90c5336
Fix: @vueuse/head doesn't function properly with ionic
chibx Feb 22, 2024
3c51f5c
Update app.vue
chibx Feb 22, 2024
e2890a4
Update utils.ts
chibx Feb 22, 2024
e85fd03
Merge remote-tracking branch 'origin/main' into CHIBX/main
danielroe May 20, 2024
7b3ffe1
chore: bump `@unhead/vue` version
danielroe May 20, 2024
ee8101d
chore: reduce changes with main
danielroe May 20, 2024
aa979e6
refactor: move head util to `runtime/` directory
danielroe May 20, 2024
e1da910
chore: reduce diff
danielroe May 20, 2024
aaa74bb
Merge branch 'nuxt-modules:main' into main
chibx May 22, 2024
d0a8ab7
Changed useIonHead to useHead & Added tests for the composable
Parkoba May 22, 2024
4e94514
chore: lint
danielroe May 22, 2024
5257c25
chore: reduce diff
danielroe May 22, 2024
bc8c061
chore: more diff reduction
danielroe May 22, 2024
64887a5
chore: update command
danielroe May 22, 2024
0f73dfb
test: refactor to remove delay and simplify
danielroe May 22, 2024
aa2f8e1
chore: lint
danielroe May 22, 2024
ede24be
test: handle null title
danielroe May 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion playground/components/ExploreContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<script setup lang="ts">
defineProps({ name: String })
const props = defineProps({ name: String })
useHead({
title: `Explore Container - ${props.name}`,
})
</script>

<template>
Expand Down
25 changes: 23 additions & 2 deletions playground/pages/overlap.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
<script setup lang="ts">
useHead({
title: 'Overlapping - no tabs',
})
const isExploreEnabled = ref(true)
</script>

<template>
<ion-page>
<ion-header>
Expand All @@ -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>
2 changes: 1 addition & 1 deletion playground/pages/tabs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
useHead({
title: 'Nuxt Ionic',
title: 'House Tabs',
})
</script>

Expand Down
20 changes: 20 additions & 0 deletions playground/pages/tabs/tab1/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
definePageMeta({
alias: ['/', '/tabs'],
})
useHead({
title: 'Tab 1',
})
const isExploreEnabled = ref(true)
</script>

<template>
Expand All @@ -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">
Expand All @@ -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>
4 changes: 4 additions & 0 deletions playground/pages/tabs/tab2/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
23 changes: 22 additions & 1 deletion playground/pages/tabs/tab3/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
<script setup lang="ts">
useHead({
title: 'Tab 3',
})
const isExploreEnabled = ref(true)
</script>

<template>
<ion-page>
<ion-header>
Expand All @@ -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>
23 changes: 22 additions & 1 deletion playground/pages/tabs/tab3/page-two.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
<script setup lang="ts">
useHead({
title: 'Page Two - Tab 3',
})
const isExploreEnabled = ref(true)
</script>

<template>
<ion-page>
<ion-header>
Expand All @@ -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>
42 changes: 24 additions & 18 deletions playground/pages/tabs/tab4/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
<script setup lang="ts">
useHead({
title: 'Tab 4',
})
</script>

<template>
<ion-page>
<ion-header>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading