Refactor to separate web app module

compose-imageviewer/README.md

@@ -21,7 +21,7 @@ Check out the repo, navigate to the project folder, and use the following comman
 
 ### Run Web version via Gradle
 
-`./gradlew :shared:wasmRun`
+`./gradlew :webApp:wasmRun`
 
 ### Run Desktop version via Gradle
 

compose-imageviewer/settings.gradle.kts

@@ -27,3 +27,4 @@ rootProject.name = "imageviewer"
 include(":androidApp")
 include(":shared")
 include(":desktopApp")
+include(":webApp")

compose-imageviewer/shared/build.gradle.kts

@@ -21,25 +21,11 @@ kotlin {
 //    iosSimulatorArm64()
 
     js(IR) {
-        moduleName = "imageviewer"
         browser()
-        binaries.executable()
     }
 
     wasm {
-        moduleName = "imageviewer"
-        browser {
-            commonWebpackConfig {
-                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).copy(
-                    open = mapOf(
-                        "app" to mapOf(
-                            "name" to "google chrome",
-                        )
-                    ),
-                )
-            }
-        }
-        binaries.executable()
+        browser()
     }
 
 //    cocoapods {
@@ -111,10 +97,6 @@ kotlin {
     }
 }
 
-compose.experimental {
-    web.application {}
-}
-
 android {
     compileSdk = 33
     sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
@@ -131,5 +113,5 @@ android {
     }
 }
 
-// Use a proper version of webpack, TODO remove after updating to Kotlin 1.9. 
-rootProject.the<NodeJsRootExtension>().versions.webpack.version = "5.76.2"
+// Use a proper version of webpack, TODO remove after updating to Kotlin 1.9.
+rootProject.the<NodeJsRootExtension>().versions.webpack.version = "5.76.2"

compose-imageviewer/shared/src/commonMain/kotlin/example/imageviewer/ImageViewer.common.kt

@@ -34,7 +34,7 @@ enum class ExternalImageViewerEvent {
 
 @OptIn(ExperimentalAnimationApi::class)
 @Composable
-internal fun ImageViewerCommon(
+fun ImageViewerCommon(
     dependencies: Dependencies,
     externalEvents: Flow<ExternalImageViewerEvent> = emptyFlow()
 ) {

compose-imageviewer/shared/src/commonMain/kotlin/example/imageviewer/style/Palette.kt

@@ -48,7 +48,7 @@ object ImageviewerColors {
 }
 
 @Composable
-internal fun ImageViewerTheme(content: @Composable () -> Unit) {
+fun ImageViewerTheme(content: @Composable () -> Unit) {
     isSystemInDarkTheme() // todo check and change colors
     MaterialTheme(
         colorScheme = MaterialTheme.colorScheme.copy(

compose-imageviewer/shared/src/commonMain/kotlin/example/imageviewer/view/Toast.kt

@@ -22,7 +22,7 @@ sealed interface ToastState {
 }
 
 @Composable
-internal fun Toast(
+fun Toast(
     state: MutableState<ToastState>
 ) {
     val value = state.value

compose-imageviewer/webApp/build.gradle.kts

@@ -0,0 +1,69 @@
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
+
+plugins {
+    kotlin("multiplatform")
+    id("org.jetbrains.compose")
+}
+
+val copyJsResources = tasks.create("copyJsResourcesWorkaround", Copy::class.java) {
+    from(project(":shared").file("src/commonMain/resources"))
+    into("build/processedResources/js/main")
+}
+
+val copyWasmResources = tasks.create("copyWasmResourcesWorkaround", Copy::class.java) {
+    from(project(":shared").file("src/commonMain/resources"))
+    into("build/processedResources/wasm/main")
+}
+
+afterEvaluate {
+    project.tasks.getByName("jsProcessResources").finalizedBy(copyJsResources)
+    project.tasks.getByName("wasmProcessResources").finalizedBy(copyWasmResources)
+}
+
+kotlin {
+    js(IR) {
+        moduleName = "imageviewer"
+        browser()
+        binaries.executable()
+    }
+
+    wasm {
+        moduleName = "imageviewer"
+        browser {
+            commonWebpackConfig {
+                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).copy(
+                    open = mapOf(
+                        "app" to mapOf(
+                            "name" to "google chrome",
+                        )
+                    ),
+                )
+            }
+        }
+        binaries.executable()
+    }
+
+    sourceSets {
+        val jsWasmMain by creating {
+            dependencies {
+                implementation(project(":shared"))
+                implementation(compose.runtime)
+                implementation(compose.ui)
+                implementation(compose.foundation)
+                implementation(compose.material)
+                @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
+                implementation(compose.components.resources)
+            }
+        }
+        val jsMain by getting {
+            dependsOn(jsWasmMain)
+        }
+        val wasmMain by getting {
+            dependsOn(jsWasmMain)
+        }
+    }
+}
+
+compose.experimental {
+    web.application {}
+}

compose-imageviewer/webApp/src/jsMain/kotlin/Actuals.kt

@@ -0,0 +1,14 @@
+import example.imageviewer.model.WrappedHttpClient
+import io.ktor.client.*
+import io.ktor.client.engine.js.*
+import io.ktor.client.request.*
+import io.ktor.client.statement.*
+
+actual fun createWrappedHttpClient(): WrappedHttpClient {
+    return object : WrappedHttpClient {
+        private val ktorClient = HttpClient(JsClient())
+        override suspend fun getAsBytes(urlString: String): ByteArray {
+            return ktorClient.get(urlString).readBytes()
+        }
+    }
+}

compose-imageviewer/webApp/src/jsMain/kotlin/Main.kt

@@ -0,0 +1,19 @@
+import androidx.compose.runtime.*
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+import example.imageviewer.*
+import example.imageviewer.model.*
+import io.ktor.client.*
+import io.ktor.client.engine.js.*
+import io.ktor.client.request.*
+import io.ktor.client.statement.*
+import org.jetbrains.skiko.wasm.onWasmReady
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    onWasmReady {
+        CanvasBasedWindow("ImageViewer") {
+            ImageViewerWeb()
+        }
+    }
+}

compose-imageviewer/shared/src/jsMain/resources/index.html → compose-imageviewer/webApp/src/jsMain/resources/index.html

@@ -6,11 +6,7 @@
     <script src="skiko.js"> </script>
 </head>
 <body>
-<center>
-    <div style="background-color: darkslategrey;">
-        <canvas id="ComposeTarget" width="800" height="1000"></canvas>
-    </div>
-</center>
+<canvas id="ComposeTarget"></canvas>
 <script src="imageviewer.js"> </script>
 </body>
-</html>
+</html>