Compose Multiplatform support

[tiwiz]

Is your feature request related to a problem? Please describe. As an Android Developer, I would love to use Coil with Compose Desktop in the same way I use Coil for Compose on Android.

Describe the solution you'd like Ideally, it would be the best to have the same approach we have on Android, so that the knowledge can be reused.

Additional context I think it would be OK to link the image download scope to either a LaunchedEffect in a Composable, or just link it to the Application lifecycle.

[mahramane]

3.0.0-beta-2-eap-932 is out and support wasm js. please update the ktor version in coil library.

[artemyto]

3.0.0-beta-2-eap-932 is out and support wasm js. please update the ktor version in coil library.

This version is not on Maven Central, but is from different repository (KtorEAP)

[sivansundar]

For some reason Im not able to load images despite using the right versions and dependencies.

Using the following under my commonMain :

implementation("io.coil-kt.coil3:coil-compose:3.0.0-alpha06")
implementation("io.coil-kt.coil3:coil-network-ktor:3.0.0-alpha06")
implementation("io.ktor:ktor-client-core:3.0.0-wasm2")

Composable :

 AsyncImage(
        modifier = Modifier.wrapContentSize(),
        model = item.imageUrl,
        contentDescription = "",
        error = painterResource(resource = Res.drawable.compose_multiplatform)
)

Not sure if I am missing something very basic.

[DRSchlaubi]

For some reason Im not able to load images despite using the right versions and dependencies.

Using the following under my commonMain :

implementation("io.coil-kt.coil3:coil-compose:3.0.0-alpha06")
implementation("io.coil-kt.coil3:coil-network-ktor:3.0.0-alpha06")
implementation("io.ktor:ktor-client-core:3.0.0-wasm2")

Composable :

 AsyncImage(
        modifier = Modifier.wrapContentSize(),
        model = item.imageUrl,
        contentDescription = "",
        error = painterResource(resource = Res.drawable.compose_multiplatform)
)

Not sure if I am missing something very basic.

Might want to share some error?

[sivansundar]

Sorry about that.

🚨 Failed - <IMAGEURL> - java.lang.ExceptionInInitializerError
2024-05-29 21:28:31.009  7146-7146  RealImageLoader         dev.sivan.muncheese                  I  🚨 Failed - <IMAGEURL> - java.lang.NoClassDefFoundError: <clinit> failed for class io.ktor.client.HttpClientJvmKt; see exception in other thread
2024-05-29 21:28:31.009  7146-7146  RealImageLoader         dev.sivan.muncheese                  I  🚨 Failed - <IMAGEURL> - java.lang.NoClassDefFoundError: io.ktor.client.HttpClientJvmKt
2024-05-29 21:28:31.009  7146-7146  RealImageLoader         dev.sivan.muncheese                  I  🚨 Failed - <IMAGEURL> - java.lang.NoClassDefFoundError: io.ktor.client.HttpClientJvmKt

[DRSchlaubi]

Sorry about that.

🚨 Failed - <IMAGEURL> - java.lang.ExceptionInInitializerError
2024-05-29 21:28:31.009  7146-7146  RealImageLoader         dev.sivan.muncheese                  I  🚨 Failed - <IMAGEURL> - java.lang.NoClassDefFoundError: <clinit> failed for class io.ktor.client.HttpClientJvmKt; see exception in other thread
2024-05-29 21:28:31.009  7146-7146  RealImageLoader         dev.sivan.muncheese                  I  🚨 Failed - <IMAGEURL> - java.lang.NoClassDefFoundError: io.ktor.client.HttpClientJvmKt
2024-05-29 21:28:31.009  7146-7146  RealImageLoader         dev.sivan.muncheese                  I  🚨 Failed - <IMAGEURL> - java.lang.NoClassDefFoundError: io.ktor.client.HttpClientJvmKt

Are you using proguard by chance?

[sivansundar]

No.

[sivansundar]

Alright I made it work. Missed adding ktor clients to all the platforms. Now my dependencies looks like this :

        commonMain.dependencies {
            implementation("io.coil-kt.coil3:coil:3.0.0-alpha06")
            implementation("io.coil-kt.coil3:coil-compose:3.0.0-alpha06")
            implementation("io.coil-kt.coil3:coil-network-ktor:3.0.0-alpha06")

            implementation("io.ktor:ktor-client-core:3.0.0-wasm2")
        }

        androidMain.dependencies {
            implementation("io.coil-kt.coil3:coil-network-okhttp:3.0.0-alpha06")

        }

        desktopMain.dependencies {
            implementation(compose.desktop.currentOs)
            implementation("org.jetbrains.kotlinx:kotlinx-coroutines-swing")
            implementation("io.coil-kt.coil3:coil-network-okhttp:3.0.0-alpha06")

        }

        iosMain.dependencies {
            implementation("io.ktor:ktor-client-darwin:3.0.0-wasm2")
        }

        wasmJsMain.dependencies {
            implementation("io.ktor:ktor-client-js:3.0.0-wasm2")
        }

[Feinate]

How to use png file from composeResources with coil... Seems to be impossible, lack of documentation...

[Holetzky]

Alright I made it work. Missed adding ktor clients to all the platforms. Now my dependencies looks like this :

        commonMain.dependencies {
            implementation("io.coil-kt.coil3:coil:3.0.0-alpha06")
            implementation("io.coil-kt.coil3:coil-compose:3.0.0-alpha06")
            implementation("io.coil-kt.coil3:coil-network-ktor:3.0.0-alpha06")

            implementation("io.ktor:ktor-client-core:3.0.0-wasm2")
        }

        androidMain.dependencies {
            implementation("io.coil-kt.coil3:coil-network-okhttp:3.0.0-alpha06")

        }

        desktopMain.dependencies {
            implementation(compose.desktop.currentOs)
            implementation("org.jetbrains.kotlinx:kotlinx-coroutines-swing")
            implementation("io.coil-kt.coil3:coil-network-okhttp:3.0.0-alpha06")

        }

        iosMain.dependencies {
            implementation("io.ktor:ktor-client-darwin:3.0.0-wasm2")
        }

        wasmJsMain.dependencies {
            implementation("io.ktor:ktor-client-js:3.0.0-wasm2")
        }

Thank you for sharing. To resolve ktor client with wasm2, I needed to add experimental jetbrains space to my settings.gradle.kts. Maybe that helps someone else:

dependencyResolutionManagement {
    repositories {
        google {
            mavenContent {
                includeGroupAndSubgroups("androidx")
                includeGroupAndSubgroups("com.android")
                includeGroupAndSubgroups("com.google")
            }
        }
        mavenCentral()
        maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
        maven("https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental")
    }
}