diff --git a/README.md b/README.md index f3414788..4858815a 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ The Compose HTML / JS DOM source is mainly based on [Kobweb Silk](https://github ## 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. +Complete visual consistency across different platforms is not guaranteed. See [the side-by-side demo site](https://huanshankeji.github.io/compose-multiplatform-html-unified/) 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. @@ -109,8 +109,7 @@ The components in the `ext` packages don't follow the `androidx.compose` APIs ex #### About parameter names -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. +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 Compose UI platforms. #### Material Icons @@ -179,7 +178,7 @@ kotlin { commonMain { dependencies { // ... - implementation("com.huanshankeji:compose-multiplatform-material3:$version") + implementation("com.huanshankeji:compose-multiplatform-html-unified-material3:$version") } } } diff --git a/buildSrc/src/main/kotlin/Constants.kt b/buildSrc/src/main/kotlin/Constants.kt index cfcdfdb0..caad779e 100644 --- a/buildSrc/src/main/kotlin/Constants.kt +++ b/buildSrc/src/main/kotlin/Constants.kt @@ -1,3 +1,3 @@ -const val FOR_COMPOSE_TARGETS_IN_TITLE = "for `androidx.compose` and Compose HTML" +const val FOR_COMPOSE_TARGETS_IN_TITLE = "for Compose UI and Compose HTML" const val FOR_COMPOSE_TARGETS_IN_DESCRIPTION = - "for `androidx.compose` (Android, desktop (JVM), iOS, and web (Kotlin/Wasm)) and Compose HTML" + "for Compose UI (Android, desktop (JVM), iOS, and web (Kotlin/Wasm)) and Compose HTML" diff --git a/buildSrc/src/main/kotlin/common-conventions.gradle.kts b/buildSrc/src/main/kotlin/common-conventions.gradle.kts index de8d1d92..ac93e49d 100644 --- a/buildSrc/src/main/kotlin/common-conventions.gradle.kts +++ b/buildSrc/src/main/kotlin/common-conventions.gradle.kts @@ -18,7 +18,7 @@ group = "com.huanshankeji" version = projectVersion kotlin { - // for `androidx.compose` + // for Compose UI jvm() // TODO: `jvm("desktop")`? jvmToolchain(8) diff --git a/common/api/compose-multiplatform-html-unified-common.klib.api b/common/api/compose-multiplatform-html-unified-common.klib.api index 1cad9578..ce040a6a 100644 --- a/common/api/compose-multiplatform-html-unified-common.klib.api +++ b/common/api/compose-multiplatform-html-unified-common.klib.api @@ -1017,12 +1017,12 @@ final val com.huanshankeji.compose.foundation.layout/com_huanshankeji_compose_fo final val com.huanshankeji.compose.foundation/com_huanshankeji_compose_foundation_ScrollState$stableprop // com.huanshankeji.compose.foundation/com_huanshankeji_compose_foundation_ScrollState$stableprop|#static{}com_huanshankeji_compose_foundation_ScrollState$stableprop[0] // Targets: [js] -final val com.huanshankeji.compose.foundation/imitateAndroidxLayoutHorizontalScrollPlatformModifier // com.huanshankeji.compose.foundation/imitateAndroidxLayoutHorizontalScrollPlatformModifier|{}imitateAndroidxLayoutHorizontalScrollPlatformModifier[0] - final fun (): com.varabyte.kobweb.compose.ui/Modifier // com.huanshankeji.compose.foundation/imitateAndroidxLayoutHorizontalScrollPlatformModifier.|(){}[0] +final val com.huanshankeji.compose.foundation/imitateComposeUiLayoutHorizontalScrollPlatformModifier // com.huanshankeji.compose.foundation/imitateComposeUiLayoutHorizontalScrollPlatformModifier|{}imitateComposeUiLayoutHorizontalScrollPlatformModifier[0] + final fun (): com.varabyte.kobweb.compose.ui/Modifier // com.huanshankeji.compose.foundation/imitateComposeUiLayoutHorizontalScrollPlatformModifier.|(){}[0] // Targets: [js] -final val com.huanshankeji.compose.foundation/imitateAndroidxLayoutVerticalScrollPlatformModifier // com.huanshankeji.compose.foundation/imitateAndroidxLayoutVerticalScrollPlatformModifier|{}imitateAndroidxLayoutVerticalScrollPlatformModifier[0] - final fun (): com.varabyte.kobweb.compose.ui/Modifier // com.huanshankeji.compose.foundation/imitateAndroidxLayoutVerticalScrollPlatformModifier.|(){}[0] +final val com.huanshankeji.compose.foundation/imitateComposeUiLayoutVerticalScrollPlatformModifier // com.huanshankeji.compose.foundation/imitateComposeUiLayoutVerticalScrollPlatformModifier|{}imitateComposeUiLayoutVerticalScrollPlatformModifier[0] + final fun (): com.varabyte.kobweb.compose.ui/Modifier // com.huanshankeji.compose.foundation/imitateComposeUiLayoutVerticalScrollPlatformModifier.|(){}[0] // Targets: [js] final fun (androidx.compose.ui.unit/Dp).com.huanshankeji.compose.ui.unit/toPx(): org.jetbrains.compose.web.css/CSSSizeValue // com.huanshankeji.compose.ui.unit/toPx|toPx@androidx.compose.ui.unit.Dp(){}[0] @@ -1064,7 +1064,7 @@ final fun (com.varabyte.kobweb.compose.ui/Modifier).com.huanshankeji.compose.fou final fun (com.varabyte.kobweb.compose.ui/Modifier).com.huanshankeji.compose.ui/toCommonModifier(): com.huanshankeji.compose.ui/Modifier.Impl // com.huanshankeji.compose.ui/toCommonModifier|toCommonModifier@com.varabyte.kobweb.compose.ui.Modifier(){}[0] // Targets: [js] -final fun (com.varabyte.kobweb.compose.ui/Modifier).com.huanshankeji.kobweb.compose.ui.modifiers/imitateAndroidxLayout(): com.varabyte.kobweb.compose.ui/Modifier // com.huanshankeji.kobweb.compose.ui.modifiers/imitateAndroidxLayout|imitateAndroidxLayout@com.varabyte.kobweb.compose.ui.Modifier(){}[0] +final fun (com.varabyte.kobweb.compose.ui/Modifier).com.huanshankeji.kobweb.compose.ui.modifiers/imitateComposeUiLayout(): com.varabyte.kobweb.compose.ui/Modifier // com.huanshankeji.kobweb.compose.ui.modifiers/imitateComposeUiLayout|imitateComposeUiLayout@com.varabyte.kobweb.compose.ui.Modifier(){}[0] // Targets: [js] final fun (com.varabyte.kobweb.compose.ui/Modifier).com.huanshankeji.kobweb.compose.ui.modifiers/size(com.varabyte.kobweb.compose.css/Width, com.varabyte.kobweb.compose.css/Height): com.varabyte.kobweb.compose.ui/Modifier // com.huanshankeji.kobweb.compose.ui.modifiers/size|size@com.varabyte.kobweb.compose.ui.Modifier(com.varabyte.kobweb.compose.css.Width;com.varabyte.kobweb.compose.css.Height){}[0] diff --git a/common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt b/common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt index 29f54d15..d53d7a82 100644 --- a/common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt +++ b/common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt @@ -4,7 +4,7 @@ import com.huanshankeji.compose.ui.Modifier /* const val MATCH_POSITION_RELATIVE_PARENT_DEPRECATED_MESSAGE = - "This function's functionality is replaced by `imitateAndroidxLayout`." + "This function's functionality is replaced by `imitateComposeUiLayout`." */ diff --git a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/Scroll.js.kt b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/Scroll.js.kt index f5ed946d..6ba45ff1 100644 --- a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/Scroll.js.kt +++ b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/Scroll.js.kt @@ -10,7 +10,7 @@ import com.huanshankeji.compose.foundation.layout.ext.KobwebBox import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.PlatformModifier -import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout +import com.huanshankeji.kobweb.compose.ui.modifiers.imitateComposeUiLayout import com.varabyte.kobweb.compose.ui.styleModifier fun PlatformModifier.verticalScroll() = @@ -19,8 +19,9 @@ fun PlatformModifier.verticalScroll() = fun PlatformModifier.horizontalScroll() = styleModifier { horizontalScroll() } -val imitateAndroidxLayoutVerticalScrollPlatformModifier = PlatformModifier.imitateAndroidxLayout().verticalScroll() -val imitateAndroidxLayoutHorizontalScrollPlatformModifier = PlatformModifier.imitateAndroidxLayout().horizontalScroll() +val imitateComposeUiLayoutVerticalScrollPlatformModifier = PlatformModifier.imitateComposeUiLayout().verticalScroll() +val imitateComposeUiLayoutHorizontalScrollPlatformModifier = + PlatformModifier.imitateComposeUiLayout().horizontalScroll() @Composable diff --git a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt index d4181be6..7e2881dd 100644 --- a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt +++ b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt @@ -8,7 +8,7 @@ import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.PlatformModifier import com.huanshankeji.compose.ui.toCommonModifier -import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout +import com.huanshankeji.kobweb.compose.ui.modifiers.imitateComposeUiLayout import com.varabyte.kobweb.compose.foundation.layout.LayoutScopeMarker import com.varabyte.kobweb.compose.foundation.layout.BoxScope as PlatformBoxScope @@ -19,14 +19,14 @@ actual fun Box( content: @Composable BoxScope.() -> Unit ) = KobwebBox( - PlatformModifier.imitateAndroidxLayout().toCommonModifier().then(modifier), + PlatformModifier.imitateComposeUiLayout().toCommonModifier().then(modifier), contentAlignment, content ) @Composable actual fun Box(modifier: Modifier) = - KobwebBox(PlatformModifier.imitateAndroidxLayout().then(modifier.platformModifier)) + KobwebBox(PlatformModifier.imitateComposeUiLayout().then(modifier.platformModifier)) @LayoutScopeMarker @Immutable diff --git a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.js.kt b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.js.kt index 41846b1a..7e70f89c 100644 --- a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.js.kt +++ b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.js.kt @@ -6,7 +6,7 @@ import androidx.compose.runtime.Stable import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.PlatformModifier -import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout +import com.huanshankeji.kobweb.compose.ui.modifiers.imitateComposeUiLayout import com.varabyte.kobweb.compose.foundation.layout.LayoutScopeMarker @Composable @@ -19,7 +19,7 @@ actual fun Column( AddKobwebComposeStyleSheet() com.varabyte.kobweb.compose.foundation.layout.Column( PlatformModifier - .imitateAndroidxLayout() // "fit-content" is added to make it consistent with the `androidx` one + .imitateComposeUiLayout() // "fit-content" is added to make it consistent with the `androidx` one .stylesFrom(verticalArrangement) .then(modifier.platformModifier), verticalArrangement.platformValue, diff --git a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.js.kt b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.js.kt index f13c5e4c..57e17b5a 100644 --- a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.js.kt +++ b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.js.kt @@ -6,7 +6,7 @@ import androidx.compose.runtime.Stable import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.PlatformModifier -import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout +import com.huanshankeji.kobweb.compose.ui.modifiers.imitateComposeUiLayout import com.varabyte.kobweb.compose.foundation.layout.LayoutScopeMarker @Composable @@ -19,7 +19,7 @@ actual fun Row( AddKobwebComposeStyleSheet() com.varabyte.kobweb.compose.foundation.layout.Row( PlatformModifier - .imitateAndroidxLayout() + .imitateComposeUiLayout() .stylesFrom(horizontalArrangement) .then(modifier.platformModifier), horizontalArrangement.platformValue, diff --git a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Box.js.kt b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Box.js.kt index 4609c153..21dd179d 100644 --- a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Box.js.kt +++ b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Box.js.kt @@ -5,7 +5,7 @@ import com.huanshankeji.compose.foundation.layout.AddKobwebComposeStyleSheet import com.huanshankeji.compose.foundation.layout.BoxScope import com.huanshankeji.compose.ui.CommonModifier import com.huanshankeji.compose.ui.PlatformModifier -import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout +import com.huanshankeji.kobweb.compose.ui.modifiers.imitateComposeUiLayout import com.varabyte.kobweb.compose.dom.ElementRefScope import com.varabyte.kobweb.compose.foundation.layout.Box import com.varabyte.kobweb.compose.ui.toAttrs @@ -19,7 +19,7 @@ import com.varabyte.kobweb.compose.foundation.layout.BoxScope as PlatformBoxScop import com.varabyte.kobweb.compose.ui.Alignment as PlatformAlignment /** - * Delegates to [Box] without [com.varabyte.kobweb.compose.ui.Modifier.imitateAndroidxLayout]. + * Delegates to [Box] without [com.varabyte.kobweb.compose.ui.Modifier.imitateComposeUiLayout]. */ @Composable fun KobwebBox( @@ -43,7 +43,7 @@ fun KobwebBox( } /** - * Delegates to [Div] without [com.varabyte.kobweb.compose.ui.Modifier.imitateAndroidxLayout]. + * Delegates to [Div] without [com.varabyte.kobweb.compose.ui.Modifier.imitateComposeUiLayout]. */ @Composable fun DivBox( diff --git a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/lazy/LazyDsl.js.kt b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/lazy/LazyDsl.js.kt index 83413b51..cd332f79 100644 --- a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/lazy/LazyDsl.js.kt +++ b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/lazy/LazyDsl.js.kt @@ -1,8 +1,8 @@ package com.huanshankeji.compose.foundation.lazy import androidx.compose.runtime.Composable -import com.huanshankeji.compose.foundation.imitateAndroidxLayoutHorizontalScrollPlatformModifier -import com.huanshankeji.compose.foundation.imitateAndroidxLayoutVerticalScrollPlatformModifier +import com.huanshankeji.compose.foundation.imitateComposeUiLayoutHorizontalScrollPlatformModifier +import com.huanshankeji.compose.foundation.imitateComposeUiLayoutVerticalScrollPlatformModifier import com.huanshankeji.compose.foundation.layout.* import com.huanshankeji.compose.runtime.DeferredComposableRunner import com.huanshankeji.compose.ui.Alignment @@ -63,7 +63,7 @@ actual fun LazyRow( content: LazyListScope.() -> Unit ) = Row( - commonLazyModifier(imitateAndroidxLayoutHorizontalScrollPlatformModifier, contentPadding, modifier), + commonLazyModifier(imitateComposeUiLayoutHorizontalScrollPlatformModifier, contentPadding, modifier), horizontalArrangement, verticalAlignment ) { @@ -80,7 +80,7 @@ actual fun LazyColumn( content: LazyListScope.() -> Unit ) = Column( - commonLazyModifier(imitateAndroidxLayoutVerticalScrollPlatformModifier, contentPadding, modifier), + commonLazyModifier(imitateComposeUiLayoutVerticalScrollPlatformModifier, contentPadding, modifier), verticalArrangement, horizontalAlignment ) { diff --git a/common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Layout.kt b/common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Layout.kt index f449cb50..d10a0b2a 100644 --- a/common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Layout.kt +++ b/common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Layout.kt @@ -19,7 +19,7 @@ import org.jetbrains.compose.web.css.maxWidth * and make the `overflow-*` CSS property / the `*Scroll` modifier work better on JS DOM. * See https://developer.android.com/develop/ui/compose/layouts/constraints-modifiers for more details. */ -fun Modifier.imitateAndroidxLayout() = +fun Modifier.imitateComposeUiLayout() = styleModifier { width(Width.FitContent) height(Height.FitContent) diff --git a/common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Size.kt b/common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Size.kt index 3b05c880..47c97610 100644 --- a/common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Size.kt +++ b/common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Size.kt @@ -15,7 +15,7 @@ fun Modifier.size(width: Width, height: Height): Modifier = //TODO consider removing and inlining this /** - * Consider using [Modifier.imitateAndroidxLayout] instead when adding this for a layout. + * Consider using [Modifier.imitateComposeUiLayout] instead when adding this for a layout. */ fun Modifier.sizeFitContent() = size(Width.FitContent, Height.FitContent) diff --git a/demo/iosApp/Configuration/Config.xcconfig b/demo/iosApp/Configuration/Config.xcconfig index 50982e62..3155fca9 100644 --- a/demo/iosApp/Configuration/Config.xcconfig +++ b/demo/iosApp/Configuration/Config.xcconfig @@ -1,3 +1,3 @@ TEAM_ID= BUNDLE_ID=com.huanshankeji.compose.material.demo -APP_NAME=compose-multiplatform-material-demo \ No newline at end of file +APP_NAME=compose-multiplatform-html-unified-demo \ No newline at end of file diff --git a/demo/iosApp/iosApp.xcodeproj/project.pbxproj b/demo/iosApp/iosApp.xcodeproj/project.pbxproj index 8831f318..7a56ed44 100644 --- a/demo/iosApp/iosApp.xcodeproj/project.pbxproj +++ b/demo/iosApp/iosApp.xcodeproj/project.pbxproj @@ -17,7 +17,7 @@ 058557BA273AAA24004C7B11 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = ""; }; 058557D8273AAEEB004C7B11 /* Preview Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = "Preview Assets.xcassets"; sourceTree = ""; }; 2152FB032600AC8F00CF470E /* iOSApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = iOSApp.swift; sourceTree = ""; }; - 7555FF7B242A565900829871 /* compose-multiplatform-material-demo.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = compose-multiplatform-material-demo.app; sourceTree = BUILT_PRODUCTS_DIR; }; + 7555FF7B242A565900829871 /* compose-multiplatform-html-unified-demo.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = compose-multiplatform-html-unified-demo.app; sourceTree = BUILT_PRODUCTS_DIR; }; 7555FF82242A565900829871 /* ContentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ContentView.swift; sourceTree = ""; }; 7555FF8C242A565B00829871 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; AB3632DC29227652001CCB65 /* Config.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; path = Config.xcconfig; sourceTree = ""; }; @@ -62,7 +62,7 @@ 7555FF7C242A565900829871 /* Products */ = { isa = PBXGroup; children = ( - 7555FF7B242A565900829871 /* compose-multiplatform-material-demo.app */, + 7555FF7B242A565900829871 /* compose-multiplatform-html-unified-demo.app */, ); name = Products; sourceTree = ""; @@ -107,7 +107,7 @@ packageProductDependencies = ( ); productName = iosApp; - productReference = 7555FF7B242A565900829871 /* compose-multiplatform-material-demo.app */; + productReference = 7555FF7B242A565900829871 /* compose-multiplatform-html-unified-demo.app */; productType = "com.apple.product-type.application"; }; /* End PBXNativeTarget section */ diff --git a/demo/side-by-side-site/index.html b/demo/side-by-side-site/index.html index d7426997..39009e7a 100644 --- a/demo/side-by-side-site/index.html +++ b/demo/side-by-side-site/index.html @@ -4,7 +4,7 @@ - Side by side - Compose Multiplatform Material demo + Side by side - Compose Multiplatform HTML Unified demo