Add {{ stimulus_action }} / {{ stimulus_target }}

[zmitic]

{{ stimulus_controller() }} is a great way to assign values to controller but targets and actions requires fallback to long syntax.

Can we have something like this:

<div {{ stimulus_controller('pages/reports/table') }}>

    <a {{ stimulus_action('pages/reports/table', 'onClick') }}>Click me</a>
    <span {{ stimulus_target('pages/reports/table', 'results') }}>results here</span>

</div>

Otherwise, we have to write something like this:

<div {{ stimulus_controller('pages/reports/table') }}>

    <a data-action="pages--reports--table#onClick">Click me</a>
    <span data-pages--reports--table-target="results">results here</span>

</div>

which is harder to write. Having those 2 extensions would also allow easier moving/renaming controllers; users would only need to find 'pages/reports/table' and replace with 'pages/zones/table-advanced'.

---

{{ stimulus_action('pages/reports/table', 'onClick') }} would also allow third parameter when non-default event is used:

<a {{ stimulus_action('pages/reports/table', 'onNonDefaultEvent', 'hover') }}>Hover me</a>

which would generate

<a data-action="hover->pages--reports--table#onNonDefaultEvent">Hover me</a>

[weaverryan]

I've thought about this a bit... and I am 👍 for this idea. Remembering the syntax for targets and actions is not always easy :).

[moismailzai]

is anyone working on this? if not I could submit a PR.

[Kocal]

At work we started to use Stimulus to add some interactivity on a Symfony Form rendered by twig:

<form
  action="{{ form.vars.action }}"
  method="{{ form.vars.method }}"
  id="{{ form.vars.id }}"
  name="{{ form.vars.name }}"
  novalidate="novalidate"
  {{ stimulus_controller('user/create-update-form', {
    user: {
      primaryRole: app.user.primaryRole
    },
    role: form.vars.value.role ?: form.children.role.vars.choices[0].value,
    company: form.vars.value.company ?: '',
    establishments_access_to: form.vars.value.establishmentsAccessTo,
  }) }}
  data-user--create-update-form-hidden-class="hidden"
>
  <div class="grid grid-cols-1 gap-6">
    {{ form_row(form.email) }}
    {{ form_row(form.role, {
      row_attr: {
        'data-action': 'change->user--create-update-form#onChangeRole',
      }
    }) }}
    {{ form_row(form.company, {
      attr: {
        'data-user--create-update-form-target': 'companyWidget',
      },
      row_attr: {
        'data-user--create-update-form-target': 'companyRow',
        'data-action': 'change->user--create-update-form#onChangeCompany',
      }
    }) }}
    {{ form_row(form.establishmentsAccessTo) }}
    {{ form_rest(form) }}
  </div>
</form>

However, you can't use stimulus_controller()/stimulus_action()/stimulus_target() with attr: {} or row_attr: {} since those functions returns a string.

Would it be possible to return an array (e.g.: if a certain parameter is passed?), this way it would be possible to write this?

    {{ form_row(form.company, {
      attr: {} | merge(
        stimulus_target('user/create-update-form', 'companyWidget', as_array=true),
      },
      row_attr: {} | merge(
        stimulus_target('user/create-update-form', 'companyRow', as_array=true),
        stimulus_action('user/create-update-form', 'onChangeCompany', 'change', as_array=true),
      }
    }) }}

Thanks!

[Kocal]

@moismailzai I have a lot of free time this week and can easily work on it, but feel free to submit a PR if you want!

[moismailzai]

hi @Kocal , I'll leave it to you!

[Kocal]

Thanks @moismailzai :)

A PR has been opened at #124

[pavol-tuka]

@weaverryan And what about action parameters?

https://stimulus.hotwired.dev/reference/actions#action-parameters

Separate twig function stimulus_parameter or add parameters to an existing stimulus_action? Which one would you prefer?

[nzurita]

Can we already use stimulus_parameter or we should set parameters as link provided by @pavol-tuka ?

Are all these stimulus twig tags documented somewhere?