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/drab.live.cache 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
caseBecause 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 underpriv/
If you are using
:templates_path
config, and your templates are not under thepriv/
directory, ๐ you'll have to move them. Solved #105. -
v0.7.6 Changes
๐ New Features
Living assigns per process cache
๐ The performance of
poke
andpeek
operations increases significantly, as the event handler ๐ป does not have to get the assigns from the browser each time.broadcast_poke
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> <div drab-commander="DrabTestApp.Shared1Commander"> <div><%= @assign1 %></div> <button drab-click="button_clicked">Shared 2</button> </div> defhandler button_clicked(socket, sender) do poke socket, assign1: "changed" end
โก๏ธ 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 UUIDThis means you are now able to use
this/1
andthis_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 eachhandle_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 optional0๏ธโฃ 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 commandersSince this version, all event handlers, whenever they are in shared or "normal" commander, must be declared with
public
ordefhandler
macro. Usedefhandler
instead of the standarddef
.This:
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 ofdrab-commander
.<div drab-commander="DrabTestApp.Shared1Commander"> <div class="spaceholder1">Nothing</div> <button drab-click="button_clicked">Shared 1</button> </div> <div drab-commander="DrabTestApp.Shared1Commander"> <div class="spaceholder1">Nothing</div> <button drab-click="button_clicked">Shared 2</button> </div>
๐ Just like we can use
Drab.Core.this/1
to select the exact sender of the event, we may haveDrab.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" end
๐ 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 nodesIf 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> </div>
is equivalent of:
<div> <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> </div>
โ 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 ofbutton_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)'>
drab-argument
Analogically to
drab-commander
attribute, there is adrab-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)'> </div>
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.
Example:
<button drab=":wrong">
generates:
[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, etcPreviously, Drab intercepted the
connect/2
callback in yourUserSocket
. 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) end end
๐ Use of the custom marker "/" in Drab templates
This version allow you to use of
<%/ %>
marker to avoid usingDrab.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.<div> <%/ @this_assigns_will_be_displayed_but_not_drabbed %> </div>
๐ Changed event definition core
๐ The existing syntax
drab-event
anddrab-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"
or:
<input drab-focus="input_focus" drab-blur="input_blur">
๐ง 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
Depreciations:
Drab.Client.js/2
becomesDrab.Client.run/2
drab-event
anddrab-handler
attributes combination replaced bydrab
-
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)