No description
This repository has been archived on 2023-08-07. You can view files and clone it, but cannot push or open issues or pull requests.
Find a file
Mitchell Hanberg fb5147ff97 Improve doc generation
- Downloads all the mdn documentation in parallel
- Enables the `--silent` flag for curl
- Aliases the docs mix task to run update_mdn_docs first
2019-06-30 21:59:38 -04:00
config Implement remaining from helpers 2019-06-01 00:02:49 -04:00
lib Improve doc generation 2019-06-30 21:59:38 -04:00
test Fix phx_link, phx_button block style implementation 2019-06-30 14:28:44 -04:00
.formatter.exs Add formatter config for locals_without_parens 2019-05-08 03:47:43 -04:00
.gitignore Ignore tmp dir 2019-05-08 22:05:08 -04:00
.travis.yml Add .travis.yml 2019-06-29 18:33:33 -04:00
LICENSE Create LICENSE 2019-06-30 14:45:17 -04:00
mix.exs Improve doc generation 2019-06-30 21:59:38 -04:00
mix.lock Implement remaining from helpers 2019-06-01 00:02:49 -04:00
README.md Fill in README 2019-06-30 14:40:29 -04:00

Dsl

Build Status

Dsl is a DSL for writing HTML using Elixir.

You're probably here because you want to use Dsl to write Phoenix templates, which is why Dsl includes a Phoenix template engine and Dsl-compatible Phoenix form helpers.

Installation

If available in Hex, the package can be installed by adding dsl to your list of dependencies in mix.exs:

def deps do
  [
    {:dsl, "~> 0.1.0"}
  ]
end

Usage

use Dsl

htm do
  h2 "todos"

  ul class: "list" do
    for item <- @items do
      li class: "item" do
        div class: "checkbox" do
          div class: "bullet hidden"
        end

        div item
      end
    end
  end

  script """
  function toggleCheck({currentTarget}) {
    currentTarget.children[0].children[0].classList.toggle("hidden");
  }

  let items = document.querySelectorAll("li");

  Array.from(items).forEach(checkbox => checkbox.addEventListener("click", toggleCheck));
  """
end

Components

Dsl provides an API for creating custom components that act as custom HTML elements.

These components can be given props that are available inside the component definition as module attributes. The contents of a components do block are available as a special @children attribute.

defcomponent :flex do
  div id: @id, class: "flex" do
    @children
  end
end

htm do
  flex id: "my-flex" do
    div "Item 1"
    div "Item 2"
    div "Item 3"
  end
end

Phoenix.HTML

Dsl provides macros for working with the helpers provided by the Phoenix.HTML package.

Most of the macros are purely wrappers, while the semantics of some are changed to work with Dsl.

htm do
  form_for @conn, Routes.some_path(@conn, :create) do
    text_input form, :name
  end
end

Phoenix templates

Add the templating engine to your Phoenix configuration.

# config.exs
config :phoenix, :template_engines, exs: Dsl.Engine

# your_app_web.ex
def view do
  quote do
    # ...
    use Dsl # Replaces the call to import Phoenix.HTML
  end
end
# app.html.exs
html lang: "en" do
  head do
    meta charset: "utf-8"
    meta http_equiv: "X-UA-Compatible", content: "IE=edge"
    meta name: "viewport", content: "width=device-width, initial-scale=1.0"
    title "YourApp · Phoenix Framework"

    link rel: "stylesheet", href: Routes.static_path(@conn, "/css/app.css")
  end

  body do
    header do
      section class: "container" do
        nav role: "navigation" do
          ul do
            li do: a("Get Started", href: "https://hexdocs.pm/phoenix/overview.html")
          end
        end

        a href: "http://phoenixframework.org/", class: "phx-logo" do
          img src: Routes.static_path(@conn, "/images/phoenix.png"),
              alt: "Phoenix Framework Logo"
        end
      end
    end

    main role: "main", class: "container" do
      p get_flash(@conn, :info), class: "alert alert-info", role: "alert"
      p get_flash(@conn, :error), class: "alert alert-danger", role: "alert"

      partial render(@view_module, @view_template, assigns)
    end

    script type: "text/javascript", src: Routes.static_path(@conn, "/js/app.js")
  end
end