How to use templui with datastar, htmx, etc?

[nickchomey]

I'm new to both templ and, especialy, templui, so I don't know how to add attributes to the components. Here's the code in the Button documentation

package showcase

import "github.com/templui/templui/internal/components/button"

templ ButtonDefault() {
	@button.Button() {
		Button
	}
}

How would I replicate this datastar Click To Edit example with TemplUI?

<div id="demo">
    <p>First Name: John</p>
    <p>Last Name: Doe</p>
    <p>Email: joe@blow.com</p>
    <div role="group">
        <button
            class="info"
            data-indicator-_fetching
            data-attr-disabled="$_fetching"
            data-on-click="@get('/examples/click_to_edit/edit')"
        >
            Edit
        </button>
        <button
            class="warning"
            data-indicator-_fetching
            data-attr-disabled="$_fetching"
            data-on-click="@patch('/examples/click_to_edit/reset')"
        >
            Reset
        </button>
    </div>
</div>

I assume it is very easy, but I can't find any relevant documentation in templui

[axadrn]

Thanks for the follow-up! I had misread your earlier comment. If your question is just about adding custom attributes (for Datastar/HTMX etc.), you can do that via the Attributes field in the props.

Example:

@button.Button(button.Props{
    Variant:    button.VariantSecondary,
    Attributes: templ.Attributes{
        "data-on-click": "@patch('/examples/click_to_edit/reset')",
        "data-attr-disabled": "$_fetching",
    },
}) {
    Reset
}

📚 References:

• templ attributes
• templUI Button api reference

That way you can pass through any Datastar/HTMX attributes directly to the component.

[nickchomey]

Ah, very simple as I expected! Thanks!

[ionv06]

Newbie question: how can I handle other component properties from the backend via SSE (using DataStar)? Let's say 'button.Variant'. Is it possible, or is it mandatory to rerender the @button component?
Can I find examples of TemplUI integration with DataStar somewhere?

[axadrn]

Newbie question: how can I handle other component properties from the backend via SSE (using DataStar)? Let's say 'button.Variant'. Is it possible, or is it mandatory to rerender the @button component? Can I find examples of TemplUI integration with DataStar somewhere?

If I understand your question correctly: props like button.Variant can’t be changed client-side with DataStar. You just re-render the button on the server and let DataStar patch the HTML. I’m not super deep into DataStar, but that’s the usual pattern.