Image support #78

jacksonfdam · 2025-11-24T21:42:46Z

Description

Added Coil 3 image component (CraftDImage + builder) and updated Gradle files to include coil-compose and coil‑network‑okhttp dependencies. Updated version catalog and cleaned up build scripts.

…orks.

…both XML and Compose.

…work backend to OkHttp.

…from OkHttp to Ktor 3.

gabrielbmoro

Some comments, in general it looks awesome!! Ty @jacksonfdam for all the effort to make CraftD even better!!

gabrielbmoro · 2025-11-25T12:40:09Z

...d-compose/src/androidMain/kotlin/com/github/codandotv/craftd/compose/ui/image/CraftDImage.kt

+    }
+}
+
+private fun String.toContentScale(): ContentScale =


Niceeee!! 👏🏼

gabrielbmoro · 2025-11-25T12:41:03Z

...d-compose/src/androidMain/kotlin/com/github/codandotv/craftd/compose/ui/image/CraftDImage.kt

+    }
+}
+
+private fun String.toContentScale(): ContentScale =


#suggestion
We could add some unit tests for this toContentScale. I think it would be awesome! For sure, for that we need to make it internal

gabrielbmoro · 2025-11-25T12:45:40Z

...td-compose/src/commonMain/kotlin/com/github/codandotv/craftd/compose/ui/image/CraftDImage.kt

+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import coil3.compose.AsyncImage


#discussion

Hey folks! I’ve been thinking about something: imagine someone adds Craftd to a project that’s already using a very recent version of Coil—or even another image-loading library.

Wouldn’t it make sense for us to introduce an abstraction layer so developers can plug in whichever image loader they prefer? This way, Craftd wouldn’t need updates every time a new Coil 3 release comes out, and teams would have more flexibility overall.

What do you think? Does this direction make sense to you?

Cc: @jacksonfdam, @rviannaoliveira

I kind of agree, but actually, just Coil is 100% compatible with Multiplatform

the problem that this lib has support to android 100% too.

I agree with moro, i was thinking

I was thinking, I've had to do similar things using those server-driven UIs I made.

If you create a constructor in the Builder with a function that propagates to the component, like:

class CraftDImageBuilder(override val key: String = CraftDComponentKey.IMAGE_COMPONENT.key, loadImage : (String) -> Loader( algo que seja comum entre as libs teria que ver cada para pensar o objetvo certo aqui)) : CraftDBuilder { @Composable override fun craft(model: SimpleProperties, listener: CraftDViewListener) { val imageProperties = model.value.convertToElement<ImageProperties>() imageProperties?.let { CraftDImage(it, loadImage) { imageProperties.actionProperties?.let { listener.invoke(it) } } } } }

that accepts any kind of "result" from a coil or Picasso or something like that that the person implements, then when registering the components in the CraftedManager, the person could pass an implementation block using

and in the component there would be something inside the ImageView block, a loadImage.invoke(url) in Imageview

and when you register the component you can do this

val craftdBuilderManager = remember { CraftDBuilderManager().add( MySampleButtonComposeBuilder(), CraftdIMageBuilder(){ url -> //call your frameworker and return } ) } LaunchedEffect(Unit) { vm.loadProperties() } CraftDynamic( properties = properties, craftDBuilderManager = craftdBuilderManager ) { println( ">>>> category ${it.analytics?.category} -" + " action ${it.analytics?.action} -" + " label ${it.analytics?.label} -" + " deeplink ${it.deeplink}" ) }

inside from craftdManager will be override de current CraftdImageBuilder default to new instancia

fun add(vararg arrayCraftDBuilder: CraftDBuilder) : CraftDBuilderManager{ arrayCraftDBuilder.forEach { mapBuilder[it.key] = it } return this }

another thing

This PR you miss to register in CraftdManager your builder

CraftDBuilderManager

@Stable @Immutable class CraftDBuilderManager { private val mapBuilder = hashMapOf( CraftDComponentKey.BUTTON_COMPONENT.key to CraftDButtonBuilder(), CraftDComponentKey.TEXT_VIEW_COMPONENT.key to CraftDTextBuilder(), CraftDComponentKey.CHECK_BOX_COMPONENT.key to CraftDCheckBoxBuilder(), CraftDComponentKey.IMAGE_COMPONENT.key to CraftDImageBuilder(), )

I was thinking... what I showed you is a good approach that works for various situations, like loading an image into an ImageView. This will be quite common when thinking about components, such as having more complex components using component composition, and you can also have an ImageView.

In this case, I think it's better to create an additional parameter in the CraftManager constructor, and then implement it within the builder (still keeping the builder as I mentioned).

like:

Stable @Immutable class CraftDBuilderManager (private val imageLoader : (String) -> Loader = {}){ private val mapBuilder = hashMapOf( CraftDComponentKey.BUTTON_COMPONENT.key to CraftDButtonBuilder(), CraftDComponentKey.TEXT_VIEW_COMPONENT.key to CraftDTextBuilder(), CraftDComponentKey.CHECK_BOX_COMPONENT.key to CraftDCheckBoxBuilder(), CraftDComponentKey.IMAGE_COMPONENT.key to CraftDImageBuilder(imageLoader), )

gabrielbmoro · 2025-11-25T12:47:19Z

...d-compose/src/androidMain/kotlin/com/github/codandotv/craftd/compose/ui/image/CraftDImage.kt

+ * Supports both local and network images via Coil's AsyncImage.
+ */
+@Composable
+fun CraftDImage(


I was thinking if we need this component here, considering a new one was created in our commonMain source set. Any thoughts?

Depending on the library that you will use, you can have different features os specs per platform or custom extensions.

gabrielbmoro · 2025-11-25T12:47:57Z

.../craftd-xml/src/main/kotlin/com/github/codandotv/craftd/xml/ui/image/CraftDImageComponent.kt

+ *
+ * Supports both local and network images via Coil's load extension.
+ */
+class CraftDImageComponent


That is nice, we have it in xml too 🎉

rviannaoliveira · 2025-11-29T14:57:58Z

...td-compose/src/commonMain/kotlin/com/github/codandotv/craftd/compose/ui/image/CraftDImage.kt

+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import coil3.compose.AsyncImage


the problem that this lib has support to android 100% too.

I agree with moro, i was thinking

I was thinking, I've had to do similar things using those server-driven UIs I made.

If you create a constructor in the Builder with a function that propagates to the component, like:

class CraftDImageBuilder(override val key: String = CraftDComponentKey.IMAGE_COMPONENT.key, loadImage : (String) -> Loader( algo que seja comum entre as libs teria que ver cada para pensar o objetvo certo aqui)) : CraftDBuilder { @Composable override fun craft(model: SimpleProperties, listener: CraftDViewListener) { val imageProperties = model.value.convertToElement<ImageProperties>() imageProperties?.let { CraftDImage(it, loadImage) { imageProperties.actionProperties?.let { listener.invoke(it) } } } } }

that accepts any kind of "result" from a coil or Picasso or something like that that the person implements, then when registering the components in the CraftedManager, the person could pass an implementation block using

and in the component there would be something inside the ImageView block, a loadImage.invoke(url) in Imageview

and when you register the component you can do this

val craftdBuilderManager = remember { CraftDBuilderManager().add( MySampleButtonComposeBuilder(), CraftdIMageBuilder(){ url -> //call your frameworker and return } ) } LaunchedEffect(Unit) { vm.loadProperties() } CraftDynamic( properties = properties, craftDBuilderManager = craftdBuilderManager ) { println( ">>>> category ${it.analytics?.category} -" + " action ${it.analytics?.action} -" + " label ${it.analytics?.label} -" + " deeplink ${it.deeplink}" ) }

rviannaoliveira · 2025-11-29T15:01:26Z

...td-compose/src/commonMain/kotlin/com/github/codandotv/craftd/compose/ui/image/CraftDImage.kt

+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import coil3.compose.AsyncImage


inside from craftdManager will be override de current CraftdImageBuilder default to new instancia

fun add(vararg arrayCraftDBuilder: CraftDBuilder) : CraftDBuilderManager{ arrayCraftDBuilder.forEach { mapBuilder[it.key] = it } return this }

rviannaoliveira · 2025-11-29T15:03:37Z

...td-compose/src/commonMain/kotlin/com/github/codandotv/craftd/compose/ui/image/CraftDImage.kt

+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import coil3.compose.AsyncImage


another thing

This PR you miss to register in CraftdManager your builder

CraftDBuilderManager

@Stable @Immutable class CraftDBuilderManager { private val mapBuilder = hashMapOf( CraftDComponentKey.BUTTON_COMPONENT.key to CraftDButtonBuilder(), CraftDComponentKey.TEXT_VIEW_COMPONENT.key to CraftDTextBuilder(), CraftDComponentKey.CHECK_BOX_COMPONENT.key to CraftDCheckBoxBuilder(), CraftDComponentKey.IMAGE_COMPONENT.key to CraftDImageBuilder(), )

rviannaoliveira · 2025-11-29T15:03:52Z

android_kmp/gradle/libs.versions.toml

 kotlinx-collections-immutable = { module = "org.jetbrains.kotlinx:kotlinx-collections-immutable", version.ref = "kotlinx-collections-immutable" }

+# Coil
+coil-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil" }


after my comment you can remove this part

rviannaoliveira · 2025-11-29T15:05:30Z

...d-xml/src/main/kotlin/com/github/codandotv/craftd/xml/ui/image/CraftDImageComponentRender.kt

+import com.github.codandotv.craftd.androidcore.presentation.CraftDViewListener
+import com.github.codandotv.craftd.xml.ui.CraftDViewRenderer
+
+class ImageComponentRender(override var onClickListener: CraftDViewListener?) :


you need to register here too

object CraftDBuilderManager { fun getBuilderRenders( simpleProperties: List<SimpleProperties>, customDynamicBuilderList: List<CraftDViewRenderer<*>> = emptyList(), onAction: CraftDViewListener ): List<CraftDViewRenderer<*>> { val allViewRenders = (customDynamicBuilderList + listOf( CraftDTextViewComponentRender(onAction), ButtonComponentRender(onAction), ImageComponentRender(onAction) ))

rviannaoliveira · 2025-11-29T15:37:20Z

...td-compose/src/commonMain/kotlin/com/github/codandotv/craftd/compose/ui/image/CraftDImage.kt

+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import coil3.compose.AsyncImage


I was thinking... what I showed you is a good approach that works for various situations, like loading an image into an ImageView. This will be quite common when thinking about components, such as having more complex components using component composition, and you can also have an ImageView.

In this case, I think it's better to create an additional parameter in the CraftManager constructor, and then implement it within the builder (still keeping the builder as I mentioned).

like:

Stable @Immutable class CraftDBuilderManager (private val imageLoader : (String) -> Loader = {}){ private val mapBuilder = hashMapOf( CraftDComponentKey.BUTTON_COMPONENT.key to CraftDButtonBuilder(), CraftDComponentKey.TEXT_VIEW_COMPONENT.key to CraftDTextBuilder(), CraftDComponentKey.CHECK_BOX_COMPONENT.key to CraftDCheckBoxBuilder(), CraftDComponentKey.IMAGE_COMPONENT.key to CraftDImageBuilder(imageLoader), )

jacksonfdam · 2025-12-24T23:10:36Z

I will take some time tomorrow to fix this, thanks guys, for the suggestions

jacksonmafra-umain added 6 commits November 24, 2025 21:55

feat: add ImageProperties data model for image component configuration

dfccf76

Add image component implementation for both XML and Compose UI framew…

ac550c1

…orks.

Add Coil 3 dependencies and update image component documentation for …

d2dce0c

…both XML and Compose.

update Coil dependency to version 3.3.0

5b4aed0

feat: Add Coil image loading to craftd-xml module and switch Coil net…

fd5ca80

…work backend to OkHttp.

feat: add CraftDImage composable and migrate Coil network dependency …

6b3af85

…from OkHttp to Ktor 3.

jacksonfdam requested a review from rviannaoliveira as a code owner November 24, 2025 21:42

jacksonfdam marked this pull request as draft November 24, 2025 21:43

gabrielbmoro reviewed Nov 25, 2025

View reviewed changes

rviannaoliveira reviewed Dec 7, 2025

View reviewed changes

Merge branch 'main' into image-support

d2d306a

Image support #78

Are you sure you want to change the base?

Image support #78

Uh oh!

Conversation

jacksonfdam commented Nov 24, 2025

Description

Uh oh!

gabrielbmoro left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jacksonfdam commented Dec 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants