From c412fe2ef9a7fc0ea425b6a8987651a6ed4d0e7d Mon Sep 17 00:00:00 2001 From: John O'Reilly Date: Tue, 4 May 2021 21:31:53 +0100 Subject: [PATCH] Compose for Web wip --- build.gradle.kts | 12 +++ buildSrc/src/main/java/Dependencies.kt | 6 +- common/build.gradle.kts | 6 +- compose-web/.gitignore | 3 + compose-web/build.gradle.kts | 41 ++++++++ compose-web/src/jsMain/kotlin/Main.kt | 106 ++++++++++++++++++++ compose-web/src/jsMain/resources/index.html | 11 ++ settings.gradle.kts | 1 + web/build.gradle.kts | 4 +- 9 files changed, 182 insertions(+), 8 deletions(-) create mode 100644 compose-web/.gitignore create mode 100644 compose-web/build.gradle.kts create mode 100644 compose-web/src/jsMain/kotlin/Main.kt create mode 100644 compose-web/src/jsMain/resources/index.html diff --git a/build.gradle.kts b/build.gradle.kts index 81ac6e0..f750a77 100644 --- a/build.gradle.kts +++ b/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() diff --git a/buildSrc/src/main/java/Dependencies.kt b/buildSrc/src/main/java/Dependencies.kt index 772bcee..83f5820 100644 --- a/buildSrc/src/main/java/Dependencies.kt +++ b/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" diff --git a/common/build.gradle.kts b/common/build.gradle.kts index 64d2316..73729a7 100644 --- a/common/build.gradle.kts +++ b/common/build.gradle.kts @@ -52,9 +52,9 @@ kotlin { homepage = "Link to a Kotlin/Native module homepage" } - js { - browser { - } + js(IR) { + useCommonJs() + browser() } sourceSets { diff --git a/compose-web/.gitignore b/compose-web/.gitignore new file mode 100644 index 0000000..0b39df3 --- /dev/null +++ b/compose-web/.gitignore @@ -0,0 +1,3 @@ +/build +*.iml + diff --git a/compose-web/build.gradle.kts b/compose-web/build.gradle.kts new file mode 100644 index 0000000..71b124f --- /dev/null +++ b/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 = "" + } +} + diff --git a/compose-web/src/jsMain/kotlin/Main.kt b/compose-web/src/jsMain/kotlin/Main.kt new file mode 100644 index 0000000..51617da --- /dev/null +++ b/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() + + renderComposable(rootElementId = "root") { + var people by remember { mutableStateOf(emptyList()) } + + 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() + val wtColorGreyDark by variable() + + val wtOffsetTopUnit by variable() + val wtHorizontalLayoutGutter by variable() + val wtFlowUnit by variable() + + val wtHeroFontSize by variable() + val wtHeroLineHeight by variable() + val wtSubtitle2FontSize by variable() + val wtSubtitle2LineHeight by variable() + val wtH2FontSize by variable() + val wtH2LineHeight by variable() + val wtH3FontSize by variable() + val wtH3LineHeight by variable() + + val wtColCount by variable() +} diff --git a/compose-web/src/jsMain/resources/index.html b/compose-web/src/jsMain/resources/index.html new file mode 100644 index 0000000..1ea2dbb --- /dev/null +++ b/compose-web/src/jsMain/resources/index.html @@ -0,0 +1,11 @@ + + + + + People In Space + + +
+ + + diff --git a/settings.gradle.kts b/settings.gradle.kts index 0348516..86659a2 100644 --- a/settings.gradle.kts +++ b/settings.gradle.kts @@ -14,4 +14,5 @@ enableFeaturePreview("GRADLE_METADATA") include(":app", ":common", ":compose-desktop") include(":web") +include(":compose-web") include(":backend") \ No newline at end of file diff --git a/web/build.gradle.kts b/web/build.gradle.kts index ab76122..225f5e9 100644 --- a/web/build.gradle.kts +++ b/web/build.gradle.kts @@ -19,8 +19,8 @@ dependencies { kotlin { - target { - useCommonJs() + js(IR) { browser() + binaries.executable() } } \ No newline at end of file