HTMX é o sucessor do intercooler.js, pois é usado para estender HTML com comandos HTTP sem a necessidade de escrever uma API. Agora, eu sei que no começo eu disse que estava removendo camadas de abstração, mas sou mais um programador de sistemas/ferramentas, então ainda preciso de algumas abstrações até ter uma ideia do que realmente está acontecendo por baixo.

Conceito Básico

HTMX implanta comandos AJAX para modificar um elemento. Isso é semelhante ao funcionamento do ReactJs. ReactJs permite a atualização de conteúdo, e HTMX está cumprindo isso para HTML.

Importar HTML

Um liner simples é adicionado ao elemento ./internal/views/layout.templ .

&&&]
Isso já estava incluído no repositório, porém foi atualizado para verificar o script.

UsandoHTMX

HTMX vem com todas as suas palavras-chave favoritas anexadas com hx-.

# O formato geral é hx-[verbo] hx-get#HTTP GET hx-post # HTTP POST hx-put#HTTP PUT hx-patch # HTTP PATCH hx-delete #HTTP DELETE hx-swap # atualiza o conteúdo de um elemento hx-target # especifica o elemento a ser afetado hx-trigger # ação que executa a função

# General format is hx-[verb]
hx-get        # HTTP GET
hx-post       # HTTP POST
hx-put        # HTTP PUT
hx-patch      # HTTP PATCH
hx-delete     # HTTP DELETE
hx-swap       # update content of an element
hx-target     # specify element to affect
hx-trigger    # action that executes function

Para um teste simples, em ./internal/views/components/logo.templ, dentro da tag de abertura , adicionaremos hx-get="/" e hx-trigger="click ".

Abra seu terminal e execute:

geração de modelo vá executar ./cmd/server/main.go

templ generate
go run ./cmd/server/main.go

HX-SWAP

Este é o pão com manteiga do HTMX. Isso é o que nos dá a UI/UX responsiva que procuramos. Agora, hx-swap, embora de nome simples, precisa de uma consideração cuidadosa em sua localização. Com isso quero dizer, não o coloque onde possa interferir com outros elementos.

Exemplo:

//contêiner final

 // container
     // actor
     // end actor
// end-container

//contêiner final

 // container
    

         // actor
         // end actor
    
// end-container

Adenda

Estou parando aqui por dois (2) motivos.

Primeiro, você pode usar htmx e personalizar seu site como está. Segundo, podemos retornar o código HTML com http.Reponse. Por extensão, também podemos passar componentes de modelo. Você vê onde isso vai dar?

Em breve

Uma reestruturação completa e movimentação de funcionalidades para go handlerFunc()s.