Create the :compose-multiplatform-common subproject and add Box, ModifierOrAttrs, and SizeValue

Author: ShreckYe

buildSrc/src/main/kotlin/lib-conventions.gradle.kts

@@ -0,0 +1,8 @@
+plugins {
+    id("common-conventions")
+    // TODO: `id("com.android.library") version "7.2.2"`?
+    id("com.huanshankeji.kotlin-multiplatform-jvm-and-js-browser-sonatype-ossrh-publish-conventions")
+}
+
+group = "com.huanshankeji"
+version = "0.1.0-SNAPSHOT"

compose-multiplatform-common/build.gradle.kts

@@ -0,0 +1,23 @@
+plugins {
+    `lib-conventions`
+}
+
+kotlin {
+    sourceSets {
+        named("commonMain") {
+            dependencies {
+                implementation(compose.runtime)
+            }
+        }
+        named("jvmMain") {
+            dependencies {
+                implementation(compose.foundation)
+            }
+        }
+        named("jsMain") {
+            dependencies {
+                implementation(compose.web.core)
+            }
+        }
+    }
+}

compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/layout/Layouts.kt

@@ -0,0 +1,10 @@
+package com.huanshankeji.compose.layout
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Element
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+
+expect abstract class BoxElement : Element
+
+@Composable
+expect fun Box(modifierOrAttrs: ModifierOrAttrs<BoxElement> = null, content: @Composable () -> Unit)

compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScope.kt

@@ -0,0 +1,21 @@
+package com.huanshankeji.compose.ui
+
+import com.huanshankeji.compose.ui.unit.SizeValue
+
+typealias ModifierOrAttrs<TElement> = (ModifierOrAttrsScope<TElement>.() -> Unit)?
+
+expect abstract class Element
+expect class ModifierOrAttrsScope<TElement : Element> {
+    fun style(builder: StyleScope.() -> Unit)
+}
+
+expect class StyleScope {
+    fun padding(value: SizeValue)
+}
+
+/*
+/** An alternative immutable design like `Modifier`. */
+expect class ModifierOrAttrsImmutable<T : Element> {
+    fun padding(): ModifierOrAttrsImmutable<T>
+}
+*/

compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/ui/unit/Sizes.kt

@@ -0,0 +1,6 @@
+package com.huanshankeji.compose.ui.unit
+
+expect abstract class SizeValue
+expect class DpOrPxValue : SizeValue
+
+expect val Int.dpOrPx: DpOrPxValue

compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/layout/Layouts.kt

@@ -0,0 +1,13 @@
+package com.huanshankeji.compose.layout
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+import com.huanshankeji.compose.ui.toAttrs
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLDivElement
+
+actual typealias BoxElement = HTMLDivElement
+
+@Composable
+actual fun Box(modifierOrAttrs: ModifierOrAttrs<BoxElement>, content: @Composable () -> Unit) =
+    Div(modifierOrAttrs.toAttrs()) { content() }

compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScope.kt

@@ -0,0 +1,22 @@
+package com.huanshankeji.compose.ui
+
+import com.huanshankeji.compose.ui.unit.SizeValue
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.css.padding
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.w3c.dom.HTMLElement
+
+fun <TElement : Element> ModifierOrAttrs<TElement>.toAttrs(): AttrBuilderContext<TElement>? =
+    this?.let { { ModifierOrAttrsScope(this).it() } }
+
+actual typealias Element = HTMLElement
+
+actual class ModifierOrAttrsScope<TElement : Element>(val attrsScope: AttrsScope<TElement>) {
+    actual fun style(builder: StyleScope.() -> Unit) =
+        attrsScope.style { StyleScope(this).builder() }
+}
+
+actual class StyleScope(val styleScope: org.jetbrains.compose.web.css.StyleScope) {
+    actual fun padding(value: SizeValue) =
+        styleScope.padding(value.platformValue)
+}

compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/ui/unit/Sizes.kt

@@ -0,0 +1,12 @@
+package com.huanshankeji.compose.ui.unit
+
+import org.jetbrains.compose.web.css.CSSLengthOrPercentageValue
+import org.jetbrains.compose.web.css.CSSSizeValue
+import org.jetbrains.compose.web.css.CSSUnit
+import org.jetbrains.compose.web.css.px
+
+actual abstract class SizeValue(val platformValue: CSSLengthOrPercentageValue)
+actual class DpOrPxValue(platformValue: CSSSizeValue<CSSUnit.px>) : SizeValue(platformValue)
+
+actual val Int.dpOrPx: DpOrPxValue
+    get() = DpOrPxValue(this.px)

compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/layout/Layouts.kt

@@ -0,0 +1,12 @@
+package com.huanshankeji.compose.layout
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Element
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+import com.huanshankeji.compose.ui.toModifier
+
+actual abstract class BoxElement : Element()
+
+@Composable
+actual fun Box(modifierOrAttrs: ModifierOrAttrs<BoxElement>, content: @Composable () -> Unit) =
+    androidx.compose.foundation.layout.Box(modifierOrAttrs.toModifier()) { content() }

compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScopeJvm.kt

@@ -0,0 +1,31 @@
+package com.huanshankeji.compose.ui
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.ui.Modifier
+import com.huanshankeji.compose.ui.unit.SizeValue
+
+fun <TElement : Element> ModifierOrAttrs<TElement>.toModifier(): Modifier =
+    this?.let {
+        ModifierOrAttrsScope<TElement>(Modifier).apply(it).modifier
+    } ?: Modifier
+
+actual abstract class Element
+
+actual class ModifierOrAttrsScope<TElement : Element>(modifier: Modifier) {
+    var modifier: Modifier = modifier
+        private set
+
+    fun modify(block: Modifier.() -> Modifier) {
+        modifier = modifier.block()
+    }
+
+    actual fun style(builder: StyleScope.() -> Unit) {
+        StyleScope(this).builder()
+    }
+}
+
+actual class StyleScope(val modifierOrAttrsScope: ModifierOrAttrsScope<*>) {
+    actual fun padding(value: SizeValue) = modifierOrAttrsScope.modify {
+        padding(value.platformValue)
+    }
+}