typed-ember / glint

TypeScript powered tooling for Glimmer templates
https://typed-ember.gitbook.io/glint
MIT License
109 stars 51 forks source link

Enhance ContentValue Type to Support Template-Only Components #703

Open josemarluedke opened 7 months ago

josemarluedke commented 7 months ago

Issue Overview:

I'm encountering a limitation with the ContentValue type in the @glint/template package that I believe could be improved for broader utility. Specifically, I'd like the ability to use template-only components as valid types that can be passed to other components expecting a string or a component. This feature would greatly enhance the flexibility and expressiveness of Glint in template-only component scenarios.

Current Behavior:

Currently, when attempting to pass a template-only component as an argument to another component that accepts either a string or a component, the type system does not recognize the template-only component as a valid type. This limitation restricts the composability of template-only components in our application.

Type Error: Type 'TemplateOnlyComponent<never> & (abstract new () => InvokableInstance<() => ComponentReturn<{}>> & HasContext<TemplateContext<void, {}, {}, void>>)' is not assignable to type 'ContentValue'.

Desired Behavior:

I propose enhancing the ContentValue type to include template-only components as valid assignable types. This change would allow developers to create and use template-only components more freely across their application, improving the developer experience and enabling more dynamic UI compositions.

Example Use Case:

Consider the following template-only component, which we would like to pass as an argument to a component that can accept either a string or a component:

const MyCustomLabel = <template>
  This is a custom label. <span class="text-primary">Cool right?</span>
</template>;

Usage in another template:

const Usage = <template>
  <SomeComponent @stringOrComponent={{MyCustomLabel}} />
</template>;

In this scenario, SomeComponent should be able to accept MyCustomLabel as a valid input for its @stringOrComponent argument, rendering the template-only component accordingly.

In terms of ember supporting this, it does seems like Ember renders that component without any issues.

NullVoxPopuli commented 7 months ago

hello! thanks for asking!!

to best help, whats the signature for SomeComponent? (and the template)