Introduction

The @livefir/fir package is a companion alpine.js plugin for the Go library pkg.go.dev/github.com/livefir/fir. Fir is a Go toolkit to build reactive web interfaces using: Go, html/template and alpinejs.

Installation

The plugin can be included as a script tag before the alpine.js include.

``html

defer
src="https://unpkg.com/@livefir/fir@latest/dist/fir.min.js">
defer
src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js">

`


See example.


## API

The plugin provides event handlers custom magic and directives.


### Event handlers

Fir depends on alpinejs custom event handlers to update the DOM. Event handlers are of the syntax:

:fir:event-id:event-state::template-name

For e.g,

`html



`

The expression @fir:create-todo:ok::todo means that if create-todoevent handler returns with a non-error response then re-render the template named todoand send the html to the browser. The event handler utility function $fir.prependEl()picks the returned html from event.detail.htmland prepends it to the current element. For a full list of utiliy functions see section Magics


The ::template-name binding is optional. It is useful for situations where one needs to re-use a template out-of-band like the example above.

Fir automatically extracts a template from any element which contains html/template actions.

For e.g.

`html



{{ fir.Error "create-todo.text" }}



`

Here Fir automatically extracts a template out of the content of ptag. Under the hood, this is how it looks like:

`html



{{ fir.Error "create-todo.text" }}



`

#### Event states

- ok: when OnEvent handler returns a non-error response.
- error: when OnEvent returns an error response.
- pending: client-only for loader states. triggered before the Event is sent to the server.
- done: client-only for loader states. triggered on both ok and error response from the server.

$3

x-fir-mutation-observer implements the https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver as an
alpine directive. It allows you to observe changes to the DOM and react to them.

e.g.

`html
x-fir-mutation-observer.child-list.subtree="if ($el.children.length === 0) { empty = true } else { empty = false }"
`

$3

See api.md




$3

.nohtml modifier tells the server to not send the resultant html to the client. This is useful in cases like these:

`html
@fir:create:ok.nohtml="$el.reset()"

@fir:delete:ok.nohtml="$fir.removeEl()"
``