Add syntactic sugar to :keyword and :map properties

lib/surface/translator/component_translator_helper.ex

@@ -170,17 +170,18 @@ defmodule Surface.Translator.ComponentTranslatorHelper do
 
   def translate_value(:css_class, _key, {:attribute_expr, [expr]}, _caller, _line) do
     # TODO: Validate expression
+    new_expr = maybe_wrap_keyword(expr)
+    {:attribute_expr, ["css_class(#{new_expr})"]}
+  end
 
-    new_expr =
-      case String.trim(expr) do
-        "[" <> _ ->
-          expr
-
-        _ ->
-          "[#{expr}]"
-      end
+  def translate_value(:keyword, _key, {:attribute_expr, [expr]}, _caller, _line) do
+    # TODO: Validate expression
+    {:attribute_expr, [maybe_wrap_keyword(expr)]}
+  end
 
-    {:attribute_expr, ["css_class(#{new_expr})"]}
+  def translate_value(:map, _key, {:attribute_expr, [expr]}, _caller, _line) do
+    # TODO: Validate expression
+    {:attribute_expr, [maybe_wrap_map(expr)]}
   end
 
   def translate_value(_type, _key, value, _caller, _line) when is_list(value) do
@@ -424,4 +425,27 @@ defmodule Surface.Translator.ComponentTranslatorHelper do
         :ok
     end
   end
+
+  defp maybe_wrap_keyword(expr) do
+    case String.trim(expr) do
+      "[" <> _ ->
+        expr
+
+      _ ->
+        "[#{expr}]"
+    end
+  end
+
+  defp maybe_wrap_map(expr) do
+    case String.trim(expr) do
+      "%{" <> _ ->
+        expr
+
+      "[" <> _ ->
+        "Map.new(#{expr})"
+
+      _ ->
+        "%{#{expr}}"
+    end
+  end
 end

test/properties_test.exs

@@ -0,0 +1,65 @@
+defmodule Surface.PropertiesTest do
+  use ExUnit.Case
+  use Phoenix.ConnTest
+
+  import Surface
+  import ComponentTestHelper
+
+  defmodule Props do
+    use Surface.Component
+
+    property keyword, :keyword
+    property map, :map
+
+    def render(assigns) do
+      ~H"""
+      <span :if={{@keyword}}>{{inspect(@keyword)}}</span>
+      <span :if={{@map}}>{{inspect(@map)}}</span>
+      """
+    end
+  end
+
+  describe "keyword" do
+    test "passing a keyword list" do
+      code = """
+      <Props keyword={{ [option1: 1, option2: 2] }}/>
+      """
+
+      assert render_live(code) =~ "[option1: 1, option2: 2]"
+    end
+
+    test "passing a keyword list without brackets" do
+      code = """
+      <Props keyword={{ option1: 1, option2: 2 }}/>
+      """
+
+      assert render_live(code) =~ "[option1: 1, option2: 2]"
+    end
+  end
+
+  describe "map" do
+    test "passing a map" do
+      code = """
+      <Props map={{ %{option1: 1, option2: 2} }}/>
+      """
+
+      assert render_live(code) =~ "%{option1: 1, option2: 2}"
+    end
+
+    test "passing a keyword list" do
+      code = """
+      <Props map={{ [option1: 1, option2: 2] }}/>
+      """
+
+      assert render_live(code) =~ "%{option1: 1, option2: 2}"
+    end
+
+    test "accepts a keyword list without brackets" do
+      code = """
+      <Props map={{ option1: 1, option2: 2 }}/>
+      """
+
+      assert render_live(code) =~ "%{option1: 1, option2: 2}"
+    end
+  end
+end