New: Tag.jsTagName helper

raquo · May 6, 2024 · b0750a7 · b0750a7
1 parent e416f7a
commit b0750a7
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 0 deletions.
diff --git a/src/main/scala/com/raquo/laminar/tags/HtmlTag.scala b/src/main/scala/com/raquo/laminar/tags/HtmlTag.scala
@@ -16,6 +16,8 @@ class HtmlTag[+Ref <: dom.html.Element] (
     element
   }
 
+  override def jsTagName: String = name.toUpperCase
+
   /** Create a Scala DOM Builder element from this Tag */
   protected def build(): ReactiveHtmlElement[Ref] = new ReactiveHtmlElement(this, DomApi.createHtmlElement(this))
 }
diff --git a/src/main/scala/com/raquo/laminar/tags/SvgTag.scala b/src/main/scala/com/raquo/laminar/tags/SvgTag.scala
@@ -16,6 +16,8 @@ class SvgTag[+Ref <: dom.svg.Element] (
     element
   }
 
+  override def jsTagName: String = name
+
   /** Create a Scala DOM Builder element from this Tag */
   def build(): ReactiveSvgElement[Ref] = new ReactiveSvgElement(this, DomApi.createSvgElement(this))
 }
diff --git a/src/main/scala/com/raquo/laminar/tags/Tag.scala b/src/main/scala/com/raquo/laminar/tags/Tag.scala
@@ -7,6 +7,11 @@ trait Tag[+El <: ReactiveElement.Base] {
   val name: String
 
   val void: Boolean
+
+  /** The string returned by `element.tagName` in JS DOM.
+    * It's uppercase for HTML elements, and case-preserving for SVG elements.
+    */
+  def jsTagName: String
 }
 
 object Tag {

diff --git a/src/test/scala/com/raquo/laminar/tests/DomApiSpec.scala b/src/test/scala/com/raquo/laminar/tests/DomApiSpec.scala
@@ -98,4 +98,10 @@ class DomApiSpec extends UnitSpec {
     assert(caught.getMessage == "Error parsing SVG string: expected tag name `svg`, got `circle`")
   }
 
+  it("jsTagName: matches case for both HTML and SVG elements") {
+    a.jsTagName == a().ref.tagName
+    div.jsTagName == div().ref.tagName
+    svg.svg.jsTagName == svg.svg().ref.tagName
+    svg.circle.jsTagName == svg.circle().ref.tagName
+  }
 }