[main: 130d85f] Cannot use conditional modifier

[NullVoxPopuli]

repro:

import { on } from "@ember/modifier";
import type { TOC } from "@ember/component/template-only";

export interface ItemSignature {
  Element: HTMLButtonElement;
  Args: { onSelect?: (event: Event) => void };
  Blocks: { default: [] };
}

export const Item: TOC<ItemSignature> = <template>
  <button
    type="button"
    role="menuitem"
    {{(if @onSelect (modifier on "click" @onSelect))}}
    ...attributes
  >
    {{yield}}
  </button>
</template>;

Error:

src/components/menu.gts:95:5 - error TS2589: Type instantiation is excessively deep and possibly infinite.

95     {{(if @onSelect (modifier on "click" @onSelect))}}
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/components/menu.gts:95:21 - error TS2554: Expected 1 arguments, but got 3.

95     {{(if @onSelect (modifier on "click" @onSelect))}}
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[mogstad]

Is this the case for other modifiers than on? I have a hunch it’s because on is generic

[NullVoxPopuli]

yea, this also reproduces the same error:

import { modifier as eModifier } from 'ember-modifier';

import type { TOC } from '@ember/component/template-only';

export interface ItemSignature {
  Element: HTMLButtonElement;
  Args: { onSelect?: (event: Event) => void };
  Blocks: { default: [] };
}

const custom = eModifier(function () {});

export const Item: TOC<ItemSignature> = <template>
  <button
    type="button"
    role="menuitem"
    {{(if @onSelect (modifier custom "click" @onSelect))}}
    ...attributes
  >
    {{yield}}
  </button>
</template>;

[NullVoxPopuli]

This happens with component currying as well:

I believe this is the same or similar issue to:

• https://github.com/typed-ember/glint/issues/661

[NullVoxPopuli]

So, I think this is maybe just a major bug in @glint/template

[mogstad]

Got a repro? Wrote some simple type tests for it and simple usage of component helpers works, but there are definitively ways to get it to break, generics definitively seems like isn’t currently supported.

Ref: https://github.com/typed-ember/glint/compare/main...mogstad:glint:push-nrkusypolpwl?expand=1

[NullVoxPopuli]

the code in https://github.com/typed-ember/glint/issues/661 should repro

[mogstad]

I think I found something; the reference to integration-declarations.d.ts is gone in the unstable versions of environment-ember-loose, which I think is the integration point.

1.5.2:

1.4.1 unstabile:

(Posting images, as npm doesn’t support permalinks to paths..)

1.5.2: https://www.npmjs.com/package/@glint/environment-ember-loose/v/1.5.2?activeTab=code 1.4.1 unstabile: https://www.npmjs.com/package/@glint/environment-ember-loose/v/1.4.1-unstable.66abd90?activeTab=code