Compose for Web wip

build.gradle.kts

@@ -1,6 +1,12 @@
 
 buildscript {
     repositories {
+        mavenLocal() {
+            content {
+                includeGroup("io.insert-koin")
+                includeGroup("co.touchlab")
+            }
+        }
         google()
         mavenCentral()
         jcenter()
@@ -15,6 +21,12 @@ buildscript {
 
 allprojects {
     repositories {
+        mavenLocal() {
+            content {
+                includeGroup("io.insert-koin")
+                includeGroup("co.touchlab")
+            }
+        }
         google()
         mavenCentral()
         jcenter()

buildSrc/src/main/java/Dependencies.kt

@@ -4,9 +4,9 @@ object Versions {
     const val kotlinCoroutines = "1.4.3-native-mt"
     const val ktor = "1.5.3"
     const val kotlinxSerialization = "1.1.0"
-    const val koin = "3.0.1"
-    const val sqlDelight = "1.4.3"
-    const val kermit = "0.1.8"
+    const val koin = "3.0.2"
+    const val sqlDelight = "1.5.0"
+    const val kermit = "0.1.9"
 
     const val sqliteJdbcDriver = "3.30.1"
     const val slf4j = "1.7.30"

common/build.gradle.kts

@@ -52,9 +52,9 @@ kotlin {
         homepage = "Link to a Kotlin/Native module homepage"
     }
 
-    js {
-        browser {
-        }
+    js(IR) {
+        useCommonJs()
+        browser()
     }
 
     sourceSets {

compose-web/.gitignore

@@ -0,0 +1,3 @@
+/build
+*.iml
+

compose-web/build.gradle.kts

@@ -0,0 +1,41 @@
+
+plugins {
+    kotlin("multiplatform")
+    id("org.jetbrains.compose") version "0.0.0-web-dev-11"
+}
+
+version = "1.0"
+
+repositories {
+    jcenter()
+    mavenCentral()
+    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+}
+
+kotlin {
+
+    js(IR) {
+        browser()
+        binaries.executable()
+    }
+
+    sourceSets {
+
+        val commonMain by getting {
+            dependencies {
+                implementation(kotlin("stdlib-common"))
+                implementation(compose.web.web)
+                implementation(compose.runtime)
+
+                implementation(project(":common"))
+            }
+        }
+    }
+}
+
+compose.desktop {
+    application {
+        mainClass = ""
+    }
+}
+

compose-web/src/jsMain/kotlin/Main.kt

@@ -0,0 +1,106 @@
+import androidx.compose.runtime.*
+import androidx.compose.web.css.*
+import androidx.compose.web.renderComposable
+import androidx.compose.web.elements.*
+import com.surrus.common.di.initKoin
+import com.surrus.common.remote.Assignment
+import com.surrus.common.remote.PeopleInSpaceApi
+import org.jetbrains.compose.common.foundation.layout.Column
+
+
+private val koin = initKoin(enableNetworkLogs = true).koin
+
+fun main() {
+    val peopleInSpaceApi = koin.get<PeopleInSpaceApi>()
+
+    renderComposable(rootElementId = "root") {
+        var people by remember { mutableStateOf(emptyList<Assignment>()) }
+
+        LaunchedEffect(true) {
+            people = peopleInSpaceApi.fetchPeople().people
+        }
+
+        Div(style = { padding(16.px) }) {
+            Column {
+                H1(attrs = { classes(TextStyles.titleText) }) {
+                    Text("People In Space")
+                }
+                Ul(attrs = { classes(TextStyles.personText) }) {
+                    people.forEach { person ->
+                        Li {
+                            Text(person.name)
+                        }
+                    }
+                }
+
+            }
+        }
+    }
+}
+
+object TextStyles : StyleSheet() {
+
+    val titleText by style {
+        color("#27282c")
+        fontSize(50.px)
+        property("font-size", AppCSSVariables.wtHeroFontSize.value(50.px))
+        property("letter-spacing", value((-1.5).px))
+        property("font-weight", value(900))
+        property("line-height", value(58.px))
+        property("line-height", AppCSSVariables.wtHeroLineHeight.value(64.px))
+
+        media(maxWidth(640.px)) {
+            self style {
+                AppCSSVariables.wtHeroFontSize(42.px)
+                AppCSSVariables.wtHeroLineHeight(48.px)
+            }
+        }
+
+        property(
+                "font-family",
+                value("Gotham SSm A,Gotham SSm B,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif")
+        )
+    }
+
+    val personText by style {
+        color("#27282c")
+        fontSize(28.px)
+        property("font-size", AppCSSVariables.wtSubtitle2FontSize.value(28.px))
+        property("letter-spacing", value("normal"))
+        property("font-weight", value(300))
+        property("line-height", value(40.px))
+        property("line-height", AppCSSVariables.wtSubtitle2LineHeight.value(40.px))
+
+        media(maxWidth(640.px)) {
+            self style {
+                AppCSSVariables.wtSubtitle2FontSize(24.px)
+                AppCSSVariables.wtSubtitle2LineHeight(32.px)
+            }
+        }
+
+        property(
+                "font-family",
+                value("Gotham SSm A,Gotham SSm B,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif")
+        )
+    }
+}
+
+object AppCSSVariables : CSSVariables {
+    val wtColorGreyLight by variable<Color>()
+    val wtColorGreyDark by variable<Color>()
+
+    val wtOffsetTopUnit by variable<CSSSizeValue>()
+    val wtHorizontalLayoutGutter by variable<CSSSizeValue>()
+    val wtFlowUnit by variable<CSSSizeValue>()
+
+    val wtHeroFontSize by variable<CSSSizeValue>()
+    val wtHeroLineHeight by variable<CSSSizeValue>()
+    val wtSubtitle2FontSize by variable<CSSSizeValue>()
+    val wtSubtitle2LineHeight by variable<CSSSizeValue>()
+    val wtH2FontSize by variable<CSSSizeValue>()
+    val wtH2LineHeight by variable<CSSSizeValue>()
+    val wtH3FontSize by variable<CSSSizeValue>()
+    val wtH3LineHeight by variable<CSSSizeValue>()
+
+    val wtColCount by variable<Int>()
+}

compose-web/src/jsMain/resources/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>People In Space</title>
+</head>
+<body>
+<div id="root"></div>
+<script src="compose-web.js"></script>
+</body>
+</html>

settings.gradle.kts

@@ -14,4 +14,5 @@ enableFeaturePreview("GRADLE_METADATA")
 
 include(":app", ":common", ":compose-desktop")
 include(":web")
+include(":compose-web")
 include(":backend")

web/build.gradle.kts

@@ -19,8 +19,8 @@ dependencies {
 
 
 kotlin {
-    target {
-        useCommonJs()
+    js(IR) {
         browser()
+        binaries.executable()
     }
 }