[Question] How to pass function slots ？

[leookun]

🧐 Problem Description

Here's a lovely piece of code ,<Container.Chart/>expect to get a function but who is not in props，

<Container class="w-full col-span-6  h-450px <md:col-span-12">
    <Container.Title>
               some title 
     </Container.Title>
     <Container.Chart >
                {console.log}
     </Container.Chart>
</Container>

as you can see, both the<Container.Title/> and the <Container.Chart/> area are displayed in their respective areas,
<Container.Chart/> is designed as a provider that passes instances to the slot after it has mounted.

💻 Sample code

here's how I implemented the solidified layout, everything is functional

 const FC = <P = {}, E extends EmitsOptions = {}, S extends Record<string, unknown> = {}>(fc: FunctionalComponent<P & { children: VNode[], find: (component: FunctionalComponent)=>VNode }, E, S>)=>{
    return Object.assign((props: any, context: any) => {
        const children = context?.slots?.default?.()||[];
        const childrenMap: Map<Component, VNode> = children.reduce(((map: any, child: any) => map.set(child.type, child)), new Map())
        const find = (componnet: any) => childrenMap.get(componnet)
        return fc(Object.assign(props, { children: context?.slots?.default?.(), find }), context)
    }, { displayName: fc.name ||"anonymous" })
}
const Container=FC((props=>{
    const title = props.find(Title)
    const params = props.find(Params)
    const chart = props.find(Chart as unknown as any)
    const chartArea = props.find(ChartArea)
    return <div class="bg-white flex flex-col">
        {(title || params)&&<div class="px-20px py-10px w-full flex flex-row flex-0 items-center justify-between  border-b border-gray-200">
            {title && <div class="font-bold">
                {title}
            </div>}
            {params&&<div class="w-full">
                {params}
            </div>}
        </div>}
       
        {chart &&<div class="w-full p-20px flex-1" >
            {chart}
        </div>}
        {chartArea &&<div class="w-full p-20px flex-1" >
            {chartArea}
        </div>}
    </div>
}))

const Title = FC(({ children }) => children)

🚑 Other information

No matter how I pass the argument in context.slots.default in FunctionalComponent, it doesn't get passed into the following console.log

<Container.Chart >
                {console.log}
     </Container.Chart>

[funny-family]

@leookun

<ComponentWithSlot
  v-slots={{
    default: () => 'This is default slot!'
  }}
/>

Examples:
https://github.com/funny-family/vue3-ts-playground/blob/master/src/app/components/not-found/not-found.component.tsx#L210
https://github.com/funny-family/vue3-ts-playground/blob/master/src/app/shared/components/text-field/text-field.render.tsx