{{component}} with named args on generic class components produces TS2589

[hlorellium]

When using {{component}} to curry named args onto a generic class component, the type checker produces TS2589 ("Type instantiation is excessively deep and possibly infinite").

Reproduction

Minimal example:

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

class PickerOption<T> extends Component<{
  Args: { value: T; onSelect: (value: T) => void };
  Blocks: { default: [T] };
}> {
  <template>{{yield @value}}</template>
}

class Picker<T> extends Component<{
  Args: { onSelect: (value: T) => void };
  Blocks: { default: [WithBoundArgs<typeof PickerOption, 'onSelect'>] };
}> {
  <template>
    {{! TS2589: Type instantiation is excessively deep and possibly infinite. }}
    {{yield (component PickerOption onSelect=@onSelect)}}
  </template>
}

A more realistic example — a generic select that curries selection state onto an option component before yielding it:

import Component from '@glimmer/component';
import type { ComponentLike, WithBoundArgs } from '@glint/template';
import { hash } from '@ember/helper';

interface SelectOptionSignature<T> {
  Args: {
    model: T;
    isSelected: boolean;
    didClick: (model: T) => void;
  };
  Blocks: { default: [] };
  Element: HTMLDivElement;
}

class SelectOption<T> extends Component<SelectOptionSignature<T>> {
  <template>
    <div ...attributes role="option" aria-selected={{@isSelected}}>
      {{yield}}
    </div>
  </template>
}

class Select<T> extends Component<{
  Args: {
    selected?: T;
    onChange: (model: T) => void;
  };
  Blocks: {
    default: [{
      Option: WithBoundArgs<
        ComponentLike<SelectOptionSignature<T>>,
        'isSelected' | 'didClick'
      >;
    }];
  };
}> {
  <template>
    {{! TS2589 on the component helper call }}
    {{yield (hash Option=(component SelectOption isSelected=false didClick=@onChange))}}
  </template>
}

Current workaround

Extracting the component into a getter with a manual cast preserves T, but it shouldn't be necessary:

get optionComponent(): ComponentLike<SelectOptionSignature<T>> {
  return SelectOption as ComponentLike<SelectOptionSignature<T>>;
}

Then using {{component this.optionComponent ...}} instead.

Root cause

The emitted TypeScript wraps the first argument to {{component}} in resolveForBind, which extracts the function signature via Parameters<> / ReturnType<>. This erases generic type parameters — TypeScript collapses T to unknown (or triggers TS2589 when the type recursion depth is exceeded during the attempt).

Related issues

• Component helper with {{#let}} not playing well with components that accept and yield generics #575 — similar problem with string-based lookups (different root cause, labeled as TypeScript limitation)
• *Like-bug: (ModifierLike, ComponentLike, etc?) When using WithBoundArgs, Type instantiation is excessively deep and possibly infinite (requiring glint-ignore/expect-error to move forward in a project) #661 — TS2589 with WithBoundArgs (related symptom)

Environment

• @glint/ember-tsc@1.1.1
• typescript@5.9.3
• Strict mode .gts files

Possible fix direction

I've been experimenting with a fix locally. The approach: when {{component}} receives a direct class reference (PathExpression) with named args, skip the resolveForBind wrapping and pass the class directly to the keyword's type signature. This lets dedicated ComponentKeyword overloads extract the component's context (args/blocks/element) from the class itself, so T stays intact.

The resolveForBind path stays unchanged for string lookups, no-arg passthrough, and other keywords (helper/modifier). The change is scoped to component + class reference + has named args.

Happy to open a PR if this direction makes sense, or adjust if you'd prefer a different approach.

[johanrd]

great! just wanted to chime in that I've seen this as well and never got around to create a reproducible example. thanks!

[johanrd]

@hlorellium thanks for the report and reproduction! it should be fixed in the latest release of glint. – please have a look to see if your use cases agree:)

[hlorellium]

@johanrd thanks! that fixes most of my repros. Only this one doesn't still compile for me, when generic propagation is deeper

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


interface Identifiable {
  id: string;
}

interface User extends Identifiable {
  name: string;
  role: 'admin' | 'editor' | 'viewer';
}

interface Product extends Identifiable {
  title: string;
  price: number;
}

// ── Layer 1: Generic cell renderer ────────────────────────────────────
// A cell that renders a single item and notifies on selection.
// `T` flows into both the callback arg AND the yielded block param.
class Cell<T extends Identifiable> extends Component<{
  Args: {
    item: T;
    onSelect: (item: T) => void;
    highlight?: boolean;
  };
  Blocks: {
    default: [T];
  };
  Element: HTMLTableCellElement;
}> {
  <template>
    <td ...attributes>
      {{yield @item}}
    </td>
  </template>
}

// ── Layer 2: Generic row ──────────────────────────────────────────────
// Receives a Cell with `onSelect` already bound, so consumers only need
// to pass `item`. `T` must survive the currying.
class Row<T extends Identifiable> extends Component<{
  Args: {
    BoundCell: WithBoundArgs<ComponentLike<{
      Args: { item: T; highlight?: boolean };
      Blocks: { default: [T] };
      Element: HTMLTableCellElement;
    }>, never>;
    item: T;
    isSelected: boolean;
  };
  Blocks: {
    default: [T];
  };
  Element: HTMLTableRowElement;
}> {
  <template>
    <tr ...attributes>
      <@BoundCell @item={{@item}} @highlight={{@isSelected}} as |cellItem|>
        {{yield cellItem}}
      </@BoundCell>
    </tr>
  </template>
}

// ── Layer 3: Generic data table ───────────────────────────────────────
// Curries Cell with `onSelect` bound, passes it down to Row.
// This is the key: {{component Cell onSelect=@onSelect}} must preserve T
// so that Row's BoundCell arg and the yielded block params are correctly typed.
class DataTable<T extends Identifiable> extends Component<{
  Args: {
    items: T[];
    selected: T;
    onSelect: (item: T) => void;
  };
  Blocks: {
    default: [T];
  };
  Element: HTMLTableElement;
}> {
  <template>
    <table ...attributes>
      <tbody>
        {{#let (component Cell onSelect=@onSelect) as |BoundCell|}}
          {{#each @items as |item|}}
            <Row
              @BoundCell={{BoundCell}}
              @item={{item}}
              @isSelected={{(this.isSelected item)}}
              as |rowItem|
            >
              {{yield rowItem}}
            </Row>
          {{/each}}
        {{/let}}
      </tbody>
    </table>
  </template>

  isSelected = (item: T): boolean => {
    return item.id === this.args.selected.id;
  };
}

// ── Layer 4: Concrete instantiation ───────────────────────────────────
// When DataTable is used with User, T=User should flow all the way
// through the curried Cell → Row → yielded block param.
class UserTable extends DataTable<User> {}

export default class GenericCurryingShowcase extends Component {
  users: User[] = [
    { id: '1', name: 'Ada Lovelace', role: 'admin' },
    { id: '2', name: 'Grace Hopper', role: 'editor' },
    { id: '3', name: 'Lin Clark', role: 'viewer' },
  ];

  products: Product[] = [
    { id: 'p1', title: 'Widget', price: 9.99 },
    { id: 'p2', title: 'Gadget', price: 19.99 },
  ];

  selectedUser = this.users[0]!;
  selectedProduct = this.products[0]!;

  handleUserSelect = (user: User) => {
    this.selectedUser = user;
  };

  handleProductSelect = (product: Product) => {
    this.selectedProduct = product;
  };

  <template>
    {{! ── Success: T=User flows through currying into yielded block param ──}}
    <UserTable
      @items={{this.users}}
      @selected={{this.selectedUser}}
      @onSelect={{this.handleUserSelect}}
      as |user|
    >
      {{user.name}}
      {{user.role}}
    </UserTable>

    {{! ── Success: T=Product via direct generic DataTable usage ──}}
    <DataTable
      @items={{this.products}}
      @selected={{this.selectedProduct}}
      @onSelect={{this.handleProductSelect}}
      as |product|
    >
      {{product.title}}
      {{product.price}}
    </DataTable>

    <UserTable
      @items={{this.users}}
      @selected={{this.selectedUser}}
      {{! @glint-expect-error: onSelect expects User, not Product callback }}
      @onSelect={{this.handleProductSelect}}
    />

    <UserTable
      {{! @glint-expect-error: items expects User[], not Product[] }}
      @items={{this.products}}
      @selected={{this.selectedUser}}
      @onSelect={{this.handleUserSelect}}
    />

    {{! T=User flows through curried Cell → Row → yielded block param }}
    <UserTable
      @items={{this.users}}
      @selected={{this.selectedUser}}
      @onSelect={{this.handleUserSelect}}
      as |user|
    >
      {{! These work because T=User survived the currying }}
      {{user.name}}
      {{user.role}}

      {{! @glint-expect-error: User has no `price` — T is User, not Product }}
      {{user.price}}
    </UserTable>
  </template>
}