All Versions
Latest Version
Avg Release Cycle
27 days
Latest Release

Changelog History
Page 2

  • v0.8.0 Changes

    May 09, 2018

    ๐Ÿš€ Potentially breaking release!

    ๐Ÿ“‡ Drab.Live engine has been redesigned again. No more stupid DETS cache anymore. Drab engine now creates modules for each template, and stores metadata compiled there.

    Elixir version

    โฌ†๏ธ Bumped to 1.6, because of the changes in the EEx Engine

    Migration from 0.7.7

    rm priv/
    mix clean

    ๐Ÿ› Bug fixes

    ๐Ÿ‘€ Many. See closed issues!

  • v0.7.7 Changes

    ๐Ÿš€ Potentially breaking release!

    ๐Ÿš€ As a preparation to 0.8.0, this release contains fundamental change in Drab.Live behaviour. It โœ‚ removes all the engine limitations, and makes a big change on how it treats @conn assign.

    ๐Ÿš€ Please report any found issues with this release.

    API Changes

    The @conn case

    Because sometimes it is huge, @conn is treated in the special way - it is trimmed to contain only ๐Ÿ”ง essential fields. By default it is :private => :phoenix_endpoint, but you may configure it.

    config :drab, :live_conn_pass_through, %{
      assigns: %{
        users: true
      private: %{
        phoenix_endpoint: true

    ๐Ÿ“š See Drab.Live documentation for more details on this case.

    :templates_path config must be under priv/

    If you are using :templates_path config, and your templates are not under the priv/ directory, ๐Ÿšš you'll have to move them. Solved #105.

  • v0.7.6 Changes

    ๐Ÿ†• New Features

    Living assigns per process cache

    ๐ŸŽ The performance of poke and peek operations increases significantly, as the event handler ๐Ÿ’ป does not have to get the assigns from the browser each time.


    You now may broadcast the assign, in exactly the same way you're doing poke.

  • v0.7.5 Changes

    ๐Ÿ†• New Features

    Living assigns inside the shared comamander

    โšก๏ธ If you are using drab-commander attribute, the requests coming from the shared commander updates stuff only under this tag.

    <div drab-commander="DrabTestApp.Shared1Commander">
      <div><%= @assign1 %></div>
      <button drab-click="button_clicked">Shared 1</button>
    <div drab-commander="DrabTestApp.Shared1Commander">
      <div><%= @assign1 %></div>
      <button drab-click="button_clicked">Shared 2</button>
    defhandler button_clicked(socket, sender) do
      poke socket, assign1: "changed"

    โšก๏ธ This will update only the div with @assign1 in the same as the button.

    The Great Unification

    Callbacks now works in the Shared Commanders.

    drab-id attribute now is generated with the counter, instead of UUID

    This means you are now able to use this/1 and this_commander/1 with the broadcasting functions.

    ๐Ÿ’ป The browser will not reconnect when client library change

    ๐Ÿ‘ฎ Forces user to reload the page in case the Drab JS library is changed.

  • v0.7.4 Changes

    ๐Ÿ›  This is a bugfix release.

    ๐Ÿ›  Fixed Bugs

    #97 - 414: url too long when connect

    โšก๏ธ This bug was introduced in 0.7.2, after moving update of assigns cache to the connect token.

    #94 Jason not found in production

    โšก๏ธ Updated the applications list in mix.exs

    ๐Ÿ†• New Features

    Pass options for Phoenix.Channel

    ๐ŸŒฒ Set the list of options to pass to use Phoenix.Channel. For example, to turn off logging of each handle_in:

    config :drab, :phoenix_channel_options, [log_handle_in: false]
  • v0.7.3 Changes

    ๐Ÿ›  Fixed the connect issue.

  • v0.7.2 Changes

    ๐Ÿ†• New Features

    use Drab.Controller is now optional

    0๏ธโƒฃ When using default commander name, corresponding to the controller (like PageCommander -> PageController), there is no need to mark controller as Drab.Controller anymore.

    Shared Commanders should be declared in the page controller

    All shared commanders must be explicitly declared in the controller:

    use Drab.Controller, commanders: [My.Shared.Commander]

    โš  In this version, system generates warning message if commanders are not declared. This warning will become error in v0.8.0

    defhandler macro for creating event handlers in commanders

    Since this version, all event handlers, whenever they are in shared or "normal" commander, must be declared with public or defhandler macro. Use defhandler instead of the standard def.


    public :button_clicked
    def button_clicked(socket, sender), do: ...

    is an equivalent of:

    defhandler button_clicked(socket, sender), do: ...

    โš  In this version, system generates warning message if the function is not declared as handler. This warning will become error in v0.8.0

    Create Reusable Drab Components with Shared Commanders

    โšก๏ธ Accomplished this with the new Drab.Core.this_commander/1 function, returning the unique selector of the sourrounding commander tag, so you may easly reduce the region where your update works.

    โšก๏ธ Having the page as below, we want the button to update .spaceholder1 only within the range of drab-commander.

    <div drab-commander="DrabTestApp.Shared1Commander">
      <div class="spaceholder1">Nothing</div>
      <button drab-click="button_clicked">Shared 1</button>
    <div drab-commander="DrabTestApp.Shared1Commander">
      <div class="spaceholder1">Nothing</div>
      <button drab-click="button_clicked">Shared 2</button>

    ๐Ÿ— Just like we can use Drab.Core.this/1 to select the exact sender of the event, we may have Drab.Core.this_commander/1, to build a selector which chooses the desired object:

    defhandler button_clicked(socket, sender) do
      set_prop socket, this_commander(sender) <> " .spaceholder1", innerText: "changed"

    ๐Ÿ— Notice the space before โ€œ.spaceholder1โ€. this_commander/1 returns the string like [drab-id="f59d54e6-a924-4e72-90d1-5177efecac9b"], so you may build any selector based on it.

  • v0.7.1 Changes

    This version is a step forward for creating component-like pieces of code with Drab, with enhanced Shared Commanders and possibility to pass additional argument to the handler function.

    Finally, most functions got their own @spec and Drab is now dialyzable.

    โš  Warning!

    โฌ†๏ธ Drab.Live cache DETS has changed, please ensure your "*.drab templates are recompiled after the upgrade.

    ๐Ÿ†• New Features

    Define Shared Commander with drab-commander on all children nodes

    If you add drab-commander attribute to any tag, all children of this tag will use Shared Commander defined in this tag. Notice it will not redefine nodes, which already has Shared Commander defined.

    Thus this:

    <div drab-commander="DrabExample.SharedCommander">
      <button drab-click="button1_clicked">1</button>
      <button drab-click="button2_clicked">1</button>
      <button drab-click="DrabExample.AnotherCommander.button3_clicked">1</button>

    is equivalent of:

      <button drab-click="DrabExample.SharedCommander.button1_clicked">1</button>
      <button drab-click="DrabExample.SharedCommander.button2_clicked">1</button>
      <button drab-click="DrabExample.AnotherCommander.button3_clicked">1</button>

    โž• Additional argument for handlers

    Since this version you may create handler with arity of 3, and pass the additional parameter using parenthesis after the handler name in drab attribute:

    <button drab-click='button_clicked(42)'>

    This will run button_clicked/3 instead of button_clicked/2 in your Commander:

    def button_clicked(socket, sender, the_answer_for_the_ultimate_question)

    The attribute is evaluated on the client side, so it could be any valid JS expression:

    <button drab-click='button_clicked({the_answer: 42})'>
    <button drab-click='button_clicked(window.location)'>


    Analogically to drab-commander attribute, there is a drab-argument to set this argument for more nodes. Notice that the existing arguments are not overwritten, so this:

    <div drab-argument='42'>
      <button drab-click='button_clicked'>
      <button drab-click='button_clicked(43)'>

    is the equivalent to:

    <button drab-click='button_clicked(42)'>
    <button drab-click='button_clicked(43)'>

    ๐ŸŒฒ Client-side errors now appears in the application log

    For developer happines, all client-side errors are now displayed both on JS console and on the Phoenix side.


    <button drab=":wrong">


    [error] Browser reports: Drab attribute value ':wrong' is incorrect.

    ๐Ÿ›  Bugfixes

    • Parent/child expression case in Drab.Live (#71) solved
    • โšก๏ธ Updated floki to 0.20; fixed #76
    • ๐Ÿ›  Special case for outerHTML in Drab.Element.set_prop, fixed #80
    • ๐Ÿ›  Special case for HTMLOptionsCollection; fixed #75
  • v0.7.0 Changes

    โšก๏ธ Updated the Drab core to introduce few important features. Fixed to Elixir version >= 1.5.2. Tested with Elixir 1.6.0.

    Possibility to provide own connect/2 callback for socket authentication, etc

    Previously, Drab intercepted the connect/2 callback in your UserSocket. Now, there is a possibility to use your own callback:

    defmodule MyApp.UserSocket do
      use Phoenix.Socket
      channel "__drab:*", Drab.Channel
      def connect(params, socket) do
        Drab.Socket.verify(socket, params)

    Do You Want to Know More?

    ๐Ÿ‘‰ Use of the custom marker "/" in Drab templates

    This version allow you to use of <%/ %> marker to avoid using Drab.Live for a given expression. The expression would be treaten as a normal Phoenix one, so will be displayed in rendered html, but Drab will have no access to it.

      <%/ @this_assigns_will_be_displayed_but_not_drabbed %>

    Do You Want to Know More?

    ๐Ÿ”„ Changed event definition core

    ๐Ÿ‘ The existing syntax drab-event and drab-handler attributes does not allow having multiple events on the one DOM object (#73). This form is now depreciated and replaces with the brand new, better syntax of:

    <tag drab="event:handler">

    Now may set more event on the single object:

    <input drab="focus:input_focus blur:input_blur"


    <input drab-focus="input_focus" drab-blur="input_blur">

    Do You Want to Know More?

    ๐Ÿ”ง Event shorthands list is now configurable

    ๐Ÿ”ง By default, you can use only few arbitrary-chosen shorthands for the event name / handler name (drab-click="clicked") attribute. Now you may configure the list with :events_shorthands config. ๐Ÿ‘€ See #73.

    ๐Ÿ’… Style changes:

    • source code formatted with 1.6.0
    • ๐Ÿ‘‰ use @impl true in behaviour callbacks
    • started annotating all functions with @spec (so far only few)
    • ๐Ÿ’… small style improvements suggested by Credo


    • Drab.Client.js/2 becomes
    • drab-event and drab-handler attributes combination replaced by drab
  • v0.6.3 Changes

    ๐Ÿ”„ Changes:

    • โ†ช workaround for #71: better docs and error message
    • Drab.Live.poke returns {:error, description} on error
    • ๐Ÿ‘Œ improved examples on connect in iex (#72)
    • assign list with Drab.Live.assigns (#72)