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

Clarify typing for no arguments/blocks #786

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 26 additions & 2 deletions docs/ember/component-signatures.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ compatible with the DOM element(s) they're ultimately attached to. If no `Elemen
to set any HTML attributes or modifiers when invoking your component.

The `Blocks` field specifies the names of any blocks the component yields to, as well as the type of any parameter(s)
those blocks will receive. If no `Blocks` key is specified, it will be a type error to invoke your component in block
form.
those blocks will receive. If your component does not support block invocation, omit the `Blocks` field altogether
to generate type errors when invoked in block form.

Note that the `inverse` block is an alias for `else`. These should be defined in `Blocks` as `else`, though
`{{yield to="inverse"}}` will continue to work.
Expand Down Expand Up @@ -67,6 +67,30 @@ export default class SuperTable<T> extends Component<SuperTableSignature<T>> {}

{% endcode %}

{% code title="app/components/simple-hello.ts" %}

```typescript
import Component from '@glimmer/component';

export interface SimpleHelloSignature {
// We have a `<div>` as our root element
Element: HTMLDivElement;
// We accept no arguments or block form, so don't specify them in the signature
}

export default class SimpleHello extends Component<SimpleHelloSignature> {}
```

{% endcode %}

{% code title="app/components/simple-hello.hbs" %}

```handlebars
<div>Hello World!</div>
```

{% endcode %}

## Ember Components

Since Ember components don't have `this.args`, it takes slightly more boilerplate to make them typesafe.
Expand Down