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
• 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:

mitosis/packages/core/src/parsers/jsx/context.ts

Lines 20 to 47 in e862056

	export function extractContextComponents(json: MitosisComponent) {
	traverse(json).forEach(function (item) {
	if (isMitosisNode(item)) {
	if (item.name.endsWith('.Provider')) {
	const value = item.bindings?.value?.code;
	const name = item.name.split('.')[0];
	const refPath = traceReferenceToModulePath(json.imports, name)!;
	json.context.set[refPath] = {
	name,
	value: value
	? parseStateObjectToMitosisState(
	expressionToNode(value) as babel.types.ObjectExpression,
	)
	: undefined,
	};
	this.update(
	createMitosisNode({
	name: 'Fragment',
	children: item.children,
	}),
	);
	}
	// TODO: maybe support Context.Consumer:
	// if (item.name.endsWith('.Consumer')) { ... }
	}
	});
	}

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