docs: add explanatory image to outlets example

[benkoshy]

Why?

To allow readers to more easily map up the controller names / classes.

(Context: I must have spent 1-2 hours trying to debug why my outlets were not being recognised. Hopefully this image will save someone.)

Here is the image:

[marcoroth]

Thanks @benkoshy, this is great!

The pull request #647 makes the green part optional which should help to improve the situation a bit.

I was wondering if we should leave out the green part if we merge that PR, what do you think?

[benkoshy]

I was wondering if we should leave out the green part if we merge that PR, what do you think?

• If the outlet is optional, would it be unacceptable if I added a "optional" label to the image? I can always restructure the image to make things clearer etc.

• Or another thought (just a thought - I do not know how practical or sensible this is):

yarn stimulus print_outlets app/controllers/js/search_controller.js

Which prints out the following:

<div data-controller="result" class="result">...</div>
<div data-controller="result" class="result">...</div>
<div data-controller="search" data-search-result-outlet=".result">...</div>

Now I can cut and paste - minimise those headaches / confusions which come from mapping all the names, and spelling them correctly. probably your PR obviates such a tool. IDK just thinking outside the box.

[benkoshy]

Please let me know if this is unacceptable? Your thoughts?