Port all web examples to ComposeViewport (#5378)

This PR prepares examples to 1.9.0 where CanvasBasedWindow is deprecated ## Testing build all examples ## Release Notes N/A
4 months ago · 766ac556e8
14 changed files with 116 additions and 33 deletions
--- a/examples/chat/jsApp/src/jsMain/kotlin/main.js.kt
+++ b/examples/chat/jsApp/src/jsMain/kotlin/main.js.kt
@ -1,14 +1,14 @@
				@@ -1,14 +1,14 @@
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.window.CanvasBasedWindow
+import androidx.compose.ui.window.ComposeViewport
 import androidx.compose.ui.ExperimentalComposeUiApi
 import org.jetbrains.skiko.wasm.onWasmReady

@OptIn(ExperimentalComposeUiApi::class)
 fun main() {
    onWasmReady {
-        CanvasBasedWindow(title = "Chat") {
+        ComposeViewport("composeApp") {
            Column(modifier = Modifier.fillMaxSize()) {
                MainView()
            }
--- a/examples/chat/jsApp/src/jsMain/resources/index.html
+++ b/examples/chat/jsApp/src/jsMain/resources/index.html
@ -7,9 +7,7 @@
				@@ -7,9 +7,7 @@
    <link type="text/css" rel="stylesheet" href="styles.css" />
 </head>
 <body>
-    <div>
-        <canvas id="ComposeTarget" width="600" height="600"></canvas>
-    </div>
+    <div id="composeApp">
    <script src="jsApp.js"> </script>
 </body>
 </html>
--- a/examples/chat/jsApp/src/jsMain/resources/styles.css
+++ b/examples/chat/jsApp/src/jsMain/resources/styles.css
@ -1,8 +1,13 @@
				@@ -1,8 +1,13 @@
-#root {
+html, body {
    width: 100%;
    height: 100vh;
+    margin: 0;
+    padding: 0;
+    background-color: white;
+    overflow: hidden;
 }

-#root > .compose-web-column > div {
-    position: relative;
+#composeApp {
+    width: 100%;
+    height: 100%;
 }
--- a/examples/graphics-2d/jsApp/src/jsMain/kotlin/main.js.kt
+++ b/examples/graphics-2d/jsApp/src/jsMain/kotlin/main.js.kt
@ -1,11 +1,11 @@
				@@ -1,11 +1,11 @@
 import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.window.CanvasBasedWindow
+import androidx.compose.ui.window.ComposeViewport
 import org.jetbrains.skiko.wasm.onWasmReady

@OptIn(ExperimentalComposeUiApi::class)
 fun main() {
    onWasmReady {
-        CanvasBasedWindow(title = "Graphics2D") {
+        ComposeViewport("composeApp") {
            MainView()
        }
    }
--- a/examples/graphics-2d/jsApp/src/jsMain/resources/index.html
+++ b/examples/graphics-2d/jsApp/src/jsMain/resources/index.html
@ -8,9 +8,7 @@
				@@ -8,9 +8,7 @@
 </head>
 <body>
    <h1>compose multiplatform web demo</h1>
-    <div>
-        <canvas id="ComposeTarget" width="800" height="600"></canvas>
-    </div>
+    <div id="composeApp" />
    <script src="jsApp.js"> </script>
 </body>
 </html>
--- a/examples/graphics-2d/jsApp/src/jsMain/resources/styles.css
+++ b/examples/graphics-2d/jsApp/src/jsMain/resources/styles.css
@ -1,8 +1,13 @@
				@@ -1,8 +1,13 @@
-#root {
+html, body {
    width: 100%;
-    height: 100vh;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background-color: white;
+    overflow: hidden;
 }

-#root > .compose-web-column > div {
-    position: relative;
+#composeApp {
+    width: 100%;
+    height: 100%;
 }
--- a/examples/imageviewer/webApp/src/jsMain/kotlin/Main.js.kt
+++ b/examples/imageviewer/webApp/src/jsMain/kotlin/Main.js.kt
@ -1,11 +1,11 @@
				@@ -1,11 +1,11 @@
 import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.window.CanvasBasedWindow
+import androidx.compose.ui.window.ComposeViewport
 import org.jetbrains.skiko.wasm.onWasmReady

@OptIn(ExperimentalComposeUiApi::class)
 fun main() {
    onWasmReady {
-        CanvasBasedWindow("ImageViewer") {
+        ComposeViewport("composeApp") {
            ImageViewerWeb()
        }
    }
--- a/examples/imageviewer/webApp/src/jsMain/resources/index.html
+++ b/examples/imageviewer/webApp/src/jsMain/resources/index.html
@ -5,9 +5,63 @@
				@@ -5,9 +5,63 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ImageViewer</title>
    <script src="skiko.js"> </script>
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            background-color: white;
+            overflow: hidden;
+        }
+
+        #warning {
+            position: absolute;
+            top: 100px;
+            left: 100px;
+            max-width: 830px;
+            z-index: 100;
+            background-color: white;
+            font-size: initial;
+            display: none;
+        }
+        #warning li {
+            padding-bottom: 15px;
+        }
+
+        #warning span.code {
+            font-family: monospace;
+        }
+
+        ul {
+            margin-top: 0;
+            margin-bottom: 15px;
+        }
+
+        #footer {
+            position: fixed;
+            bottom: 0;
+            width: 100%;
+            z-index: 1000;
+            background-color: white;
+            font-size: initial;
+        }
+
+        #close {
+            position: absolute;
+            top: 0;
+            right: 10px;
+            cursor: pointer;
+        }
+
+        #composeApp {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
 </head>
 <body>
-<canvas id="ComposeTarget"></canvas>
+<div id="composeApp" />
 <script src="imageviewer.js"> </script>
 </body>
 </html>
--- a/examples/imageviewer/webApp/src/wasmJsMain/kotlin/Main.wasm.kt
+++ b/examples/imageviewer/webApp/src/wasmJsMain/kotlin/Main.wasm.kt
@ -1,5 +1,5 @@
				@@ -1,5 +1,5 @@
 import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.window.CanvasBasedWindow
+import androidx.compose.ui.window.ComposeViewport
 import org.jetbrains.compose.resources.ExperimentalResourceApi
 import org.jetbrains.compose.resources.configureWebResources

@ -8,7 +8,7 @@ fun main() {
				@@ -8,7 +8,7 @@ fun main() {
    configureWebResources {
        resourcePathMapping { path -> "./$path" }
    }
-    CanvasBasedWindow("ImageViewer") {
+    ComposeViewport("composeApp") {
        ImageViewerWeb()
    }
 }
--- a/examples/imageviewer/webApp/src/wasmJsMain/resources/index.html
+++ b/examples/imageviewer/webApp/src/wasmJsMain/resources/index.html
@ -53,10 +53,15 @@
				@@ -53,10 +53,15 @@
            right: 10px;
            cursor: pointer;
        }
+
+        #composeApp {
+            width: 100%;
+            height: 100%;
+        }
    </style>
 </head>
 <body>
-<canvas id="ComposeTarget"></canvas>
+<div id="composeApp" />

 <div id="warning">
    ⚠️ Please make sure that your runtime environment supports the latest version of Wasm GC and Exception-Handling proposals.
--- a/examples/jetsnack/web/src/wasmJsMain/kotlin/Main.kt
+++ b/examples/jetsnack/web/src/wasmJsMain/kotlin/Main.kt
@ -7,7 +7,7 @@ import androidx.compose.ui.Modifier
				@@ -7,7 +7,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.platform.Font
-import androidx.compose.ui.window.CanvasBasedWindow
+import androidx.compose.ui.window.ComposeViewport
 import com.example.jetsnack.JetSnackAppEntryPoint
 import com.example.jetsnack.ui.components.loadImage
 import com.example.jetsnack.ui.components.toByteArray
@ -23,7 +23,7 @@ fun main() {
				@@ -23,7 +23,7 @@ fun main() {
        // same as default - this is not necessary to add here. It's here to show this feature
        resourcePathMapping { path -> "./$path" }
    }
-    CanvasBasedWindow("JetSnack", canvasElementId = "jetsnackCanvas") {
+    ComposeViewport("jetsnackApp") {
        var loading: Boolean by remember { mutableStateOf(true) }

        if (loading) {
--- a/examples/jetsnack/web/src/wasmJsMain/resources/index.html
+++ b/examples/jetsnack/web/src/wasmJsMain/resources/index.html
@ -56,7 +56,10 @@
				@@ -56,7 +56,10 @@
    </style>
 </head>
 <body>
-<canvas id="jetsnackCanvas"></canvas>
+
+<div id="jetsnackApp" style="width: 100%; height: 100%; outline: 2px solid #c31414">
+    <canvas id="jetsnackCanvas"></canvas>
+</div>

 <div id="warning">
    ⚠️ Please make sure that your runtime environment supports the latest version of Wasm GC and Exception-Handling proposals.
--- a/examples/nav_cupcake/composeApp/src/wasmJsMain/kotlin/main.kt
+++ b/examples/nav_cupcake/composeApp/src/wasmJsMain/kotlin/main.kt
@ -1,7 +1,7 @@
				@@ -1,7 +1,7 @@
 import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.window.CanvasBasedWindow
+import androidx.compose.ui.window.ComposeViewport

@OptIn(ExperimentalComposeUiApi::class)
 fun main() {
-    CanvasBasedWindow(canvasElementId = "ComposeTarget") { App() }
+    ComposeViewport("composeApp") { App() }
 }
--- a/examples/nav_cupcake/composeApp/src/wasmJsMain/resources/index.html
+++ b/examples/nav_cupcake/composeApp/src/wasmJsMain/resources/index.html
@ -5,8 +5,23 @@
				@@ -5,8 +5,23 @@
    <title>Compose App</title>
    <script type="application/javascript" src="skiko.js"></script>
    <script type="application/javascript" src="composeApp.js"></script>
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            background-color: white;
+            overflow: hidden;
+        }
+
+        #composeApp {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
 </head>
 <body>
-<canvas id="ComposeTarget"></canvas>
+<div id="composeApp" />
 </body>
 </html>