Add router to experiments

Author: LimeBeck

build.gradle.kts

@@ -17,6 +17,11 @@ repositories {
 kotlin {
     js {
         browser {
+            commonWebpackConfig {
+                cssSupport {
+                    enabled.set(true)
+                }
+            }
         }
         binaries.executable()
     }
@@ -36,6 +41,8 @@ kotlin {
             implementation(libs.kotlinx.serialization.json)
             implementation(compose.runtime)
             implementation(compose.html.core)
+            implementation(libs.router)
+            implementation(npm("hiq", "4.2.11"))
         }
 
         jsTest.dependencies {

gradle/libs.versions.toml

@@ -3,7 +3,7 @@ kotlin = "2.0.0"
 compose = "1.6.11"
 kotlinx-html = "0.11.0"
 kotlinx-serialization = "1.6.0"
-
+router = "0.2.14"
 
 [libraries]
 kotlin-coroutines = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.strictly = "1.8.0" }
@@ -16,6 +16,8 @@ kotlinx-html = { module = "org.jetbrains.kotlinx:kotlinx-html", version.ref = "k
 kotlinx-serialization-core = { module = "org.jetbrains.kotlinx:kotlinx-serialization-core", version.ref = "kotlinx-serialization" }
 kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinx-serialization" }
 
+router = { module = "app.softwork:routing-compose", version.ref = "router" }
+
 [plugins]
 jetbrains-compose = { id = "org.jetbrains.compose", version.ref = "compose" }
 jetbrains-compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }

src/jsMain/kotlin/Application.kt

@@ -2,6 +2,9 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import app.softwork.routingcompose.BrowserRouter
+import app.softwork.routingcompose.NavLink
+import app.softwork.routingcompose.Router
 import common.BaseStyles
 import common.Theme
 import common.ThemeProvider
@@ -47,14 +50,39 @@ fun main() {
                 }
             }
             PageContent {
-                var counter: Int by remember { mutableStateOf(0) }
-                Div {
-                    Text("Hello World $counter")
-                }
-                Div {
-                    Span {
-                        components.Button("Increment") {
-                            counter++
+                BrowserRouter("/") {
+                    route("/") {
+                        NavLink("/hello-world") {
+                            Text("To Hello world!")
+                        }
+                    }
+                    route("/hello-world") {
+                        val params = parameters?.map
+                        var counter: Int by remember { mutableStateOf(0) }
+                        Div {
+                            params?.map {
+                                Div {
+                                    Span { Text("Param: ${it.key}: ${it.value}") }
+                                }
+                            }
+                        }
+                        Div {
+                            Text("Hello World $counter")
+                        }
+                        Div {
+                            Span {
+                                components.Button("Increment") {
+                                    counter++
+                                }
+                            }
+                        }
+                        Div {
+                            Span {
+                                val router = Router.current
+                                components.Button("Back") {
+                                    router.navigate("/")
+                                }
+                            }
                         }
                     }
                 }

webpack.config.d/devServerConfig.js

@@ -0,0 +1,4 @@
+config.devServer = {
+    ...config.devServer, // Merge with other devServer settings
+    "historyApiFallback": true
+};