Hey folks, thought I’d share it was easy to port `DesktopXmlVectorParser` to web, making Android XML...

# compose-web

[Mike Digman]

Hey folks, thought I’d share it was easy to port DesktopXmlVectorParser to web, making Android XML resources easy to access. Required only changing a few lines within the parser itself (to handle null cases).

[Mike Digman]

The wrapper code I use to access the xml bytes was where most of the (small) amount of work went:

@Composable
private fun Resource.rememberXMLImageVector(): LoadState<ImageVector> {
    val state: MutableState<LoadState<ImageVector>> = remember(this) { mutableStateOf(LoadState.Loading()) }
    val density = LocalDensity.current

    LaunchedEffect(this) {
        state.value = try {
            val xmlString = readBytes().decodeToString()
            val xmlDom = DOMParser().parseFromString(xmlString, "application/xml")
            val rootXmlElement = xmlDom.documentElement!!
            val imageVector = rootXmlElement.parseVectorRoot(density)
            LoadState.Success(imageVector)
        } catch (e: Exception) {
            LoadState.Error(e)
        }
    }
    return state.value
}

[Mike Digman]

Happy to upstream if useful, will likely need some help navigating the right location / process if needed. Otherwise, feel free to copy.

[Oleksandr Karpovich [JB]]

Nice! thank you!
I’m not perfectly familiar with the resources lib, but looking at the k/js implementations I see parseXML implementation missing

https://github.com/JetBrains/compose-multiplatform/blob/master/components/resource[…]rc/jsMain/kotlin/org/jetbrains/compose/resources/Resource.js.kt

I think these 3 lines would be useful for that method implementation:

val xmlString = readBytes().decodeToString()
val xmlDom = DOMParser().parseFromString(xmlString, "application/xml")
val rootXmlElement = xmlDom.documentElement!!

The caveat is that resources lib has its own interface for Node, Element, etc. But their implementations should be able to simply delegate to the corresponding js instances.

Your contribution is very much welcome 🙂

[Mike Digman]

Thanks! I’ve started a draft of a pull request here: https://github.com/JetBrains/compose-multiplatform/pull/3105

[Mike Digman]

Will work on adding the delegation in shortly. Have a couple open questions for ya:
1. Have any tips on how to test this locally? I can build via the resource project’s gradle file but I suspect I’d need to export the entire library?
2. Is it worth adding tests in place? There’s currently no jsTest folder. Perhaps these are worth adding in later?

[Mike Digman]

Somewhat good news, the pull request partly works! Gradients don’t work but I’m not having any luck with debugging. I can’t get it to work with anything in the common project, even with IntelliJ Ultimate.

[Oleksandr Karpovich [JB]]

There’re practically no tests for other platforms too, so I guess and hope we’ll add them soon. So we can skip tests in your PR.

To test locally we have https://github.com/JetBrains/compose-multiplatform/tree/master/components/resources/demo but I see you’ve already found it.

[Mike Digman]

Fixed my gradient bug. Gotcha, well tested against the sample as suggested and it works! Pull request is open for review: https://github.com/JetBrains/compose-multiplatform/pull/3105

[Mike Digman]

@Oleksandr Karpovich [JB] please take a look when you can

[Oleksandr Karpovich [JB]]

Nice! thanks a lot!

[Mike Digman]

Fixed your ask to not regenerate the NodeList every get. Let me know if there’s anything else I can patch.