Nothing special there, it is backend communication, not CSS or a rendering library. ^.^
OvermindDL1
jschoch
does master on github have a working Drab.Live module? Trying it out and not able to get it working with the example code from tg.pl/drab/live.
grych
Creator of Drab
Yes, it is in the master. If you want to play with this, there is a test Phoenix App in test/support configured to work with Drab.Live. Warning, on this stage it is a sandbox for me, so please forgive the mess 
Using Live in the external application requires some configuration, like define Drab Template Engine, etc. It will be described with v0.5.0, soon.
grych
Creator of Drab
Hi guys,
news from Drab.Live world - living scripts. Every <script> in the template, which has any elixir expression with assign(s), will be re-evaluated when the assign changes.
Example:
<script>
document.querySelector("#growing_button").style.height = "<%= @button_height %>px"
</script>
Change the value of @button_height assign - in the Commander, or directly in IEx:
poke socket, button_height: 100
And - voila - button changes its size 
As usual, I’ve created a demo https://tg.pl/drab/live#scripts
Next in Drab.Live
Special form for node properties (@OvermindDL1 - style):
<tag @property=<%= @assign %>>
<tag @property="string template with <%= expression %> inside">
<tag @property.deeper=<%= some_function(@assign) %>>
Notice I am going to use @prop= instead of prop$=, so it will not mess with JS libaries.
Work with partials - updates only within the partial:
poke socket, "user.html", name: "Mirmił"
poke socket, "web/templates/users/user.html.drab", name: "Łamignat"
tmbb
Living scripts are pretty cool. Just be sure to add a warning saying that “Drab doesn’t understand or parse javascript, and the entire script will be rerun no matter what”. I can see some people shooting thenselves in the foot over this
jschoch
i added a repo with a fully working app and a small guide here: GitHub - jschoch/drab_test_app: working drab live example · GitHub
I may do an example for unpoly if anyone is interested in a quickstart.
grych
Creator of Drab
Properties Syntax finished. Now you can assign any Node property with any Elixir expression by simple:
<button @style.backgroundColor=<%= gen_css_color(@color) %>
You may use the full path to the property
Like style.backgroundColor or anything valid.
The expression must return JS encodable value
Unlike the attributes (string only!), other JS data types are allowed. Under the only condition: they must be encodable to JS (using Poison).
Case Sensitivity is preserved
Although html5 properties are case insensitive, Drab preserves it. So you may freely use @style.backgroundColor
There can be only one
The only allowed syntax is to bind single property with single expression. No String patterns allowed. This means that instead doing:
<tag @style.height="<%= @height %>px"> <!--- WRONG PROHIBITED BAD DO NOT TOUCH DOES NOT COMPUTE-->
you must do:
<tag @style.height=<%= "#{@height}px" %>>
As usuall, there is a new simple example: https://tg.pl/drab/live#properties
jschoch
can you share some examples of your unpoly accessors? I was trying to get a modal button working but it does not seem hook the drab-click event correctly when in the modal view. viewing the page direct works fine with drab so i’m not sure what you did to make these work together.
jschoch
i made a bit more progress but it seems like a hack:
https://github.com/jschoch/unpolydrab/blob/master/web/templates/layout/drab.html.eex#L5
this doesn’t seem like the right approach though. Seems i need some hook to tell unpoly to have drab run it’s evaluation after it pulls down it’s selector.
exec_js works fine to close the modal here
https://github.com/jschoch/unpolydrab/blob/master/web/commanders/live_commander.ex#L56
but then the “logout” button isn’t tagged correctly.
OvermindDL1
Sounds like you are not running the unpoly calls to tell it the DOM updated so it needs to update things and handle events back from it, see:
Lot of registration handling here: up.compiler() - Unpoly
But what command specifically I use the most is: up.replace() - Unpoly