Hi folks, there is any example of using Interop be...

# compose-web

[SrSouza]

Hi folks, there is any example of using Interop between Compose Skia Canvas and Compose DOM? There is support for that?
Compose DOM uses only the Compose Runtime, so should be able to use both side by side, right?

[CLOVIS]

I don't think you can use both at the same time because they have different Appliers. I'm not an expert though so I could be wrong

[CLOVIS]

It's maybe possible to create a Canvas composable to switch between them

[SrSouza]

Yes, they have different appliers, I’m not looking for use a directly 1/1 used, I’m looking if is possible to use currently, if there is not issues with dependencies.

I’m thinking in a API more like this:

Box(modifer ...) {
  DomInterop(...) {
      DomDivComposable()
  }
}

Div(...) {
  CanvasInterop(..){
     MaterialButton()
     MultiplatformComponent()
  }
}

[CLOVIS]

I'm pretty sure it's possible to write a CanvasInterop composable but I don't know how to.

[CLOVIS]

To my knowledge they are not part of the library

[Arjan van Wieringen]

Here is someone who integrated Compose Canvas with Compose Web: https://kotlinlang.slack.com/archives/C01F2HV7868/p1660083398571449

[Oliver.O]

The above example integrates Compose Web UI/Canvas with the browser's DOM. It does not relate to or integrate with Compose Web/DOM.

While in theory, you could have multiple Composers (one for UI/Canvas, one for DOM), I'm not sure if that would currently go too much against the grain. Look at a setup sequence to get Compose up and running:

GlobalSnapshotManager.ensureStarted(testScope)

        withContext(headlessMonotonicFrameClock(fps)) {
            val recomposer = Recomposer(coroutineContext)
            val composition = Composition(applier, recomposer)

            try {
                composition.setContent {
                    // This is the place to insert the initial Composable
                }

                recomposer.runRecomposeAndApplyChanges() // <- This method will not return
                // unless the Recomposer is closed and all effects in managed compositions
                // complete.
            } finally {
                composition.dispose()
                GlobalSnapshotManager.stop()
            }
        }

So suppose we'd use different coroutines to start up multiple Composers (which would be possible even in single-threaded environments). Then each Composer makes assumptions about how to schedule updates, and these assumptions depend on the frame clock. I'm not sure whether that works with multiple Composers unaware of each other but depending on the same frame clock.

[shikasd]

Nesting different compositions with different appliers together is fairly simple and is supported already (just make sure to provide the correct applier in the constructor of composition)
The problem is to arrange resulting canvas and dom visually on top of each other, which should be possible, but you'll have to play with positioning of root elements for each a little bit