Setup default project

build.gradle.kts

@@ -6,7 +6,3 @@ plugins {
     id("org.jetbrains.compose") version libs.versions.composePlugin.get() apply false
     id("com.google.devtools.ksp") version libs.versions.ksp.get() apply false
 }
-
-tasks.register("clean", Delete::class) {
-    delete(rootProject.buildDir)
-}

gradle.properties

@@ -11,6 +11,7 @@ android.nonTransitiveRClass=true
 #MPP
 kotlin.mpp.enableCInteropCommonization=true
 kotlin.mpp.androidSourceSetLayoutVersion=2
+org.jetbrains.compose.experimental.jscanvas.enabled=true
 
 #Compose
 org.jetbrains.compose.experimental.uikit.enabled=true

settings.gradle.kts

@@ -25,4 +25,5 @@ rootProject.name = "puzzyx"
 
 include(":androidApp")
 include(":desktopApp")
+include(":webApp")
 include(":shared")

shared/build.gradle.kts

@@ -19,6 +19,12 @@ kotlin {
         }
     }
 
+//    js(IR) {
+//        // Adding moduleName as a workaround for this issue: https://youtrack.jetbrains.com/issue/KT-51942
+//        moduleName = "puzzyx-common"
+//        browser()
+//    }
+
     sourceSets {
         val commonMain by getting {
             dependencies {

webApp/build.gradle.kts

@@ -0,0 +1,45 @@
+import org.jetbrains.compose.desktop.application.dsl.TargetFormat
+
+plugins {
+    kotlin("multiplatform")
+    id("org.jetbrains.compose")
+}
+
+kotlin {
+    js(IR) {
+        moduleName = "puzzyx-web"
+        browser()
+        binaries.executable()
+    }
+    sourceSets {
+        val commonMain by getting {
+            dependencies {
+                implementation(compose.runtime)
+                implementation(compose.foundation)
+                implementation(compose.material3)
+//                implementation(project(":shared"))
+                implementation(libs.appyx.navigation)
+                implementation(libs.appyx.components.backstack)
+            }
+        }
+    }
+}
+
+compose.experimental {
+    web.application {}
+}
+
+tasks.register<Copy>("copyResources") {
+    // Dirs containing files we want to copy
+    from("../shared/src/commonMain/resources")
+
+    // Output for web resources
+    into("$buildDir/processedResources/js/main")
+
+    include("**/*")
+}
+
+tasks.named("jsMainClasses") {
+    dependsOn("copyResources")
+}
+

webApp/src/jsMain/kotlin/Main.kt

@@ -0,0 +1,93 @@
+import androidx.compose.foundation.focusable
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.Surface
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.input.key.Key
+import androidx.compose.ui.input.key.KeyEvent
+import androidx.compose.ui.input.key.KeyEventType
+import androidx.compose.ui.input.key.key
+import androidx.compose.ui.input.key.onKeyEvent
+import androidx.compose.ui.input.key.type
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.unit.dp
+import com.bumble.appyx.navigation.integration.ScreenSize
+import com.bumble.appyx.navigation.integration.WebNodeHost
+import com.bumble.puzzyx.node.app.PuzzyxAppNode
+import com.bumble.puzzyx.ui.PuzzyxTheme
+import com.bumble.puzzyx.ui.appyx_dark
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
+import kotlinx.coroutines.channels.Channel
+import kotlinx.coroutines.flow.receiveAsFlow
+import kotlinx.coroutines.launch
+import org.jetbrains.skiko.wasm.onWasmReady
+
+fun main() {
+    val events: Channel<Unit> = Channel()
+    onWasmReady {
+        BrowserViewportWindow() {
+            PuzzyxTheme {
+                val requester = remember { FocusRequester() }
+                var hasFocus by remember { mutableStateOf(false) }
+
+                var screenSize by remember { mutableStateOf(ScreenSize(0.dp, 0.dp)) }
+                val eventScope = remember { CoroutineScope(SupervisorJob() + Dispatchers.Main) }
+
+                Surface(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .onSizeChanged { screenSize = ScreenSize(it.width.dp, it.height.dp) }
+                        .onKeyEvent { event ->
+                            onKeyEvent(event, events, eventScope)
+                        }
+                        .focusRequester(requester)
+                        .focusable()
+                        .onFocusChanged { hasFocus = it.hasFocus },
+                    color = appyx_dark,
+                ) {
+                    WebNodeHost(
+                        screenSize = screenSize,
+                        onBackPressedEvents = events.receiveAsFlow(),
+                    ) { buildContext ->
+                        PuzzyxAppNode(
+                            buildContext = buildContext,
+                        )
+                    }
+                }
+
+
+                if (!hasFocus) {
+                    LaunchedEffect(Unit) {
+                        requester.requestFocus()
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@OptIn(ExperimentalComposeUiApi::class)
+private fun onKeyEvent(
+    keyEvent: KeyEvent,
+    events: Channel<Unit>,
+    coroutineScope: CoroutineScope = CoroutineScope(SupervisorJob() + Dispatchers.Main),
+): Boolean =
+    when {
+        keyEvent.type == KeyEventType.KeyUp && keyEvent.key == Key.Backspace -> {
+            coroutineScope.launch { events.send(Unit) }
+            true
+        }
+
+        else -> false
+    }