How to restrict children to specific components?

[ghost]

E.g. you have a <Flex> that may only contain <Box>-Elements

It would be enough, if this only works on typescript type-level, no runtime check necessary.

Simply change the type of props.children leads to an TS-Error:

Type 'Element' is not assignable to type 'ParentComponent<BoxProps> & Element'. Type 'undefined' is not assignable to type 'ParentComponent<BoxProps> & Element'.ts(2322)

[snnsnn]

Typescript provides structural typing, so you can not limit children to Box only, any value that satisfies the type of Box will be valid.

[transbitch]

So just change the type of Box so that nothing else satisfies it.

[ghost]

But how can this be done in Solid?

[transbitch]

Vacuously cast the return type of your component to some unique type you call Box (e.g. an intersection of JSX.Element and a type with a Symbol property), then in your props say that children: Box[].

[snnsnn]

In typescript, you can not. What you are asking is possible in nominal type systems . Typescript provides structural type system. Just look it up on the internet for details.

If you want to render only the Box components as children, you can check if child is a Box, then render accordingly. Other than than there is nothing much you can do about it. https://www.solidjs.com/docs/latest#children

As a workaround you can attach a Symbol property to the Box and look for it inside Flex's children prop.

[holylander]

hi @snnsnn could you please provide an example of

As a workaround you can attach a Symbol property to the Box and look for it inside Flex's children prop.

thanks a lot!

[snnsnn]

@holylander Hi, maybe I misunderstood him, but to me, he was asking to accept specific children only, not any children that satisfy a certain criteria but only certain children. In JavaScript, using a symbol is the only way to achieve something like that. Here in this example, we specifically mark an argument with a specific symbol property to let the argument pass. It is like simulating nominal typing, your argument will not be accepted unless you have access to that specific symbol which is required.

const required = Symbol("required");

type WithRequiredProps = {
  required: typeof required;
};

function run<T extends WithRequiredProps>(arg: T) {};

run({ required }); // Passes
run({ a: 10, b: 10, required }); // Passes
run({ a: 10, b: 10 }); // Fails 

It is very hard to fit this logic into the Component generic from the SolidJS library without some twisted logic. To clarify, let’s have a child component satisfying a specific requirement:

import { Component } from "solid-js";

const required = Symbol("required");

const Child: Component<{ required: typeof required}> = (props) => {}

Here, Child returns an JSX.Element because Component generic returns a JSX.Element. So, the parent will perceive this child as JSX.Element not a component with the required prop.

<Parent>
  <Child required={required} />
</Parent>

The type of JSX Element is:

type Element = Node | ArrayElement | (string & {}) | number | boolean | null | undefined;

I’m not saying it’s not doable—it just may not be worth the effort, because sooner or later you’ll need to use type casting. It would be easier if you use the low-level types instead of the Component generic.

Hope it helps.