Bloated html / wish for a "*" event

1

I wish there were an “any” event so we could write
data-action="*->line#some_action"

instead of
data-action="focus->line#on_focus blur->line#on_blur keyup->line#on_keyup ...."

Would that be a good idea?

While I enjoy greatly the benefits of Stimulus, the html bloating annoys me a tad.
Example: (simplified)
I’m writing a web order editor.
Each order can have 30 lines.
Each line has 4 cells (“3L”, “Paint X”, “Red”, “3” $/L")
-> 120 - quasi - identical cells per grid (order)

To track what grid line is current, each cell watches “focus” and “blur”
" focus->#{line#classifyCurrentLine" +
" blur->line#unclassifyCurrentLine "

To track cell changes, each cell watches “keyup”
“keyup->line#refresh_subtotal_and_more”

-> 120 = “data-actions=…”

As I like explicit controllers names that match the Ruby code vocabulary, each data-action can be 300 chars long:
Ex:
data-action="focus->quotation--prod-line-editor#classifyCurrentLine blur->quotation--prod-line-editor#unclassifyCurrentLine keyup->quotation--prod-line-editor#on_unit_price_change keydown->quotation--prod-line-editor#on_tab_insert_new_prod_line change->quotation--prod-line-editor#on_unit_price_change"

120x300 -> 40K characters in one page of very similar “data-action=…”
That makes for a big/bloated/hard to inspect HTML

Any suggestions?

1 Like
2

My suggestion would be to add event listeners on connect() on controller element. Then find current row through event.target

3

What could be nice would be a way to merge within some kind of array multiple event types

something like so using your example above:

data-action="[keyup, change]->quotation--prod-line-editor#on_unit_price_change"

I tried it quickly to see if by any chance this would be already working but I think unfortunately no…

1 Like
4

The input event fires with every change. No need to handle that mix of events.

data-action="input->quotation--prod-line-editor#on_unit_price_change"
1 Like
5

Completely agree with your answer. My suggestion was more general, I will look back at some code I made recently where I had to use two different events for the same action and I don’t think they is a single event that would merge both of them. But that is really cosmetics and sometimes a bit of laziness… :grinning: