only a .drab version yes. Could it be related to the fact that I’m not using brunch but npm scripts?
antalvarenga
grych
Creator of Drab
I assume you mean that nothing change in the rendered page, as you are viewing the page source?
Do you have the PageCommander? You may generate it with
mix drab.gen.commander Page
Drab only starts on pages, which has the corresponding commander. PageController → PageCommander. Even if you only debug it with iex, it needs an “empty” commander.
This is because Drab JS it quite heavy, and should not be included to the pages which does not need it.
antalvarenga
This is the PageCommander
defmodule RiskWeb.PageCommander do
use Drab.Commander
# Place your event handlers here
#
# defhandler button_clicked(socket, sender) do
# set_prop socket, "#output_div", innerHTML: "Clicked the button!"
# end
#
defhandler uppercase(socket, sender) do
text = sender.params["text_to_uppercase"]
poke(socket, text: String.upcase(text))
end
# Place you callbacks here
#
onload(:page_loaded)
def page_loaded(socket) do
poke(socket, msg: "This page has been drabbed")
set_prop(socket, "div.jumbotron p.lead", innerText: "This page has been drabbed")
end
end
This is the PageController
defmodule RiskWeb.PageController do
use RiskWeb, :controller
plug(:put_layout, {RiskWeb.LayoutView, "home.html"})
def index(conn, _params) do
render(conn, "index.html", msg: "hello", text: "helloworld")
end
end
And these are the pieces in the index.html.drab template
<p> <%= @msg %> </p>
<form>
<input name="text_to_uppercase" value="<%= @text %>">
<button drab="click:uppercase">Upcase</button>
<button drab="click:downcase">Downcase</button>
</form>
I assume the @msg shown should be “This page has been drabbed” when the page loads and when clicking on the Upcase button the input text should transform
grych
Creator of Drab
This is where the issue may origin. Installer (and manual installation procedure) assumes you inject Drab to “app.html.eex”.
Can you see Drab’s javascripts when you check the generated page sources?
OvermindDL1
antalvarenga
home.html is the layout for the home page. Yeah that was definitely one problem, there was no Drab call in that layout template.
Now I tried with a controller that uses the app.html template and I get the following errors in the console:
Uncaught ReferenceError: require is not defined
at Object.create (evaluations:229)
at evaluations:1203
at evaluations:1207
Which are
window.Drab = {
create: function (drab_return_token, drab_session_token, broadcast_topic) {
this.Socket = require("phoenix").Socket; <-------------
this.drab_return_token = drab_return_token;
and
Drab.create('SFMyNTY.g3QAAAACZAAEZGF0YWwAAAAFaAJkAAxfX2NvbnRyb2xsZXJkACNFbGl4aXIuUmlza1dlYi5FdmFsdWF0aW9uQ29udHJvbGxlcmgCZAALX19jb21tYW5kZXJkACJFbGl4aXIuUmlza1dlYi5FdmFsdWF0aW9uQ29tbWFuZGVyaAJkAAZfX3ZpZXdkAB1FbGl4aXIuUmlza1dlYi5FdmFsdWF0aW9uVmlld2gCZAAIX19hY3Rpb25kAAVpbmRleGgCZAAJX19hc3NpZ25zampkAAZzaWduZWRuBgBZh9a0ZAE.bVBSJrPdCwG3HvemM8d99yMZ3iNpy4OjGAG21O5FS08', 'QTEyOEdDTQ.FiF0kbVXbsSjWYIL0rs2ZynwnJhd_nUcQOzZQlGtdSbYcPD-cNeg-08kRC0.m1HmEJ5NUBJExlq5.vdxfgTut.9QL16o9CC5vHzjwlgFKHtg', '__drab:same_path:/evaluations');
Drab.connect();
})();
antalvarenga
Solved! I found someone had that issue too here: Drab webpack problem - Uncaught ReferenceError: require is not defined.
In Drab.Client there is the solution to this problem:
## Custom socket constructor (Webpack “require is not defined” fix)
If you are using JS bundler other than default brunch, therequiremethod may not be availabe
as global. In this case, you might see the error:require is not definedin the Drab’s javascript, in line:
this.Socket = require("phoenix").Socket;In this case, you must provide it. In the
app.jsadd a global variable, which will be passed
to Drab later:window.__socket = require("phoenix").Socket;Then, tell Drab to use this instead of default
require("phoenix").Socket. Add toconfig.exs:config :drab, MyAppWeb.Endpoint, js_socket_constructor: "window.__socket"This will change the problematic line in Drab’s javascript to:
this.Socket = window.__socket;
Thank you! And great work with Drab!
grych
Creator of Drab
I have updated README to clearly indicate that you need to do it for all layouts you use. I think it may be good for installer to warn if it finds multiple layouts, or install it in all of them.
Actually I am not happy with the way how Drab injects its javascripts, and this workaround for the require is not defined. But I could not find a better solution. Javascripts generated by the Drab.Client are not static - for example, token needs to be included.
OvermindDL1
When it really should be passable via an httponly cookie holding a single-use token… >.>
Would need a new websocket driver then since Phoenix doesn’t allow that (see other recent thread for the reason which I still don’t understand why it’s used…).
Hmm, you could stuff a single-use token into a javascript-accessible single-request cookie (immediate timeout) that is then pulled out from static javascript that could then be bundled up as normal…
grych
Creator of Drab
So,
- create a Drab.Plug to add a cookie, containing token + some config (Drab JS templates depends on config values as well); the question is if I can have a controller name in the plug (from conn)
- create an NPM bundle with a static drab JS
Like that way, as it will be more transparent (no more adding <%= Drab.Client.run %> to the layout template). Also, there will be normal caching and minimization of the drab JS.
How can I ensure that token is a single use only?