Hey, I just started playing with compose web and c...

# compose-web

[timothy.paetz]

Hey, I just started playing with compose web and can't even figure out how to add a dependency 🙃 . I downloaded this template and am trying to add routing-compose dependency. Where specifically in build.gradle.kts should I be adding implementation("app.softwork:routing-compose:0.2.8")
Thanks!

[timothy.paetz]

Current build.gradle.kts:

import org.jetbrains.compose.compose
import org.jetbrains.compose.desktop.application.dsl.TargetFormat
import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension

plugins {
    kotlin("multiplatform")
    id("org.jetbrains.compose")
}

repositories {
    mavenCentral()
    maven("<https://maven.pkg.jetbrains.space/public/p/compose/dev>")
    google()
}

kotlin {
    js(IR) {
        browser()
        binaries.executable()
    }
    sourceSets {

        val jsMain by getting {
            kotlin.srcDir("src/main/kotlin")
            resources.srcDir("src/main/resources")

            dependencies {
                implementation(compose.web.core)
                implementation(compose.runtime)
            }
        }

    }

}



// a temporary workaround for a bug in jsRun invocation - see <https://youtrack.jetbrains.com/issue/KT-48273>
afterEvaluate {
    rootProject.extensions.configure<NodeJsRootExtension> {
        nodeVersion = "16.0.0"
        versions.webpackDevServer.version = "4.0.0"
        versions.webpackCli.version = "4.10.0"
    }
}

[Thomas]

You should be able to add it in the dependencies block next to the other implementation lines, if I understand your question correctly.

[Thomas]

https://kotlinlang.org/docs/gradle.html#configuring-dependencies

[timothy.paetz]

If I add it below "implementation(compose.runtime)", then I get these errors when running ./gradlew jsBrowserRun:

\src\main\kotlin\main.kt: (2, 12): Unresolved reference: jetbrains
\src\main\kotlin\main.kt: (3, 12): Unresolved reference: jetbrains
\src\main\kotlin\main.kt: (4, 12): Unresolved reference: jetbrains
\src\main\kotlin\main.kt: (5, 12): Unresolved reference: jetbrains
\src\main\kotlin\main.kt: (8, 5): Unresolved reference: renderComposable
\src\main\kotlin\main.kt: (9, 9): @Composable invocations can only happen from the context of a @Composable function
\src\main\kotlin\main.kt: (21, 5): Unresolved reference: Div
\src\main\kotlin\main.kt: (22, 9): Unresolved reference: Text
\src\main\kotlin\main.kt: (24, 5): Unresolved reference: Button
\src\main\kotlin\main.kt: (26, 13): Unresolved reference: onClick
\src\main\kotlin\main.kt: (26, 23): Cannot infer a type for this parameter. Please specify it explicitly.
\src\main\kotlin\main.kt: (31, 9): Unresolved reference: Text

[timothy.paetz]

If I add a commonMain then I get the same errors as well:

val commonMain by getting {
    dependencies {
        implementation("app.softwork:routing-compose:0.2.8")
    }
}

[Thomas]

I think you may have a typo somewhere in your main.kt file causing those errors. Do you get the error without this dependency as well?

[timothy.paetz]

No, works fine and opens in the browser if I delete routing-compose dependency

[timothy.paetz]

main.kt:

import androidx.compose.runtime.*
import org.jetbrains.compose.web.dom.Button
import org.jetbrains.compose.web.dom.Div
import org.jetbrains.compose.web.dom.Text
import org.jetbrains.compose.web.renderComposable

fun main() {
    renderComposable(rootElementId = "root") {
        Body()
//        HashRouter(initPath = "/") {
//            route("/blogs") {
//                Text("Hello World")
//            }
//        }
    }
}

@Composable
fun Body() {
    var counter by remember { mutableStateOf(0) }
    Div {
        Text("Clicked: ${counter}")
    }
    Button(
        attrs = {
            onClick { _ ->
                counter++
            }
        }
    ) {
        Text("Click")
    }
}

[timothy.paetz]

Looks like it might be what versions of kotlin, compose, and routing-compose are. Know which 3 all line up correctly? 🙂

[hfhbd]

Hey, routing composes uses dev builds of compose to allow using Kotlin 1.7.10.
The latest version of routing compose requires these versions:

kotlin("multiplatform") version "1.7.10"
id("org.jetbrains.compose") version "1.2.0-alpha01-dev770"

implementation("app.softwork:routing-compose:0.2.8")

And if you only want to have a web project, you could also use kotlin("js") version "1.7.10", this makes the config a little bit easier imho.

[timothy.paetz]

Thanks everyone for the help. Versions that worked for me:
Kotlin 1.7.10
Compose 1.2.0-alpha01-dev774
Compose Routing 0.2.8