Temple + LiveView + Form

[sax]

The one thing I’ve been struggling with is (0.6.0-rc.0) forms with changesets in liveview. Not a pressing issue, since I’ve gone back to .leex for my affected pages, but it would be nice to convert those to temple if possible.

It seems like there's a problem with select tags, but I'm having trouble pinning down the issue.

Another thing is that LiveView really prefers form_for/3 with assignment to a variable, whereas I could only get the form tag to render form_for/4 and a nested function.

Examples to come in a sec.

[sax]

This renders the inputs, without any form tag:

f = form_for @changeset, "#", [id: @id]
h4 do: "Content"

hidden_input f, :id

label f, :name
text_input f, :name

This renders a form tag with seemingly correct markup:

form_for @changeset, "#", [id: @id], fn f ->
  h4 do: "Content"

  hidden_input f, :id

  label f, :name
  text_input f, :name
end

This causes an exception:

form_for @changeset, "#", [id: @id], fn f ->
  h4 do: "Content"

  hidden_input f, :id

  label f, :name
  text_input f, :name

  label f, :my_list
  select f, :my_list, ["A", "B"]
end

Stacktrace:

** (Protocol.UndefinedError) protocol Enumerable not implemented for %Phoenix.HTML.Form{action: "#", data: #MyThing<id: nil, name: nil, ...>, errors: [], hidden: [], id: "2c38478d-bcdf-4789-a98d-c491159c4a1b", impl: Phoenix.HTML.FormData.Ecto.Changeset, index: nil, name: "my_thing", options: [method: "post", id: "2c38478d-bcdf-4789-a98d-c491159c4a1b"], params: %{}, source: #Ecto.Changeset<action: nil, changes: %{id: "2c38478d-bcdf-4789-a98d-c491159c4a1b"}, errors: [], data: #MyThing<>, valid?: false>} of type Phoenix.HTML.Form (a struct)
    (elixir 1.11.3) lib/enum.ex:1: Enumerable.impl_for!/1
    (elixir 1.11.3) lib/enum.ex:141: Enumerable.reduce/3
    (elixir 1.11.3) lib/enum.ex:3473: Enum.reduce/3
    (temple 0.6.0-rc.0) lib/temple/parser.ex:127: Temple.Parser.Private.runtime_attrs/1
    (dashi 0.1.0) lib/myi_web/live/my_thing.html.lexs:15: anonymous fn/1 in MyWeb.Live.MyThing.render/1
    (phoenix_html 2.14.3) lib/phoenix_html/form.ex:372: Phoenix.HTML.Form.form_for/4
    (dashi 0.1.0) lib/my_web/live/my_thing.html.lexs:1: anonymous fn/2 in MyWeb.Live.MyThing.render/1
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/diff.ex:356: Phoenix.LiveView.Diff.traverse/6
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/diff.ex:584: Phoenix.LiveView.Diff.render_component/9
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/diff.ex:529: anonymous fn/5 in Phoenix.LiveView.Diff.render_pending_components/6
    (elixir 1.11.3) lib/enum.ex:2193: Enum."-reduce/3-lists^foldl/2-0-"/3
    (stdlib 3.14) maps.erl:233: :maps.fold_1/3
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/diff.ex:502: Phoenix.LiveView.Diff.render_pending_components/6
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/diff.ex:132: Phoenix.LiveView.Diff.render/3
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/channel.ex:702: Phoenix.LiveView.Channel.render_diff/3
    (phoenix_live_view 0.15.4) lib/phoenix_live_view/channel.ex:576: Phoenix.LiveView.Channel.handle_changed/4
    (stdlib 3.14) gen_server.erl:689: :gen_server.try_dispatch/4
    (stdlib 3.14) gen_server.erl:765: :gen_server.handle_msg/6
    (stdlib 3.14) proc_lib.erl:226: :proc_lib.init_p_do_apply/3

[mhanberg]

With temple, it's currently not possible to emit a match into the markup, as you generally never want to do that, except for using form_for/3 with live view.

Currently my workaround for this is to use a component, but this is still sort of hacky. The thing I'm currently working on are "slots" which would make this much better. Slots would enable you to pass data from inside a component back into the "children" or "inner_content".

Anyways, this is what I do currently

# component module for the live form
defmodule MyAppWeb.Component.LiveFormFor do
  use MyAppWeb, :component

  render do
    @form

    @inner_content

    "</form>"
  end
end

# usage of the live form
    f =
      form_for @changeset, "#",
        phx_target: @myself,
        phx_change: "validate",
        phx_submit: "save"

    c LiveFormFor, form: f do
      label f, :foo_id, "Foo"

      select f, :foo_id, Foo.options(), prompt: "Select a foo..."

      error_tag(f, :foo_id)

      c Save, text: "Submit!" # this is another component, can be ignored for this example
    end

Once I have slots completed, you would be able to write something similar to this

# component module for the live form
defmodule MyAppWeb.Component.LiveFormFor do
  use MyAppWeb, :component

  render do
    @form

    slot :form, f: @form

    "</form>"
  end
end

# usage of the live form
    c LiveFormFor, form: form_for @changeset, "#", phx_target: @myself, phx_change: "validate", phx_submit: "save" do
      slot :form, %{f: f} do
        label f, :foo_id, "Foo"

        select f, :foo_id, Foo.options(), prompt: "Select a foo..."

        error_tag(f, :foo_id)

        c Save, text: "Submit!" # this is another component, can be ignored for this example
      end
    end

Regarding your first example

Your first example would work if you added a line with the form variable and a closing tag. The need for the `f` line is because temple emits `<% ... %>` for matches (`=`). This is because you normally wouldn't want to emit binding a variable into the markup. The need for `""` is because that is what [`form_for/3`](https://hexdocs.pm/phoenix_html/2.14.3/Phoenix.HTML.Form.html#form_for/3) needs.

f = form_for @changeset, "#", [id: @id]

f

h4 do: "Content"

hidden_input f, :id

label f, :name
text_input f, :name

"</form>

Regarding your third example

I believe that is because you didn't configure an alias for select, which a normal HTML tag, but you are intending to use the phoenix helper. Temple compiled your code into

<select <%= Temple.Private.runtime_attrs(f) %> ...></select>

instead of <%= select f, :my_list, ["A", "B"] %>

Here are the docs on that. I think I need to update the to include select.

[mhanberg]

I think that this might also stop being a problem sooner or later, as the 3 arity version of form_for has become deprecated: phoenixframework/phoenix_html#329

[sax]

I did attempt to set an alias select: :_select, but when I switched to _select/3 in the template I kept getting errors that the function did not exist.

I'll play around with the component when I have some time. It would be nice to do everything in temple, instead of a mix of leex.

[mhanberg]

You might need to recompile temple

mix deps.compile temple

[mhanberg]

Also, you shouldn't need to change your template code at all, as you want to use the phoenix helper, not the temple function

[sax]

Oh! I misunderstood aliases. Maybe that's a note for future documentation.

[mhanberg]

Yeah that piece of config is baked in at compile time, definitely worth adding a note for that in the docs.

[sax]

FYI based on your component example + an alias, I just got this to work.

Thank you for the quick feedback! Hopefully this discussion is useful to others.