https://kotlinlang.org logo
Channels
Powered by
#multiplatform
Title
# multiplatform
g

Gunslingor

03/30/2020, 6:33 AM
My god there is so many web frameworks already... kotlin react, kvision, kotlinx, ktor, mutliplatform primatives, this is all too much to choose from, lol... been playing with kotlin-react, seems okay except it isn't honoring my exernal css and js like metro4 package. is kvision any good, which would you use? and another https://github.com/Kabbura/Kunafa!!!! I was using kotlinx html fairly reliably once I figure it out but it was making bigger code than kotlin-react. The reason I am considering switching is because it lacks a CSS DSL.
s

spierce7

03/30/2020, 5:37 PM
I did tell you about kotlin-html which has a CSS DSL 😛
You should be able to swap it in almost directly for kotlinx.html
g

Gunslingor

03/30/2020, 5:39 PM
yeah, is it really better?
s

spierce7

03/30/2020, 5:39 PM
it was enough of a difference that I spent months making it
g

Gunslingor

03/30/2020, 5:39 PM
will it work in jvm and common too?
s

spierce7

03/30/2020, 5:39 PM
yes
I never added it to js. However I can do that quickly
g

Gunslingor

03/30/2020, 5:40 PM
fuck it, you win... I've tried every other package out there by now, lol, why not one more. You want to convert it for me 😃. lol
s

spierce7

03/30/2020, 5:42 PM
the only difference is that often used attributes are explicitly defined (like 
id
or 
style
), and they are accessible via function parameters instead as part of the DSL
i.e. to set the id of a div it’s
Copy code
div(id = "divId") {
}
if you want to add a custom attribute you can do that via
Copy code
div("customAttribute" to "customValue") {
}
let me know if you have any questions. Should be easy
g

Gunslingor

03/30/2020, 5:46 PM
Copy code
// If you are using Ktor, you can use this as well
    implementation("dev.scottpierce.kotlin-html:kotlin-html-ktor:0.7.23")
What is that package? I currently got these but haven't made the css stuff work right yet:
Copy code
implementation("io.ktor:ktor-html-builder:$ktorVersion")
implementation("org.jetbrains.kotlinx:kotlinx-html-jvm:$kotlinxHtmlVersion")
implementation("org.jetbrains:kotlin-css-jvm:1.0.0-pre.93-kotlin-$kotlinVersion")
I always try to minimize package use, but its tough making things fit together, lol. Yeah, I'm pretty confused already... am I suppose to swap out all the kotlinx or the kotlinx plus ktor-html stuff? Its so confusing. Gradle has been kicking my ass, multiplatform has his back.
So if I am understanding this right I need one dependency in common, two in backend since I am using ktor and zero in the front end but it still works in the front end Kotlin JS module?
Gave up on yours temporarily and went back to using kotlin-css, finally got it working though I don't really understand why that unsafe operator is required or how I could possibly make it safe.
Copy code
val styles = CSSBuilder().apply {
    body {
        margin = "0px"
        padding = "0px"
        backgroundColor = Color.bisque
    }
}
val stylesString = styles.toString()
println(styles.toString())

style {
    unsafe {
        raw(stylesString)
    }
}
s

spierce7

03/30/2020, 6:36 PM
You’d get rid of all the kotlinx stuff
You’d want, which is for common
Copy code
"dev.scottpierce.kotlin-html:kotlin-html-writer:0.7.23"
and if you want to use ktor you’d use
Copy code
"dev.scottpierce.kotlin-html:kotlin-html-ktor:0.7.23"
then you can do something like this:
Copy code
StringHtmlOutput().html {
  body(
    style = {
      margin(0.px)
      padding(0.px)
      backgroundColor(Color(0, 0, 0))
    }
  ) {
  }
}
then for ktor you can do something like
Copy code
routing {
  get {
    call.respondHtml {
      head {
      }
      body {
      }
    }
  }
}
Setup is pretty simple, and mirrors the setup of kotlinx.html.
4 Views
Powered by