All Versions
Latest Version
Avg Release Cycle
27 days
Latest Release

Changelog History
Page 3

  • v0.6.2 Changes

    ๐Ÿ› Bug fixes:

    • live_helper_modules config entry now allows list (#66)
    • โšก๏ธ when updating value attribute, poke updates property as well (for inputs and textareas)
    • ๐Ÿ”„ changed the order of loaded modules; fixes #69
    • ๐Ÿ”„ changed the way drab is asking for a store and session on connect; probably fixed #68
  • v0.6.1 Changes

    ๐Ÿš€ This release fixes new, better bugs introduced in v0.6.0:

    • "atom :save_assigns not found" error
    • @conn case (it was not removing @conn from the initial)
    • ๐Ÿšš cache file was deleted after mix phx.digest, moved the file to the Drab's priv directory

    ๐Ÿ“š Please read documentation for Drab.Browser, the API has changed

    • ๐Ÿ’ป cleaned up the mess with API in Drab.Browser
  • v0.6.0 Changes

    This is a major release. The biggest change is completely redesigned engine for Drab.Live with nodrab option. Also introducting shared commanders, updates in Drab.Browser, performance and bug fixes.

    Migration from 0.5

    After installation, please remove all remaining priv/hashes_expressions.drab.cache.* files (they were renamed to and do a mix clean to recompile templates:

    mix clean


    ๐Ÿ“œ The main change in the new template engine is that now it is not injecting <span> everywhere. Now, it parses the html and tries to find the sourrounding tag and mark it with the attribute called drab-ampere. The attribute value is a hash of the previous buffer and the expression, so it is considered unique.

    Consider the template, with initial value of 1 (given in render function in the Controller, as usual):

    <p>Chapter <%= @chapter_no %>.</p>

    which renders to:

    <p drab-ampere="someid">Chapter 1.</p>

    โšก๏ธ This drab-ampere attribute is injected automatically by Drab.Live.EExEngine. Updating the @chapter_no assign in the Drab Commander, by using poke/2:

    chapter = peek(socket, :chapter_no)     # get the current value of `@chapter_no`
    poke(socket, chapter_no: chapter + 1)   # push the new value to the browser

    ๐Ÿ’ป will change the innerHTML of the <p drab-ampere="someid"> to "Chapter 2." by executing the following JS on the browser:

    document.querySelector('[drab-ampere=someid]').innerHTML = "Chapter 2."

    This is possible because during the compile phase, Drab stores the drab-ampere and the corresponding pattern in the cache DETS file (located in priv/

    Sometimes it must add a <span>

    In case, when Drab can't find the parent tag, it injects <span> in the generated html. For example, template like:

    Chapter <%= @chapter_no %>.

    renders to:

    Chapter <span drab-ampere="someid">1</span>.

    Avoiding using Drab (nodrab option)

    If there is no need to use Drab with some expression, you may mark it with nodrab/1 function. Such expressions will be treated as a "normal" Phoenix expressions and will not be updatable by poke/2.

    <p>Chapter <%= nodrab(@chapter_no) %>.</p>

    In the future (Elixir 1.6 I suppose), the nodrab keyword will be replaced by a special EEx mark / (expression will look like <%/ @chapter_no %>).

    The @conn case

    โšก๏ธ The @conn assign is often used in Phoenix templates. Drab considers it read-only, you can not update it with poke/2. And, because it is often quite hudge, may significantly increase the number of data sent to ๐Ÿ’ป the browser. This is why Drab treats all expressions with only one assign, which happen to be @conn, as a nodrab assign.

    Shared Commanders

    0๏ธโƒฃ By default Drab runs the event handler in the commander module corresponding to the controller, which rendered the current page. Now it is possible to choose the module by simply provide the full path to the commander:

    <button drab-click='MyAppWeb.MyCommander.button_clicked'>clickme</button>

    ๐Ÿ”” Notice that the module must be a commander module, ie. it must be marked with use Drab.Commander, and the function must be whitelisted with Drab.Commander.public/1 macro.

    ๐Ÿ”„ Changes in Drab.Browser

    ๐Ÿš€ All function in Drab.Browser were renamed to their bang version. This is because in the future release functions with and without bang will be more consist with Elixir standards - nobang function will return tuples, bangs will raise on error.

    โš  Warning: functions redirect_to!/2 and console!/2 are changed

    In preparation to change all the functions in the module, this functions behavior have changed. Now, they are just bang version of the "normal" function, and they are not broadcasting anymore.

    You should use broadcast_redirect_to!/2 and broadcast_console!/2 instead.

  • v0.5.6 Changes

    โช Reverted back #51 - @conn is available again.

  • v0.5.5 Changes

    ๐Ÿ›  Fixes:

    • #20 (broadcasting in Phx 1.3)
    • ๐Ÿ“„ #44 (docs for broadcasting)
    • #45 (button inside for submits in Firefox)
    • โšก๏ธ #47 (docs and error message updated)
    • ๐Ÿšš #51 (removed @conn from living assigns, encrypts assigns)
  • v0.5.4 Changes

    ๐Ÿ›  Fixes for adding templates in a runtime.

    poke socket, live_partial1: render_to_string("partial1.html", color: "#aaaabb")
    poke socket, "partial1.html", color: "red"

    ๐Ÿ›  Fixes:

    • #37
    • ๐Ÿ“š #40 (updated documentation for Drab.Live.EExEngine)
    • #41
    • #34 and #38
  • v0.5.3 Changes

    Phoenix 1.3 compatibility

    • ๐Ÿ›  bugfixes (#19, #36).
    • drab.gen.commander works both with Phoenix 1.2 and 1.3
  • v0.5.2 Changes

    โšก๏ธ This is a small update to make Drab compatible with Elixir 1.5. ๐Ÿ›  Due to an issue with 1.5.0 (elixir-lang/elixir#6391) Elixir version is fixed on 1.4 or >= 1.5.1.

    ๐Ÿ›  Fixes:

    • #26, #27, #30, #31, #33
  • v0.5.1 Changes

    ๐Ÿ›  Fixes:

    • ๐Ÿšš Transpiled all JS templates, and removed all occurences of forEach (#22)
    • Radio buttons not reported correctly in sender["form"] (#23)
    • New :main_phoenix_app config item, in case the app name can't be read from mix.exs (#25)

    ๐Ÿ”„ Changes:

    • sender[:params] contains params normalized to controller type params (#24)

      %{"_csrf" => "1234", "user[id]" => "42", "user[email]" => "[email protected]", "user[account][id]" => "99", "user[account][address][street]" => "123 Any Street"}


      %{"_csrf" => "1234", "user" => %{"account" => %{"address" => %{"street" => "123 Any Street"}, "id" => "99"}, "email" => "[email protected]", "id" => "42"}}

    ๐Ÿ†• New features:

    • ๐Ÿ’ป Core.Browser.set_url/2 to manipulate the browser's URL bar
  • v0.5.0 Changes

    โšก๏ธ This version is a major update. The default module, Drab.Query has been replaced with Drab.Live and Drab.Element. Drab is not jQuery dependent by default anymore.


    ๐Ÿ‘ Allows to remotely (from the server side) replace the value of the assign in the displayed paged, without re-rendering and reloading the page.

    Such template:

    <a href="https://<%= @url%>" @style.backgroundColor=<%= @color%>>
      <%= @url %>

    โšก๏ธ can be updates live with poke/2:

    poke socket, url: "", color: "red"


    โšก๏ธ Query and update displayed page from the server side.

    set_prop socket, "p", style: %{"backgroundColor" => "red"} # awesome effect


    Broadcasting functions now get subject instead of socket. There is no need to have an active socket to broadcast anymore. Useful when broadcasting from background servers or ondisconnect callback.

    Form parameters in sender

    If the event launching element is inside a <FORM>, it gets a values of all input elements within that form. This is a map, where keys are the element's name or id.

    โฌ†๏ธ Upgrading from 0.4

    โž• Add Drab.Query and Drab.Modal to your commanders:

    use Drab.Commander, module: [Drab.Query, Drab.Modal]


    All soft depreciations up to 0.4.1 became hard.