hello folks. I'm trying to create a hello world with compose-web... But without luck so far. I have...

Leandro Borges Ferreira

10/09/2023, 10:13 PM

hello folks. I'm trying to create a hello world with compose-web... But without luck so far. I have a small module for a web app together with an android and desktop app. I create create a hello world with this:

Copy code

fun main() {
    document.body?.appendText("Hello, world JS!")
}

But when I try this:

Copy code

fun main() {
    onWasmReady {
        Window {
            Box(modifier = Modifier.fillMaxSize()) {
                Text("Hello, world JS!", modifier = Modifier.align(Alignment.Center))
            }
        }
    }
}

I get a blank page... nothing happens =|. Does anyone knows what this could be? Did anyone have this problem before?

Pablichjenkov

10/09/2023, 10:17 PM

You have to place a canvas in the dom. Check the official examples how is done https://github.com/JetBrains/compose-multiplatform/tree/master/examples

Leandro Borges Ferreira

10/09/2023, 10:35 PM

🤔 I read a bit the bird example. I see that they use

renderComposable

with the id of a div as the parameter. But when I do this:

Copy code

renderComposable(rootElementId = "root") {
        Box(modifier = Modifier.fillMaxSize()) {
            Text("Hello, world JS!", modifier = Modifier.align(Alignment.Center))
        }
    }

And this:

Copy code

[...]
<body>
<div id="root"></div>
<script src="webApp.js"> </script>
</body>
</html>

I get the same thing... Okay, maybe I'm a super noob web developer (I'm a android dev, not web =|), but shouldn't this work? That's what i see in the sample

Pablichjenkov

10/09/2023, 11:11 PM

I think you are mixing

compose-web

and

compose-html

. You probably want the second but you mentioned

compose-web

. In any case, just find the proper example, clone it and make sure it works. Then build on top of that. Without code and the project is hard to see what could be wrong

Leandro Borges Ferreira

10/09/2023, 11:53 PM

You're right @Pablichjenkov. Checking the example and coping that did the trick. I copied one example and it is working now. Thanks for help =]

👍 1

25 Views

Open in Slack

Previous Next

kotlinlang

A modern programming language that makes developers happier.