Web SVG: Publish custom attr functions (#2127)

* Web SVG: Publish custom attr functions

* Add points and ry overload

* Remove duplicate ry method

Co-authored-by: hfhbd <hfhbd@users.noreply.github.com>

web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svg.kt

@@ -68,7 +68,7 @@ fun Svg(
     TagElement(
         elementBuilder = Svg,
         applyAttrs = {
-            viewBox?.let { attr("viewBox", it) }
+            viewBox?.let { viewBox(it) }
             attrs?.invoke(this)
         },
         content = content
@@ -85,7 +85,7 @@ fun ElementScope<SVGElement>.SvgA(
     TagElement(
         elementBuilder = A,
         applyAttrs = {
-            attr("href", href)
+            href(href)
             attrs?.invoke(this)
         },
         content = content
@@ -104,9 +104,9 @@ fun ElementScope<SVGElement>.Circle(
     TagElement(
         elementBuilder = Circle,
         applyAttrs = {
-            attr("cx", cx.toString())
+            cx(cx)
-            attr("cy", cy.toString())
+            cy(cy)
-            attr("r", r.toString())
+            r(r)
             attrs?.invoke(this)
         },
         content = content
@@ -126,9 +126,9 @@ fun ElementScope<SVGElement>.Circle(
     TagElement(
         elementBuilder = Circle,
         applyAttrs = {
-            attr("cx", cx.toString())
+            cx(cx)
-            attr("cy", cy.toString())
+            cy(cy)
-            attr("r", r.toString())
+            r(r)
             attrs?.invoke(this)
         },
         content = content
@@ -147,8 +147,8 @@ fun ElementScope<SVGElement>.SvgText(
     TagElement(
         elementBuilder = Text,
         applyAttrs = {
-            attr("x", x.toString())
+            x(x)
-            attr("y", y.toString())
+            y(y)
             attrs?.invoke(this)
         },
         content = {
@@ -167,8 +167,8 @@ fun ElementScope<SVGElement>.View(
     TagElement(
         elementBuilder = View,
         applyAttrs = {
-            attr("id", id)
+            id(id)
-            attr("viewBox", viewBox)
+            viewBox(viewBox)
             attrs?.invoke(this)
         },
         content = null
@@ -188,10 +188,10 @@ fun ElementScope<SVGElement>.Rect(
     TagElement(
         elementBuilder = Rect,
         applyAttrs = {
-            attr("x", x.toString())
+            x(x)
-            attr("y", y.toString())
+            y(y)
-            attr("width", width.toString())
+            width(width)
-            attr("height", height.toString())
+            height(height)
             attrs?.invoke(this)
         },
         content = content
@@ -211,10 +211,35 @@ fun ElementScope<SVGElement>.Rect(
     TagElement(
         elementBuilder = Rect,
         applyAttrs = {
-            attr("x", x.toString())
+            x(x)
-            attr("y", y.toString())
+            y(y)
-            attr("width", width.toString())
+            width(width)
-            attr("height", height.toString())
+            height(height)
+            attrs?.invoke(this)
+        },
+        content = content
+    )
+}
+
+@Composable
+@ExperimentalComposeWebSvgApi
+fun ElementScope<SVGElement>.Rect(
+    width: Number,
+    height: Number,
+    rx: Number,
+    ry: Number = rx,
+    transform: String,
+    attrs: AttrBuilderContext<SVGRectElement>? = null,
+    content: ContentBuilder<SVGRectElement>? = null
+) {
+    TagElement(
+        elementBuilder = Rect,
+        applyAttrs = {
+            width(width)
+            height(height)
+            rx(rx)
+            ry(ry)
+            transform(transform)
             attrs?.invoke(this)
         },
         content = content
@@ -234,10 +259,10 @@ fun ElementScope<SVGElement>.Ellipse(
     TagElement(
         elementBuilder = Ellipse,
         applyAttrs = {
-            attr("cx", cx.toString())
+            cx(cx)
-            attr("cy", cy.toString())
+            cy(cy)
-            attr("rx", rx.toString())
+            rx(rx)
-            attr("ry", ry.toString())
+            ry(ry)
             attrs?.invoke(this)
         },
         content = content
@@ -257,10 +282,10 @@ fun ElementScope<SVGElement>.Ellipse(
     TagElement(
         elementBuilder = Ellipse,
         applyAttrs = {
-            attr("cx", cx.toString())
+            cx(cx)
-            attr("cy", cy.toString())
+            cy(cy)
-            attr("rx", rx.toString())
+            rx(rx)
-            attr("ry", ry.toString())
+            ry(ry)
             attrs?.invoke(this)
         },
         content = content
@@ -278,7 +303,7 @@ fun ElementScope<SVGElement>.Symbol(
     TagElement(
         elementBuilder = Symbol,
         applyAttrs = {
-            id?.let { attr("id", it) }
+            id?.let { id(it) }
             attrs?.invoke(this)
         },
         content = content
@@ -295,7 +320,7 @@ fun ElementScope<SVGElement>.Use(
     TagElement(
         elementBuilder = Use,
         applyAttrs = {
-            attr("href", href)
+            href(href)
             attrs?.invoke(this)
         },
         content = content
@@ -315,10 +340,10 @@ fun ElementScope<SVGElement>.Line(
     TagElement(
         elementBuilder = Line,
         applyAttrs = {
-            attr("x1", x1.toString())
+            x1(x1)
-            attr("y1", y1.toString())
+            y1(y1)
-            attr("x2", x2.toString())
+            x2(x2)
-            attr("y2", y2.toString())
+            y2(y2)
             attrs?.invoke(this)
         },
         content = content
@@ -338,10 +363,10 @@ fun ElementScope<SVGElement>.Line(
     TagElement(
         elementBuilder = Line,
         applyAttrs = {
-            attr("x1", x1.toString())
+            x1(x1)
-            attr("y1", y1.toString())
+            y1(y1)
-            attr("x2", x2.toString())
+            x2(x2)
-            attr("y2", y2.toString())
+            y2(y2)
             attrs?.invoke(this)
         },
         content = content
@@ -359,7 +384,7 @@ fun ElementScope<SVGElement>.ClipPath(
     TagElement(
         elementBuilder = ClipPath,
         applyAttrs = {
-            attr("id", id)
+            id(id)
             attrs?.invoke(this)
         },
         content = content
@@ -376,7 +401,7 @@ fun ElementScope<SVGElement>.Path(
     TagElement(
         elementBuilder = Path,
         applyAttrs = {
-            attr("d", d)
+            d(d)
             attrs?.invoke(this)
         },
         content = content
@@ -406,7 +431,7 @@ fun ElementScope<SVGElement>.Image(
     TagElement(
         elementBuilder = Image,
         applyAttrs = {
-            attr("href", href)
+            href(href)
             attrs?.invoke(this)
         },
         content = content
@@ -423,7 +448,7 @@ fun ElementScope<SVGElement>.Mask(
     TagElement(
         elementBuilder = Mask,
         applyAttrs = {
-           id?.let { attr("id", it) }
+           id?.let { id(it) }
            attrs?.invoke(this)
         },
         content = content
@@ -453,7 +478,7 @@ fun ElementScope<SVGElement>.Pattern(
     TagElement(
         elementBuilder = Pattern,
         applyAttrs = {
-            attr("id", id)
+            id(id)
             attrs?.invoke(this)
         },
         content = content
@@ -470,7 +495,7 @@ fun ElementScope<SVGElement>.Polygon(
     TagElement(
         elementBuilder = Polygon,
         applyAttrs = {
-            attr("points", points.toList().chunked(2).joinToString(" ") { it.joinToString(",") })
+            points(points)
             attrs?.invoke(this)
         },
         content = content
@@ -487,7 +512,7 @@ fun ElementScope<SVGElement>.Polyline(
     TagElement(
         elementBuilder = Polyline,
         applyAttrs = {
-            attr("points", points.toList().chunked(2).joinToString(" ") { it.joinToString(",") })
+            points(points)
             attrs?.invoke(this)
         },
         content = content
@@ -504,7 +529,7 @@ fun ElementScope<SVGElement>.TextPath(
     TagElement(
         elementBuilder = TextPath,
         applyAttrs = {
-            attr("href", href)
+            href(href)
             attrs?.invoke(this)
         },
         content = {
@@ -562,7 +587,7 @@ fun ElementScope<SVGElement>.LinearGradient(
     TagElement(
         elementBuilder = LinearGradient,
         applyAttrs = {
-            id?.let { attr("id", it) }
+            id?.let { id(it) }
             attrs?.invoke(this)
         },
         content = content
@@ -580,7 +605,7 @@ fun ElementScope<SVGElement>.RadialGradient(
     TagElement(
         elementBuilder = RadialGradient,
         applyAttrs = {
-            id?.let { attr("id", it) }
+            id?.let { id(it) }
             attrs?.invoke(this)
         },
         content = content
@@ -706,8 +731,8 @@ fun ElementScope<SVGElement>.Set(
     TagElement(
         elementBuilder = Set,
         applyAttrs = {
-            attr("attributeName", attributeName)
+            attributeName(attributeName)
-            attr("to", to)
+            to(to)
             attrs?.invoke(this)
         },
         content = content

web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svgAttrs.kt

@@ -0,0 +1,158 @@
+/*
+ * Copyright 2020-2022 JetBrains s.r.o. and respective authors and developers.
+ * Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
+ */
+
+package org.jetbrains.compose.web.svg
+
+import org.jetbrains.compose.web.attributes.*
+import org.jetbrains.compose.web.css.*
+import org.w3c.dom.svg.*
+
+fun AttrsScope<SVGElement>.width(px: Number) {
+    attr("width", px.toString())
+}
+
+fun AttrsScope<SVGElement>.height(px: Number) {
+    attr("height", px.toString())
+}
+
+fun AttrsScope<SVGElement>.width(value: CSSLengthOrPercentageValue) {
+    attr("width", value.toString())
+}
+
+fun AttrsScope<SVGElement>.height(value: CSSLengthOrPercentageValue) {
+    attr("height", value.toString())
+}
+
+fun AttrsScope<SVGElement>.xmlns(nameSpace: String) {
+    attr("xmlns", nameSpace)
+}
+
+fun AttrsScope<SVGElement>.attributeName(attributeName: String) {
+    attr("attributeName", attributeName)
+}
+
+fun AttrsScope<SVGElement>.fill(color: String) {
+    attr("fill", color)
+}
+
+fun AttrsScope<SVGElement>.fillRule(fill: String) {
+    attr("fill-rule", fill)
+}
+
+fun AttrsScope<SVGElement>.href(href: String) {
+    attr("href", href)
+}
+
+fun AttrsScope<SVGElement>.viewBox(viewBox: String) {
+    attr("viewBox", viewBox)
+}
+
+fun AttrsScope<SVGElement>.transform(transform: String) {
+    attr("transform", transform)
+}
+
+fun AttrsScope<SVGElement>.d(d: String) {
+    attr("d", d)
+}
+
+fun AttrsScope<SVGElement>.points(points: String) {
+    attr("points", points)
+}
+
+fun AttrsScope<SVGElement>.points(vararg points: Number) {
+    attr("points", points.toList().chunked(2).joinToString(" ") { it.joinToString(",") })
+}
+
+fun AttrsScope<SVGElement>.cx(cx: Number) {
+    attr("cx", cx.toString())
+}
+
+fun AttrsScope<SVGElement>.cy(cy: Number) {
+    attr("cy", cy.toString())
+}
+
+fun AttrsScope<SVGElement>.r(r: Number) {
+    attr("r", r.toString())
+}
+
+fun AttrsScope<SVGElement>.rx(rx: Number) {
+    attr("rx", rx.toString())
+}
+
+fun AttrsScope<SVGElement>.ry(ry: Number) {
+    attr("ry", ry.toString())
+}
+
+fun AttrsScope<SVGElement>.x(x: Number) {
+    attr("x", x.toString())
+}
+
+fun AttrsScope<SVGElement>.y(y: Number) {
+    attr("y", y.toString())
+}
+
+fun AttrsScope<SVGElement>.x1(x1: Number) {
+    attr("x1", x1.toString())
+}
+
+fun AttrsScope<SVGElement>.y1(y1: Number) {
+    attr("y1", y1.toString())
+}
+
+fun AttrsScope<SVGElement>.x2(x2: Number) {
+    attr("x2", x2.toString())
+}
+
+fun AttrsScope<SVGElement>.y2(y2: Number) {
+    attr("y2", y2.toString())
+}
+
+fun AttrsScope<SVGElement>.cx(cx: CSSLengthOrPercentageValue) {
+    attr("cx", cx.toString())
+}
+
+fun AttrsScope<SVGElement>.cy(cy: CSSLengthOrPercentageValue) {
+    attr("cy", cy.toString())
+}
+
+fun AttrsScope<SVGElement>.r(r: CSSLengthOrPercentageValue) {
+    attr("r", r.toString())
+}
+
+fun AttrsScope<SVGElement>.rx(rx: CSSLengthOrPercentageValue) {
+    attr("rx", rx.toString())
+}
+
+fun AttrsScope<SVGElement>.ry(ry: CSSLengthOrPercentageValue) {
+    attr("ry", ry.toString())
+}
+
+fun AttrsScope<SVGElement>.x(x: CSSLengthOrPercentageValue) {
+    attr("x", x.toString())
+}
+
+fun AttrsScope<SVGElement>.y(y: CSSLengthOrPercentageValue) {
+    attr("y", y.toString())
+}
+
+fun AttrsScope<SVGElement>.x1(x1: CSSLengthOrPercentageValue) {
+    attr("x1", x1.toString())
+}
+
+fun AttrsScope<SVGElement>.y1(y1: CSSLengthOrPercentageValue) {
+    attr("y1", y1.toString())
+}
+
+fun AttrsScope<SVGElement>.x2(x2: CSSLengthOrPercentageValue) {
+    attr("x2", x2.toString())
+}
+
+fun AttrsScope<SVGElement>.y2(y2: CSSLengthOrPercentageValue) {
+    attr("y2", y2.toString())
+}
+
+fun AttrsScope<SVGElement>.to(to: String) {
+    attr("to", to)
+}