https://kotlinlang.org logo
v

Vinay Gaba

09/13/2021, 5:10 PM
Does Compose for Web have an interoperability story that's as compelling as Compose for Android i.e can I leverage Compose for Web in an existing React website? If yes, any examples I can check? I think incremental adoption would be super powerful and I have a feeling that its most likely supported or at least on the roadmap?
👀 1
cc @louiscad who just asked me a related question that got me thinking about this 😄
s

shikasd

09/13/2021, 5:26 PM
I think JB provided some examples with React interop here: https://github.com/JetBrains/compose-jb/tree/master/examples/web-with-react, not sure if you are looking for something more involved or not :)
👍🏼 1
j

jim

09/13/2021, 6:09 PM
Also, Compose for Web will just compose into a DOM node, so you can take pretty much any DOM node and render your Compose tree inside it.
v

Vinay Gaba

09/13/2021, 8:53 PM
that's fantastic! As a follow up, does this require me to leverage kotlinx.html first? Can I use my pure vanilla React app and still use Compose for building some of the components (if I wanted to)
s

shikasd

09/13/2021, 9:32 PM
Kotlinx.html is completely unrelated here, I think, it is just a dsl for building html :) Compose allows to render Composables into any dom node, so you can just grab a ref from React component, and use it as a root for Compose.
v

Vinay Gaba

09/13/2021, 9:45 PM
Interesting! Thinking about how I can introduce it in a React codebase. Like how do I include it within a project that uses npm for dependency management.
l

louiscad

09/13/2021, 10:43 PM
Maybe you can try creating a Kotlin/JS project, and include your existing React code into it instead?
s

shikasd

09/13/2021, 11:16 PM
I think it would require some clever interfacing to expose proper methods to JS + somehow merge webpack/(name your bundler) configuration to build and include Kotlin/JS bundle
l

louiscad

09/14/2021, 9:04 AM
@Sebastian Aigner If you're looking at helping folks doing Kotlin for the browser, I think that for a starter, an example of adding Kotlin/JS to an existing React project would be very helpful.
h

hfhbd

09/14/2021, 9:05 AM
l

louiscad

09/14/2021, 9:06 AM
Integrating with a non Kotlin project, with no plans to rewrite the React code to Kotlin.
1
h

hfhbd

09/14/2021, 9:08 AM
Ahh, okay.
a

Akif Abasov [JB]

09/14/2021, 3:44 PM
@louiscad, you don’t need to rewrite it in Kotlin, you just need to write some
external
declarations to make it possible to call js react components from Kotlin. https://kotlinlang.org/docs/js-interop.html#external-modifier And looks like it is used in example above: https://github.com/JetBrains/compose-jb/blob/master/examples/web-with-react/src/jsMain/kotlin/ReactYoutubePlayer.kt
3 Views