Direct HTML or KSX & CSS in Kotlin

[wakaztahir]

I know I shouldn't make this issue here, but I just had to put it out there, I would love to know your opinion, if this is something You'd consider implementing

I created an issue on this here https://github.com/JetBrains/kotlin-wrappers/issues/2094

Currently react, solidjs and other JS frameworks have jsx which is what makes these frameworks so "better" they parse html and generate it, they also provide component architecture and other things, like "css in js" libraries like styled-components and emotion

This is what is kotlin missing ! I hate writing html using dsl.

Is your feature request related to a problem? Please describe. Currently I use typescript and tsx files to get the benefit of components My two basic needs are when I am writing a react project are jsx & css in js library like emotion , I get typesafety using typescript but I'd like to change that to use kotlin because kotlin is being shared in my other apps of mobile and desktop, I could even go about using compose-html if "ksx" and "css in kotlin" was a thing

I have never used the CSS dsl and HTML dsl and I'm not planning to do that because I prefer raw HTML and raw CSS, Nothing can top these. If Kotlin / Js could provide these two things , I would consider kotlin to be as good as typescript for me

Since K2 Compiler is done, I am assuming this would allow kotlin js do these type of things and its planning to do these things as well to make development experience with kotlin as good as typescript, Otherwise typescript interoperability would be required so I can share my kotlin code of common modules to typescript and write my components in tsx.

Describe the solution you'd like I would like ksx (jsx in kotlin) and "a css in kotlin library"

I would prefer a Kotlin compiler plugin that would provide a way to separate html into components like you can do in react JSX and also a Kotlin compiler plugin that would allow me to write styled components using direct CSS instead of CSS wrappers

• JSX in Kotlin should provide an easy way to write HTML with syntax highlighting, being able to separate components
• CSS in Kotlin should provide an easy way to write styled components with direct CSS & syntax highlighting
• CSS can be validated because it would be parsed by the compiler plugin (Even Better)
• HTML can be validated because it would be parsed by the compiler plugin (Even Better)

Describe alternatives you've considered I use React (actually Solid) JSX with emotion in typescript

Something like

val styles = `
   background-color : red;
`

@KSX
val Ksxh1 = (<h1 class={styles.class()}>I am a red heading</h1>)

@KSX
function MyH1(){
   return (
       <div><Ksxh1 /></div>
   )
}

The syntax could be changed and improved, I think performance shouldn't be compromised at the end while maintaining ease of use.

[bitspittle]

I don't mind you posting in here. I appreciate what you want. Kobweb is, I think, as close as you can get to it without adding a new compiler. This can still be worth a discussion, to see if there's something that isn't in Kobweb that should be for example.

Just a heads up that Compose HTML itself has been, as far as I can tell, vastly deprioritized at the moment. JB just doesn't seem to have enough headcount across the company to keep working on it. I kind of hope that Kobweb gaining popularity might push them to revisit, but that seems to be the case at the moment, unfortunately. Instead, it seems like the team is putting all energy behind Compose Multiplatform.

So given that's the case, I'd set your expectations about something like ksx really low.

BTW, your code, with the Kobweb + Compose HTML way, would be:

val MyRedStyle by ComponentStyle.base {
   Modifier.backgroundColor(Colors.Red)
}

@Composable
fun RedHeading() { H1(MyRedStyle.toAttrs()) { Text("I am a red heading") } }

@Composable
fun MyH1() {
   Div { RedHeading() }
}

which is a bit more horizontally verbose, in a type-safe Kotlin way, but I don't think the code is that much worse. WDYT?

[wakaztahir]

If I wanted to write this code in Kotlin, I would have no problem with it, I write all my Android or JVM apps in Kotlin using Jetpack compose multiplatform. I love Jetpack compose.

But being able to write direct html in react and direct CSS using a CSS in JS library makes it more native like because the language of the web is HTML & CSS. Since DOM works that way, There's html tags and there's a style tag containing CSS. JSX and "CSS in JS" bring benefits of native syntax that browser requires with all the benefits of component separation & ease of development. All the sites already use HTML & CSS, There is a tone of stuff, tutorials using HTML & CSS, If I wanted to copy a component, I'd have no problem doing that. What I'll type will get rendered in the browser, nothing else. React, Solid and other frameworks have this in common. JSX.

In SolidJS , when you type HTML, instead of react like element, you get direct html element, Which is I think how it should work in Kotlin too. The HTML and CSS would still be Typesafe, since it will be parsed using Kotlin compiler plugin and if there's an error, The error will be thrown at compile time.

I would love to do this, I just don't know how to do this. I have zero experience with Kotlin compiler plugins.

[bitspittle]

Ah, well in that case, if you're not going to write Kotlin at all, then yeah, this issue is out of scope of the Kobweb project. If you don't mind, I'll close it shortly (since we're a very small team at the moment and can't really juggle too much at once). Kobweb exists specifically to support Kotlin -- we have many users who are already proficient in Kotlin and don't want to touch JS / TS if they don't have to. It's been a very busy niche.

That said, the above Kotlin code I demonstrated will transpile to JS. Ultimately, you are not running Kotlin code on the website but instead HTML + JS. (Of course, the JS would be somewhat hard to read).

Writing your own compiler plugin is a massive task. You'll have to keep it up to date with new Kotlin compiler releases, but that's not all -- you'll want to write IDE tooling support, which is a massive undertaking to make something that feels right. Android Studio has dozens and dozens of software engineers for example working year in and year out for example, and people still make fun of it for crashing or missing features.

There's a reason Kotlin as a language survived while other languages that were also awesome never really picked up -- it's because the Jetbrains folks, in addition to making a nice language, also invested heavily in rich tools, which can maybe be 80% or more of the work!

[wakaztahir]

I was talking about html and css in kotlin not JS. I would like to write ksx, which means I will use kotlin because being able to share kotlin code, no body has to touch js / ts.

But I can understand that this is something big and can't be accomplished easily. Therefore I'll be using

[bitspittle]

I don't think at this point we plan to take further action on this request (due to it being out of scope), so we're going to close it. However, feel free to speak up if you think there's something we missed here. Thanks!