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 3b117ec054..78862f84df 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,14 +148,26 @@ fun 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 TagElement( tagName: String, applyAttrs: (AttrsScope.() -> Unit)?, content: (@Composable ElementScope.() -> 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 e42289d9a2..4d5fed5061 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 @@ -152,14 +152,20 @@ private val Td: ElementBuilder = ElementBuilderImplementat private val Tbody: ElementBuilder = ElementBuilderImplementation("tbody") private val Tfoot: ElementBuilder = ElementBuilderImplementation("tfoot") -val Style: ElementBuilder = ElementBuilderImplementation("style") +internal val Style: ElementBuilder = ElementBuilderImplementation("style") fun interface ElementBuilder { fun create(): TElement companion object { + // it's internal only for testing purposes + internal val buildersCache = mutableMapOf>() + fun createBuilder(tagName: String): ElementBuilder { - return object : ElementBuilderImplementation(tagName) {} + val tagLowercase = tagName.lowercase() + return buildersCache.getOrPut(tagLowercase) { + ElementBuilderImplementation(tagLowercase) + }.unsafeCast>() } } } diff --git a/web/core/src/jsTest/kotlin/elements/ElementsTests.kt b/web/core/src/jsTest/kotlin/elements/ElementsTests.kt index 23c2b70c11..d0b739dbce 100644 --- a/web/core/src/jsTest/kotlin/elements/ElementsTests.kt +++ b/web/core/src/jsTest/kotlin/elements/ElementsTests.kt @@ -135,6 +135,56 @@ class ElementsTests { assertEquals("
CUSTOM
", root.outerHTML) } + @Test + fun testElementBuilderCreate() { + val custom = ElementBuilder.createBuilder("custom") + val div = ElementBuilder.createBuilder("div") + val b = ElementBuilder.createBuilder("b") + val abc = ElementBuilder.createBuilder("abc") + + val expectedKeys = setOf("custom", "div", "b", "abc") + assertEquals(expectedKeys, ElementBuilder.buildersCache.keys.intersect(expectedKeys)) + + assertEquals("CUSTOM", custom.create().nodeName) + assertEquals("DIV", div.create().nodeName) + assertEquals("B", b.create().nodeName) + assertEquals("ABC", abc.create().nodeName) + } + + @Test + @OptIn(ExperimentalComposeWebApi::class) + fun rawCreationAndTagChanges() = runTest { + @Composable + fun CustomElement( + tagName: String, + attrs: AttrsScope.() -> Unit, + content: ContentBuilder? = null + ) { + TagElement( + tagName = tagName, + applyAttrs = attrs, + content + ) + } + + var tagName by mutableStateOf("custom") + + composition { + CustomElement(tagName, { + id("container") + }) { + Text("CUSTOM") + } + } + + assertEquals("
CUSTOM
", root.outerHTML) + + tagName = "anothercustom" + waitForRecompositionComplete() + + assertEquals("
CUSTOM
", root.outerHTML) + } + @Test fun elementBuilderShouldBeCalledOnce() = runTest { var counter = 0