Attempt to have a reusable skiko block in HTMLCanvasElement - but so far it's failing

examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt

@@ -1,25 +1,14 @@
 package org.jetbrains.compose.sample
 
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Button
-import androidx.compose.material.Switch
 import androidx.compose.material.Text
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.window.ComposeCanvas
 import org.jetbrains.compose.web.dom.Canvas
 import org.jetbrains.compose.web.renderComposable
+import org.jetbrains.compose.web.skiko.skiko
 import org.jetbrains.skiko.wasm.onWasmReady
 
 fun main() {
     onWasmReady {
         renderComposable(rootElementId = "root") {
-            var switched by remember { mutableStateOf(false) }
             Canvas({
                 attr("width", "300")
                 attr("height", "300")
@@ -27,26 +16,8 @@ fun main() {
                     property("outline", "1px solid black")
                 }
             }) {
-                DomSideEffect { canvas ->
+                skiko {
-                    ComposeCanvas(canvas).apply {
+                    Text("Press me!")
-                        setContent {
-                            Column {
-                                Button(
-                                    modifier = Modifier.padding(16.dp),
-                                    onClick = {
-                                        println("Button clicked!")
-                                    }
-                                ) {
-                                    Text(if (switched) "🦑 press 🐙" else "Press me!")
-                                }
-                                Switch(
-                                    modifier = Modifier.padding(16.dp),
-                                    checked = switched,
-                                    onCheckedChange = { switched = it }
-                                )
-                            }
-                        }
-                    }
                 }
             }
         }

web/core/src/jsMain/kotlin/org/jetbrains/compose/skiko/skiko.kt

@@ -5,35 +5,19 @@
 
 package org.jetbrains.compose.web.skiko
 
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.window.ComposeCanvas
 import org.jetbrains.compose.web.dom.ElementScope
-import org.w3c.dom.HTMLCanvasElement
 import org.jetbrains.skiko.wasm.onWasmReady
-import androidx.compose.ui.window.Window
+import org.w3c.dom.HTMLCanvasElement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
-import androidx.compose.material.Button
-import androidx.compose.material.Text
-import androidx.compose.foundation.layout.padding
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 
-fun ElementScope<HTMLCanvasElement>.ping() {
+@Composable
-    onWasmReady {
+fun ElementScope<HTMLCanvasElement>.skiko(block: @Composable () -> Unit) {
-//        Window("whatevs") {
+//    onWasmReady {
-//            var switched by remember { mutableStateOf(false) }
+        DomSideEffect { canvas ->
-//            Button(
+            ComposeCanvas(canvas).apply {
-//                modifier = Modifier.padding(16.dp),
+                setContent(block)
-//                onClick = {
+            }
-//                    println("Button clicked!")
-//                    switched = !switched
-//                }
-//            ) {
-//                Text(if (switched) "🦑 press 🐙" else "Press me!")
-//            }
-//        }
         }
+//    }
 }