Drab tutorial error

I looks like Drab can’t see your assigns. Can you ensure that you’ve changed your template extension to .drab?

so is it supposed to be like index.html.eex.drab or index.drab?

index.html.drab was the answer.

Actually, in this case Drab should show the better error message. I’ve added the nil case to assigns function, and now:

iex(20)> poke socket, something: 42
** (ArgumentError) template `main` not found.

Please make sure this partial exists and has been compiled
by Drab (has *.drab extension).

If you want to poke assign to the partial which belong to
the other view, you need to specify the view name in `poke/4`.

    (drab) lib/drab/live.ex:1005: Drab.Live.raise_partial_not_found/1
    (drab) lib/drab/live.ex:878: Drab.Live.assigns_for_partial/5
    (drab) lib/drab/live.ex:588: Drab.Live.do_poke/5

Good idea

Ran into this error message when upgrading from 7.2 to 9.3 and a quick search brought me here. Error is

(ArgumentError) template `main` not found.

Please make sure this partial exists and has been compiled
by Drab (has *.drab extension).

If you want to poke assign to the partial which belong to
the other view, you need to specify the view name in `poke/4`.

    (drab) lib/drab/live.ex:1014: Drab.Live.raise_partial_not_found/1
    (drab) lib/drab/live.ex:890: Drab.Live.assigns_for_partial/5
    (drab) lib/drab/live.ex:600: Drab.Live.do_poke/5

At first I was confused because I was calling poke/2 not poke/4 but after a bit of investigation I see that poke/2 ends up at do_poke/5 using a template id held in socket.assigns. It looks like something is clearing __drab_index: as it goes from __drab_index: “gi2dqnbygazdenbv” to __drab_index: nil in socket.assigns.

I suspect it is an exec_js call I use in the page_loaded callback:

{status, return_value} = exec_js(socket, "navigator.geolocation.watchPosition(function(pos){Drab.exec_elixir('position_changed', {\"lat\":pos.coords.latitude, \"lon\": pos.coords.longitude});}, function(err){}, {});", timeout: 1000)

The solution for me was to use peek/3 & poke/3 to be explicit about the template I want in the poke/peek calls instead of counting on the value to stay clean in assigns.

If I can isolate/verify that the cause of __drab_index getting reset to nil isn’t something in my code I will report it as a bug on github, but thought I would leave a quick note here in case I don’t get to that soon and others run into a similar issue.

Can you check the value of __drab.index on the client side?

I believe it can be isolated to the exec_js call setup in page_loaded() so this is what I tried:

  def page_loaded(socket) do
    ...
    socket |> IO.inspect(label: "**SOCKET: ")
    {status, return_value} = exec_js(socket, "navigator.geolocation.watchPosition(function(pos){debugger;Drab.exec_elixir('position_changed', {\"lat\":pos.coords.latitude, \"lon\": pos.coords.longitude, \"drab\": __drab.index});}, function(err){}, {});", timeout: 1000)
  end

And in the first line of

defhandler position_changed(socket, payload) do
    payload["drab"] |> IO.inspect(label: "__drab.index")
    socket |> IO.inspect(label: "**SOCKET-0: ")
    ...
end

What I see is the socket is correct inside page_loaded, but not in the position_changed() handler. It seems good inside the browser as you can see from the passed in value that is printed payload[“drab”]

OUTPUT: inside page_loaded()

**SOCKET: : %Phoenix.Socket{
  assigns: %{
    __action: :index,
   ...
    __drab_index: "gi2dqnbygazdenbv",
  ...

OUTPUT: Inside position_chaged() handler

__drab.index: "gi2dqnbygazdenbv"
**SOCKET-0: : %Phoenix.Socket{
  assigns: %{
    __action: :index,
    ...
    __drab_index: nil,
    ...

Phoenix.Socket.assigns.__drab_index looks good initially inside page_loaded() and stays good until the first call to position_chaged(), when it is passed in the socket value as nil.

It seems that __drab.index is correct in the browser context, but not sure if there is a better way to test what you are asking. Let me know.

I believe it is a bug, it should not act like this. Let me try to reproduce it on my environment.

I know where the issue is. The problem is rather fundamental and I must think how to solve it.

Normally, when you run the Drab Handler via JS event (drab-click etc), the default payload is passed to the server, which contains also __drab.index in pages which have Drab.Live enabled.

But you run Drab.exec_elixir(). In this case, only the parameters you give to the method are passed. If you add drab_index to the exec_elixir, all should work:

Drab.exec_elixir('position_changed', {\"lat\":pos.coords.latitude, \"lon\": pos.coords.longitude, \"drab_index\": __drab.index});

I can see 2 possible fixes for this case:

1. add default payload to Drab.exec_elixir()
2. create new method Drab.exec_handler() which will have default payload, and leave exec_elixir clean.