diff --git a/web/benchmark-core/build.gradle.kts b/web/benchmark-core/build.gradle.kts index e714c1067a..a24d72c0c6 100644 --- a/web/benchmark-core/build.gradle.kts +++ b/web/benchmark-core/build.gradle.kts @@ -41,15 +41,6 @@ kotlin { } } -val printBundleSize by tasks.registering { - dependsOn(tasks.named("jsBrowserDistribution")) - doLast { - val jsFile = buildDir.resolve("distributions/web-benchmark-core.js") - val size = jsFile.length() - println("##teamcity[buildStatisticValue key='landingPageBundleSize' value='$size']") - } -} - val printBenchmarkResults by tasks.registering { doLast { val report = buildDir.resolve("reports/tests/jsTest/classes/BenchmarkTests.html").readText() @@ -78,4 +69,3 @@ val printBenchmarkResults by tasks.registering { } tasks.named("jsTest") { finalizedBy(printBenchmarkResults) } -tasks.named("build") { finalizedBy(printBundleSize) } \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/HighlightJs.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/HighlightJs.kt deleted file mode 100644 index 9b03dc49ac..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/HighlightJs.kt +++ /dev/null @@ -1,12 +0,0 @@ -package com.sample - -import org.w3c.dom.HTMLElement - -//@JsName("hljs") -//@JsModule("highlight.js") -//@JsNonModule -class HighlightJs { - companion object { - fun highlightElement(block: HTMLElement) {} - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/Main.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/Main.kt deleted file mode 100644 index 6eba6af0e4..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/Main.kt +++ /dev/null @@ -1,31 +0,0 @@ -package com.sample - -import androidx.compose.runtime.Composable -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.* -import com.sample.components.* -import com.sample.content.* -import com.sample.style.AppStylesheet -import org.w3c.dom.HTMLElement - - -fun main() { - renderComposable(rootElementId = "root") { - Style(AppStylesheet) - - Layout { - Header() - MainContentLayout { - Intro() - ComposeWebLibraries() - GetStarted() - CodeSamples() - JoinUs() - } - PageFooter() - } - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/components/Card.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/components/Card.kt deleted file mode 100644 index eabc22b0fa..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/components/Card.kt +++ /dev/null @@ -1,80 +0,0 @@ -package com.sample.components - -import androidx.compose.runtime.Composable -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.* -import com.sample.style.* - - -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) classes(WtTexts.wtH3ThemeDark) - }) { - Text(title) - } -} - -@Composable -private fun CardLink(link: LinkOnCard) { - A( - attrs = { - classes(WtTexts.wtLink, WtOffsets.wtTopOffset24) - target(ATarget.Blank) - }, - href = link.linkUrl - ) { - Text(link.linkText) - } -} - -@Composable -fun Card( - title: String, - links: List, - darkTheme: Boolean = false, - wtExtraStyleClasses: List = listOf(WtCols.wtCol6, WtCols.wtColMd6, WtCols.wtColSm12), - content: @Composable () -> Unit -) { - Div(attrs = { - classes(WtCards.wtCard, WtOffsets.wtTopOffset24) - classes(*wtExtraStyleClasses.toTypedArray()) - classes(if (darkTheme) WtCards.wtCardThemeDark else WtCards.wtCardThemeLight) - }) { - Div(attrs = { - classes(WtCards.wtCardSection, WtCards.wtVerticalFlex) - }) { - - Div(attrs = { classes(WtCards.wtVerticalFlexGrow) }) { - CardTitle(title = title, darkTheme = darkTheme) - content() - } - - links.forEach { - CardLink(it) - } - } - } -} - -@Composable -fun CardDark( - title: String, - links: List, - wtExtraStyleClasses: List = listOf(WtCols.wtCol6, WtCols.wtColMd6, WtCols.wtColSm12), - content: @Composable () -> Unit -) { - Card( - title = title, - links = links, - darkTheme = true, - wtExtraStyleClasses = wtExtraStyleClasses, - content = content - ) -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/components/Layout.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/components/Layout.kt deleted file mode 100644 index 79475a7209..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/components/Layout.kt +++ /dev/null @@ -1,58 +0,0 @@ -package com.sample.components - -import androidx.compose.runtime.Composable -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.dom.* -import com.sample.style.WtContainer -import com.sample.style.WtOffsets -import com.sample.style.WtSections - -@Composable -fun Layout(content: @Composable () -> Unit) { - Div( - attrs = { - style { - display(DisplayStyle.Flex) - flexDirection(FlexDirection.Column) - height(100.percent) - margin(0.px) - property("box-sizing", "border-box") - } - } - ) { - content() - } -} - -@Composable -fun MainContentLayout(content: @Composable () -> Unit) { - Main( - attrs = { - style { - property("flex", "1 0 auto") - property("box-sizing", "border-box") - } - } - ) { - content() - } -} - -@Composable -fun ContainerInSection(sectionThemeStyleClass: String? = null, content: @Composable () -> Unit) { - Section(attrs = { - if (sectionThemeStyleClass != null) { - classes(WtSections.wtSection, sectionThemeStyleClass) - } else { - classes(WtSections.wtSection) - } - }) { - Div( - attrs = { - classes(WtContainer.wtContainer, WtOffsets.wtTopOffset96) - } - ) { - content() - } - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt deleted file mode 100644 index 4d96233552..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt +++ /dev/null @@ -1,96 +0,0 @@ -package com.sample.content - -import androidx.compose.runtime.Composable -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.* -import com.sample.components.Card -import com.sample.components.ContainerInSection -import com.sample.components.LinkOnCard -import com.sample.style.* - -data class CardWithListPresentation( - val title: String, - val list: List, - val links: List = emptyList() -) - -private fun createAboutComposeWebCards(): List { - return listOf( - CardWithListPresentation( - title = "Composable DOM API", - list = listOf( - "Express your design and layout in terms of DOM elements and HTML tags", - "Use a type-safe HTML DSL to build your UI representation", - "Get full control over the look and feel of your application by creating stylesheets with a typesafe CSS DSL", - "Integrate with other JavaScript libraries via DOM subtrees" - ) - ), - CardWithListPresentation( - title = "Multiplatform Widgets With Web Support", - list = listOf( - "Use and build Compose widgets that work on Android, Desktop, and Web by utilizing Kotlin's expect-actual mechanisms to provide platform-specific implementations", - "Experiment with a set of layout primitives and APIs that mimic the features you already know from Compose for Desktop and Android" - ) - ) - ) -} - -@Composable -fun ComposeWebLibraries() { - ContainerInSection(WtSections.wtSectionBgGrayLight) { - H2(attrs = { classes(WtTexts.wtH2) }) { - Text("Building user interfaces with Compose for Web") - } - - Div(attrs = { - classes(WtRows.wtRow, WtRows.wtRowSizeM) - }) { - Div(attrs = { - classes(WtCols.wtCol6, WtCols.wtColMd6, WtCols.wtColSm12, WtOffsets.wtTopOffset24) - }) { - P(attrs = { - classes(WtTexts.wtText1) - }) { - Text("Compose for Web allows you to build reactive user interfaces for the web in Kotlin, using the concepts and APIs of Jetpack Compose to express the state, behavior, and logic of your application.") - } - } - - Div(attrs = { - classes(WtCols.wtCol6, WtCols.wtColMd6, WtCols.wtColSm12, WtOffsets.wtTopOffset24) - }) { - P(attrs = { - classes(WtTexts.wtText1) - }) { - Text("Compose for Web provides multiple ways of declaring user interfaces in Kotlin code, allowing you to have full control over your website layout with a declarative DOM API, or use versions of the widgets you already know from Jetpack Compose for Desktop and Android.\n") - } - } - } - - Div(attrs = { - classes(WtRows.wtRow, WtRows.wtRowSizeM, WtOffsets.wtTopOffset48) - }) { - createAboutComposeWebCards().forEach { CardWithList(it) } - } - } -} - -@Composable -private fun CardWithList(card: CardWithListPresentation) { - Card( - title = card.title, - links = card.links - ) { - Ul(attrs = { - classes(WtTexts.wtText2) - }) { - card.list.forEachIndexed { ix, it -> - Li(attrs = { - style { property("padding-top", 24.px) } - }) { Text(it) } - } - } - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt deleted file mode 100644 index bd829264f9..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt +++ /dev/null @@ -1,83 +0,0 @@ -package com.sample.content - -import androidx.compose.runtime.Composable -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import com.sample.style.AppStylesheet - -private object SwitcherVariables { - val labelWidth by variable() - val labelPadding by variable() -} - -object SwitcherStylesheet : StyleSheet(AppStylesheet) { - - val boxed by style { - - media(mediaMaxWidth(640.px)) { - self style { - SwitcherVariables.labelWidth(48.px) - SwitcherVariables.labelPadding(5.px) - } - } - - descendant(self, CSSSelector.Type("label")) style { - display(DisplayStyle.InlineBlock) - property("width", SwitcherVariables.labelWidth.value(56.px)) - property("padding", SwitcherVariables.labelPadding.value(10.px)) - property("transition", "all 0.3s") - property("text-align", "center") - property("box-sizing", "border-box") - - border { - style(LineStyle.Solid) - width(3.px) - color(Color.transparent) - borderRadius(20.px, 20.px, 20.px) - } - color(Color("#aaa")) - } - - border { - style(LineStyle.Solid) - width(1.px) - color(Color("#aaa")) - padding(0.px) - borderRadius(22.px, 22.px, 22.px) - } - - descendant(self, selector("input[type=\"radio\"]")) style { - display(DisplayStyle.None) - } - - descendant(self, selector("input[type=\"radio\"]:checked + label")) style { - border { - style(LineStyle.Solid) - width(3.px) - color(Color("#167dff")) - borderRadius(20.px, 20.px, 20.px) - } - color(Color("#000")) - } - } -} - -@Composable -fun CodeSampleSwitcher(count: Int, current: Int, onSelect: (Int) -> Unit) { - Form(attrs = { - classes(SwitcherStylesheet.boxed) - }) { - repeat(count) { ix -> - Input(type = InputType.Radio, attrs = { - name("code-snippet") - value("snippet$ix") - id("snippet$ix") - if (current == ix) checked() - onInput { onSelect(ix) } - }) - Label(forId = "snippet$ix") { Text("${ix + 1}") } - } - } -} diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt deleted file mode 100644 index 57c109b253..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt +++ /dev/null @@ -1,280 +0,0 @@ -package com.sample.content - -import androidx.compose.runtime.Composable -import androidx.compose.runtime.getValue -import androidx.compose.runtime.setValue -import androidx.compose.runtime.mutableStateOf -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.dom.* -import com.sample.HighlightJs -import com.sample.components.ContainerInSection -import com.sample.style.* -import org.jetbrains.compose.web.css.keywords.auto -import org.w3c.dom.HTMLElement - -private fun HTMLElement.setHighlightedCode(code: String) { - innerText = code - HighlightJs.highlightElement(this) -} - -private val SimpleCounterSnippet = CodeSnippetData( - title = "Simple Counter using Composable DOM", - source = """ - fun main() { - val count = mutableStateOf(0) - - renderComposable(rootElementId = "root") { - Button(attrs = { - onClick { count.value = count.value - 1 } - }) { - Text("-") - } - Span(style = { padding(15.px) }) { /* we use inline style here */ - Text("${"$"}{count.value}") - } - Button(attrs = { - onClick { count.value = count.value + 1 } - }) { - Text("+") - } - } - } - """.trimIndent() -) - -private val DeclareAndUseStylesheet = CodeSnippetData( - title = "Declare and use a stylesheet", - source = """ - object MyStyleSheet : StyleSheet() { - val container by style { /* define a class `container` */ - border(1.px, LineStyle.Solid, rgb(255, 0, 0)) - } - } - - @Composable - fun MyComponent() { - Div(attrs = { - classes(MyStyleSheet.container) /* use `container` class */ - }) { - Text("Hello world!") - } - } - - fun main() { - renderComposable(rootElementId = "root") { - Style(MyStyleSheet) /* mount the stylesheet */ - MyComponent() - } - } - """.trimIndent() -) - -private val DeclareAndUseCssVariable = CodeSnippetData( - title = "Declare and use CSS variables", - source = """ - object MyVariables : CSSVariables { - val contentBackgroundColor by variable() /* declare a variable */ - } - - object MyStyleSheet: StyleSheet() { - val container by style { - MyVariables.contentBackgroundColor(Color("blue")) /* set its value */ - } - val content by style { - backgroundColor(MyVariables.contentBackgroundColor.value()) /* use it */ - } - } - - @Composable - fun MyComponent() { - Div(attrs = { - classes(MyStyleSheet.container) - }) { - Span(attrs = { - classes(MyStyleSheet.content) - }) { - Text("Hello world!") - } - } - } - """.trimIndent() -) - -private val HoverSelectorAndMedia = CodeSnippetData( - title = "Hover selector and media query examples", - source = """ - object MyStyleSheet: StyleSheet() { - val container by style { - - backgroundColor(Color("blue")) - - padding(20.px) - - hover(self) style { /* `self` is a reference to the class */ - backgroundColor(Color("red")) - } - - media(maxWidth(500.px)) { - self style { - padding(10.px) - } - } - } - } - """.trimIndent() -) - -private val DefineCssClassInComponent = CodeSnippetData( - title = "Define a CSS class in a component", - source = """ - object MyStyleSheet: StyleSheet() {} - - @Composable - fun MyComponent() { - Div(attrs = { - /* the class name will be generated at runtime */ - classes(MyStyleSheet.css { - - backgroundColor(Color("blue")) - - self + ":hover" style { /* this is an example of a raw selector */ - backgroundColor(Color("red")) - } - }) - }) { - Text("Hello world!") - } - } - """.trimIndent() -) - -private val LayoutsSample = CodeSnippetData( - title = "Counter for Web and Desktop", - source = """ - /* Shared code in commonMain - App.kt (No direct control over DOM or CSS here) */ - - private val counter = mutableStateOf(0) - - @Composable - fun App() { - Row { - Button(onClick = { counter.value = counter.value - 1 }) { - Text("-") - } - - Text("${"$"}{counter.value}", modifier = Modifier.padding(16.dp)) - - Button(onClick = { counter.value = counter.value + 1 }) { - Text("+") - } - } - } - - /* Desktop specific code in desktopMain: */ - - fun main() = Window(title = "Demo", size = IntSize(800, 800)) { - App() - } - - /* Web specific code in jsMain: */ - - fun main() = renderComposable(rootElementId = "root") { - App() - } - """.trimIndent() -) - -private val allSnippets = arrayOf( - SimpleCounterSnippet, - DeclareAndUseStylesheet, - DeclareAndUseCssVariable, - HoverSelectorAndMedia, - DefineCssClassInComponent, - LayoutsSample -) - -private var currentCodeSnippet: CodeSnippetData by mutableStateOf(allSnippets[0]) -private var selectedSnippetIx: Int by mutableStateOf(0) - -@Composable -fun CodeSamples() { - ContainerInSection { - Div(attrs = { - classes(WtRows.wtRow) - style { - justifyContent(JustifyContent.SpaceBetween) - } - }) { - Div(attrs = { classes(WtCols.wtCol6, WtCols.wtColMd4, WtCols.wtColSm12) }) { - H1(attrs = { - classes(WtTexts.wtH2) - }) { - Text("Code samples") - } - } - - Div(attrs = { classes(WtOffsets.wtTopOffsetSm24) }) { - CodeSampleSwitcher(count = allSnippets.size, current = selectedSnippetIx) { - selectedSnippetIx = it - currentCodeSnippet = allSnippets[it] - } - } - } - - TitledCodeSample(title = currentCodeSnippet.title, code = currentCodeSnippet.source) - } -} - -@Composable -private fun TitledCodeSample(title: String, code: String) { - H3(attrs = { - classes(WtTexts.wtH3, WtOffsets.wtTopOffset48) - }) { - Text(title) - } - - Div( - attrs = { - classes(WtOffsets.wtTopOffset24) - style { - backgroundColor(rgba(39, 40, 44, 0.05)) - borderRadius(8.px, 8.px, 8.px) - property("padding", "12px 16px") - } - } - ) { - FormattedCodeSnippet(code = code) - } -} - -@Composable -fun FormattedCodeSnippet(code: String, language: String = "kotlin") { - Pre(attrs = { - style { - property("max-height", 25.em) - property("overflow", "auto") - height(auto) - } - }) { - Code( - attrs = { - classes("language-$language", "hljs") - style { - property("font-family", "'JetBrains Mono', monospace") - property("tab-size", 4) - fontSize(10.pt) - backgroundColor(Color.transparent) - } - } - ) { - DomSideEffect(code) { - it.setHighlightedCode(code) - } - } - } -} - -private data class CodeSnippetData( - val title: String, - val source: String -) \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Footer.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Footer.kt deleted file mode 100644 index 30c37f0b23..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Footer.kt +++ /dev/null @@ -1,111 +0,0 @@ -package com.sample.content - -import androidx.compose.runtime.Composable -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import com.sample.style.* - - -@Composable -fun PageFooter() { - Footer(attrs = { - style { - flexShrink(0) - property("box-sizing", "border-box") - } - }) { - Section(attrs = { - classes(WtSections.wtSectionBgGrayDark) - style { - property("padding", "24px 0") - } - }) { - Div(attrs = { classes(WtContainer.wtContainer) }) { - Div(attrs = { - classes(WtRows.wtRow, WtRows.wtRowSizeM, WtRows.wtRowSmAlignItemsCenter) - style { - justifyContent(JustifyContent.Center) - flexWrap(FlexWrap.Wrap) - } - }) { - Div(attrs = { - classes(WtCols.wtColInline) - }) { - P(attrs = { - classes(WtTexts.wtText1, WtTexts.wtText1ThemeDark) - }) { - Text("Follow us") - } - } - - Div(attrs = { - classes(WtCols.wtColInline) - }) { - getSocialLinks().forEach { SocialIconLink(it) } - } - } - - CopyrightInFooter() - } - } - } -} - -@Composable -private fun CopyrightInFooter() { - Div(attrs = { - classes(WtRows.wtRow, WtRows.wtRowSizeM, WtRows.wtRowSmAlignItemsCenter, WtOffsets.wtTopOffset48) - style { - justifyContent(JustifyContent.SpaceEvenly) - flexWrap(FlexWrap.Wrap) - property("padding", "0px 12px") - } - }) { - Span(attrs = { - classes(WtTexts.wtText3, WtTexts.wtTextPale) - }) { - Text("Copyright © 2000-2021 JetBrains s.r.o.") - } - - Span(attrs = { - classes(WtTexts.wtText3, WtTexts.wtTextPale) - }) { - Text("Developed with drive and IntelliJ IDEA") - } - } -} - -@Composable -private fun SocialIconLink(link: SocialLink) { - A(attrs = { - classes(WtTexts.wtSocialButtonItem) - target(ATarget.Blank) - }, href = link.url) { - Img(src = link.iconSvg) {} - } -} - -private data class SocialLink( - val id: String, - val url: String, - val title: String, - val iconSvg: String -) - -private fun getSocialLinks(): List { - return listOf( - SocialLink("facebook", "https://www.facebook.com/JetBrains", "JetBrains on Facebook", "ic_fb.svg"), - SocialLink("twitter", "https://twitter.com/jetbrains", "JetBrains on Twitter", "ic_twitter.svg"), - SocialLink( - "linkedin", - "https://www.linkedin.com/company/jetbrains", - "JetBrains on Linkedin", - "ic_linkedin.svg" - ), - SocialLink("youtube", "https://www.youtube.com/user/JetBrainsTV", "JetBrains on YouTube", "ic_youtube.svg"), - SocialLink("instagram", "https://www.instagram.com/jetbrains/", "JetBrains on Instagram", "ic_insta.svg"), - SocialLink("blog", "https://blog.jetbrains.com/", "JetBrains blog", "ic_jb_blog.svg"), - SocialLink("rss", "https://blog.jetbrains.com/feed/", "JetBrains RSS Feed", "ic_feed.svg"), - ) -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt deleted file mode 100644 index a515af28ed..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt +++ /dev/null @@ -1,108 +0,0 @@ -package com.sample.content - -import androidx.compose.runtime.Composable -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.* -import com.sample.components.CardDark -import com.sample.components.ContainerInSection -import com.sample.components.LinkOnCard -import com.sample.style.* - -private data class GetStartedCardPresentation( - val title: String, - val content: String, - val links: List -) - -private fun getCards(): List { - return listOf( - GetStartedCardPresentation( - title = "Start tutorial here", - content = "In this tutorial we will see how to create our first web UI application using Compose for Web.", - links = listOf( - LinkOnCard( - linkText = "View tutorial", - linkUrl = "https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Getting_Started" - ) - ) - ), - GetStartedCardPresentation( - title = "Landing page example", - content = "An example of a landing page built using the Composable DOM API and Stylesheet DSL.", - links = listOf( - LinkOnCard( - linkText = "Explore the source code", - linkUrl = "https://github.com/JetBrains/compose-jb/tree/master/examples/web_landing" - ) - ) - ), - GetStartedCardPresentation( - title = "Falling Balls app example", - content = "This example demonstrates the use of multiplatform widgets – sharing user interface code between Compose for Desktop and Web.", - links = listOf( - LinkOnCard( - linkText = "Explore the source code", - linkUrl = "https://github.com/JetBrains/compose-jb/tree/master/examples/falling_balls_with_web" - ), - LinkOnCard( - linkText = "Play", - linkUrl = "https://falling-balls.ui.pages.jetbrains.team/" - ) - ) - ) - ) -} - -@Composable -private fun CardContent(text: String) { - P(attrs = { - classes(WtTexts.wtText2, WtTexts.wtText2ThemeDark, WtOffsets.wtTopOffset24) - }) { - Text(text) - } -} - -@Composable -fun GetStarted() { - ContainerInSection(WtSections.wtSectionBgGrayDark) { - H1(attrs = { - classes(WtTexts.wtH2, WtTexts.wtH2ThemeDark) - }) { - Text("Try out the Compose for Web") - } - - Div(attrs = { - classes(WtRows.wtRowSizeM, WtRows.wtRow, WtOffsets.wtTopOffset24) - }) { - Div(attrs = { - classes(WtCols.wtCol6, WtCols.wtColMd10, WtCols.wtColSm12, WtOffsets.wtTopOffset24) - }) { - P(attrs = { - classes(WtTexts.wtText1) - styleBuilder.color(Color("#fff")) - }) { - Text("Ready for your next adventure? Learn how to build reactive user interfaces with Compose for Web.") - } - } - } - - Div( - attrs = { - classes(WtRows.wtRow, WtRows.wtRowSizeM, WtOffsets.wtTopOffset24) - } - ) { - getCards().forEach { - CardDark( - title = it.title, - links = it.links, - wtExtraStyleClasses = listOf(WtCols.wtCol4, WtCols.wtColMd6, WtCols.wtColSm12) - ) { - CardContent(it.content) - } - } - } - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Header.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Header.kt deleted file mode 100644 index f0f02f1060..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/Header.kt +++ /dev/null @@ -1,67 +0,0 @@ -package com.sample.content - -import androidx.compose.runtime.Composable -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import com.sample.style.* -import kotlinx.browser.window - -@Composable -fun Header() { - Section(attrs = { - classes(WtSections.wtSectionBgGrayDark) - }) { - Div(attrs = { classes(WtContainer.wtContainer) }) { - Div(attrs = { - classes(WtRows.wtRow, WtRows.wtRowSizeM) - style { - alignItems(AlignItems.Center) - justifyContent(JustifyContent.SpaceBetween) - } - }) { - Logo() - // TODO: support i18n - //LanguageButton() - } - } - } -} - -@Composable -private fun Logo() { - Div(attrs = { - classes(WtCols.wtColInline) - }) { - A(attrs = { - target(ATarget.Blank) - }, href = "https://www.jetbrains.com/") { - Div(attrs = { - classes("jetbrains-logo", "_logo-jetbrains-square", "_size-3") - }) {} - } - } -} - -@Composable -private fun LanguageButton() { - Div(attrs = { - classes(WtCols.wtColInline) - }) { - Button(attrs = { - classes(WtTexts.wtButton, WtTexts.wtLangButton) - onClick { window.alert("Oops! This feature is yet to be implemented") } - style { - property("cursor", "pointer") - } - }) { - Img(src = "ic_lang.svg", attrs = { - style { - property("padding-left", 8.px) - property("padding-right", 8.px) - } - }) - Text("English") - } - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/IntroSection.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/IntroSection.kt deleted file mode 100644 index e395ff49ea..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/IntroSection.kt +++ /dev/null @@ -1,221 +0,0 @@ -package com.sample.content - -import androidx.compose.runtime.* -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import com.sample.components.ContainerInSection -import com.sample.style.* -import org.w3c.dom.HTMLElement - -@Composable -fun Intro() { - ContainerInSection { - Div(attrs = { - classes(WtRows.wtRow, WtRows.wtRowSizeM, WtRows.wtRowSmAlignItemsCenter) - }) { - - Div(attrs = { - classes(WtCols.wtCol2, WtCols.wtColMd3) - styleBuilder.alignSelf(AlignSelf.Start) - }) { - Img(src = "i1.svg", attrs = { classes(AppStylesheet.composeLogo) }) - } - - Div(attrs = { - classes( - WtCols.wtCol10, - WtCols.wtColMd8, - WtCols.wtColSm12, - WtOffsets.wtTopOffsetSm12 - ) - }) { - H1(attrs = { classes(WtTexts.wtHero) }) { - Text("Compose for ") - Span(attrs = { - classes(WtTexts.wtHero) - style { - display(DisplayStyle.InlineBlock) - property("white-space", "nowrap") - } - }) { - Text("Web") - - Span(attrs = { classes(AppStylesheet.composeTitleTag) }) { - Text("Technology preview") - } - } - } - Div(attrs = { - classes(WtDisplay.wtDisplayMdNone) - }) { - IntroAboutComposeWeb() - } - } - } - - - Div(attrs = { - classes(WtDisplay.wtDisplayNone, WtDisplay.wtDisplayMdBlock) - }) { - IntroAboutComposeWeb() - } - } -} - -@Composable -private fun IntroAboutComposeWeb() { - Div(attrs = { - classes(WtRows.wtRow, WtRows.wtRowSizeM) - }) { - - Div(attrs = { - classes(WtCols.wtCol9, WtCols.wtColMd9, WtCols.wtColSm12) - }) { - P(attrs = { classes(WtTexts.wtSubtitle2, WtOffsets.wtTopOffset24) }) { - Text("Reactive web UIs for Kotlin, based on Google's ") - - A(href = "https://developer.android.com/jetpack/compose", attrs = { - classes(WtTexts.wtLink) - target(ATarget.Blank) - }) { - Text("modern toolkit") - } - - Text(" and brought to you by JetBrains") - } - - P(attrs = { - 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." - ) - } - - ComposeWebStatusMessage() - - IntroCodeSample() - - A( - attrs = { - classes(WtTexts.wtButton, WtOffsets.wtTopOffset24) - target(ATarget.Blank) - }, - href = "https://github.com/jetbrains/compose-jb" - ) { - Text("Explore on GitHub") - } - } - } -} - -@Composable -private fun IntroCodeSample() { - Div(attrs = { - style { - marginTop(24.px) - backgroundColor(rgba(39, 40, 44, 0.05)) - borderRadius(8.px) - property("font-family", "'JetBrains Mono', monospace") - } - }) { - Div(attrs = { - style { - property("padding", "12px 16px") - } - }) { - FormattedCodeSnippet( - code = """ - fun greet() = listOf("Hello", "Hallo", "Hola", "Servus").random() - - renderComposable("greetingContainer") { - var greeting by remember { mutableStateOf(greet()) } - Button(attrs = { onClick { greeting = greet() } }) { - Text(greeting) - } - } - """.trimIndent() - ) - } - - Hr(attrs = { - style { - height(1.px) - border(width = 0.px) - backgroundColor(rgba(39, 40, 44, 0.15)) - } - }) - - IntroCodeSampleResult() - } -} - -@Composable -private fun IntroCodeSampleResult() { - Div(attrs = { - style { - property("padding", "12px 16px") - display(DisplayStyle.Flex) - flexDirection(FlexDirection.Row) - alignItems(AlignItems.Center) - } - }) { - Span( - attrs = { - classes(WtTexts.wtText2) - style { - property("margin-right", 8.px) - } - }, - ) { - Text("Result:") - } - - fun greet() = listOf("Hello", "Hallo", "Hola", "Servus").random() - - Div(attrs = { - id("greetingContainer") - }) { - var greeting by remember { mutableStateOf(greet()) } - Button(attrs = { onClick { greeting = greet() } }) { - Text(greeting) - } - } - } -} - -@Composable -private fun ComposeWebStatusMessage() { - Div(attrs = { - classes(WtRows.wtRow, WtRows.wtRowSizeXs, WtOffsets.wtTopOffset24) - }) { - Div(attrs = { - classes(WtCols.wtColInline) - }) { - Img(src = "ic_info.svg", attrs = { - style { - width(24.px) - height(24.px) - } - }) - } - - Div(attrs = { - classes(WtCols.wtColAutoFill) - }) { - P(attrs = { - classes(WtTexts.wtText3) - }) { - Text( - "With its current status Technology Preview, Compose for Web " + - "is not production-ready, and should only be used in experiments. " + - "We are hard at work to bring you great learning materials, tutorials, " + - "and documentation, and optimize the performance of Compose for Web in the future!" - ) - } - } - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/JoinUs.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/JoinUs.kt deleted file mode 100644 index f928f1eb6d..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/JoinUs.kt +++ /dev/null @@ -1,73 +0,0 @@ -package com.sample.content - -import androidx.compose.runtime.Composable -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.* -import com.sample.components.ContainerInSection -import com.sample.style.* - -@Composable -fun JoinUs() { - ContainerInSection(WtSections.wtSectionBgGrayLight) { - Div(attrs = { - classes(WtRows.wtRow, WtRows.wtRowSizeM) - }) { - Div(attrs = { - classes(WtCols.wtCol9, WtCols.wtColMd11, WtCols.wtColSm12) - }) { - - P(attrs = { - classes(WtTexts.wtSubtitle2) - }) { - Text("Interested in Compose for other platforms?") - - P { - Text("Have a look at ") - A(href = "https://www.jetbrains.com/lp/compose/", attrs = { - classes(WtTexts.wtLink) - target(ATarget.Blank) - }) { - Text("Compose for Desktop") - } - } - } - - P(attrs = { - classes(WtTexts.wtSubtitle2, WtOffsets.wtTopOffset24) - }) { - Text("Feel free to join the ") - LinkToSlack( - url = "https://kotlinlang.slack.com/archives/C01F2HV7868", - text = "#compose-web" - ) - Text(" channel on Kotlin Slack to discuss Compose for Web, or ") - LinkToSlack( - url = "https://kotlinlang.slack.com/archives/CJLTWPH7S", - text = "#compose" - ) - Text(" for general Compose discussions") - } - } - } - - A(attrs = { - classes(WtTexts.wtButton, WtTexts.wtButtonContrast, WtOffsets.wtTopOffset24) - target(ATarget.Blank) - }, href = "https://surveys.jetbrains.com/s3/kotlin-slack-sign-up") { - Text("Join Kotlin Slack") - } - } -} - -@Composable -private fun LinkToSlack(url: String, text: String) { - A(href = url, attrs = { - target(ATarget.Blank) - classes(WtTexts.wtLink) - }) { - Text(text) - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt deleted file mode 100644 index 3c8e92616a..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt +++ /dev/null @@ -1,94 +0,0 @@ -package com.sample.style - -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.CSSSelector - -object AppCSSVariables { - val wtColorGreyLight by variable() - val wtColorGreyDark by variable() - - val wtOffsetTopUnit by variable() - val wtHorizontalLayoutGutter by variable() - val wtFlowUnit by variable() - - val wtHeroFontSize by variable() - val wtHeroLineHeight by variable() - val wtSubtitle2FontSize by variable() - val wtSubtitle2LineHeight by variable() - val wtH2FontSize by variable() - val wtH2LineHeight by variable() - val wtH3FontSize by variable() - val wtH3LineHeight by variable() - - val wtColCount by variable() -} - - -object AppStylesheet : StyleSheet() { - val composeLogo by style { - maxWidth(100.percent) - } - - val composeTitleTag by style { - property("padding", "5px 12px") - property("letter-spacing", "normal") - property("font-weight", 400) - property("line-height", 24.px) - - position(Position.Relative) - top((-32).px) - marginLeft(8.px) - fontSize(15.px) - backgroundColor(rgba(39, 40, 44, .05)) - color(rgba(39, 40, 44, .7)) - borderRadius(4.px, 4.px, 4.px) - - media(mediaMaxWidth(640.px)) { - self style { - top((-16).px) - } - } - } - - init { - "label, a, button" style { - property( - "font-family", - "system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" - ) - } - - CSSSelector.Universal style { - AppCSSVariables.wtColorGreyLight(Color("#f4f4f4")) - AppCSSVariables.wtColorGreyDark(Color("#323236")) - AppCSSVariables.wtOffsetTopUnit(24.px) - - margin(0.px) - } - - media(mediaMaxWidth(640.px)) { - CSSSelector.Universal style { - AppCSSVariables.wtOffsetTopUnit(16.px) - AppCSSVariables.wtFlowUnit(16.px) - } - } - - CSSSelector.Attribute( - name = "class", - value = "wtCol", - operator = CSSSelector.Attribute.Operator.Contains - ) style { - property("margin-right", AppCSSVariables.wtHorizontalLayoutGutter.value()) - property("margin-left", AppCSSVariables.wtHorizontalLayoutGutter.value()) - - property( - "flex-basis", - "calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)" - ) - maxWidth( - "calc(8.33333%*${AppCSSVariables.wtColCount.value()} - ${AppCSSVariables.wtHorizontalLayoutGutter.value()}*2)" - ) - property("box-sizing", "border-box") - } - } -} diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt deleted file mode 100644 index d23fa4959b..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt +++ /dev/null @@ -1,49 +0,0 @@ -package com.sample.style - -import org.jetbrains.compose.web.css.* - -object WtCards : StyleSheet(AppStylesheet) { - val wtCard by style { - display(DisplayStyle.Flex) - flexDirection(FlexDirection.Column) - border(1.px, LineStyle.Solid) - minHeight(0.px) - property("box-sizing", "border-box") - } - - val wtCardThemeLight by style { - border(color = rgba(39, 40, 44, .2)) - color(Color("#27282c")) - backgroundColor(Color.white) - } - - val wtCardThemeDark by style { - backgroundColor(rgba(255, 255, 255, 0.05)) - color(rgba(255, 255, 255, 0.6)) - border(0.px) - } - - val wtCardSection by style { - position(Position.Relative) - property("overflow", "auto") - property("flex", "1 1 auto") - minHeight(0.px) - property("box-sizing", "border-box") - property("padding", "24px 32px") - - media(mediaMaxWidth(640.px)) { - self style { padding(16.px) } - } - } - - val wtVerticalFlex by style { - display(DisplayStyle.Flex) - flexDirection(FlexDirection.Column) - alignItems(AlignItems.FlexStart) - } - - val wtVerticalFlexGrow by style { - flexGrow(1) - maxWidth(100.percent) - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt deleted file mode 100644 index 36f4b4de5d..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt +++ /dev/null @@ -1,128 +0,0 @@ -package com.sample.style - -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.CSSSelector - -fun GenericStyleSheetBuilder.mediaMaxWidth( - value: CSSUnitValue, - cssSelector: CSSSelector, - rulesBuild: TBuilder.() -> Unit -) { - media(mediaMaxWidth(value)) { - cssSelector style rulesBuild - } -} - -fun CSSBuilder.forMaxWidth(value: CSSUnitValue, builder: CSSBuilder.() -> Unit) { - mediaMaxWidth(value, self, builder) -} - -object WtCols : StyleSheet(AppStylesheet) { - val wtCol2 by style { - AppCSSVariables.wtColCount(2) - } - - val wtCol3 by style { - AppCSSVariables.wtColCount(3) - } - - val wtCol4 by style { - AppCSSVariables.wtColCount(4) - } - - val wtCol5 by style { - AppCSSVariables.wtColCount(5) - } - - val wtCol6 by style { - AppCSSVariables.wtColCount(6) - } - - val wtCol9 by style { - AppCSSVariables.wtColCount(9) - } - - val wtCol10 by style { - AppCSSVariables.wtColCount(10) - } - - val wtColMd3 by style { - forMaxWidth(1000.px) { - AppCSSVariables.wtColCount(3) - } - } - - val wtColMd4 by style { - forMaxWidth(1000.px) { - AppCSSVariables.wtColCount(4) - } - } - - val wtColMd8 by style { - forMaxWidth(1000.px) { - AppCSSVariables.wtColCount(8) - } - } - - val wtColMd9 by style { - forMaxWidth(1000.px) { - AppCSSVariables.wtColCount(9) - } - } - - val wtColMd10 by style { - forMaxWidth(1000.px) { - AppCSSVariables.wtColCount(10) - } - } - - val wtColMd11 by style { - forMaxWidth(1000.px) { - AppCSSVariables.wtColCount(11) - } - } - - val wtColMd6 by style { - forMaxWidth(1000.px) { - AppCSSVariables.wtColCount(6) - } - } - - val wtColMd12 by style { - forMaxWidth(1000.px) { - AppCSSVariables.wtColCount(12) - } - } - - val wtColSm12 by style { - forMaxWidth(640.px) { - AppCSSVariables.wtColCount(12) - } - } - - val wtColLg6 by style { - forMaxWidth(1276.px) { - AppCSSVariables.wtColCount(6) - } - } - - val wtColSmAutoFill by style { - forMaxWidth(640.px) { - AppCSSVariables.wtColCount(0) - flexGrow(1) - maxWidth(100.percent) - } - } - - val wtColAutoFill by style { - AppCSSVariables.wtColCount(0) - flexGrow(1) - maxWidth(100.percent) - } - - val wtColInline by style { - AppCSSVariables.wtColCount(0) - maxWidth(100.percent) - property("flex-basis", "auto") - } -} diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt deleted file mode 100644 index c1b56baeff..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt +++ /dev/null @@ -1,38 +0,0 @@ -package com.sample.style - -import org.jetbrains.compose.web.css.* - -object WtContainer : StyleSheet(AppStylesheet) { - val wtContainer by style { - property("margin-left", "auto") - property("margin-right", "auto") - property("box-sizing", "border-box") - property("padding-left", 22.px) - property("padding-right", 22.px) - maxWidth(1276.px) - - media(mediaMaxWidth(640.px)) { - self style { - maxWidth(100.percent) - property("padding-left", 16.px) - property("padding-right", 16.px) - } - } - - media(mediaMaxWidth(1276.px)) { - self style { - maxWidth(996.px) - property("padding-left", 996.px) - property("padding-right", 22.px) - } - } - - media(mediaMaxWidth(1000.px)) { - self style { - maxWidth(100.percent) - property("padding-left", 22.px) - property("padding-right", 22.px) - } - } - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtDisplay.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtDisplay.kt deleted file mode 100644 index 2a95341fab..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtDisplay.kt +++ /dev/null @@ -1,25 +0,0 @@ -package com.sample.style - -import org.jetbrains.compose.web.css.* - -object WtDisplay : StyleSheet(AppStylesheet) { - val wtDisplayNone by style { - display(DisplayStyle.None) - } - - val wtDisplayMdBlock by style { - media(mediaMaxWidth(1000.px)) { - self style { - display(DisplayStyle.Block) - } - } - } - - val wtDisplayMdNone by style { - media(mediaMaxWidth(1000.px)) { - self style { - display(DisplayStyle.None) - } - } - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt deleted file mode 100644 index b93fb138e0..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt +++ /dev/null @@ -1,41 +0,0 @@ -package com.sample.style - -import org.jetbrains.compose.web.css.* - -object WtOffsets : StyleSheet(AppStylesheet) { - val wtTopOffset96 by style { - marginTop(96.px) - property( - "margin-top", - "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})" - ) - } - - val wtTopOffset24 by style { - marginTop(24.px) - property( - "margin-top", - "calc(1*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})" - ) - } - - val wtTopOffset48 by style { - marginTop(48.px) - } - - val wtTopOffsetSm12 by style { - media(mediaMaxWidth(640.px)) { - self style { - marginTop(12.px) - } - } - } - - val wtTopOffsetSm24 by style { - media(mediaMaxWidth(640.px)) { - self style { - marginTop(24.px) - } - } - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt deleted file mode 100644 index 4bcdd3a1c4..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt +++ /dev/null @@ -1,42 +0,0 @@ -package com.sample.style - -import org.jetbrains.compose.web.css.* - -object WtRows : StyleSheet(AppStylesheet) { - - val wtRow by style { - AppCSSVariables.wtHorizontalLayoutGutter(0.px) - display(DisplayStyle.Flex) - flexWrap(FlexWrap.Wrap) - - property( - "margin-right", - "calc(-1*${AppCSSVariables.wtHorizontalLayoutGutter.value()})" - ) - property( - "margin-left", - "calc(-1*${AppCSSVariables.wtHorizontalLayoutGutter.value()})" - ) - property("box-sizing", "border-box") - } - - val wtRowSizeM by style { - AppCSSVariables.wtHorizontalLayoutGutter(16.px) - - media(mediaMaxWidth(640.px)) { - self style { - AppCSSVariables.wtHorizontalLayoutGutter(8.px) - } - } - } - - val wtRowSizeXs by style { - AppCSSVariables.wtHorizontalLayoutGutter(6.px) - } - - val wtRowSmAlignItemsCenter by style { - self style { - alignItems(AlignItems.Center) - } - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtSection.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtSection.kt deleted file mode 100644 index c8119770f4..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtSection.kt +++ /dev/null @@ -1,31 +0,0 @@ -package com.sample.style - -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.* - -object WtSections : StyleSheet(AppStylesheet) { - - val wtSection by style { - property("box-sizing", "border-box") - property("padding-bottom", 96.px) - property("padding-top", 1.px) - property( - propertyName = "padding-bottom", - value = "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})" - ) - backgroundColor(Color("#fff")) - } - - val wtSectionBgGrayLight by style { - backgroundColor(Color("#f4f4f4")) - backgroundColor(AppCSSVariables.wtColorGreyLight.value()) - } - - val wtSectionBgGrayDark by style { - backgroundColor(Color("#323236")) - backgroundColor(AppCSSVariables.wtColorGreyDark.value()) - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt deleted file mode 100644 index b53a66f2a1..0000000000 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt +++ /dev/null @@ -1,221 +0,0 @@ -package com.sample.style - -import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.* - -object WtTexts : StyleSheet(AppStylesheet) { - - val wtHero by style { - color(Color("#27282c")) - fontSize(60.px) - property("font-size", AppCSSVariables.wtHeroFontSize.value(60.px)) - property("letter-spacing", (-1.5).px) - property("font-weight", 900) - property("line-height", 64.px) - property("line-height", AppCSSVariables.wtHeroLineHeight.value(64.px)) - - media(mediaMaxWidth(640.px)) { - self style { - AppCSSVariables.wtHeroFontSize(42.px) - AppCSSVariables.wtHeroLineHeight(48.px) - } - } - - property( - "font-family", - "Gotham SSm A,Gotham SSm B,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" - ) - } - - val wtSubtitle2 by style { - color(Color("#27282c")) - fontSize(28.px) - property("font-size", AppCSSVariables.wtSubtitle2FontSize.value(28.px)) - property("letter-spacing", "normal") - property("font-weight", 300) - property("line-height", 40.px) - property("line-height", AppCSSVariables.wtSubtitle2LineHeight.value(40.px)) - - media(mediaMaxWidth(640.px)) { - self style { - AppCSSVariables.wtSubtitle2FontSize(24.px) - AppCSSVariables.wtSubtitle2LineHeight(32.px) - } - } - - property( - "font-family", - "Gotham SSm A,Gotham SSm B,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" - ) - } - - val wtText1 by style { - color(rgba(39, 40, 44, .7)) - fontSize(18.px) - property("letter-spacing", "normal") - property("font-weight", 400) - property("line-height", 28.px) - - property( - "font-family", - "system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" - ) - } - - val wtText1ThemeDark by style { - color(rgba(255, 255, 255, 0.6)) - } - - val wtText2 by style { - color(rgba(39, 40, 44, .7)) - fontSize(15.px) - property("letter-spacing", "normal") - property("font-weight", 400) - property("line-height", 24.px) - - property( - "font-family", - "system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" - ) - } - - val wtText3 by style { - color(rgba(39, 40, 44, .7)) - fontSize(12.px) - property("letter-spacing", "normal") - property("font-weight", 400) - property("line-height", 16.px) - - property( - "font-family", - "system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" - ) - } - - val wtTextPale by style { - color(rgba(255, 255, 255, 0.30)) - } - - val wtText2ThemeDark by style { - color(rgba(255, 255, 255, 0.6)) - } - - val wtText3ThemeDark by style { - color(rgba(255, 255, 255, 0.6)) - } - - val wtLink by style { - property("border-bottom", "1px solid transparent") - property("text-decoration", "none") - color(Color("#167dff")) - - hover(self) style { - property("border-bottom-color", "#167dff") - } - } - - val wtH2 by style { - color(Color("#27282c")) - fontSize(31.px) - property("font-size", AppCSSVariables.wtH2FontSize.value(31.px)) - property("letter-spacing", (-.5).px) - property("font-weight", 700) - property("line-height", 40.px) - property("line-height", AppCSSVariables.wtH2LineHeight.value(40.px)) - - media(mediaMaxWidth(640.px)) { - self style { - AppCSSVariables.wtH2FontSize(24.px) - AppCSSVariables.wtH2LineHeight(32.px) - } - } - - property( - "font-family", - "Gotham SSm A,Gotham SSm B,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" - ) - } - - val wtH2ThemeDark by style { - color(Color("#fff")) - } - - val wtH3 by style { - color(Color("#27282c")) - fontSize(21.px) - property("font-size", AppCSSVariables.wtH3FontSize.value(20.px)) - property("letter-spacing", "normal") - property("font-weight", 700) - property("line-height", 28.px) - property("line-height", AppCSSVariables.wtH3LineHeight.value(28.px)) - - property( - "font-family", - "system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif" - ) - } - - val wtH3ThemeDark by style { - color(Color("#fff")) - } - - val wtButton by style { - color(Color.white) - backgroundColor(Color("#167dff")) - fontSize(15.px) - display(DisplayStyle.InlineBlock) - property("text-decoration", "none") - property("border-radius", 24.px) - property("padding", "12px 32px") - property("line-height", 24.px) - property("font-weight", 400) - property("width", "fit-content") - - hover(self) style { - backgroundColor(rgba(22, 125, 255, .8)) - } - } - - val wtLangButton by style { - display(DisplayStyle.LegacyInlineFlex) - justifyContent(JustifyContent.Center) - alignItems(AlignItems.Center) - backgroundColor(Color.transparent) - border(0.px) - - property("outline", "none") - - hover(self) style { - backgroundColor(rgba(255, 255, 255, 0.1)) - } - } - - val wtButtonContrast by style { - color(Color.white) - backgroundColor(Color("#27282c")) - - hover(self) style { - backgroundColor(rgba(39, 40, 44, .7)) - } - } - - val wtSocialButtonItem by style { - property("margin-right", 16.px) - marginLeft(16.px) - padding(12.px) - backgroundColor(Color.transparent) - display(DisplayStyle.LegacyInlineFlex) - - hover(self) style { - backgroundColor(rgba(255, 255, 255, 0.1)) - property("border-radius", 24.px) - } - - media(mediaMaxWidth(640.px)) { - self style { - property("margin-right", 8.px) - property("margin-left", 8.px) - } - } - } -} \ No newline at end of file diff --git a/web/benchmark-core/src/jsMain/resources/index.html b/web/benchmark-core/src/jsMain/resources/index.html deleted file mode 100644 index b9fb031003..0000000000 --- a/web/benchmark-core/src/jsMain/resources/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - Compose for Web UI Framework | JetBrains: Developer Tools for Professionals and Teams - - - - - - - - -
- - - \ No newline at end of file diff --git a/web/build.gradle.kts b/web/build.gradle.kts index da061e56bf..1fc4b76d99 100644 --- a/web/build.gradle.kts +++ b/web/build.gradle.kts @@ -14,6 +14,12 @@ tasks.register("generateExamples") { ) } +tasks.register("printBundleSize") { + dependsOn( + subprojects.filter { it.isSampleProject() }.map { ":samples:${it.name}:printBundleSize" } + ) +} + subprojects { apply(plugin = "maven-publish") @@ -60,6 +66,19 @@ plugins {""" println("from ${project.projectDir} => $targetDir") } } + + val printBundleSize by tasks.registering { + dependsOn(tasks.named("jsBrowserDistribution")) + doLast { + val jsFile = buildDir.resolve("distributions/${project.name}.js") + val size = jsFile.length() + println("##teamcity[buildStatisticValue key='bundleSize::${project.name}' value='$size']") + } + } + + afterEvaluate { + tasks.named("build") { finalizedBy(printBundleSize) } + } } pluginManager.withPlugin("maven-publish") { diff --git a/web/samples/web_landing/build.gradle.kts b/web/samples/web_landing/build.gradle.kts index 0ee47d2db8..f3d2563506 100644 --- a/web/samples/web_landing/build.gradle.kts +++ b/web/samples/web_landing/build.gradle.kts @@ -24,3 +24,4 @@ kotlin { } } } +