Web browser support added

UmairKhalid786 · UmairKhalid786 · commit 46e1fd9addb2 · 2023-03-13T01:00:20.000+01:00
diff --git a/README.md b/README.md
@@ -98,3 +98,7 @@ If you need to change this setting after you open the project in Android Studio,
 - open the project in Android Studio again
 
 For configuring advanced settings, you can use Xcode. Open the `iosApp/iosApp.xcworkspace` in Xcode after opening the project in Android Studio, and use Xcode to make your changes.
+
+### Web 
+
+- Run command for testing on web `gradle jsBrowserRun`
diff --git a/kotlin-js-store/yarn.lock b/kotlin-js-store/yarn.lock
diff --git a/settings.gradle.kts b/settings.gradle.kts
@@ -20,8 +20,9 @@ pluginManagement {
     }
 }
 
-rootProject.name = "My application"
+rootProject.name = "ServerDrivenUI"
 
 include(":androidApp")
 include(":shared")
 include(":desktopApp")
+include(":webApp")
diff --git a/shared/build.gradle.kts b/shared/build.gradle.kts
@@ -11,11 +11,24 @@ version = "1.0-SNAPSHOT"
 
 kotlin {
     android()
-
     jvm("desktop")
-
     ios()
     iosSimulatorArm64()
+    js(IR) {
+        browser {
+            testTask {
+                testLogging.showStandardStreams = true
+                useKarma {
+                    useChromeHeadless()
+                    useFirefox()
+                }
+            }
+        }
+        binaries.executable()
+    }
+//    js(IR) {
+//        browser()
+//    }
 
     cocoapods {
         summary = "Some description for the Shared Module"
@@ -55,6 +68,13 @@ kotlin {
                 implementation(compose.desktop.common)
             }
         }
+
+        val jsMain by getting {
+            dependsOn(commonMain)
+            dependencies {
+                implementation(compose.web.core)
+            }
+        }
     }
 }
 
diff --git a/shared/src/iosMain/kotlin/main.ios.kt b/shared/src/iosMain/kotlin/main.ios.kt
@@ -1,4 +1,3 @@
-import App
 import androidx.compose.ui.window.ComposeUIViewController
 
 fun MainViewController() = ComposeUIViewController { App() }
diff --git a/shared/src/jsMain/kotlin/getPlatformName.kt b/shared/src/jsMain/kotlin/getPlatformName.kt
@@ -0,0 +1 @@
+actual fun getPlatformName(): String = "Web"
diff --git a/shared/src/jsMain/kotlin/main.js.kt b/shared/src/jsMain/kotlin/main.js.kt
@@ -0,0 +1,8 @@
+import androidx.compose.runtime.Composable
+
+@Composable
+fun CommonMainWeb() {
+    App()
+}
+
+
diff --git a/webApp/build.gradle.kts b/webApp/build.gradle.kts
@@ -0,0 +1,24 @@
+plugins {
+    kotlin("multiplatform")
+    id("org.jetbrains.compose")
+}
+
+kotlin {
+    js(IR) {
+        browser()
+        binaries.executable()
+    }
+    sourceSets {
+        val jsMain by getting {
+            dependencies {
+                implementation(project(":shared"))
+                implementation(npm("path-browserify", "^1.0.1"))
+                implementation(npm("os-browserify", "^0.3.0"))
+            }
+        }
+    }
+}
+
+compose.experimental {
+    web.application {}
+}
diff --git a/webApp/src/jsMain/kotlin/WebApp.kt b/webApp/src/jsMain/kotlin/WebApp.kt
@@ -0,0 +1,18 @@
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.window.Window
+import org.jetbrains.skiko.wasm.onWasmReady
+
+fun main() {
+    onWasmReady {
+        Window("Server Driven UI") {
+            Column(modifier = Modifier.fillMaxSize()) {
+                CommonMainWeb()
+            }
+        }
+    }
+}
+
+
+
diff --git a/webApp/src/jsMain/resources/index.html b/webApp/src/jsMain/resources/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Music App</title>
+    <script src="skiko.js"></script>
+    <link type="text/css" rel="stylesheet" href="styles.css"/>
+</head>
+<body>
+<div width="600" height="600">
+    <canvas id="ComposeTarget"></canvas>
+</div>
+<script src="webApp.js"></script>
+</body>
+</html>
diff --git a/webApp/src/jsMain/resources/styles.css b/webApp/src/jsMain/resources/styles.css
@@ -0,0 +1,8 @@
+#root {
+    width: 100%;
+    height: 100%;
+}
+
+#root > .compose-web-column > div {
+    position: relative;
+}
diff --git a/webApp/webpack.config.d/fs.js b/webApp/webpack.config.d/fs.js
@@ -0,0 +1,6 @@
+config.resolve = {
+    fallback: {
+        path: require.resolve("path-browserify"),
+        os: require.resolve("os-browserify/browser")
+    }
+};

Original file line number	Diff line number	Diff line change
`@@ -20,8 +20,9 @@ pluginManagement {`
`20`	`20`	`}`
`21`	`21`	`}`
`22`	`22`
`23`		`-rootProject.name = "My application"`
	`23`	`+rootProject.name = "ServerDrivenUI"`
`24`	`24`
`25`	`25`	`include(":androidApp")`
`26`	`26`	`include(":shared")`
`27`	`27`	`include(":desktopApp")`
	`28`	`+include(":webApp")`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import App`
`2`	`1`	`import androidx.compose.ui.window.ComposeUIViewController`
`3`	`2`
`4`	`3`	`fun MainViewController() = ComposeUIViewController { App() }`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+actual fun getPlatformName(): String = "Web"`