Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance ContentValue Type to Support Template-Only Components #703

Open
josemarluedke opened this issue Mar 2, 2024 · 1 comment
Open

Comments

@josemarluedke
Copy link

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
Copy link
Contributor

NullVoxPopuli commented Mar 2, 2024

hello! thanks for asking!!

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants