New Iterator function: extractChildren ?

[mrleblanc101]

It would be nice to have an interator function to get all the children, wither they are static components or fragment child.
Even better if we can do it in a TypeSafe way, so that it returns VNode<InstanceType<typeof UTab>>[].

<UTabs>
    <UTab :name="t('Tab 1')"></UTab>
    <UTab v-for="i in 4"  :name="t(`Tab ${i}`)">...</UTab>
</UTabs>

[mrleblanc101]

I think I can do it currently with reduceChildren, but it's not as easy.

[mrleblanc101]

It would be an hybrid between extractSingleChild and reduceChildren I guess

[mrleblanc101]

I'm not very experienced with TypeScript, so currently I do this:

const tabs = computed(() => {
    const children = slots.default?.() ?? [];
    return reduceChildren<VNode<InstanceType<typeof UTab>>[]>(
        children,
        (acc, vnode) => {
            return [...acc, vnode];
        },
        [],
        SKIP_COMMENTS,
    );
});

But of course, nothing prevent the fragment child to be something else other than VNode<InstanceType<typeof UTab>>, which I'm not sure how to handle, so this cause an type error for acc.

To fix it I added as VNode<InstanceType<typeof UTab>> like so:

const tabs = computed(() => {
    const children = slots.default?.() ?? [];
    return reduceChildren<VNode<InstanceType<typeof UTab>>[]>(
        children,
        (acc, vnode) => {
            return [...acc, vnode as VNode<InstanceType<typeof UTab>>];
        },
        [],
        SKIP_COMMENTS,
    );
});