The context.Provider in SolidJS wraps the children in Fragments

[iceprosurface]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• [ ] All
• [ ] Angular
• [ ] HTML
• [ ] Preact
• [ ] Qwik
• [ ] React
• [ ] React-Native
• [X] Solid
• [ ] Stencil
• [ ] Svelte
• [ ] Vue
• [ ] Web components

Reproduction case

https://mitosis.builder.io/?outputTab=M4ewNglgJkA%3D&code=JYWwDg9gTgLgBAbzgVwM4FMDKNrrgXzgDMoIQ4ByAAQCNlgAbAE3SgDpgIB6EYHVYKgoBuAFChIsOABF0RAIbIGMAEroAdiyjFS5Cmy6yFS1Rq1sGfdCPHho8AJIBjCOoDCrmOgAe8EmUoDZ1c2F3UvXwsrGx9JeBZjZWJkdScYTnU4YPdPHxgABVIAN2AtAAowUjBUAC5EJwALRiYoDTr5dQBPABo4AHcoeTAwVmyAfjqYTpGIIhk5RWU1TVYCAEpEUTg4MNR4PfkvOABeFAxsXDKkLe24AHN0eAGhkahsso2EG9u4VphkKCZSoQapsZ7DUZhOBjMbzRKmFZQb4EG74NY3P4AzJlZEAHiYwCKAD5kdtcdkPOE8mxChASlo4EV5AxkOhjggkODXtk6gcvGDBhC3lD8PgST8fghgaDGs1Wup8KS4LiuBTcpFafTWOLbiqCcSbmsxIqgA%3D

Expected Behaviour

<IconContext.Provider value={{ wrapperIcon: state.wrapperIcon }}>
  {props.children}
</IconContext.Provider>

transform to

<IconContext.Provider
  value={{
    wrapperIcon: wrapperIcon(),
  }}
>
  <div>
    {props.children}
   </div>
</IconContext.Provider>

Actual Behaviour

<IconContext.Provider
   value={{
    wrapperIcon: wrapperIcon(),
  }}
>
  <div>
    <>{props.children}</>
  </div>
</IconContext.Provider>

Additional Information

Solid fragment are not allowed under div.

Fragments can only be used top level in JSX. Not used under a <div>.

[samijaber]

This logic extracts the Provider from the original JSX and replaces it with a Fragment:

https://github.com/BuilderIO/mitosis/blob/e862056eca675887bd975bf5696c61666d0f3532/packages/core/src/parsers/jsx/context.ts#L20-L47

The fix involves inlining the Provider's children into the array of the parent, instead of adding a new node.

[JerryWu1234]

I will pick this up

[JerryWu1234]

I done