Minimal example of what do I want to achieve

3 years ago · 2091135a3d
2 changed files with 44 additions and 5 deletions
--- a/examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt
+++ b/examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt
@ -1,15 +1,53 @@
 package org.jetbrains.compose.sample

-import kotlinx.browser.window
+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.skiko.wasm.onWasmReady

 fun main() {
-    renderComposable(rootElementId = "root") {
-        Canvas {
-            onWasmReady {
-                window.alert("HEY!!!!!")
+    onWasmReady {
+        renderComposable(rootElementId = "root") {
+            var switched by remember { mutableStateOf(false) }
+            Canvas({
+                attr("width", "300")
+                attr("height", "300")
+                style {
+                    property("outline", "1px solid black")
+                }
+            }) {
+                DomSideEffect { canvas ->
+                    ComposeCanvas(canvas).apply {
+                        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 }
+                                )
+                            }
+                        }
+                    }
+                }
            }
        }
    }
--- a/examples/web-skia/src/jsMain/resources/index.html
+++ b/examples/web-skia/src/jsMain/resources/index.html
@ -13,5 +13,6 @@
    <body>
        <div id="root"/>
    </body>
+    <script src="skiko.js"></script>
    <script src="compose-skia.js"></script>
 </html>