From 1fa250362f44c0f7115959a2a5fe399c272b0bbb Mon Sep 17 00:00:00 2001
From: Hugo Alliaume <hugo@alliau.me>
Date: Wed, 19 May 2021 20:46:02 +0200
Subject: [PATCH] doc: stimulus_action() and stimulus_target()

Following #124 and https://github.com/symfony/webpack-encore-bundle/pull/124#issuecomment-844348600
---
 README.md | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index af677b0d..9703b522 100644
--- a/README.md
+++ b/README.md
@@ -199,7 +199,9 @@ class ScriptNonceSubscriber implements EventSubscriberInterface
 }
 ```
 
-## Stimulus / Symfony UX Helper: stimulus_controller
+## Stimulus / Symfony UX Helper
+
+### stimulus_controller
 
 This bundle also ships with a special `stimulus_controller()` Twig function
 that can be used to render [Stimulus Controllers & Values](https://stimulus.hotwire.dev/reference/values).
@@ -238,4 +240,64 @@ associative array in the first argument:
 </div>
 ```
 
+### stimulus_action
+
+The `stimulus_action()` Twig function can be used to render [Stimulus Actions](https://stimulus.hotwire.dev/reference/actions).
+
+For example:
+```twig
+<div {{ stimulus_action('controller', 'method') }}>Hello</div> 
+<div {{ stimulus_action('controller', 'method', 'click') }}>Hello</div>
+
+<!-- would render -->
+<div data-action="controller#method">Hello</div>
+<div data-action="click->controller#method">Hello</div>
+```
+
+If you have multiple actions and/or methods on the same element, pass them all as an
+associative array in the first argument:
+```twig
+<div {{ stimulus_action({
+ 'controller': 'method', 
+ 'other-controller': ['method', {'window@resize': 'onWindowResize'}]
+}) }}>
+    Hello
+</div>
+
+<!-- would render -->
+<div data-action="controller#method other-controller#method window@resize->other-controller#onWindowResize">
+    Hello
+</div>
+```
+
+### stimulus_target
+
+The `stimulus_target()` Twig function can be used to render [Stimulus Targets](https://stimulus.hotwire.dev/reference/targets).
+
+For example:
+```twig
+<div {{ stimulus_target('controller', 'a-target') }}>Hello</div> 
+<div {{ stimulus_target('controller', 'a-target second-target') }}>Hello</div>
+
+<!-- would render -->
+<div data-controller-target="a-target">Hello</div>
+<div data-controller-target="a-target second-target">Hello</div>
+```
+
+If you have multiple targets on the same element, pass them all as an
+associative array in the first argument:
+```twig
+<div {{ stimulus_target({
+ 'controller': 'a-target', 
+ 'other-controller': 'another-target' 
+}) }}>
+    Hello
+</div>
+
+<!-- would render -->
+<div data-controller-target="a-target" data-other-controller-target="another-target">
+    Hello
+</div>
+```
+
 Ok, have fun!