From 4b21c3b5a913afbb530a8ffb51542b1c3fe1f363 Mon Sep 17 00:00:00 2001
From: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
Date: Fri, 11 Feb 2022 10:34:44 +0100
Subject: [PATCH 1/3] web: update TagElement with tagName: String

Enable changing the tagName value. This will delete the initial html element and create a new one with a new tagName.

Cache ElementBuilder instances.
---
 .../jetbrains/compose/web/elements/Base.kt    | 14 ++++--
 .../compose/web/elements/Elements.kt          |  8 ++-
 .../jsTest/kotlin/elements/ElementsTests.kt   | 50 +++++++++++++++++++
 3 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Base.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Base.kt
index 0cebc82819b..b1866c1ca36 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Base.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Base.kt
@@ -154,8 +154,12 @@ fun <TElement : Element> TagElement(
     tagName: String,
     applyAttrs: AttrsScope<TElement>.() -> Unit,
     content: (@Composable ElementScope<TElement>.() -> Unit)?
-) = TagElement(
-    elementBuilder = ElementBuilder.createBuilder(tagName),
-    applyAttrs = applyAttrs,
-    content = content
-)
+) {
+    key(tagName) {
+        TagElement(
+            elementBuilder = ElementBuilder.createBuilder(tagName),
+            applyAttrs = applyAttrs,
+            content = content
+        )
+    }
+}
diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
index 3cede7cf448..5ee11e84954 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
@@ -150,14 +150,18 @@ private val Td: ElementBuilder<HTMLTableCellElement> = ElementBuilderImplementat
 private val Tbody: ElementBuilder<HTMLTableSectionElement> = ElementBuilderImplementation("tbody")
 private val Tfoot: ElementBuilder<HTMLTableSectionElement> = ElementBuilderImplementation("tfoot")
 
-val Style: ElementBuilder<HTMLStyleElement> = ElementBuilderImplementation("style")
+internal val Style: ElementBuilder<HTMLStyleElement> = ElementBuilderImplementation("style")
 
 fun interface ElementBuilder<TElement : Element> {
     fun create(): TElement
 
     companion object {
+        internal val buildersCache = mutableMapOf<String, ElementBuilder<*>>()
+
         fun <TElement : Element> createBuilder(tagName: String): ElementBuilder<TElement> {
-            return object  : ElementBuilderImplementation<TElement>(tagName) {}
+            return buildersCache.getOrPut(tagName) {
+                ElementBuilderImplementation<TElement>(tagName)
+            }.unsafeCast<ElementBuilder<TElement>>()
         }
     }
 }
diff --git a/web/core/src/jsTest/kotlin/elements/ElementsTests.kt b/web/core/src/jsTest/kotlin/elements/ElementsTests.kt
index d2b006d2cd1..090f88c375c 100644
--- a/web/core/src/jsTest/kotlin/elements/ElementsTests.kt
+++ b/web/core/src/jsTest/kotlin/elements/ElementsTests.kt
@@ -136,6 +136,56 @@ class ElementsTests {
         assertEquals("<div><custom id=\"container\">CUSTOM</custom></div>", root.outerHTML)
     }
 
+    @Test
+    fun testElementBuilderCreate() {
+        val custom = ElementBuilder.createBuilder<HTMLElement>("custom")
+        val div = ElementBuilder.createBuilder<HTMLElement>("div")
+        val b = ElementBuilder.createBuilder<HTMLElement>("b")
+        val abc = ElementBuilder.createBuilder<HTMLElement>("abc")
+
+        val expectedKeys = setOf("custom", "div", "b", "abc")
+        assertEquals(expectedKeys, ElementBuilder.buildersCache.keys.intersect(expectedKeys))
+
+        assertEquals("custom", custom.create().nodeName.lowercase())
+        assertEquals("div", div.create().nodeName.lowercase())
+        assertEquals("b", b.create().nodeName.lowercase())
+        assertEquals("abc", abc.create().nodeName.lowercase())
+    }
+
+    @Test
+    @OptIn(ExperimentalComposeWebApi::class)
+    fun rawCreationAndTagChanges() = runTest {
+        @Composable
+        fun CustomElement(
+            tagName: String,
+            attrs: AttrsScope<HTMLElement>.() -> Unit,
+            content: ContentBuilder<HTMLElement>? = null
+        ) {
+            TagElement(
+                tagName = tagName,
+                applyAttrs = attrs,
+                content
+            )
+        }
+
+        var tagName by mutableStateOf("custom")
+
+        composition {
+            CustomElement(tagName, {
+                id("container")
+            }) {
+                Text("CUSTOM")
+            }
+        }
+
+        assertEquals("<div><custom id=\"container\">CUSTOM</custom></div>", root.outerHTML)
+
+        tagName = "anothercustom"
+        waitForRecompositionComplete()
+
+        assertEquals("<div><anothercustom id=\"container\">CUSTOM</anothercustom></div>", root.outerHTML)
+    }
+
     @Test
     fun elementBuilderShouldBeCalledOnce() = runTest {
         var counter = 0

From 538fa805d4d12c65628ee0c7e05844225e7ca151 Mon Sep 17 00:00:00 2001
From: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
Date: Fri, 11 Feb 2022 10:39:27 +0100
Subject: [PATCH 2/3] add comments

---
 .../jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
index 5ee11e84954..4f297473184 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
@@ -156,6 +156,7 @@ fun interface ElementBuilder<TElement : Element> {
     fun create(): TElement
 
     companion object {
+        // it's internal only for testing purposes
         internal val buildersCache = mutableMapOf<String, ElementBuilder<*>>()
 
         fun <TElement : Element> createBuilder(tagName: String): ElementBuilder<TElement> {

From b64cbff4978722aaeb453dc4243cc864b875cab1 Mon Sep 17 00:00:00 2001
From: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
Date: Wed, 16 Feb 2022 11:31:27 +0100
Subject: [PATCH 3/3] update PR according to discussion

---
 .../kotlin/org/jetbrains/compose/web/elements/Base.kt  | 10 +++++++++-
 .../org/jetbrains/compose/web/elements/Elements.kt     |  5 +++--
 web/core/src/jsTest/kotlin/elements/ElementsTests.kt   |  8 ++++----
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Base.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Base.kt
index b1866c1ca36..f566bc69975 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Base.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Base.kt
@@ -148,8 +148,16 @@ fun <TElement : Element> TagElement(
     }
 }
 
+/**
+ * @param tagName - the name of the tag that needs to be created.
+ * It's best to use constant values for [tagName].
+ * If variable [tagName] needed, consider wrapping TagElement calls into an if...else:
+ *
+ * ```
+ *      if (useDiv) TagElement("div",...) else TagElement("span", ...)
+ * ```
+ */
 @Composable
-@ExperimentalComposeWebApi
 fun <TElement : Element> TagElement(
     tagName: String,
     applyAttrs: AttrsScope<TElement>.() -> Unit,
diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
index 4f297473184..896dc730ddc 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
@@ -160,8 +160,9 @@ fun interface ElementBuilder<TElement : Element> {
         internal val buildersCache = mutableMapOf<String, ElementBuilder<*>>()
 
         fun <TElement : Element> createBuilder(tagName: String): ElementBuilder<TElement> {
-            return buildersCache.getOrPut(tagName) {
-                ElementBuilderImplementation<TElement>(tagName)
+            val tagLowercase = tagName.lowercase()
+            return buildersCache.getOrPut(tagLowercase) {
+                ElementBuilderImplementation<TElement>(tagLowercase)
             }.unsafeCast<ElementBuilder<TElement>>()
         }
     }
diff --git a/web/core/src/jsTest/kotlin/elements/ElementsTests.kt b/web/core/src/jsTest/kotlin/elements/ElementsTests.kt
index 090f88c375c..911d0723a85 100644
--- a/web/core/src/jsTest/kotlin/elements/ElementsTests.kt
+++ b/web/core/src/jsTest/kotlin/elements/ElementsTests.kt
@@ -146,10 +146,10 @@ class ElementsTests {
         val expectedKeys = setOf("custom", "div", "b", "abc")
         assertEquals(expectedKeys, ElementBuilder.buildersCache.keys.intersect(expectedKeys))
 
-        assertEquals("custom", custom.create().nodeName.lowercase())
-        assertEquals("div", div.create().nodeName.lowercase())
-        assertEquals("b", b.create().nodeName.lowercase())
-        assertEquals("abc", abc.create().nodeName.lowercase())
+        assertEquals("CUSTOM", custom.create().nodeName)
+        assertEquals("DIV", div.create().nodeName)
+        assertEquals("B", b.create().nodeName)
+        assertEquals("ABC", abc.create().nodeName)
     }
 
     @Test