Component helper should be able to bind modifiers

[mehulkar]

I would like to be able to do something like this:

{{component "foo" (modifier on "click" this.clickHandler)}}

The primary reason for this is for contextual components to be able to yield back a prepared/curried component to its block.

Example

A component that allows block form and yields components cannot provide an experience that is equivalent to inline form.

The only alternative is to yield @clickHandler back to the block and expect the consumer to apply the modifier as well.

{{#let component "foo" someArg=@someArg as |Foo|}}
  {{#if (has-block)}}
    {{yield (hash foo=Foo)}}
  {{else}}
    <Foo {{on "click" @clickHandler}} />
  {{/if}}
{{/let}}

[rwjblue]

This was addressed by emberjs/rfcs#432, and is "in the works" (the underlying feature is unblocked by the glimmer-vm upgrade that landed in 3.17 cycle).

[chriskrycho]

A note here, for anyone else who stumbles on it: (modifier) is a necessary but insufficient element to address what @mehulkar was originally asking for. You also need a higher-order component which can be yielded. With <template>, this becomes relatively straightforward to do by wrapping it locally; but we still need emberjs/rfcs#497 or emberjs/rfcs#593 to make that kind of wrapping viable.

[NullVoxPopuli]

This is much easier in GJS, you'd do this:

const Foo = <template>
  <SomeComponent {{aModifier}} ...attributes>
     {{yield}}
  </SomeComponent>
</template>


export default <template>
  {{yield (component Foo)}}
</template>