Dynamische VNode-Array-Transformation mittels funktionaler Render-Funktionen

import { defineComponent, h, VNode } from 'vue';
 
export const DynamicGroup = defineComponent({
  name: 'DynamicGroup',
  setup(_, { slots }) {
    return () => {
      const defaultNodes: VNode[] = slots.default ? slots.default() : [];
      
      const wrappedChildren = defaultNodes
        .filter((vnode) => typeof vnode.type !== 'symbol')
        .map((vnode, index) => {
          return h('div', { key: vnode.key ?? index, class: 'group-item' }, [vnode]);
        });
 
      return h('section', { class: 'dynamic-group' }, wrappedChildren);
    };
  }
});