improve: MOP-358: Implement useSlotItems

src/runtime/composables/useDrupalCe/index.ts

@@ -1,11 +1,11 @@
 import { defu } from 'defu'
 import { appendResponseHeader } from 'h3'
 import type { $Fetch, NitroFetchRequest } from 'nitropack'
-import type { Ref, ComputedRef, Component, VNode } from 'vue'
+import { type Ref, type ComputedRef, type Component, type VNode, Fragment } from 'vue'
 import { getDrupalBaseUrl, getMenuBaseUrl } from './server'
 import type { UseFetchOptions, AsyncData } from '#app'
 import { callWithNuxt } from '#app'
-import { useRuntimeConfig, useState, useFetch, navigateTo, createError, h, resolveComponent, setResponseStatus, useNuxtApp, useRequestHeaders, ref, unref, watch, useRequestEvent, computed, useHead, defineComponent, toRef, useRoute, useRouter } from '#imports'
+import { useRuntimeConfig, useState, useFetch, navigateTo, createError, h, resolveComponent, setResponseStatus, useNuxtApp, useRequestHeaders, ref, unref, watch, useRequestEvent, computed, useHead, defineComponent, toRef, useRoute, useRouter, useSlots } from '#imports'
 import type { DrupalCePage, DrupalCeApiResponse } from '../../types'
 
 export const useDrupalCe = () => {
@@ -618,6 +618,24 @@ export const useDrupalCe = () => {
     return computed(() => pageData.value?.page_layout || 'default')
   }
 
+  /**
+   * Extracts individual VNodes from a named slot, unwrapping any Fragment
+   * wrappers that Vue adds during template-based slot forwarding.
+   *
+   * This allows components to work with slot content as a flat array of items,
+   * which is needed when the component controls rendering (e.g. carousel items,
+   * load-more lists).
+   */
+  const getSlotItems = (slotName: string): ComputedRef<VNode[]> => {
+    const slots = useSlots()
+    return computed(() => {
+      const vnodes = slots[slotName]?.() ?? []
+      return vnodes.flatMap(vnode =>
+        vnode.type === Fragment ? (vnode.children as VNode[]) : [vnode]
+      )
+    })
+  }
+
   return {
     $ceApi,
     useCeApi,
@@ -634,7 +652,7 @@ export const useDrupalCe = () => {
     getMenuBaseUrl,
     getPageLayout,
     usePageHead,
-
+    getSlotItems,
   }
 }
 

test/nuxt/getSlotItems.test.ts

@@ -0,0 +1,186 @@
+// @vitest-environment nuxt
+import { describe, it, expect } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { defineComponent, h, Fragment } from 'vue'
+import { useDrupalCe } from '../../src/runtime/composables/useDrupalCe'
+import { useNuxtApp } from '#imports'
+
+// A wrapper component that uses getSlotItems and renders each item in a .item div
+const SlotConsumer = defineComponent({
+  name: 'SlotConsumer',
+  props: {
+    slotName: {
+      type: String,
+      default: 'default',
+    },
+  },
+  setup(props) {
+    const { getSlotItems } = useDrupalCe()
+    const items = getSlotItems(props.slotName)
+    return { items }
+  },
+  template: `
+    <div class="items">
+      <div class="item" v-for="(item, i) in items" :key="i">
+        <component :is="() => item" />
+      </div>
+    </div>
+  `,
+})
+
+describe('getSlotItems', () => {
+  it('returns empty array when slot is not provided', async () => {
+    const wrapper = await mountSuspended(
+      defineComponent({
+        setup() {
+          return () => h(SlotConsumer)
+        },
+      }),
+    )
+    expect(wrapper.findAll('.item')).toHaveLength(0)
+  })
+
+  it('returns slot items as a flat array', async () => {
+    const wrapper = await mountSuspended(
+      defineComponent({
+        setup() {
+          return () =>
+            h(SlotConsumer, null, {
+              default: () => [
+                h('span', 'Item 1'),
+                h('span', 'Item 2'),
+                h('span', 'Item 3'),
+              ],
+            })
+        },
+      }),
+    )
+    expect(wrapper.findAll('.item')).toHaveLength(3)
+    expect(wrapper.text()).toContain('Item 1')
+    expect(wrapper.text()).toContain('Item 2')
+    expect(wrapper.text()).toContain('Item 3')
+  })
+
+  it('unwraps Fragment wrappers into individual items', async () => {
+    const wrapper = await mountSuspended(
+      defineComponent({
+        setup() {
+          return () =>
+            h(SlotConsumer, null, {
+              default: () => [
+                h(Fragment, [h('span', 'Frag 1'), h('span', 'Frag 2')]),
+                h('span', 'Direct'),
+              ],
+            })
+        },
+      }),
+    )
+    expect(wrapper.findAll('.item')).toHaveLength(3)
+    expect(wrapper.text()).toContain('Frag 1')
+    expect(wrapper.text()).toContain('Frag 2')
+    expect(wrapper.text()).toContain('Direct')
+  })
+
+  it('returns empty array for non-existent slot name', async () => {
+    const wrapper = await mountSuspended(
+      defineComponent({
+        setup() {
+          return () =>
+            h(SlotConsumer, { slotName: 'nonexistent' }, {
+              default: () => [h('span', 'Item')],
+            })
+        },
+      }),
+    )
+    expect(wrapper.findAll('.item')).toHaveLength(0)
+  })
+
+  it('works with named slots', async () => {
+    const wrapper = await mountSuspended(
+      defineComponent({
+        setup() {
+          return () =>
+            h(SlotConsumer, { slotName: 'items' }, {
+              items: () => [h('span', 'Named 1'), h('span', 'Named 2')],
+            })
+        },
+      }),
+    )
+    expect(wrapper.findAll('.item')).toHaveLength(2)
+    expect(wrapper.text()).toContain('Named 1')
+    expect(wrapper.text()).toContain('Named 2')
+  })
+
+  it('works with renderCustomElements teaser-list slot data', async () => {
+    const { renderCustomElements } = useDrupalCe()
+
+    // Stub components for teaser-list and teaser-square
+    const TeaserList = defineComponent({
+      name: 'TeaserList',
+      setup() {
+        const { getSlotItems } = useDrupalCe()
+        const teasers = getSlotItems('teasers')
+        return { teasers }
+      },
+      template: `
+        <div class="teaser-list">
+          <div class="teaser-item" v-for="(teaser, i) in teasers" :key="i">
+            <component :is="() => teaser" />
+          </div>
+        </div>
+      `,
+    })
+
+    const TeaserSquare = defineComponent({
+      name: 'TeaserSquare',
+      props: {
+        href: String,
+        title: String,
+      },
+      template: '<a class="teaser-square" :href="href">{{ title }}</a>',
+    })
+
+    const app = useNuxtApp()
+    app.vueApp.component('TeaserList', TeaserList)
+    app.vueApp.component('TeaserSquare', TeaserSquare)
+
+    const teaserListData = {
+      element: 'teaser-list',
+      props: {
+        contains: 'teaser-square',
+      },
+      slots: {
+        teasers: [
+          { element: 'teaser-square', props: { href: '/node/1', title: 'Node 1' } },
+          { element: 'teaser-square', props: { href: '/node/2', title: 'Node 2' } },
+          { element: 'teaser-square', props: { href: '/node/3', title: 'Node 3' } },
+        ],
+      },
+    }
+
+    const wrapper = await mountSuspended(
+      defineComponent({
+        setup() {
+          return { component: renderCustomElements(teaserListData) }
+        },
+        template: '<component :is="component" />',
+      }),
+    )
+
+    // Verify teaser-list renders
+    expect(wrapper.find('.teaser-list').exists()).toBe(true)
+
+    // Verify getSlotItems extracts all 3 teasers from the slot
+    const items = wrapper.findAll('.teaser-item')
+    expect(items).toHaveLength(3)
+
+    // Verify each teaser-item wraps exactly one teaser-square
+    for (let i = 0; i < 3; i++) {
+      const item = items[i]
+      const teaser = item.find('.teaser-square')
+      expect(teaser.exists()).toBe(true)
+      expect(teaser.text()).toBe(`Node ${i + 1}`)
+      expect(teaser.attributes('href')).toBe(`/node/${i + 1}`)
+    }
+  })
+})