[Live] Add data-error attribute + fix loading behaviour on error

[YummYume]

Q	A
Bug fix?	yes
New feature?	yes
Issues	#1891
License	MIT

This PR adds a new LoadingPlugin to live components. It allows the use of a data-error that works almost like the data-loading attribute, but for errors. It also fixes the loading state not clearing when an error occurs, and a typo in the hook names in the types.

Little demo of the before/after of this PR :

Before :

before_pr-2024-06-10_22.31.29.mp4

After :

after_pr-2024-06-11_09.33.28.mp4

[smnandre]

Thank you very much @YummYume ! I'll review in depth during week-end

A first comment though: i'm not sure we should expose the same API / possibilities, as such errors "should not" happen and we don't want to maintain/document too many things if they are not used.

So maybe could we select only one or two methods ? What do you think ?

Regarding the attribute, data-error maybe is a bit too common, especially with the added CSS.
Maybe data-live-error ?

(The documentation seems great, i think i'd inverse the 2 sections and start with the "what" before the "how")

[smnandre]

Took me some time to understand this ... as you have some CS changes mixed in here :)

Could you -if you have time- open a PR just for this "bug fix" ?

I know it's only TS and not really a bug, but people will probably see these values in their IDE... and i'd really like them to see the good ones instead 😅

And also to ensure we merge the fix asap .... because this one will depend on the path we choose to take :)

[YummYume]

Will do! I just added the typing to the hooks to not have to remember the event names and having a better DX, but I was wondering why my event wasn't firing... Only to find out there was a typo in the typing 😅

[YummYume]

@smnandre Thanks for the feedback! 😄 By that, you mean only allowing the show|hide directives ? I currently implemented the same directives as the data-loading attribute because they were quite easy to add, but didn't add support for any modifier (like delay, models, and such...) as it wouldn't make much sense for an error state.

And I thought the same about the data-error attribute, I just wasn't sure if I should try to align its name with the data-loading one (since they are very similar). I will change it. Good point for the documentation as well !

[WebMamba]

Wohaaaa! Thanks @YummYume for your PR! It's so cool! I love the path taking here!

I noticed that the data-live-error="addClass(text-red-500)" does not work. I didn't dig to see why but here is my template :

<div {{ attributes }}>
    <p data-live-error="addClass(text-red-500)">Hello</p>
    <button
            data-action="live#action"
            data-live-action-param="error"
    >
        Throw
    </button>
    <span data-live-error="show">An error occurred ! Please try again.</span>
</div>

the class text-red-500 is not added but the span is well added. Maybe you could have a clue.

I think we should disable the pop up we the error by default in production, and actually even in dev ? Do you think this is still needed since we have the request in the profiler ?

[YummYume]

Thanks @WebMamba !

I just tried it, and it does work for me, the class is added on the element with the attribute.

Is it maybe just that the class does nothing because you're not using Tailwind ?

And about the error modal, I'm not sure, I think it's still a great and more direct debugging tool than the profiler. But for more in depth debugging, it's of course not ideal.