Use case for generic components

[idoros]

For example a base Card component that renders a provided content component part alongside a title. In runtime the actual provided component can be anything or restricted according to static typing or runtime validation.

In Stylable, currently not specifying the -st-extends is equivalent to a part with any type - It's an "Element" and there is no way of defining a generic type:

/*card.st.css*/
.root {}
.title {}
.content {/*`any` Element*/}

I would like to suggest a generic syntax to restrict types:

/*card.st.css*/
.root {
    -st-generics: T;
}
.title {}
.content {
    -st-extends: T;
}

In the example, the card stylesheet declares a generic type T that can be used in it's internal parts or even on the root element.

An example of targeting might select the playBtn of the content video component:

Card(Video)::content::playBtn {}

I think that the generics should add to the specificity:

.card__root .card__content.video__root .video__playBtn {}

Complexities:

Multiple generic types:

-st-generics: T, U

Default type

{
    /*must be provided?*/
    -st-generics: T;
    /*maybe?*/
    -st-generics: T(any);
    -st-generics: T(element);

    /*restriction*/
    -st-generics: T(Post);
}

Should there be an option to provide a default that is not the base type?

Extend generic component

Maybe?:

/*media-card.st.css*/
.root {
    -st-generics: T;
    -st-extends: Card(T);
}

Complex types

In Stylable a component is always a specific type, there is no concept of union type. We might want to add a way to describe multiple types for generics. For example the MediaCard component that "extends" the Card component might want to restrict the content type:

.root {
    -st-generics: T(oneOf(Video, Image));
    -st-extends: Card(T);
}

If Stylable is not going to provide real union type support, then this is just restricting the options that can be inserted into the generic selector. Not providing union type checking and completions.