Convert wasm sample to use kotlinx-html

russhwolf · Sep 25, 2024 · fa68ca9 · fa68ca9
1 parent 601c2ba
commit fa68ca9
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 74 deletions.
diff --git a/sample/app-browser/build.gradle.kts b/sample/app-browser/build.gradle.kts
@@ -32,7 +32,7 @@ kotlin {
         val jsMain by getting {
             dependencies {
                 implementation(project(":shared"))
-                implementation("org.jetbrains.kotlinx:kotlinx-html-js:0.11.0")
+                implementation("org.jetbrains.kotlinx:kotlinx-html:0.11.0")
                 implementation("com.russhwolf:multiplatform-settings:${rootProject.ext["library_version"]}")
             }
         }

diff --git a/sample/app-browser/src/jsMain/kotlin/Browser.kt b/sample/app-browser/src/jsMain/kotlin/Browser.kt
@@ -20,7 +20,6 @@ import com.russhwolf.settings.StorageSettings
 import com.russhwolf.settings.example.SettingConfig
 import com.russhwolf.settings.example.SettingsRepository
 import kotlinx.browser.document
-import kotlinx.html.INPUT
 import kotlinx.html.InputType
 import kotlinx.html.dom.append
 import kotlinx.html.js.button

diff --git a/sample/app-wasm-js/build.gradle.kts b/sample/app-wasm-js/build.gradle.kts
@@ -35,6 +35,7 @@ kotlin {
         val wasmJsMain by getting {
             dependencies {
                 implementation(project(":shared"))
+                implementation("org.jetbrains.kotlinx:kotlinx-html:0.11.0")
                 implementation("com.russhwolf:multiplatform-settings:${rootProject.ext["library_version"]}")
             }
         }

diff --git a/sample/app-wasm-js/src/wasmJsMain/kotlin/MicroHtml.kt b/sample/app-wasm-js/src/wasmJsMain/kotlin/MicroHtml.kt
diff --git a/sample/app-wasm-js/src/wasmJsMain/kotlin/WasmBrowser.kt b/sample/app-wasm-js/src/wasmJsMain/kotlin/WasmBrowser.kt
@@ -20,31 +20,37 @@ import com.russhwolf.settings.StorageSettings
 import com.russhwolf.settings.example.SettingConfig
 import com.russhwolf.settings.example.SettingsRepository
 import kotlinx.browser.document
-import kotlinx.dom.appendText
+import kotlinx.html.InputType
+import kotlinx.html.dom.append
+import kotlinx.html.js.button
+import kotlinx.html.js.div
+import kotlinx.html.js.input
+import kotlinx.html.js.onClickFunction
+import kotlinx.html.js.option
+import kotlinx.html.js.output
+import kotlinx.html.js.select
 import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.HTMLOutputElement
 import org.w3c.dom.HTMLSelectElement
 
 fun main() {
-    document.body?.apply {
+    document.body?.append {
         div {
             select = select {
                 settingsRepository.mySettings.forEach { setting ->
                     option {
-                        appendText(setting.key)
+                        text(setting.key)
                     }
                 }
             }
         }
         div {
-            input = input {
-                type = "text"
-            }
+            input = input(type = InputType.text)
         }
         div {
             button {
-                appendText("Set Value")
-                onClick {
+                text("Set Value")
+                onClickFunction = {
                     if (selectedItem.set(input.value)) {
                         showOutput("")
                     } else {
@@ -55,25 +61,25 @@ fun main() {
         }
         div {
             button {
-                appendText("Get Value")
-                onClick {
+                text("Get Value")
+                onClickFunction = {
                     showOutput(selectedItem.get())
                 }
             }
         }
         div {
             button {
-                appendText("Remove Value")
-                onClick {
+                text("Remove Value")
+                onClickFunction = {
                     selectedItem.remove()
                     showOutput("Setting removed!")
                 }
             }
         }
         div {
             button {
-                appendText("Clear All Values")
-                onClick {
+                text("Clear All Values")
+                onClickFunction = {
                     settingsRepository.clear()
                     showOutput("Settings cleared!")
                 }