timothy.paetz

    timothy.paetz

    1 week ago
    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!
    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

    Thomas

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

    timothy.paetz

    1 week ago
    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
    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

    Thomas

    1 week ago
    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

    timothy.paetz

    1 week ago
    No, works fine and opens in the browser if I delete routing-compose dependency
    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")
        }
    }
    Looks like it might be what versions of kotlin, compose, and routing-compose are. Know which 3 all line up correctly? 🙂
    hfhbd

    hfhbd

    1 week ago
    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

    timothy.paetz

    1 week ago
    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