x_component v0.1.0 X View Source

Component-based HTML templates for Elixir/Phoenix, inspired by Vue. Zero-dependency. Framework/library agnostic. Optimized for Phoenix and Gettext.

Features

Declarative HTML template syntax close to Vue.
Compile time errors and warnings.
Type checks with dialyzer specs.
Template code formatter.
Inline, context-aware components.
Smart attributes merge.
Decorator components.
Fast compilation and rendering.
Optimized for Gettext/Phoenix/ElixirLS.
Component scaffolds generator task.

Template Syntax

See more examples here.

~X"""
<body>
  <!-- Body -->
  <div class="container">
    <Breadcrumbs
      :crumbs=[
        %{to: :root, params: [], title: "Home", active: false},
        %{to: :form, params: [], title: "Form", active: true}
      ]
      data-breadcrumbs
    />
    <Form :action='"/book/" <> to_string(book.id)'>
      {{ @message }}
      <FormInput
        :label='"Title"'
        :name=":title"
        :record="book"
      />
      <FormInput
        :name=":body"
        :record="book"
        :type=":textarea"
      />
      <RadioGroup
        :name=":type"
        :options=["fiction", "bussines", "tech"]
        :record="book"
      />
    </Form>
  </div>
</body>
"""

Link to this section Summary

Functions

compile_inline?()

Returns inline compilation option. By default all components are compiled with inline option for faster rendering. inline option is disabled when extracting gettext to provide context aware AST. To get faster code reload in developemnt inline option can be disabled via config

compile_string!(source, env \\ __ENV__, options \\ [])

Compiles given template string to elixir AST.

format_file!(file)

Formats given component file string.

format_string!(source, options \\ [])

Formats given template string. Returns iodata.

generator_template()

Returns Elixir code snippet that will be added to the body of the component module created via generator task.

json_library()

Returns a json library module that is used to serialize map. By default it uses Phoenix.json_library/1 when used with Phoenix. Json library can be set via application config

root_module()

Returns a root component module that is used by components generator and Phoenix.

root_path()

Returns components directory path used by generator task.

Link to this section Functions

compile_inline?()

compile_inline?() :: boolean()

config :x_component,
  compile_inline: false,

Examples

iex> X.compile_inline?()
true

compile_string!(source, env \\ ENV, options \\ [])

compile_string!(String.t(), Macro.Env.t(), X.Compiler.options()) :: Macro.t()

Compiles given template string to elixir AST.

Options:

:line - the line to be used as the template start.
:context - compile all variables in given context. Variables are not context aware when nil.
:inline - inserts nested component AST into parent component when true. When false nested components will be rendered via embed render/2 functions. Templates compiled with inline have better performance.

Example

iex> X.compile_string!("<span>Hello {{= example + 1 }} </span>")
[
  "<span>Hello ",
  {:+, [line: 1], [{:example, [line: 1], nil}, 1]},
  " </span>"
]

iex> X.compile_string!("<span>Hello {{= example + 1 }} </span>", __ENV__, context: Example, line: 10)
[
  "<span>Hello ",
  {:+, [line: 11], [{:example, [line: 11], Example}, 1]},
  " </span>"
]

format_file!(file)

format_file!(String.t()) :: String.t()

Formats given component file string.

Example

iex> X.format_file!("""
...> defmodule Example do
...>   use X.Component,
...>     template: ~X"\""
...>       <div> example<span/> <hr> </div>
...>     "\""
...> end
...> """)
"""
defmodule Example do
  use X.Component,
    template: ~X"\""
    <div> example
      <span />
      <hr>
    </div>
    "\""
end
"""

format_string!(source, options \\ [])

format_string!(String.t(), X.Formatter.options()) :: String.t()

Formats given template string. Returns iodata.

Example

iex> X.format_string!("<span><span/>Hello {{= example + 1 }} </span>")
"\n<span>\n  <span />Hello {{= example + 1 }} \n</span>"

generator_template()

generator_template() :: String.t() | nil

Returns Elixir code snippet that will be added to the body of the component module created via generator task.

config :x_component,
  generator_template: "\""
    use MyAppWeb, :component
    import String
  "\""

Examples

iex> X.generator_template()
"  use X.Template\n"

json_library()

json_library() :: atom()

Returns a json library module that is used to serialize map. By default it uses Phoenix.json_library/1 when used with Phoenix. Json library can be set via application config:

config :x_component,
  json_library: Jason,

Examples

iex> X.json_library()
Jason

root_module()

root_module() :: atom() | binary() | nil

Returns a root component module that is used by components generator and Phoenix.

config :x_component,
  root_module: "MyApp.Components"

Examples

iex> X.root_module()
"X.Components"

root_path()

root_path() :: String.t() | nil

Returns components directory path used by generator task.

config :x_component,
  root_path: "lib/my_app_web/components",

Examples

iex> X.root_path()
"tmp"