Prepare examples for the publicaiton of 0.0.0-web-dev-14

examples/web-getting-started/src/jsMain/kotlin/Main.kt

@@ -13,18 +13,18 @@ fun main() {
     var count: Int by mutableStateOf(0)
 
     renderComposable(rootElementId = "root") {
-        Div(style = { padding(25.px) }) {
+        Div({ style { padding(25.px) } }) {
             Button(attrs = {
                 onClick { count -= 1 }
             }) {
                 Text("-")
             }
 
-            Span(style = { padding(15.px) }) {
+            Span({style { padding(15.px) }}) {
                 Text("$count")
             }
 
-            Button(attrs = {
+            Button({
                 onClick { count += 1 }
             }) {
                 Text("+")

examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt

@@ -39,11 +39,11 @@ private fun ElementScope<HTMLElement>.UseReactEffect(
 @Composable
 fun YoutubeReactPlayerWrapper(videoUrl: String) {
     if (videoUrl.isEmpty()) return
-    Div(
-        style = {
+    Div({
+        style {
             width(50.percent)
         }
-    ) {
+    }) {
         UseReactEffect(key = videoUrl) {
             reactPlayer {
                 attrs.url = videoUrl
@@ -70,20 +70,22 @@ fun reactInComposeAppExample() {
                 Button(
                     attrs = {
                         onClick { videoUrl = url }
-                    },
-                    style = {
-                        margin(10.px)
+                        style  {
+                            margin(10.px)
+                        }
                     }
                 ) { Text("Video ${ix + 1}") }
             }
 
             Button(
                 attrs = {
-                    onClick { videoUrl = "" }
+                    onClick {
+                        videoUrl = ""
+                        style {
+                            margin(10.px)
+                        }
+                    }
                 },
-                style = {
-                    margin(10.px)
-                }
             ) { Text("Reset") }
 
             YoutubeReactPlayerWrapper(videoUrl)

examples/web_landing/src/jsMain/kotlin/com/sample/components/Card.kt

@@ -12,10 +12,10 @@ data class LinkOnCard(val linkText: String, val linkUrl: String)
 
 @Composable
 private fun CardTitle(title: String, darkTheme: Boolean = false) {
-    H3(attrs = {
-        classes {
-            +WtTexts.wtH3
-            if (darkTheme) +WtTexts.wtH3ThemeDark
+    H3({
+        classes(WtTexts.wtH3)
+        if (darkTheme) {
+            classes(WtTexts.wtH3ThemeDark)
         }
     }) {
         Text(title)
@@ -43,19 +43,15 @@ fun Card(
     wtExtraStyleClasses: List<String> = listOf(WtCols.wtCol6, WtCols.wtColMd6, WtCols.wtColSm12),
     content: @Composable () -> Unit
 ) {
-    Div(attrs = {
-        classes {
-            +WtCards.wtCard
-            +WtOffsets.wtTopOffset24
-            wtExtraStyleClasses.forEach { +it }
-            +if (darkTheme) WtCards.wtCardThemeDark else WtCards.wtCardThemeLight
-        }
+    Div({
+        classes(WtCards.wtCard, WtOffsets.wtTopOffset24, *wtExtraStyleClasses.toTypedArray())
+        classes(if (darkTheme) WtCards.wtCardThemeDark else WtCards.wtCardThemeLight)
     }) {
-        Div(attrs = {
+        Div({
             classes(WtCards.wtCardSection, WtCards.wtVerticalFlex)
         }) {
 
-            Div(attrs = { classes(WtCards.wtVerticalFlexGrow) }) {
+            Div({ classes(WtCards.wtVerticalFlexGrow) }) {
                 CardTitle(title = title, darkTheme = darkTheme)
                 content()
             }

examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt

@@ -11,45 +11,43 @@ import com.sample.style.WtSections
 
 @Composable
 fun Layout(content: @Composable () -> Unit) {
-    Div(
-        style = {
+    Div({
+        style {
             display(DisplayStyle.Flex)
             flexDirection(FlexDirection.Column)
             height(100.percent)
             margin(0.px)
             property("box-sizing", StylePropertyValue("border-box"))
         }
-    ) {
+    }) {
         content()
     }
 }
 
 @Composable
 fun MainContentLayout(content: @Composable () -> Unit) {
-    Main(
-        style = {
+    Main({
+        style {
             property("flex", value("1 0 auto"))
             property("box-sizing", value("border-box"))
         }
-    ) {
+    }) {
         content()
     }
 }
 
 @Composable
 fun ContainerInSection(sectionThemeStyleClass: String? = null, content: @Composable () -> Unit) {
-    Section(attrs = {
+    Section({
         if (sectionThemeStyleClass != null) {
             classes(WtSections.wtSection, sectionThemeStyleClass)
         } else {
             classes(WtSections.wtSection)
         }
     }) {
-        Div(
-            attrs = {
-                classes(WtContainer.wtContainer, WtOffsets.wtTopOffset96)
-            }
-        ) {
+        Div({
+            classes(WtContainer.wtContainer, WtOffsets.wtTopOffset96)
+        }) {
             content()
         }
     }

examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt

@@ -85,8 +85,10 @@ private fun CardWithList(card: CardWithListPresentation) {
             classes(WtTexts.wtText2)
         }) {
             card.list.forEachIndexed { ix, it ->
-                Li(style = {
-                    property("padding-top", value(24.px))
+                Li({
+                    style {
+                        property("padding-top", value(24.px))
+                    }
                 }) { Text(it) }
             }
         }

examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt

@@ -28,7 +28,7 @@ private val SimpleCounterSnippet = CodeSnippetData(
                 }) {
                     Text("-")
                 }
-                Span(style = { padding(15.px) }) { /* we use inline style here */
+                Span(attrs = { style { padding(15.px) }}) { /* we use inline style here */
                     Text("${"$"}{count.value}")
                 }
                 Button(attrs = {
@@ -198,18 +198,21 @@ private var selectedSnippetIx: Int by mutableStateOf(0)
 @Composable
 fun CodeSamples() {
     ContainerInSection {
-        Div(attrs = { classes(WtRows.wtRow) }, style = {
-            justifyContent(JustifyContent.SpaceBetween)
+        Div({
+            classes(WtRows.wtRow)
+            style {
+                justifyContent(JustifyContent.SpaceBetween)
+            }
         }) {
-            Div(attrs = { classes(WtCols.wtCol6, WtCols.wtColMd4, WtCols.wtColSm12) }) {
-                H1(attrs = {
+            Div({ classes(WtCols.wtCol6, WtCols.wtColMd4, WtCols.wtColSm12) }) {
+                H1({
                     classes(WtTexts.wtH2)
                 }) {
                     Text("Code samples")
                 }
             }
 
-            Div(attrs = { classes(WtOffsets.wtTopOffsetSm24) }) {
+            Div({ classes(WtOffsets.wtTopOffsetSm24) }) {
                 CodeSampleSwitcher(count = allSnippets.size, current = selectedSnippetIx) {
                     selectedSnippetIx = it
                     currentCodeSnippet = allSnippets[it]
@@ -223,42 +226,42 @@ fun CodeSamples() {
 
 @Composable
 private fun TitledCodeSample(title: String, code: String) {
-    H3(attrs = {
+    H3({
         classes(WtTexts.wtH3, WtOffsets.wtTopOffset48)
     }) {
         Text(title)
     }
 
-    Div(
-        attrs = { classes(WtOffsets.wtTopOffset24) },
-        style = {
+    Div({
+        classes(WtOffsets.wtTopOffset24)
+        style {
             backgroundColor(Color.RGBA(39, 40, 44, 0.05))
             borderRadius(8.px, 8.px, 8.px)
             property("padding", value("12px 16px"))
         }
-    ) {
+    }) {
         FormattedCodeSnippet(code = code)
     }
 }
 
 @Composable
 fun FormattedCodeSnippet(code: String, language: String = "kotlin") {
-    Pre(style = {
-        property("max-height", value(25.em))
-        property("overflow", value("auto"))
-        height(auto)
+    Pre({
+        style {
+            property("max-height", value(25.em))
+            property("overflow", value("auto"))
+            height(auto)
+        }
     }) {
-        Code(
-            attrs = {
-                classes("language-$language", "hljs")
-            },
-            style = {
+        Code({
+            classes("language-$language", "hljs")
+            style {
                 property("font-family", value("'JetBrains Mono', monospace"))
                 property("tab-size", value(4))
                 fontSize(10.pt)
                 backgroundColor(Color("transparent"))
             }
-        ) {
+        }) {
             DomSideEffect(code) {
                 it.setHighlightedCode(code)
             }

examples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt

@@ -10,34 +10,38 @@ import com.sample.style.*
 
 @Composable
 fun PageFooter() {
-    Footer(style = {
-        flexShrink(0)
-        property("box-sizing", value("border-box"))
+    Footer({
+        style {
+            flexShrink(0)
+            property("box-sizing", value("border-box"))
+        }
     }) {
-        Section(attrs = {
+        Section({
             classes(WtSections.wtSectionBgGrayDark)
-        }, style = {
-            property("padding", value("24px 0"))
+            style {
+                property("padding", value("24px 0"))
+            }
         }) {
-            Div(attrs = { classes(WtContainer.wtContainer) }) {
-                Div(attrs = {
+            Div({ classes(WtContainer.wtContainer) }) {
+                Div({
                     classes(WtRows.wtRow, WtRows.wtRowSizeM, WtRows.wtRowSmAlignItemsCenter)
-                }, style = {
-                    justifyContent(JustifyContent.Center)
-                    flexWrap(FlexWrap.Wrap)
+                    style {
+                        justifyContent(JustifyContent.Center)
+                        flexWrap(FlexWrap.Wrap)
+                    }
                 }) {
 
-                    Div(attrs = {
+                    Div({
                         classes(WtCols.wtColInline)
                     }) {
-                        P(attrs = {
+                        P({
                             classes(WtTexts.wtText1, WtTexts.wtText1ThemeDark)
                         }) {
                             Text("Follow us")
                         }
                     }
 
-                    Div(attrs = {
+                    Div({
                         classes(WtCols.wtColInline)
                     }) {
                         getSocialLinks().forEach { SocialIconLink(it) }
@@ -52,20 +56,21 @@ fun PageFooter() {
 
 @Composable
 private fun CopyrightInFooter() {
-    Div(attrs = {
+    Div({
         classes(WtRows.wtRow, WtRows.wtRowSizeM, WtRows.wtRowSmAlignItemsCenter, WtOffsets.wtTopOffset48)
-    }, style = {
-        justifyContent(JustifyContent.SpaceEvenly)
-        flexWrap(FlexWrap.Wrap)
-        property("padding", value("0px 12px"))
+        style {
+            justifyContent(JustifyContent.SpaceEvenly)
+            flexWrap(FlexWrap.Wrap)
+            property("padding", value("0px 12px"))
+        }
     }) {
-        Span(attrs = {
+        Span({
             classes(WtTexts.wtText3, WtTexts.wtTextPale)
         }) {
             Text("Copyright © 2000-2021  JetBrains s.r.o.")
         }
 
-        Span(attrs = {
+        Span({
             classes(WtTexts.wtText3, WtTexts.wtTextPale)
         }) {
             Text("Developed with drive and IntelliJ IDEA")
@@ -78,9 +83,7 @@ private fun SocialIconLink(link: SocialLink) {
     A(attrs = {
         classes(WtTexts.wtSocialButtonItem)
         target(ATarget.Blank)
-    }, href = link.url, style = {
-
-    }) {
+    }, href = link.url) {
         Img(src = link.iconSvg) {}
     }
 }

examples/web_landing/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt

@@ -79,8 +79,9 @@ fun GetStarted() {
             }) {
                 P(attrs = {
                     classes(WtTexts.wtText1)
-                }, style = {
-                    color(Color("#fff"))
+                    style  {
+                        color(Color("#fff"))
+                    }
                 }) {
                     Text("Ready for your next adventure? Learn how to build reactive user interfaces with Compose for Web.")
                 }

examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt

@@ -13,12 +13,9 @@ fun Header() {
     Section(attrs = {
         classes(WtSections.wtSectionBgGrayDark)
     }) {
-        Div(attrs = { classes(WtContainer.wtContainer) }) {
-            Div(attrs = {
+        Div({ classes(WtContainer.wtContainer) }) {
+            Div({
                 classes(WtRows.wtRow, WtRows.wtRowSizeM)
-            }, style = {
-                alignItems(AlignItems.Center)
-                justifyContent(JustifyContent.SpaceBetween)
             }) {
                 Logo()
                 // TODO: support i18n
@@ -51,13 +48,11 @@ private fun LanguageButton() {
         Button(attrs = {
             classes(WtTexts.wtButton, WtTexts.wtLangButton)
             onClick { window.alert("Oops! This feature is yet to be implemented") }
-        }, style = {
-            property("cursor", value("pointer"))
         }) {
-            Img(src = "ic_lang.svg", style = {
+            Img(src = "ic_lang.svg", attrs = { style {
                 property("padding-left", value(8.px))
                 property("padding-right", value(8.px))
-            }) {}
+            }}) {}
             Text("English")
         }
     }

examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt

@@ -14,19 +14,20 @@ import org.w3c.dom.HTMLElement
 @Composable
 fun Intro() {
     ContainerInSection {
-        Div(attrs = {
+        Div({
             classes(WtRows.wtRow, WtRows.wtRowSizeM, WtRows.wtRowSmAlignItemsCenter)
         }) {
 
-            Div(attrs = {
+            Div({
                 classes(WtCols.wtCol2, WtCols.wtColMd3)
-            }, style = {
-                alignSelf(AlignSelf.Start)
+                style {
+                    alignSelf(AlignSelf.Start)
+                }
             }) {
                 Img(src = "i1.svg", attrs = { classes(AppStylesheet.composeLogo) }) {}
             }
 
-            Div(attrs = {
+            Div({
                 classes(
                     WtCols.wtCol10,
                     WtCols.wtColMd8,
@@ -36,10 +37,13 @@ fun Intro() {
             }) {
                 H1(attrs = { classes(WtTexts.wtHero) }) {
                     Text("Compose for ")
-                    Span(style = {
-                        display(DisplayStyle.InlineBlock)
-                        property("white-space", value("nowrap"))
-                    }, attrs = { classes(WtTexts.wtHero) }) {
+                    Span({
+                        classes(WtTexts.wtHero)
+                        style {
+                            display(DisplayStyle.InlineBlock)
+                            property("white-space", value("nowrap"))
+                        }
+                    }) {
                         Text("Web")
 
                         Span(attrs = { classes(AppStylesheet.composeTitleTag) }) {
@@ -47,7 +51,7 @@ fun Intro() {
                         }
                     }
                 }
-                Div(attrs = {
+                Div({
                     classes(WtDisplay.wtDisplayMdNone)
                 }) {
                     IntroAboutComposeWeb()
@@ -66,14 +70,14 @@ fun Intro() {
 
 @Composable
 private fun IntroAboutComposeWeb() {
-    Div(attrs = {
+    Div({
         classes(WtRows.wtRow, WtRows.wtRowSizeM)
     }) {
 
-        Div(attrs = {
+        Div({
             classes(WtCols.wtCol9, WtCols.wtColMd9, WtCols.wtColSm12)
         }) {
-            P(attrs = { classes(WtTexts.wtSubtitle2, WtOffsets.wtTopOffset24) }) {
+            P({ classes(WtTexts.wtSubtitle2, WtOffsets.wtTopOffset24) }) {
                 Text("Reactive web UIs for Kotlin, based on Google's ")
 
                 A(href = "https://developer.android.com/jetpack/compose", attrs = {
@@ -86,15 +90,15 @@ private fun IntroAboutComposeWeb() {
                 Text(" and brought to you by JetBrains")
             }
 
-            P(attrs = {
+            P({
                 classes(WtTexts.wtText1, WtOffsets.wtTopOffset24)
             }) {
-                Text(
-                    "Compose for Web simplifies and accelerates UI development for web applications, " +
-                            "and aims to enable UI code sharing between web, desktop, and Android applications " +
-                            "in the future. Currently in technology preview."
-                )
-            }
+            Text(
+                "Compose for Web simplifies and accelerates UI development for web applications, " +
+                        "and aims to enable UI code sharing between web, desktop, and Android applications " +
+                        "in the future. Currently in technology preview."
+            )
+        }
 
             ComposeWebStatusMessage()
 
@@ -115,14 +119,18 @@ private fun IntroAboutComposeWeb() {
 
 @Composable
 private fun IntroCodeSample() {
-    Div(style = {
-        marginTop(24.px)
-        backgroundColor(Color.RGBA(39, 40, 44, 0.05))
-        borderRadius(8.px)
-        property("font-family", value("'JetBrains Mono', monospace"))
+    Div({
+        style {
+            marginTop(24.px)
+            backgroundColor(Color.RGBA(39, 40, 44, 0.05))
+            borderRadius(8.px)
+            property("font-family", value("'JetBrains Mono', monospace"))
+        }
     }) {
-        Div(style = {
-            property("padding", value("12px 16px"))
+        Div({
+            style {
+                property("padding", value("12px 16px"))
+            }
         }) {
             FormattedCodeSnippet(
                 code = """
@@ -138,10 +146,12 @@ private fun IntroCodeSample() {
             )
         }
 
-        Hr(style = {
-            height(1.px)
-            border(width = 0.px)
-            backgroundColor(Color.RGBA(39, 40, 44, 0.15))
+        Hr({
+            style {
+                height(1.px)
+                border(width = 0.px)
+                backgroundColor(Color.RGBA(39, 40, 44, 0.15))
+            }
         })
 
         IntroCodeSampleResult()
@@ -150,24 +160,26 @@ private fun IntroCodeSample() {
 
 @Composable
 private fun IntroCodeSampleResult() {
-    Div(style = {
-        property("padding", value("12px 16px"))
-        display(DisplayStyle.Flex)
-        flexDirection(FlexDirection.Row)
-        alignItems(AlignItems.Center)
+    Div({
+        style {
+            property("padding", value("12px 16px"))
+            display(DisplayStyle.Flex)
+            flexDirection(FlexDirection.Row)
+            alignItems(AlignItems.Center)
+        }
     }) {
-        Span(
-            attrs = { classes(WtTexts.wtText2) },
-            style = {
+        Span({
+            classes(WtTexts.wtText2)
+            style {
                 property("margin-right", value(8.px))
             }
-        ) {
+        }) {
             Text("Result:")
         }
 
         fun greet() = listOf("Hello", "Hallo", "Hola", "Servus").random()
 
-        Div(attrs = {
+        Div({
             id("greetingContainer")
         }) {
             var greeting by remember { mutableStateOf(greet()) }
@@ -180,22 +192,24 @@ private fun IntroCodeSampleResult() {
 
 @Composable
 private fun ComposeWebStatusMessage() {
-    Div(attrs = {
+    Div({
         classes(WtRows.wtRow, WtRows.wtRowSizeXs, WtOffsets.wtTopOffset24)
     }) {
-        Div(attrs = {
+        Div({
             classes(WtCols.wtColInline)
         }) {
-            Img(src = "ic_info.svg", style = {
-                width(24.px)
-                height(24.px)
+            Img(src = "ic_info.svg", attrs = {
+                style {
+                    width(24.px)
+                    height(24.px)
+                }
             }) {}
         }
 
-        Div(attrs = {
+        Div({
             classes(WtCols.wtColAutoFill)
         }) {
-            P(attrs = {
+            P({
                 classes(WtTexts.wtText3)
             }) {
                 Text(
@@ -211,13 +225,11 @@ private fun ComposeWebStatusMessage() {
 
 @Composable
 inline fun Hr(
-    crossinline attrs: (AttrsBuilder<Tag.Div>.() -> Unit) = {},
-    crossinline style: (StyleBuilder.() -> Unit) = {},
+    crossinline attrs: (AttrsBuilder<Tag.Div>.() -> Unit) = {}
 ) {
     TagElement<Tag.Div, HTMLElement>(
         tagName = "hr",
         applyAttrs = attrs,
-        applyStyle = style,
         content = { }
     )
 }

web/gradle.properties

@@ -1,3 +1,3 @@
 COMPOSE_CORE_VERSION=0.0.12-SNAPSHOT
 COMPOSE_WEB_VERSION=0.0.12-SNAPSHOT
-COMPOSE_BUILD_WITH_EXAMPLES=false
+COMPOSE_WEB_BUILD_WITH_EXAMPLES=false

web/settings.gradle.kts

@@ -37,4 +37,5 @@ if (extra["COMPOSE_WEB_BUILD_WITH_EXAMPLES"]!!.toString().toBoolean() == true) {
     module(":examples:falling_balls_with_web", "../examples/falling_balls_with_web")
     module(":examples:web_landing", "../examples/web_landing")
     module(":examples:web-with-react", "../examples/web-with-react")
+    module(":examples:web-getting-started", "../examples/web-getting-started")
 }