<@UJNU95VNC> I got really sick and tired of React and thinging about other systems. I would like to ...

# compose-web

[altavir]

@shikasd I got really sick and tired of React and thinging about other systems. I would like to try compose, but I have some reservations. I need to include external element-bound components like canvas. Is there a simple way to add it to compose-web. The second question is about compiler: do I still need to use unstable compiler version?

[shikasd]

Hey, sure thing, glad to hear you are interested in trying it out!

So to start, there's no particular order on how to do stuff with compose web yet, but I started drafting some things around to create something resembling an API.

Right now, I created a couple of wrappers around document.createElement with "tag" function, you can see examples of how to use it on "h1" or "br". You can start by writing a similar "canvas" function and work from there.

As for unstable compiler version, depends on which compiler you mean. Changes to compose compiler are not yet merged, so you have to use setup from my repo for now. As for Kotlin compiler, it is compatible with 1.4.21, i think, so you should be fine here :)

[altavir]

I do not need to create canvas, I need to attach an external element (threeJS canvas or Plotly canbas) to a scene element. For that I need the element to be exposed like it works with React refs.

[shikasd]

Ah, that's interesting
We probably could expose this through modifier, so you could save it to some external variable / preconfigure it.

Not sure if compose for android/desktop does anything similar, but modifiers seem to be the only way to easily get access to underlying element for now.

I can push an example later today :)

[shikasd]

See: https://github.com/ShikaSD/compose-browser-demo/blob/main/src/main/kotlin/App.kt#L50

[theapache64]

One question @shikasd,maybe a stupid question, why compose-web still using components named h1 , button and why not Row , Column, Text as jetpack/jetbrains compose?

[shikasd]

@theapache64
The answer is quite simple: different renderer.
Other implementations are drawing on skia canvas, whereas this one is working with the browser DOM, like react does. You can create your own definitions of Row, Column, etc, but they will probably behave differently from Android or Desktop.

I think JB is going to work on creating more common/familiar components, but I used h1/div just to quickly prototype on top of JS existing apis.

[theapache64]

Understood. 👍