Passing Circle's inn as children does not work correctly with the layout

[TheKnarf]

Example code:

import { createSignal } from 'solid-js'
import { Bluefish, Group, StackH, StackV, Circle, Text, Ref, Background, Arrow, Align, Distribute, Rect } from "@bluefish-js/solid";

const Table = ({ children, name }) => {
	return (
		<>
			<Background padding={20}>
				<StackV spacing={50}>
				<Text name="label">{name}</Text>
				{ children }
				{/* <Planets /> Passing inn plannets directly works, but doing it as the children variable does not*/}
				</StackV>
			</Background>
		</>
	)
};

const Planets = () => {
	return (
		<>
			<Circle name="mercury" r={15} fill="#EBE3CF" stroke-width={3} stroke="black" />
			<Circle name="venus" r={36} fill="#DC933C" stroke-width={3} stroke="black" />
			<Circle name="earth" r={38} fill="#179DD7" stroke-width={3} stroke="black" />
			<Circle name="mars" r={21} fill="#F1CF8E" stroke-width={3} stroke="black" />
		</>
	)
};

const App = () => {
	return (
		<>
			<div>
				<Bluefish>
					<Table name="users">
						<Planets /> {/* passing it inn as children does not work... */}
					</Table>
				</Bluefish>
			</div>
		</>
	);
};

export default App;

Example repo.

Expected behavior:

Actual behavior:

[joshpoll]

This seems to be a gotcha with solidjs props destructuring:

https://playground.solidjs.com/anonymous/fa811837-def3-497a-938c-f6424acf2f1b

Changing Table to this seems to work:

See also: https://www.solidjs.com/tutorial/props_defaults

[joshpoll]

Another note: It's not documented yet on the site, but when you make new components you should wrap them in withBluefish if you want to be able to name them.