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

Allow inline component signatures on first-class, template-only components #387

Open
ef4 opened this issue Aug 20, 2022 · 2 comments
Open
Labels
design Figuring out how things should work

Comments

@ef4
Copy link
Contributor

ef4 commented Aug 20, 2022

Using the ember-template-imports glint environment, given:

import Component from '@glimmer/component';

const Greeting = <template>{{@message}}</template>;

export default class Usage extends Component {
  <template><Greeting @message="hello" /></template>
}

both the caller and callee treat @mesage as a type error. I can manually provide the "outside" type to make the caller happy:

import Component from '@glimmer/component';
import { ComponentLike } from '@glint/template';

const Greeting: ComponentLike<{ Args: { message: string } }> = <template>{{@message}}</template>;

export default class Usage extends Component {
  <template><Greeting @message="hello" /></template>
}

But I can't find a way to provide the "inside" type to make the callee happy.

@ef4
Copy link
Contributor Author

ef4 commented Aug 20, 2022

Documenting the explanation I was given in discord. You can get this correct today if you assign to a local variable:

import type { TemplateOnlyComponent } from '@ember/component/template-only';
import Component from '@glimmer/component';

const Greeting: TemplateOnlyComponent<{ Args: { message: string } }> = <template>{{@message}}</template>;

export default class Usage extends Component {
  <template><Greeting @message="hello" /></template>
}

What we don't have is a syntax to do it inline, especially for use with export default.

@ef4 ef4 changed the title Allow component signatures on first-class, template-only components Allow inline component signatures on first-class, template-only components Aug 20, 2022
@chriskrycho
Copy link
Member

We've thrown around the idea (in both Framework and TS contexts) of making something like this work:

interface GreetingSig: { Args: { message: string } }

const Greeting = <template type:signature={GreetingSig}>
  {{@message}}
</template>;

That would nicely solve the export default shorthand as well:

interface GreetingSig: { Args: { message: string } }

<template type:signature={GreetingSig}>
  {{@message}}
</template>

We could possibly generalize to allow arbitrary type expressions between those top-level curlies in the XML namespace position, but that seems like an unnecessary complexity initially: better to stick with just referencing an in-scope binding of the appropriate sort (here: a type).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Figuring out how things should work
Projects
None yet
Development

No branches or pull requests

3 participants