From 7b22b96f5ce64b701c9213c7da442febe22e9e05 Mon Sep 17 00:00:00 2001
From: Leandro Pereira <leandro@leandro.io>
Date: Fri, 26 Jan 2024 17:10:38 -0500
Subject: [PATCH] JSONEncoder - render :tag_self_close html

---
 lib/beacon/template/heex/json_encoder.ex      |  5 ++-
 .../template/heex/json_encoder_test.exs       | 41 ++++++++++++++++---
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/lib/beacon/template/heex/json_encoder.ex b/lib/beacon/template/heex/json_encoder.ex
index 4591da5c..7102be42 100644
--- a/lib/beacon/template/heex/json_encoder.ex
+++ b/lib/beacon/template/heex/json_encoder.ex
@@ -201,11 +201,12 @@ defmodule Beacon.Template.HEEx.JSONEncoder do
     end
   end
 
-  defp transform_entry({:tag_self_close, tag, attrs}, _site, _assigns) do
+  defp transform_entry({:tag_self_close, tag, attrs} = node, site, assigns) do
     %{
       "tag" => tag,
       "attrs" => transform_attrs(attrs, true),
-      "content" => []
+      "content" => [],
+      "rendered_html" => Beacon.Template.HEEx.render(site, HEExDecoder.decode(node), assigns)
     }
   end
 
diff --git a/test/beacon/template/heex/json_encoder_test.exs b/test/beacon/template/heex/json_encoder_test.exs
index ebd49e35..f2709f1a 100644
--- a/test/beacon/template/heex/json_encoder_test.exs
+++ b/test/beacon/template/heex/json_encoder_test.exs
@@ -56,6 +56,32 @@ defmodule Beacon.Template.HEEx.JSONEncoderTest do
     )
   end
 
+  test "eex expressions in attrs" do
+    assert_output(
+      ~S|
+      <img
+        alt={@beacon_live_data.person.bio}
+        src={@beacon_live_data.person.picture}
+        class="w-full h-auto max-w-full"
+      />
+      |,
+      [
+        %{
+          "attrs" => %{
+            "alt" => "{@beacon_live_data.person.bio}",
+            "class" => "w-full h-auto max-w-full",
+            "self_close" => true,
+            "src" => "{@beacon_live_data.person.picture}"
+          },
+          "content" => [],
+          "rendered_html" => "<img alt=\"person bio\" src=\"profile.jpg\" class=\"w-full h-auto max-w-full\">",
+          "tag" => "img"
+        }
+      ],
+      %{beacon_live_data: %{person: %{bio: "person bio", picture: "profile.jpg"}}}
+    )
+  end
+
   test "block expressions" do
     assert_output(
       ~S"""
@@ -201,7 +227,12 @@ defmodule Beacon.Template.HEEx.JSONEncoderTest do
     assert_output(
       ~S|<BeaconWeb.Components.image name="logo.jpg" width="200px" />|,
       [
-        %{"attrs" => %{"name" => "logo.jpg", "self_close" => true, "width" => "200px"}, "content" => [], "tag" => "BeaconWeb.Components.image"}
+        %{
+          "attrs" => %{"name" => "logo.jpg", "self_close" => true, "width" => "200px"},
+          "content" => [],
+          "tag" => "BeaconWeb.Components.image",
+          "rendered_html" => "<img src=\"/beacon_assets/logo.jpg\" class=\"\" width=\"200px\">"
+        }
       ]
     )
 
@@ -211,8 +242,8 @@ defmodule Beacon.Template.HEEx.JSONEncoderTest do
         %{
           "attrs" => %{"path" => "/contact", "replace" => "{true}"},
           "content" => ["Book meeting"],
-          "rendered_html" => "<a href=\"#\" path=\"/contact\">Book meeting</a>",
-          "tag" => ".link"
+          "tag" => ".link",
+          "rendered_html" => "<a href=\"#\" path=\"/contact\">Book meeting</a>"
         }
       ]
     )
@@ -230,8 +261,8 @@ defmodule Beacon.Template.HEEx.JSONEncoderTest do
           "attrs" => %{},
           "content" => ["my_component(\"sample_component\", %{val: 1})"],
           "metadata" => %{"opt" => ~c"="},
-          "rendered_html" => "<span id=\"my-component-1\">1</span>",
-          "tag" => "eex"
+          "tag" => "eex",
+          "rendered_html" => "<span id=\"my-component-1\">1</span>"
         }
       ]
     )