fix(head): improve and added test pages

playground/components/base/Headline.vue

@@ -1,29 +1,31 @@
 <template>
-  <component
-    :is="tag"
-    v-font="$getFont('Quicksand', 700, 'normal')"
-    class="element-headline"
-  >
+  <component :is="tag" v-font="preparedFont" class="element-headline">
     <slot>{{ content }}</slot>
   </component>
 </template>
 
 <script setup>
 import { useBoosterFonts } from '#imports';
 const { $getFont } = useBoosterFonts();
-</script>
 
-<script>
-export default {
-  props: {
-    tag: {
-      type: String,
-      default: 'h1'
-    },
-    content: {
-      type: String,
-      default: 'Headline'
-    }
+const $props = defineProps({
+  tag: {
+    type: String,
+    default: 'h1'
+  },
+  content: {
+    type: String,
+    default: 'Headline'
+  },
+  font: {
+    type: Object,
+    default: undefined
+  }
+});
+const preparedFont = computed(() => {
+  if ($props.font) {
+    return $props.font;
   }
-};
+  return $getFont('Quicksand', 700, 'normal');
+});
 </script>

playground/components/tests/TestHeadlineA.vue

@@ -0,0 +1,10 @@
+<template>
+  <base-headline :font="$getFont('Montserrat Alternates')">
+    <slot />
+  </base-headline>
+</template>
+
+<script setup>
+import BaseHeadline from '@/components/base/Headline';
+const { $getFont } = useBoosterFonts();
+</script>

playground/components/tests/TestHeadlineB.vue

@@ -0,0 +1,10 @@
+<template>
+  <base-headline :font="$getFont('Merriweather')">
+    <slot />
+  </base-headline>
+</template>
+
+<script setup>
+import BaseHeadline from '@/components/base/Headline';
+const { $getFont } = useBoosterFonts();
+</script>

playground/components/tests/TestHeadlineC.vue

@@ -0,0 +1,10 @@
+<template>
+  <base-headline :font="$getFont('Quicksand')">
+    <slot />
+  </base-headline>
+</template>
+
+<script setup>
+import BaseHeadline from '@/components/base/Headline';
+const { $getFont } = useBoosterFonts();
+</script>

playground/layouts/transition.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss">
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.8s;
+}
+
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+}
+</style>

playground/pages/tests/useBoosterHead/1.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="test-transition">
+    <nuxt-link to="/tests/useBoosterHead">Transition 1</nuxt-link> |
+    <nuxt-link to="/tests/useBoosterHead/1">Transition 2</nuxt-link> |
+    <nuxt-link to="/tests/useBoosterHead/2">Transition 3</nuxt-link>
+    <div>
+      <test-headline-b critical>Transition 2</test-headline-b>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import TestHeadlineB from '@/components/tests/TestHeadlineB';
+
+definePageMeta({
+  layout: 'transition',
+  pageTransition: {
+    name: 'page',
+    mode: 'out-in'
+  }
+});
+</script>
+
+<style lang="postcss" scoped>
+.fade-enter-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

playground/pages/tests/useBoosterHead/2.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="test-transition">
+    <nuxt-link to="/tests/useBoosterHead">Transition 1</nuxt-link> |
+    <nuxt-link to="/tests/useBoosterHead/1">Transition 2</nuxt-link> |
+    <nuxt-link to="/tests/useBoosterHead/2">Transition 3</nuxt-link>
+    <div>
+      <test-headline-c critical>Transition 3</test-headline-c>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import TestHeadlineC from '@/components/tests/TestHeadlineC';
+
+definePageMeta({
+  layout: 'transition',
+  pageTransition: {
+    name: 'page',
+    mode: 'out-in'
+  }
+});
+</script>
+
+<style lang="postcss" scoped>
+.fade-enter-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-leave-active {
+  transition: opacity 2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

playground/pages/tests/useBoosterHead/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="test-transition">
+    <nuxt-link to="/tests/useBoosterHead">Transition 1</nuxt-link> |
+    <nuxt-link to="/tests/useBoosterHead/1">Transition 2</nuxt-link> |
+    <nuxt-link to="/tests/useBoosterHead/2">Transition 3</nuxt-link>
+    <div>
+      <test-headline-a critical>Transition 1</test-headline-a>
+      <Transition name="fade">
+        <test-headline-b v-if="show">Transition 1.1</test-headline-b>
+      </Transition>
+      <button @click="show = !show">Click here</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import TestHeadlineA from '@/components/tests/TestHeadlineA';
+import TestHeadlineB from '@/components/tests/TestHeadlineB';
+
+const show = ref(false);
+
+definePageMeta({
+  layout: 'transition',
+  pageTransition: {
+    name: 'page',
+    mode: 'out-in'
+  }
+});
+</script>
+
+<style lang="postcss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.8s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/runtime/classes/FontCollection.js

@@ -18,12 +18,13 @@ export default class FontCollection {
       name: 'data-font',
       value: `${toFontHex(JSON.stringify(fonts.map(font => font.getKey())))}`
     };
-    this.list = [].concat(this.list).concat(
-      fonts.map(font => {
+    this.list = [
+      ...this.list,
+      ...fonts.map(font => {
         font.setRootSelector(rootSelector);
         return font;
       })
-    );
+    ];
     return rootSelector;
   }
 

src/runtime/composables/fonts.js

@@ -20,7 +20,7 @@ export default function (context) {
       isCritical.value,
       options
     );
-    onBeforeUnmount(() => entry.dispose());
+    onBeforeUnmount(() => nextTick(() => entry.dispose()));
   } catch (error) {
     console.error(error);
   }

src/runtime/composables/head.js

@@ -4,87 +4,94 @@ export default function () {
   const head = injectHead();
   const nuxtApp = useNuxtApp();
 
-  const { debug } = useRuntimeConfig().public.booster;
+  const {
+    public: {
+      booster: { debug }
+    }
+  } = useRuntimeConfig();
   const collection = ref(new FontsCollection());
 
   let headEntry;
   watch(
     () => collection.value,
-    () => {
-      if (headEntry) {
-        headEntry.patch(createEntry(collection, debug));
-      } else {
-        headEntry = head.push({});
-      }
+    value => {
+      const data = createEntry(value, debug);
+      headEntry?.dispose();
+      nextTick(() => {
+        headEntry = head.push(() => data);
+      });
     }
   );
 
-  nuxtApp.$router.afterEach(() => {
+  nuxtApp.$router.beforeEach(() => {
     nextTick(() => {
       collection.value = new FontsCollection(
         collection.value.list.filter(item => {
-          return !disposeCollections.includes(item);
+          return !disposeCollections.value.includes(item);
         })
       );
-      disposeCollections = [];
+      disposeCollections.value = [];
     });
   });
 
-  let disposeCollections = [];
+  let disposeCollections = ref([]);
   const push = (fontCollection, isCritical, options) => {
     if (!collection) {
       throw new Error('pushFontCollection must be called before setupHead');
     }
-    let value = { fontCollection, isCritical, options };
-    collection.value = new FontsCollection([...collection.value.list, value]);
-    value = collection.value.list[collection.value.list.length - 1];
+    const notEmpty = !fontCollection.list.length;
+    let value;
+    if (notEmpty) {
+      value = { fontCollection, isCritical, options };
+      collection.value = new FontsCollection([...collection.value.list, value]);
+      value = collection.value.list[collection.value.list.length - 1];
+    }
     return {
-      dispose: () => disposeCollections.push(value)
+      dispose: () => notEmpty && disposeCollections.value.push(value)
     };
   };
   return { push, collection };
 }
 
 const createEntry = (collection, debug) => {
-  return () => {
-    if (debug) {
-      logDebug('Head Font Collections:', collection.value.toJSON());
-    }
-
-    const items = collection.value.list.filter(
-      ({ fontCollection }) => fontCollection.size
-    );
-
-    const uniqList = items =>
-      Array.from(new Map(items.map(item => [item.key, item])).values());
+  if (debug) {
+    logDebug('Head Font Collections:', collection.toJSON());
+  }
 
-    return {
-      link: uniqList(
-        items
-          .filter(({ fontCollection }) => fontCollection.size)
-          .map(({ fontCollection, isCritical }) =>
-            fontCollection.getPreloadDescriptions(isCritical)
-          )
-          .flat()
-      ),
-      style: uniqList(
-        items
-          .map(({ fontCollection, options }) =>
-            fontCollection.getStyleDescriptions(options)
-          )
-          .flat()
-      ),
-      noscript: uniqList(
-        items
-          .map(({ fontCollection }) =>
-            fontCollection.getNoScriptStyleDescriptions()
-          )
-          .flat()
-      )
-    };
+  const items = collection.list.filter(
+    ({ fontCollection }) => fontCollection.size
+  );
+  return {
+    link: prepareItems(
+      items
+        .filter(({ fontCollection }) => fontCollection.size)
+        .map(({ fontCollection, isCritical }) =>
+          fontCollection.getPreloadDescriptions(isCritical)
+        )
+        .flat()
+    ),
+    style: prepareItems(
+      items
+        .map(({ fontCollection, options }) =>
+          fontCollection.getStyleDescriptions(options)
+        )
+        .flat()
+    ),
+    noscript: prepareItems(
+      items
+        .map(({ fontCollection }) =>
+          fontCollection.getNoScriptStyleDescriptions()
+        )
+        .flat()
+    )
   };
 };
 
+const prepareItems = items =>
+  Array.from(
+    new Map(items.map(item => [item.key, { ...item, key: undefined }])).values()
+  );
+
 class FontsCollection {
   constructor(list = []) {
     this.list = list;