[Suggestion] Using Hyperscript

[cmoulliard]

Suggestion

Using hyperscript simplify a lot the readability of the HTML and JS code .

Example of function added to the primaza.js file

htmx.on("htmx:afterSwap",function(evt) {
    const msg = evt.detail.elt.outerHTML;
    if (msg.includes("alert-success")) {
        document.getElementById("claim-button").setAttribute("disabled", true);
    };
});

which can be turned into such a declaration (NOT TESTED)

_="htmx:afterSwap if event.detail.elt.outerHTML.includes("alert-success") add [@disabled=true] to #claim-button">

[cmoulliard]

The following syntax using hyperscript works and improve a lot the readability of the HTML + JS code :-)

    <script src="https://unpkg.com/[email protected]"></script>
...
        <div class="form-group">
           <div class="col-sm-offset-2 col-sm-10">
             <button class="btn btn-primary"
                     id="claim-button"
                     type="submit"
                     _="
                     -- Remove the HTML content from the DIV id=response
                     -- to avoid to see previously displayed messages, errors
                     --
                     on submit remove .response">Submit</button>
           </div>
         </div>
       </form>
       <div style="height: 10px;"></div>
       <div class="container">
         <div id="response"
              _="
                 -- Disable the Submit button of the form
                 -- if we got as HTML response the text alert-success
                 --
                 on htmx:afterSwap
                 if detail.xhr.responseText.includes('alert-success')
                   add @disabled to #claim-button
                 else
                   remove @disabled from #claim-button
                 end"/>
       </div>

hyperscript dependency is

<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>hyperscript.org</artifactId>
    <version>0.9.7</version>
</dependency>
...
<script src="/webjars/hyperscript.org/dist/_hyperscript.min.js"></script>

WDYT about using hyperscript to code JS events, ... within the HTML ? @Sgitario @aureamunoz

[Sgitario]

To be honest, I think that

htmx.on("htmx:afterSwap",function(evt) {
    const msg = evt.detail.elt.outerHTML;
    if (msg.includes("alert-success")) {
        document.getElementById("claim-button").setAttribute("disabled", true);
    };
});

is cleaner and simpler to understand and read.
Plus, we avoid having another library around.

[cmoulliard]

is cleaner and simpler to understand and read.
Plus, we avoid having another library around.

Maybe but it requires to have functions declared within a js file while with hyperscript, we can declare the JS code directly next to the HTML tags using _=""

[Sgitario]

is cleaner and simpler to understand and read.
Plus, we avoid having another library around.

Maybe but it requires to have functions declared within a js file while with hyperscript, we can declare the JS code directly next to the HTML tags using _=""

yes, this is the only benefit I see