Add API emulation

Author: JSMonk

build.gradle.kts

@@ -84,6 +84,7 @@ kotlin {
                 implementation(compose.material3)
                 @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
                 implementation(compose.components.resources)
+                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.8.0-RC2")
             }
         }
     }
@@ -102,9 +103,9 @@ tasks.named<Jar>("jvmJar").configure {
     val taskName = if (project.hasProperty("isProduction")
         || project.gradle.startParameter.taskNames.contains("installDist")
     ) {
-        "jsBrowserProductionWebpack"
+        "wasmJsBrowserProductionWebpack"
     } else {
-        "jsBrowserDevelopmentWebpack"
+        "wasmJsBrowserDevelopmentWebpack"
     }
     val webpackTask = tasks.named<KotlinWebpack>(taskName)
     dependsOn(webpackTask)

src/jsMain/kotlin/Api.kt

@@ -5,8 +5,6 @@ import io.ktor.client.plugins.contentnegotiation.*
 import io.ktor.client.request.*
 import io.ktor.serialization.kotlinx.json.*
 
-import kotlinx.browser.window
-
 val jsonClient = HttpClient {
     install(ContentNegotiation) {
         json()

src/wasmJsMain/kotlin/Api.kt

@@ -0,0 +1,57 @@
+// Until Ktor starts work with wasmJs
+import kotlinx.serialization.encodeToString
+import kotlinx.serialization.json.Json
+import kotlin.coroutines.resume
+import kotlin.coroutines.resumeWithException
+import kotlin.coroutines.suspendCoroutine
+import kotlin.js.Promise
+
+class HttpClient {
+    suspend inline fun <reified T> get(url: String): T =
+        Json.decodeFromString<T>(fetchAsync(url))
+
+    suspend inline fun <reified T> post(url: String, body: T) {
+        fetchAsync(url, FetchOptions(method = "POST", body = Json.encodeToString(body), headers = mapOf("Content-Type" to "application/json")))
+    }
+
+    suspend inline fun delete(url: String) {
+        fetchAsync(url, FetchOptions(method = "DELETE"))
+    }
+}
+
+private fun buildFetchOptions(method: JsAny?, body: JsAny?, headers: JsAny?): JsAny =
+    js("{ method: method, body: body, headers: headers }")
+
+private fun fetch(url: String, opts: JsAny? = null): Promise<JsString> =
+    js("fetch(url, opts).then(x => x.text())")
+
+private fun <T: JsAny?> createJsArray(): JsArray<T> = js("[]")
+
+private fun Map<String, String>.toJsEntries(): JsArray<JsArray<JsString>> {
+    val result = createJsArray<JsArray<JsString>>()
+    for ((key, value) in this) {
+        val entry = createJsArray<JsString>().apply {
+            set(0, key.toJsString())
+            set(1, value.toJsString())
+        }
+        result[result.length] = entry
+    }
+    return result
+}
+
+suspend fun fetchAsync(url: String, opts: FetchOptions? = null): String {
+    val promise = fetch(url, buildFetchOptions(opts?.method?.toJsString(), opts?.body?.toJsString(), opts?.headers?.toJsEntries()))
+    return suspendCoroutine { cont ->
+        promise.then(
+            onFulfilled = { cont.resume(it.toString()).toJsReference() },
+            onRejected = { cont.resumeWithException(IllegalStateException("Promise error: $it")).toJsReference() }
+        )
+    }
+}
+
+data class FetchOptions(
+    val method: String? = null,
+    val body: String? = null,
+    val headers: Map<String, String> = emptyMap(),
+)
+

src/wasmJsMain/kotlin/HttpClient.kt

@@ -1,16 +1,34 @@
-import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import kotlinx.coroutines.DelicateCoroutinesApi
+import kotlinx.coroutines.GlobalScope
+import kotlinx.coroutines.promise
 
+@OptIn(DelicateCoroutinesApi::class)
 class ShoppingListViewModel {
-    val shoppingList = mutableStateListOf<ShoppingListItem>()
+    private val jsonClient = HttpClient()
+
+    var shoppingList by mutableStateOf(listOf<ShoppingListItem>())
+        private set
 
     fun fetchShoppingList() {
+        GlobalScope.promise {
+            shoppingList = jsonClient.get(ShoppingListItem.path)
+        }
     }
 
     fun addShoppingListItem(shoppingListItem: ShoppingListItem) {
-        shoppingList.add(shoppingListItem)
+        GlobalScope.promise {
+            jsonClient.post(ShoppingListItem.path, shoppingListItem)
+            shoppingList += shoppingListItem
+        }
     }
 
     fun deleteShoppingListItem(shoppingListItem: ShoppingListItem) {
-        shoppingList.remove(shoppingListItem)
+        GlobalScope.promise {
+            jsonClient.delete(ShoppingListItem.path + "/${shoppingListItem.id}")
+            shoppingList -= shoppingListItem
+        }
     }
 }