https://kotlinlang.org logo
#compose-web
Title
# compose-web
a

Arjan van Wieringen

05/03/2022, 1:46 PM
Hello, is their a reason the experimental SVG api only has composables in the
ElementScope<SVGElement>
context? The normal HTML elements don't do that. It makes it impossible (due to the lack of JS support for now for multiple context receivers) to write context-aware composables for SVG elements.
o

Oleksandr Karpovich [JB]

05/04/2022, 8:57 AM
It was made so to avoid an issue when SVG composable would be invoked within html:
<div><polygon.../></div>
Perhaps, something like this can help:
Copy code
class MyElementsScope(scope: ElementScope<SVGElement>) : ElementScope<SVGElement> by scope

@OptIn(ExperimentalComposeWebSvgApi::class)
@Composable
fun MyElementsScope.MyPolyline() {
    Polyline(1, 2, 3, 4, 5, 6, 7,  8, 9, 10)
}

@OptIn(ExperimentalComposeWebSvgApi::class)
@Composable
fun UseMyElementsScope() {
    Svg { 
        with(MyElementsScope(this)) {
            MyPolyline()
        }
    }
}
or scope instance even might be remembered:
Copy code
@Composable
fun UseMyElementsScope() {
    Svg {
        val myElementsScope = remember { MyElementsScope(this) }
        with(myElementsScope) {
            MyPolyline()
        }
    }
}
a

Arjan van Wieringen

05/04/2022, 11:51 AM
Thanks that looks like a good workaround. I understand the reason behind it, but it removes a lot of language freedom. HTML '_allows_' to put SVG elements inside a DIV but it just wont show anything and it'll probably throw a console error. I don't think this is something Compose-web should enforce. It isn't the responsiblity of compose and this enforcement removes a lot of flexiblity. You could also argue, for instance, for disallowing
thead
elements outside any
table
. But we have all the freedom to do that 😉 . Or we can add
option
outside of
select
elements.
3 Views