RFC: @ViewAction HTMX Integration

[tschuehly]

To integrate HTMX better with Spring ViewComponent, I propose the @ViewAction annotation that will generate an HTTP Endpoint when we add it to a method inside our ViewComponent.

@ViewComponent
class ActionViewComponent(
    val exampleService: ExampleService
) {

    fun render() = ViewContext(
        "helloThere" toProperty "ViewAction is working!",
        "itemList" toProperty exampleService.someData
    )

    @ViewAction
    fun addItem(actionFormDTO: ActionFormDTO): ViewContext {
        exampleService.addItemToList(actionFormDTO.item)
        return render()
    }

    class ActionFormDTO(
        val item: String
    )
}

We then can annotate any div with the view:action attribute that will create HTMX attributes to call the method from the browser. As we just translate the attribute to htmx attributes we can use additional htmx attributes to customize the behaviour.
As the translation happen after the view rendering it is template language independent.

<div>
    <form view:action="addItem">
        <input type="text" name="item">
        <button type="submit">Save Item</button>
    </form>
    <table><tr><th>Item</th></tr>
        <tr th:each="item : ${itemList}">
            <td th:text="${item}"></td>
        </tr>
    </table>
    <script src="https://unpkg.com/htmx.org@1.9.2"></script>
</div>

This will be rendered to the following HTML:

<div id="actionviewcomponent">
    <form hx-post="/actionviewcomponent/addItem" hx-target="#actionviewcomponent" hx-swap="outerHTML">
        <input type="text" name="item">
        <button type="submit">Save Item</button>
    </form>
    <table><tbody><tr><th>Item</th></tr>
        
    </tbody></table>
    <script src="https://unpkg.com/htmx.org@1.9.2"></script>
</div>

It should also be possible to customize the @ViewAction Annotation with the path and requestmethod that will be used for the htmx attributes like this:

@ViewAction(path = "/action/addItemAction", method = RequestMethod.POST)
  fun addItem(actionFormDTO: ActionFormDTO): ViewContext {
      exampleService.addItemToList(actionFormDTO.item)
      return render()
  }

I already got a working version on the dev branch you can test out yourself:

https://github.com/tschuehly/spring-view-component/blob/dev/thymeleaf/src/test/kotlin/de/tschuehly/spring/viewcomponent/thymeleaf/application/web/action/ActionViewComponent.kt

This is the filter that is responsible for translating the view:action attribute to hx-attributes:
https://github.com/tschuehly/spring-view-component/blob/dev/core/src/main/kotlin/de/tschuehly/spring/viewcomponent/core/ViewActionFilter.kt

This is the controller, the mapping currently maps to everything with 2 slashes so I need to figure the correct configuration out:
https://github.com/tschuehly/spring-view-component/blob/dev/core/src/main/kotlin/de/tschuehly/spring/viewcomponent/core/ViewActionController.kt

[abedurftig]

Hello.

Let me start with: I really think this is an interesting project.

I tried out the view actions in 0.7.2 and I would like to provide some feedback, if that's OK.

I understand that it's easier to just "re-render" the whole template and let HTML put it in the body. But I think one of the advantage of HTMX is that you can be really granular. I have looked at the counter example again and got those results in the web developer tools (looking at size and duration).

Then I tried to return the minimal HTML and to replace just the <h3> and I get these results.

The data transferred is only a fraction and you save some milliseconds on this small example.

Basically what I did:

Kotlin:

1. Annotate the same class that is annotated as @ViewComponent also with @RestController and @RequestMapping
2. Instead of @ViewAction I used @GetMapping
3. Return a String "<h3>$counter</h3>" (instead of ViewContext)

HTML:

1. Wrap the h3 in a div with id result-container
2. Use htmx directly in the html and target result-container

What do you think?

[tschuehly]

Of course! Always nice to get feedback!
I'm not sure if the benefit is really worth it imo?

One thing that would be interesting is to support fragments in a template independent way, but this would kind of destroy the mental model of one component as a representation of a part of the UI.
https://www.baeldung.com/spring-thymeleaf-fragments

In the example you provided we could split the ViewComponent in two seperate nested components:
ActionViewComponent

• CounterComponent: Only has up and down inputs
• ResultComponent: Only has the h3 tag in it.

Then in the CounterComponent GetViewAction you can return only the ResultComponent ViewContext and swap only that.

[abedurftig]

Yeah, I guess raising these questions and digging a little further into the code helped to understand this better. And you are right, probably it's a question of how small you want to make these components.