Merge pull request #14 from huanshankeji/use-kobweb-silk

Refactor the project to depend on Kobweb Silk on Kotlin/JS (Compose HTML) and provide a universal multiplatform interface for `Modifier`, scopes, etc. akin to those in `androidx.compose`

Author: ShreckYe

README.md

@@ -3,7 +3,7 @@
 [![Maven Central](https://img.shields.io/maven-central/v/com.huanshankeji/compose-multiplatform-material)](https://search.maven.org/search?q=g:com.huanshankeji%20AND%20a:compose-multiplatform-*)
 ![Kotlin version](https://kotlin-version.aws.icerock.dev/kotlin-version?group=com.huanshankeji&name=compose-multiplatform-material)
 
-Some simple unified Compose Multiplatform wrappers of common components, layouts, and Material Design components for `androidx.compose.material` (officially supported on Android, desktop (JVM), iOS, web (Kotlin/Wasm)) and Compose HTML (mainly based on [KMDC](https://github.com/mpetuska/kmdc))
+Some simple unified Compose Multiplatform wrappers of common components, layouts, and Material Design components for `androidx.compose.material` (officially supported on Android, desktop (JVM), iOS, web (Kotlin/Wasm)) and Compose HTML (mainly based on [Kobweb Silk](https://github.com/varabyte/kobweb?tab=readme-ov-file#silk) and [KMDC](https://github.com/mpetuska/kmdc))
 
 <!-- a set of APIs for Compose HTML similar to those in `androidx.compose.material` -->
 
@@ -20,7 +20,10 @@ This project is prototype and there is no documentation yet. Check out [the demo
 #### Common (Foundation) components
 
 - `BasicText`
-- `RawText`
+
+##### `ext` components
+
+- `InlineBasicText`
 
 ##### Layouts
 
@@ -39,7 +42,11 @@ This project is prototype and there is no documentation yet. Check out [the demo
 - `TextField`
 - `TopAppBarScaffold`
 
-### Styles
+#### Components in the `ext` packages
+
+The components in the `ext` packages don't follow the `androidx.compose` APIs exactly, but rather provide wrappers are idiomatic and conventional on both kinds of targets, wrapping different APIs which can't be unified following the `androidx.compose` APIs.
+
+### Styles (obsolete in the legacy module, for removal)
 
 The `ModifierOrAttrsScope.styles` function and the `StyleScope` class provide a universal interface for `Modifier`s and CSS styles.
 
@@ -51,3 +58,46 @@ The functions in `StyleScope`:
 - `backgroundColor`
 - `platformBorder`
 - `outerBorder`
+
+### Modifiers
+
+- size modifiers
+   - `size`, `sizeIn`, `fillMaxSize`
+   - `width`, `widthIn`, `fillMaxWidth`
+   - `height`, `heightIn`, `fillMaxHeight`
+- `padding`
+- `background`
+- `border` (visually inconsistent)
+
+#### `ext` modifiers
+
+- `outerBorder`
+- `roundedCornerBackgroundAndOuterBorder`
+
+## Add the libraries to your dependency
+
+Maven coordinate:
+
+```kotlin
+"com.huanshankeji:compose-multiplatform-$module:$version"
+```
+
+View [all the artifacts on Maven Central](https://search.maven.org/search?q=g:com.huanshankeji%20AND%20a:compose-multiplatform-*).
+
+This project depends on [Kobweb](https://github.com/varabyte/kobweb) which is not published to Maven Central yet, so you have to add the following Maven repository:
+
+```kotlin
+repositories {
+    maven("https://us-central1-maven.pkg.dev/varabyte-repos/public")
+}
+```
+
+## About Kobweb Silk
+
+The Kotlin/JS (Compose HTML) portion of this project depends on [Kobweb Compose](https://github.com/varabyte/kobweb/blob/main/frontend/kobweb-compose/README.md) of [Kobweb Silk](https://github.com/varabyte/kobweb?tab=readme-ov-file#silk) which is a UI layer built upon Compose HTML that provides `Modifier` APIs (type-safe CSS API wrappers) and layouts. Here is a list of topics in their README.md that should be helpful when you use this library in Compose HTML:
+
+1. [Silk](https://github.com/varabyte/kobweb?tab=readme-ov-file#silk)
+   1. [Modifier](https://github.com/varabyte/kobweb?tab=readme-ov-file#modifier) 
+      1. [attrsModifier and styleModifier](https://github.com/varabyte/kobweb?tab=readme-ov-file#attrsmodifier-and-stylemodifier) 
+1. [General purpose improvements on top of Compose HTML and Kotlin/JS](https://github.com/varabyte/kobweb?tab=readme-ov-file#general-purpose-improvements-on-top-of-compose-html-and-kotlinjs)
+1. [What about Compose Multiplatform for Web?](https://github.com/varabyte/kobweb?tab=readme-ov-file#what-about-compose-multiplatform-for-web)

buildSrc/src/main/kotlin/VersionsAndDependencies.kt

@@ -1,4 +1,6 @@
 object DependencyVersions {
+    val composeMultiplatform = "1.6.1" // manually specified for "ui-unit"
+    val kobweb = "0.17.1"
     val huanshankejiComposeWeb = "0.2.2"
     val kmdc = "0.1.2"
     val materialIcons = "1.13.12"

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

@@ -10,6 +10,7 @@ repositories {
     mavenCentral()
     google()
     maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+    maven("https://us-central1-maven.pkg.dev/varabyte-repos/public") // for Kobweb
 }
 
 group = "com.huanshankeji"

compose-multiplatform-common/build.gradle.kts

@@ -7,22 +7,37 @@ plugins {
 
 kotlin {
     sourceSets {
+        /*
+        Use `api`. See:
+        https://github.com/JetBrains/compose-multiplatform-core/blob/jb-main/compose/foundation/foundation/build.gradle
+        https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/compose/foundation/foundation/build.gradle
+        */
         commonMain {
             dependencies {
-                implementation(compose.runtime)
+                api(compose.runtime)
                 //compileOnly(compose.foundation) // for KDoc element links only
+                /*
+                The units from Compose are used directly.
+                This is an ideal dependency whose APIs should be exposed and shared on all platforms including JS
+                therefore we don't need to create wrappers for them,
+                because a depending `ui-graphics` module would be too much as it depends on `skiko`,
+                and more such as `ui` and `ui-text` depend on `ui-graphics`.
+                A dependency of `ui-unit` is `ui-geometry` which might be useful too.
+                */
+                api("org.jetbrains.compose.ui:ui-unit:${DependencyVersions.composeMultiplatform}")
+                implementation("org.jetbrains.compose.annotation-internal:annotation:${DependencyVersions.composeMultiplatform}")
             }
         }
         androidxCommonMain {
             dependencies {
-                implementation(compose.foundation)
+                api(compose.foundation)
             }
         }
         jsMain {
             dependencies {
-                implementation(compose.html.core)
-
-                api("com.huanshankeji:compose-web-common:${DependencyVersions.huanshankejiComposeWeb}")
+                api(compose.html.core)
+                // see: https://github.com/varabyte/kobweb/blob/main/frontend/kobweb-compose/build.gradle.kts
+                api("com.varabyte.kobweb:kobweb-compose:${DependencyVersions.kobweb}")
             }
         }
     }

compose-multiplatform-common/legacy/build.gradle.kts

@@ -0,0 +1,41 @@
+import com.huanshankeji.team.`Shreck Ye`
+import com.huanshankeji.team.pomForTeamDefaultOpenSource
+
+plugins {
+    `lib-conventions`
+}
+
+kotlin {
+    sourceSets {
+        commonMain {
+            dependencies {
+                implementation(compose.runtime)
+                //compileOnly(compose.foundation) // for KDoc element links only
+            }
+        }
+        androidxCommonMain {
+            dependencies {
+                api(compose.foundation)
+            }
+        }
+        jsMain {
+            dependencies {
+                implementation(compose.html.core)
+
+                api("com.huanshankeji:compose-web-common:${DependencyVersions.huanshankejiComposeWeb}")
+            }
+        }
+    }
+}
+
+publishing.publications.withType<MavenPublication> {
+    pomForTeamDefaultOpenSource(
+        project,
+        "Legacy Compose Multiplatform common wrappers",
+        "Legacy common wrappers of components (including layouts) and styles for Compose Multiplatform on (desktop/Android and web)\n" +
+                "This legacy module depends on `com.huanshankeji:compose-web-common` instead of Kobweb Silk " +
+                "and its components use the `ModifierOrAttrsScope` class to configure styles."
+    ) {
+        `Shreck Ye`()
+    }
+}