Allow mapping child nodes to functional components

[George-Payne]

Stencil version:

 @stencil/[email protected]

I'm submitting a:
[x] bug report

Introduction:

Based on the ChildNode type in the documentation:

export interface ChildNode {
  vtag?: string | number | Function; 
  // ...
}

It should be possble to return a ChildNode with a Function for its vtag. However, this does not currently work.

Set up:

const ConvertToMyFunctionalComponent: FunctionalComponent = (_, children, utils) => (
    utils.map(children, child => ({
        ...child,
        vtag: MyFunctionalComponent
    }))

<ConvertToMyFunctionalComponent>
    <div class={'something'}>{'hello'}</div>
</ConvertToMyFunctionalComponent>

Current behavior:

Stencil attempts to use the functional component as an element:

index-fd3d22f9.js:2677 
DOMException: Failed to execute 'createElementNS' on 'Document': 
The qualified name provided ('(props) => (h("div", Object.assign({}, props), 'hello!'))') contains the invalid name-start character '('.

Expected behavior:

Stencil should resolve the functional component, as if the following was written:

<MyFunctionalComponent class={'something'}>{'hello'}</MyFunctionalComponent>

Other information:
Thread on slack

Hacky workaround:

// stencil's convertToPublic is not exported, so we have to access it via foreach
const convertToPublic = (utils: FunctionalUtilities) => (node: VNode) => {
    let publicNode!: ChildNode;
    utils.forEach([node], (p) => {
        publicNode = p;
    });
    return publicNode;
};
const ConvertToMyFunctionalComponent: FunctionalComponent = (_, children, utils) => {
    const toChildNode = convertToPublic(utils);
    return utils.map(children, child => toChildNode(
        <MyFunctionalComponent key={child.vkey} {...child.vattrs}>
            {child.vchildren}
        </MyFunctionalComponent>
    ))
}