I’m now compiling the template into a DOM node and some JSON. The JSON contains the static parts, which will be merged with the dynamic parts sent by the server to build the DOM node. An example:
<% a = 2 %>
<% fixed = a %>
Static part #1
<%/ fixed %>
<%= if a > 1 do %>
<%= a %>
<% else %>
Nope
<% end %>
Static part #2
Which compiles to:
_ = assigns
element_id = Integer.to_string(:rand.uniform(4_294_967_296), 32)
a = 2
fixed = a
tmp_4_fixed =
case(fixed) do
{:safe, data} ->
data
bin when is_binary(bin) ->
Plug.HTML.html_escape_to_iodata(bin)
other ->
Phoenix.HTML.Safe.to_iodata(other)
end
tmp_6_dynamic =
case(
case(a > 1) do
x when :erlang.orelse(:erlang."=:="(x, nil), :erlang."=:="(x, false)) ->
{:safe, ["\n Nope\n"]}
_ ->
tmp_2_2_dynamic =
case(a) do
{:safe, data} ->
data
bin when is_binary(bin) ->
Plug.HTML.html_escape_to_iodata(bin)
other ->
Phoenix.HTML.Safe.to_iodata(other)
end
{:safe, ["\n ", tmp_2_2_dynamic, "\n"]}
end
) do
{:safe, data} ->
data
bin when is_binary(bin) ->
Plug.HTML.html_escape_to_iodata(bin)
other ->
Phoenix.HTML.Safe.to_iodata(other)
end
{:safe,
[
"<span id=\"",
element_id,
"\">\n\nStatic part #1\n\n",
tmp_4_fixed,
"\n\n",
tmp_6_dynamic,
"\n\nStatic part #2\n</span>\n\n<script type=\"application/json\" undead-id=\"",
element_id,
"\">\n[\n \"\",\n \"\\n\\nStatic part #1\\n\\n",
Phoenix.HTML.escape_javascript(tmp_4_fixed),
"\\n\\n\",\n \"\\n\\nStatic part #2\\n\"\n]\n</script>"
]}
The expression above is complex, but it’s not that hard to follow. It’s a span tag containing a DOM node (actually plaintext, but that shouldn’t be a problem for something like morphdom) followed by a script tag that contains some JSON.
Note that:
- I generate a unique ID for the DOM node. Maybe it should be possible to specify the element ID in the assigns?
- I start with
_ = assigns so that writing a template that doesn’t use the assigns doesn’t raise a warning.
The above will render into the following (the assigns don’t matter because it’s independent from the assigns):
<span id="1IE7FC5">
Static part #1
2
2
Static part #2
</span>
<script type="application/json" undead-id="1IE7FC5">
[
"",
"\n\nStatic part #1\n\n2\n\n",
"\n\nStatic part #2\n"
]
</script>
The code that does the above is already available, but it’s a mess. I’ll refactor it (and delete dead code) ASAP.
