FrancisHtmx (Francis HTMX v0.1.3)

View Source

Provides a macro to render htmx content by loading htmx.js. Also provides a sigil to render EEx content similar to ~H from Phoenix.LiveView

Usage:

  defmodule Example do
    use Francis
    import FrancisHtmx

    htmx(fn _conn ->
      assigns = %{}
      ~E"""
      <style>
        .smooth {   transition: all 1s ease-in; font-size: 8rem; }
      </style>
      <div hx-get="/colors" hx-trigger="every 1s">
        <p id="color-demo" class="smooth">Color Swap Demo</p>
      </div>
      """
    end)

    get("/colors", fn _ ->
      new_color = 3 |> :crypto.strong_rand_bytes() |> Base.encode16() |> then(&"#{&1}")
      assigns = %{new_color: new_color}

      ~E"""
      <p id="color-demo" class="smooth" style="<%= "color:#{@new_color}"%>">
      Color Swap Demo
      </p>
      """
    end)
  end

In this scenario we are loading serving an HTML that has the htmx.js library loaded and serves the root content given by htmx/1

Summary

Functions

Renders htmx content by loading htmx.js and rendering binary content.

Provides a sigil to render EEx content similar to ~H from Phoenix.LiveView

Functions

htmx(content, opts \\ [])

(macro)
@spec htmx((Plug.Conn.t() -> binary()), Keyword.t()) :: Macro.t()

Renders htmx content by loading htmx.js and rendering binary content.

sigil_E(content, opts \\ [])

(macro)
@spec sigil_E(String.t(), Keyword.t()) :: Macro.t()

Provides a sigil to render EEx content similar to ~H from Phoenix.LiveView

Requires a variable named "assigns" to exist and be set to a map.