Passing in named slots into Solid.js using TypeScript gives errors

[minor timber]

I am creating a dynamic cart for an ecommerce store. Here is the props for my Solid.js component:

type CartProps = {
  children: JSX.Element;
  cartIcon: JSX.Element;
  closeIcon: JSX.Element;
};

Here is a snippet of my Astro component using this framework component:

  <Cart client:load>
    <Icon name="cart" size={30} slot="cartIcon" />
    <Icon name="close" size={30} slot="closeIcon" />
    <div>
      <p class="text-center text-lg font-bold">Cart</p>
      <p class="text-center text-sm">Your cart is empty</p>
    </div>
  </Cart>

The problem in my Astro component, is that Cart is throwing an error:

Type '{ children: any[]; "client:load": true; }' is missing the following properties from type 'CartProps': cartIcon, closeIcon

Solid.js is retrieving all the necessary data through props successfully. Because the slots were not passed in as attributes, I am getting errors. Is there a way to fix this type error in Astro/Solid.js?

[knotty yarrow]

Are those <Icon>s from the astro icon package?

I don't think they would be of the jsx element type even when passed as children like that

Have you tried defining them as just a normal HTML element? or an astro one if theres a type for it (I dont know)

[minor timber]

Yes, they are from the astro icon package. The thing is, they work fine from a functional standpoint. Astro correctly transforms the Icons component to a valid Solid.js components (or HTML, idk what it does exactly haha) and I can then use the icons like a component inside Solid wherever I want. The problem that's happening is that Astro expects the icons to be passed in through props, not slots.

I want to be able to "trick" Astro into thinking that I passed the Icons as props instead of slots. But I don't know if that's possible, or if there's a better way to do this.

I tried not using the Icon package component and It still works fine. I still get the type errors since I pass them as a slot not a prop.
Hope that makes sense.

[knotty yarrow]

I'm unsure if that is what's happening unless it's some issue with the solid integration perhaps

I have no problems passing the icon component via the slot pattern to react components

[minor timber]

Well I don't have problems either functionally. I get type errors when I type my Solid component like this:

type CartProps = {
  children: JSX.Element;
  cartIcon: JSX.Element;
  closeIcon: JSX.Element;
};

const Cart: Component<CartProps> = (props) => {
  const safeCartIcon = children(() => props.cartIcon);
  const safeCloseIcon = children(() => props.closeIcon);
  const cartItems = useStore(cartItemsStore);
  return (...)
}

When using this Cart framework component in Astro, reads the type CartProps and starts freaking out that I don't provide the props through attributes.

I found this issue, not sure if it's related but it might be https://github.com/withastro/roadmap/discussions/414