Skip to content

Rename the project to "Compose Multiplatform HTML Unified" #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Nov 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
49 changes: 30 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,27 @@
# Compose Multiplatform Material (better name pending): unified Compose Multiplatform common extensions and Material wrappers for `androidx.compose` and Compose HTML
# Compose Multiplatform HTML Unified

[![Maven Central](https://img.shields.io/maven-central/v/com.huanshankeji/compose-multiplatform-material3)](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-material3)
[![Maven Central](https://img.shields.io/maven-central/v/com.huanshankeji/compose-multiplatform-html-unified-common)](https://search.maven.org/search?q=g:com.huanshankeji%20AND%20a:compose-multiplatform-html-unified-*)
![Kotlin version](https://kotlin-version.aws.icerock.dev/kotlin-version?group=com.huanshankeji&name=compose-multiplatform-html-unified-common)

Unified Compose Multiplatform wrappers of common components, layouts, and Material Design components for `androidx.compose` (officially supported on Android, desktop (JVM), iOS, and web (Kotlin/Wasm)) and Compose HTML (mainly based on [Kobweb Silk](https://github.com/varabyte/kobweb?tab=readme-ov-file#silk) [Compose](https://github.com/varabyte/kobweb/tree/main/frontend/kobweb-compose), [KMDC](https://github.com/mpetuska/kmdc), and [Compose HTML Material](https://github.com/huanshankeji/compose-html-material) (which is then based on [Material Web](https://github.com/material-components/material-web)))
Unified Compose Multiplatform wrappers of common and **Material Design** APIs for **rendering-based Compose UI** (officially supported on Android, desktop (JVM), iOS, and web (Kotlin/Wasm)) and **DOM-based Compose HTML**

We try to provide a set of common extensions and composable component APIs akin to those in `androidx.compose` (`androidx.compose.foundation`, `androidx.compose.material`, and `androidx.compose.material3`), meanwhile making them compatible with the Compose HTML APIs. However, only subsets of the composables and composable parameters are supported due to the API differences, limitations of the JS (web) platform and the Compose HTML composables this project depends on, and our limited effort.
This library was previously named "Compose Multiplatform Material".

Complete visual consistency across different platforms is not guaranteed. See the [the side-by-side demo site](https://huanshankeji.github.io/compose-multiplatform-material/) for the visual effects and their differences.
## The scope and implementations of the APIs provided

This project is still in development and has not reached the stable state yet. Some APIs are likely to be changed and there is no detailed documentation yet. Check out [the demo project source](demo) on how to use the components in addition to the information below.
We try to provide a set of common APIs including composable component APIs akin to those in `androidx.compose` (`androidx.compose.foundation`, `androidx.compose.material`, and `androidx.compose.material3`), meanwhile making them compatible with the Compose HTML APIs. However, only subsets of the composables and composable parameters are supported due to the underlying API differences, limitations of the JS platform and the available Compose HTML composables this project depends on, and our limited effort.

## Supported features
The modules of this library correspond to the Compose Multiplatform modules (or Compose modules in AndroidX) that are not available for Compose HTML, aka those that depend on [the UI module](https://github.com/JetBrains/compose-multiplatform-core/tree/jb-main/compose/ui), more specifically [`ui-graphics`](https://github.com/JetBrains/compose-multiplatform-core/tree/jb-main/compose/ui/ui-graphics). The `common` module of this library corresponds to the `ui` and `foundation` modules, offering UI components (including layouts), modifiers, UI configuration classes, etc.

The Compose HTML / JS DOM source is mainly based on [Kobweb Silk](https://github.com/varabyte/kobweb?tab=readme-ov-file#silk) [Compose](https://github.com/varabyte/kobweb/tree/main/frontend/kobweb-compose), [KMDC](https://github.com/mpetuska/kmdc), and [Compose HTML Material](https://github.com/huanshankeji/compose-html-material) (which is then based on [Material Web](https://github.com/material-components/material-web)).

## References and limitations

Complete visual consistency across different platforms is not guaranteed. See [the side-by-side demo site](https://huanshankeji.github.io/compose-multiplatform-material/) for the visual effects and their differences.

This project is still in development and has not reached a stable state. Some APIs are subject to change and there is no detailed documentation yet. Check out [the demo project source](demo) on how to use the components in addition to the sections below.

## Supported API catalog

### Components

Expand All @@ -32,7 +42,7 @@ This project is still in development and has not reached the stable state yet. S

###### `ext` layouts

- `BoxWithConstraints`
- `BoxWithConstraints`

##### Lazy

Expand Down Expand Up @@ -82,7 +92,7 @@ This project is still in development and has not reached the stable state yet. S
- `Button` (`FilledButton`), `ElevatedButton`, `FilledTonalButton`, `OutlinedButton`, `TextButton`
- `Card` (`FilledCard`), `ElevatedCard`, `OutlinedCard`
- `DropdownMenu`, `DropdownMenuItem`
- `ExposedDropdownMenuBox`, `ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxTextField`, `ExposedDropdownMenuBoxScope.ExposedDropdownMenu`, `ExposedDropdownMenuWithTextField`
- `ExposedDropdownMenuBox`, `ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxTextField`, `ExposedDropdownMenuBoxScope.ExposedDropdownMenu`, `ExposedDropdownMenuWithTextField`
- `FloatingActionButton`, `SmallFloatingActionButton`, `LargeFloatingActionButton`, `ExtendedFloatingActionButton`
- `IconButton`, `IconToggleButton`, `FilledIconButton`, `FilledIconToggleButton`, `FilledTonalIconButton`, `FilledTonalIconToggleButton`, `OutlinedIconButton`, `OutlinedIconToggleButton`
- `NavigationBar`, `NavigationBarItem`
Expand All @@ -95,11 +105,11 @@ This project is still in development and has not reached the stable state yet. S

#### About `ext` components (components in the `ext` packages)

The components in the `ext` packages don't follow the `androidx.compose` APIs exactly, but rather provide wrappers are more idiomatic and conventional on both kinds of targets, wrapping different APIs which can't be unified following the `androidx.compose` APIs.
The components in the `ext` packages don't follow the `androidx.compose` APIs exactly, but rather provide wrappers that are more idiomatic and conventional on both kinds of targets, wrapping different APIs that can't be unified following the `androidx.compose` APIs.

#### About parameter names

The parameter names with suffixes such as "JsDom" or "AndroidxCommon" are platform-specific, and only apply on their respective platform(s), Compose HTML / JS DOM or
The parameter names with suffixes such as "JsDom" or "ComposeUi" are platform-specific, and only apply on their respective platform(s), Compose HTML / JS DOM or
`androidx.compose` platforms.

#### Material Icons
Expand Down Expand Up @@ -144,23 +154,24 @@ transition or animation on Compose HTML / JS DOM. These APIs are also highly exp
See [CMP-4966](https://youtrack.jetbrains.com/issue/CMP-4966) for a bug to avoid. Also, ViewModel-related functions
are not implemented yet on Compose HTML / JS DOM.

## Add the libraries to your dependency
## Add to your dependencies

Maven coordinate:

```kotlin
"com.huanshankeji:compose-multiplatform-$module:$version"
"com.huanshankeji:compose-multiplatform-html-unified-$module:$version"
```

More specifically:

```kotlin
"com.huanshankeji:compose-multiplatform-common:$version"
"com.huanshankeji:compose-multiplatform-material-icons-core:$version"
"com.huanshankeji:compose-multiplatform-material2:$version"
"com.huanshankeji:compose-multiplatform-material3:$version"
"com.huanshankeji:compose-multiplatform-html-unified-common:$version"
"com.huanshankeji:compose-multiplatform-html-unified-material-icons-core:$version"
"com.huanshankeji:compose-multiplatform-html-unified-material2:$version"
"com.huanshankeji:compose-multiplatform-html-unified-material3:$version"
```

For example, depend on the Material 3 module with Gradle:
For example, to depend on the Material 3 module with Gradle:

```kotlin
kotlin {
Expand Down
2 changes: 1 addition & 1 deletion buildSrc/src/main/kotlin/VersionsAndDependencies.kt
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import com.huanshankeji.CommonDependencies
import org.jetbrains.compose.ComposeBuildConfig

val projectVersion = "0.4.1-SNAPSHOT"
val projectVersion = "0.5.0-SNAPSHOT"

val commonDependencies = CommonDependencies()

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ kotlin {
@OptIn(ExperimentalKotlinGradlePluginApi::class)
applyDefaultHierarchyTemplate {
common {
group("androidxCommon") {
group("composeUi") {
withJvm()
withAndroidTarget()
group("ios")
Expand All @@ -27,10 +27,10 @@ kotlin {

/*
sourceSets {
val androidxCommonMain by creating { dependsOn(commonMain.get()) }
jvmMain { dependsOn(androidxCommonMain) }
iosMain { dependsOn(androidxCommonMain) }
named("wasmJsMain") { dependsOn(androidxCommonMain) }
val composeUiMain by creating { dependsOn(commonMain.get()) }
jvmMain { dependsOn(composeUiMain) }
iosMain { dependsOn(composeUiMain) }
named("wasmJsMain") { dependsOn(composeUiMain) }
}
*/
}
Expand Down
Loading
Loading