Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minimal demo of assigning style properties via just passing js object #1636

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Minimal demo of assigning style properties via just passing js object #1636

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b7726c0
Add css-wrappers dependency
Schahen Dec 23, 2021
cf45278
Introduce separate inlineProtocolTest
Schahen Dec 23, 2021
de5ea4f
Introduce separate inlineProtocolWithCssTypeTest
Schahen Dec 23, 2021
b9bf5e6
Rename shtyle to style
Schahen Dec 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions web/core/build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ kotlin {
dependencies {
implementation(project(":internal-web-core-runtime"))
implementation(kotlin("stdlib-js"))
implementation("org.jetbrains.kotlin-wrappers:kotlin-csstype:3.0.10-pre.283-kotlin-1.6.10")
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need this dependency in web/core?

I thought it's going to be added by users in their projects.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your understanding is 100% correct - just like I said at the meeting it's a fake PR - nobody is going to merge this one - it was just to illustrate so that we check whether we need this (and this dependency was added for test)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

got it, thanks! :)
i forgot that it's a fake PR

}
}

Expand Down
13 changes: 13 additions & 0 deletions web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsBuilder.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@ import org.w3c.dom.HTMLElement
* are extracted to a separate methods.
*
*/

private external object Object {
fun entries(obj: Any): Array<Array<String>>
}

open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
internal val attributesMap = mutableMapOf<String, String>()
internal val styleBuilder = StyleBuilderImpl()
Expand All @@ -43,6 +48,14 @@ open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
styleBuilder.apply(builder)
}

fun style(propertyHolder: Any) {
Copy link
Member

@eymar eymar Dec 23, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe adding one of our @Experimental annotation can be beneficial in this case.

Copy link
Member

@eymar eymar Dec 23, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UPD: not now, since this PR won't be merged for now (as discussed above)

styleBuilder.apply {
Object.entries(propertyHolder).forEach { (k, v) ->
Copy link
Member

@eymar eymar Dec 23, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you want to try with Object.assign()?
It seems that with Object.assign() we can avoid having forEach loop.

property(k, v)
}
}
}

/**
* [classes] adds all values passed as params to the element's classList.
* This method acts cumulatively, that is, each call adds values to the classList.
Expand Down
1 change: 1 addition & 0 deletions web/core/src/jsTest/kotlin/CSSStylesheetTests.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ class CSSVariableTests {
}

val boundingRect = (root.children[1] as HTMLElement).getBoundingClientRect()

assertEquals(300.toDouble(), boundingRect.width)
assertEquals(200.toDouble(), boundingRect.height)
}
Expand Down
28 changes: 28 additions & 0 deletions web/core/src/jsTest/kotlin/InlineStyleTests.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,42 @@ import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.keywords.auto
import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.dom.Span
import org.jetbrains.compose.web.dom.Text
import kotlin.test.Test
import kotlin.test.assertEquals
import org.jetbrains.compose.web.testutils.*
import csstype.Color as CssTypeColor

class InlineStyleTests {

@Test
fun inlineProtocolTest() = runTest {
composition {
Div({
style(js("{color: \"red\"}"))
}) { }
}

assertEquals("color: red;", nextChild().style.cssText)
}

@Test
fun inlineProtocolWithCssTypeTest() = runTest {
composition {
val obj = js("{}")
obj.color = CssTypeColor("#F00FFA")

Div({
style(obj)
}) { }
}

assertEquals("color: rgb(240, 15, 250);", nextChild().style.cssText)
}


@Test
fun conditionalStyleAppliedProperly() = runTest {

Expand Down
208 changes: 130 additions & 78 deletions web/core/src/jsTest/kotlin/css/CSSBackgroundTests.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,16 @@ class CSSBackgroundTests {
@Test
fun backgroundColor() = runTest {
composition {
Div({style {
backgroundColor(rgb(0, 128, 0))
}})
Div({style {
backgroundColor(rgba(0, 129, 0, 0.2))
}})
Div({
style {
backgroundColor(rgb(0, 128, 0))
}
})
Div({
style {
backgroundColor(rgba(0, 129, 0, 0.2))
}
})
}

assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor)
Expand All @@ -31,15 +35,21 @@ class CSSBackgroundTests {
@Test
fun backgroundAttachment() = runTest {
composition {
Div({style {
backgroundAttachment("scroll")
}})
Div({style {
backgroundAttachment("fixed")
}})
Div({style {
backgroundAttachment("local")
}})
Div({
style {
backgroundAttachment("scroll")
}
})
Div({
style {
backgroundAttachment("fixed")
}
})
Div({
style {
backgroundAttachment("local")
}
})
}

assertEquals("scroll", window.getComputedStyle(nextChild()).backgroundAttachment)
Expand All @@ -50,15 +60,21 @@ class CSSBackgroundTests {
@Test
fun backgroundImage() = runTest {
composition {
Div({style {
backgroundImage("url(\"https://localhost:3333/media/examples/lizard.png\")")
}})
Div({style {
backgroundImage("url(\"https://localhost:3333/media/examples/lizard.png\"), url(\"https://localhost:3333/media/examples/star.png\")")
}})
Div({style {
backgroundImage("linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))")
}})
Div({
style {
backgroundImage("url(\"https://localhost:3333/media/examples/lizard.png\")")
}
})
Div({
style {
backgroundImage("url(\"https://localhost:3333/media/examples/lizard.png\"), url(\"https://localhost:3333/media/examples/star.png\")")
}
})
Div({
style {
backgroundImage("linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))")
}
})
}

assertEquals("url(\"https://localhost:3333/media/examples/lizard.png\")", window.getComputedStyle(nextChild()).backgroundImage)
Expand All @@ -69,18 +85,26 @@ class CSSBackgroundTests {
@Test
fun backgroundPosition() = runTest {
composition {
Div({style {
backgroundPosition("top")
}})
Div({style {
backgroundPosition("left")
}})
Div({style {
backgroundPosition("center")
}})
Div({style {
backgroundPosition("25% 75%")
}})
Div({
style {
backgroundPosition("top")
}
})
Div({
style {
backgroundPosition("left")
}
})
Div({
style {
backgroundPosition("center")
}
})
Div({
style {
backgroundPosition("25% 75%")
}
})
}

assertEquals("50% 0%", window.getComputedStyle(nextChild()).backgroundPosition)
Expand All @@ -92,9 +116,11 @@ class CSSBackgroundTests {
@Test
fun backgroundRepeat() = runTest {
composition {
Div({style {
backgroundRepeat("space repeat")
}})
Div({
style {
backgroundRepeat("space repeat")
}
})
}

assertEquals("space repeat", window.getComputedStyle(nextChild()).backgroundRepeat)
Expand All @@ -104,15 +130,21 @@ class CSSBackgroundTests {
@Test
fun backgroundClip() = runTest {
composition {
Div({style {
backgroundClip("border-box")
}})
Div({style {
backgroundClip("padding-box")
}})
Div({style {
backgroundClip("content-box")
}})
Div({
style {
backgroundClip("border-box")
}
})
Div({
style {
backgroundClip("padding-box")
}
})
Div({
style {
backgroundClip("content-box")
}
})
}


Expand All @@ -124,15 +156,21 @@ class CSSBackgroundTests {
@Test
fun backgroundOrigin() = runTest {
composition {
Div({style {
backgroundOrigin("border-box")
}})
Div({style {
backgroundOrigin("padding-box")
}})
Div({style {
backgroundOrigin("content-box")
}})
Div({
style {
backgroundOrigin("border-box")
}
})
Div({
style {
backgroundOrigin("padding-box")
}
})
Div({
style {
backgroundOrigin("content-box")
}
})
}


Expand All @@ -145,18 +183,26 @@ class CSSBackgroundTests {
@Test
fun backgroundSize() = runTest {
composition {
Div({style {
backgroundSize("contain")
}})
Div({style {
backgroundSize("cover")
}})
Div({style {
backgroundSize("50%")
}})
Div({style {
backgroundSize("auto 50px")
}})
Div({
style {
backgroundSize("contain")
}
})
Div({
style {
backgroundSize("cover")
}
})
Div({
style {
backgroundSize("50%")
}
})
Div({
style {
backgroundSize("auto 50px")
}
})
}

assertEquals("contain", window.getComputedStyle(nextChild()).backgroundSize)
Expand All @@ -168,15 +214,21 @@ class CSSBackgroundTests {
@Test
fun background() = runTest {
composition {
Div({style {
background("green")
}})
Div({style {
background("content-box radial-gradient(crimson, skyblue)")
}})
Div({style {
background("no-repeat url(\"../../media/examples/lizard.png\")")
}})
Div({
style {
background("green")
}
})
Div({
style {
background("content-box radial-gradient(crimson, skyblue)")
}
})
Div({
style {
background("no-repeat url(\"../../media/examples/lizard.png\")")
}
})
}

assertEquals("rgb(0, 128, 0)", window.getComputedStyle(nextChild()).backgroundColor)
Expand Down
2 changes: 0 additions & 2 deletions web/core/src/jsTest/kotlin/css/CSSListStyleTests.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ package org.jetbrains.compose.web.core.tests.css
import org.jetbrains.compose.web.testutils.*
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.Div
import org.w3c.dom.HTMLElement
import org.w3c.dom.get
import kotlin.test.Test
import kotlin.test.assertEquals

Expand Down
1 change: 0 additions & 1 deletion web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.selectors.CSSSelector
import org.jetbrains.compose.web.dom.*

class TestCases1 {
Expand Down