Merge pull request #67 from yogeshVU/main

joreilly · web-flow · commit 680dbe3710f4 · 2024-04-07T09:03:41.000+01:00
Adds the kotlin/js target
diff --git a/README.md b/README.md
@@ -6,9 +6,11 @@ Running on
 * Android
 * Desktop
 * Web (Wasm)
+* Web (Kotlin/JS)
 * Kotlin Notebook
 
 
+
 Code is very minimal right now with Compose code using remote apis directly. Will choose/add persistence library once those libraries support Wasm along 
 with associated Repository. Also need to add some sort of shared view model/state holder. Have started using Voyager for navigation in the Android client
 and need to evaulate whether this could/should be used for other clients (again needs Wasm support first).
@@ -37,6 +39,10 @@ and need to evaulate whether this could/should be used for other clients (again
 
 <img width="1141" alt="Screenshot 2023-12-14 at 17 16 17" src="https://github.com/joreilly/ClimateTraceKMP/assets/6302/70e02dc8-f82b-4ed2-b940-495e513ce3b1">
 
+### Compose for Web (Kotlin/JS)
+
+<img width="1141" alt="Screenshot 2023-12-14 at 17 16 17" src="https://github.com/joreilly/ClimateTraceKMP/assets/6302/70e02dc8-f82b-4ed2-b940-495e513ce3b1">
+
 ### Kotlin Notebook
 
 <img width="694" alt="Screenshot 2023-12-14 at 20 33 45" src="https://github.com/joreilly/ClimateTraceKMP/assets/6302/82ed364a-0284-4e5c-b81e-40fdfc58f312">
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -23,7 +23,14 @@ kotlin {
         }
         binaries.executable()
     }
-    
+
+
+    js(){
+        browser()
+        binaries.executable()
+    }
+
+
     androidTarget()
     jvm("desktop")
     
@@ -74,6 +81,10 @@ kotlin {
             api(libs.compose.window.size)
         }
 
+        jsMain.dependencies {
+            implementation(compose.html.core)
+        }
+
         androidMain.dependencies {
             implementation(libs.compose.ui.tooling.preview)
             implementation(libs.androidx.activity.compose)
diff --git a/composeApp/src/jsMain/kotlin/main.kt b/composeApp/src/jsMain/kotlin/main.kt
@@ -0,0 +1,12 @@
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+import org.jetbrains.skiko.wasm.onWasmReady
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    onWasmReady {
+        CanvasBasedWindow("KotlinBrowser") {
+            App()
+        }
+    }
+}
diff --git a/composeApp/src/jsMain/resources/index.html b/composeApp/src/jsMain/resources/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>ClimateTraceKMP</title>
+    <script type="application/javascript" src="skiko.js"></script>
+    <script type="application/javascript" src="composeApp.js"></script>
+</head>
+<body>
+<canvas id="ComposeTarget"></canvas>
+</body>
+</html>
diff --git a/gradle.properties b/gradle.properties
@@ -10,6 +10,8 @@ android.useAndroidX=true
 
 #Compose
 org.jetbrains.compose.experimental.wasm.enabled=true
+org.jetbrains.compose.experimental.jscanvas.enabled=true
+
 
 #MPP
 kotlin.mpp.androidSourceSetLayoutVersion=2
