Merge pull request #9 from cl3m/compose-jb

JetBrains Compose version

Author: cl3m

Diff for: README.md

@@ -1,176 +1,63 @@
 [![Kotlin Multiplatform](https://img.shields.io/static/v1?logo=Kotlin&&logoColor=3c94cf&label=&message=Kotlin%20Multiplatform&color=555)](https://kotlinlang.org/docs/reference/multiplatform.html)
 
-:warning:  This PoC compile on iOS and Android but I've remove some functionality because Compose changed too much since I started it. I will update it using the compose compiler when it will be possible. There are some hope on the way :
-- [Redwood Compose](https://github.com/cashapp/redwood) by Cash App. [Native UI with multiplatform Compose](https://jakewharton.com/native-ui-with-multiplatform-compose/). Use the compose compiler and native iOS component. 
-- [Compose Multiplatform by JetBrains](https://github.com/JetBrains/compose-jb) started native support via Skia ([Skiko](https://github.com/JetBrains/skiko)), you can have a look at the [sample](https://github.com/JetBrains/compose-jb/tree/master/experimental/examples/falling-balls-mpp) but it is still very early. Some of the demos in this repo works but there is still many broken functionality. Touchlab made a demo for [Droidcon NYC App](https://touchlab.co/droidcon-nyc-ios-app-with-compose/) It will use the compose compiler but not native component.  
-- [Platform-Kit by IceRock](https://github.com/Alex009/compose-jb/tree/platform-kit-sample/examples/common-platform-uikit) based on Compose Multiplatform by JetBrains, add support via UIKit, thus use the compose compiler and native iOS component.  
-
-I've started to experiment with Compose Native, you can have a look at https://github.com/cl3m/kmp-redux/tree/skiko on iOS two views are SwiftUI and two views are Compose (ComposeSpaceView & ComposeCounterView) and share the same store. 
-
 # Multiplatform Compose
 
-A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotlin. Still experimental as many compose features are not yet available.
+A demo to show usage of Jetbrains Compose in Android and iOS. Originally a Jetpack Compose implementation with native view and yoga for iOS.
 
 ## Table of contents
 
-- [Requirements](#requirements)
-- [Installation](#installation)
-- [Usage](#usage)
-- [Known issues](#known-issues)
+- [Libraries](#libraries)
+- [Demos](#demos)
 - [Troubleshooting](#troubleshooting)
-- [Roadmap](#roadmap)
-- [Contributing](#contributing)
-- [Sponsors](#sponsors)
+- [Alternatives](#alternatives)
 - [License](#license)
 
-## Requirements
-
-- Android Studio Canary
-- cocoapods (gem install cocoapods)
-- cocoapods-generate (gem install cocoapods-generate)
-
-## Installation
-
-The library is not yet published to Maven Central as it is still experimental.
-
-## Usage
-
-The simpliest code is :
+## Libraries
 
-```kotlin
-@Composable
-fun Content(resources: Resources) {
-    Text("Hello world!")
-}
-```
+- kotlinx coroutines
+- ktor
+- Jetbrains Compose (uikit experimental)
+- [PreCompose](https://github.com/Tlaster/PreCompose) (for navigation)
 
-A better start would be :
+## Demos
 
-```kotlin
-@Composable
-fun Content(resources: Resources) {
-    HelloPlatform()
-}
-
-@Composable
-fun HelloPlatform() {
-    Column(
-        modifier = Modifier.fillMaxSize(),
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally) {
-            Text("Hello, ${Platform().platform}!")
-    }
-}
-```
-![Hello Platform Screenshot](https://github.com/cl3m/multiplatform-compose/blob/develop/screenshots/HelloPlatform.png?raw=true)
+Run the app to see a demo of compose on ios.
 
-More advance sample are in the [demos](https://github.com/cl3m/multiplatform-compose/tree/develop/test/src/commonMain/kotlin/com/rouge41/kmm/compose/test/demos) directory of the test library.
+![Demos](https://github.com/cl3m/multiplatform-compose/blob/compose-jb/screenshots/Demos.png?raw=true)
 
-#### Image
+#### AsyncImage
 
 The image composable allow url loading
 
 ```kotlin
-Image(url = "https://loremflickr.com/320/240/ocean", modifier = Modifier.preferredSize(200.dp))
-```
-
-### iOS Composables
-
-#### HumanAppearance
-
-Allow iOS styling such as font or global tintColor. 
-
-```kotlin
-HumanAppearance(tintColor: Color, backgroundColor: Color?, style: TextStyle) {
-    // ...
-}
+AsyncImage(url = "https://loremflickr.com/320/240/ocean", modifier = Modifier.size(200.dp))
 ```
 
 #### SafeArea
 
-Add safe area insets to the view, works in root, TabView and NavigationView
-
-```kotlin
-SafeArea {
-    // ...
-}
-```
-
-![Safe Area Screenshot](https://github.com/cl3m/multiplatform-compose/blob/develop/screenshots/Layout.png?raw=true)
-*Layout without the safe area, with the safe area and on android*
-
-#### TabView
-
-UITabBarController for Compose
-
-```kotlin
-TabView {
-    Tab(title = "First", image = UIImage.systemImageNamed("a.circle.fill")) {
-      // ...
-    }
-    Tab(title = "Second", image = UIImage.systemImageNamed("a.circle.fill")) {
-      // ...
-    }
-}
-```
-
-#### NavigationView
-
-UINavigationController for Compose, renamed to NavHost but as additional parameter title, leadingButton and trailingButton in composable
+SafeArea.current to get PaddingValues.
 
-```kotlin
-val navController = rememberNavController()
-NavHost(navController = navController, startDestination = "first") {
-    composable("first", title = "First", trailingButton = Button(onClick = {}) { Text ("Edit") }) {
-			SafeArea {
-	    Button(onClick = { navController.navigate("second") }) { 
-                // ...
-            }
-        }
-    }
-    composable("second", title = "Second") {
-        SafeArea {
-	    // ...
-        }
-    }
-}
-```
+#### DarkMode
 
-## Known issues
+DarkMode.current to fix dark mode on iOS.
 
-- Jetpack Compose require Android Studio Canary and an alpha build of Gradle. There is some workaround in _build.gradle.kts_ to make it work (testApi).
-- Jetpack Compose is not supported in Kotlin Multiplatform Mobile library ([KT-38694](https://youtrack.jetbrains.com/issue/KT-38694)). Unfortunatly, the workaround was messing with actual/expect function and prevent the use of expect function with default value. The library now use @Suppress("ACTUAL_FUNCTION_WITH_DEFAULT_ARGUMENTS") to workaround this problem. If you use an expect function with default value and without the suppress, you will get an error function not found or _java.lang.IllegalStateException: 2. expected value parameter count to be higher_.
-- Jetpack Compose dependencies can not be used in commonMain because they have a dependency on kotlinx-coroutines-android.
-- Android Studio does not autocomplete cocoapods imported library in iosMain. Thus it is in iosx64Main and symlinked to iosArm64Main.
-- Images needs currently to be included in the android and ios resources separately.
-- Navigation is currently not shared in the library
-- Latest Android Studio Canary shows many undefined error but everthing compile fine. It was not the case before.
 
 ## Troubleshooting
 
-### cinteropYogaKitIosArm64 FAILED YogaKit module not found
+### e: java.lang.IllegalStateException: No file for ***
 
-You did not read the requirements. Install cocoapods-generate "gem install cocoapods-generate", invalid cache and restart Android Studio
+Compose function and CompositonLocal have to be internal and not exposed to iOS module.
 
-## Roadmap
+## Alternatives
 
-- More Jetpack Compose feature support
-- Better images/resources support
-- UI Test with Github Actions
-- Performance improvement/optimisation
-- Use Compose compiler and runtime on iOS
+- [Compose Multiplatform by JetBrains](https://github.com/JetBrains/compose-jb) started native support via Skia ([Skiko](https://github.com/JetBrains/skiko)), you can have a look at the [sample](https://github.com/JetBrains/compose-jb/tree/master/experimental/examples/falling-balls-mpp). Touchlab made a demo for [Droidcon NYC App](https://touchlab.co/droidcon-nyc-ios-app-with-compose/) It will use the compose compiler but not native component.  
 
-## Sponsors
-
-No one yet, be the first [sponsor](https://github.com/sponsors/cl3m)!
-
-## Contributing
+- [Redwood Compose](https://github.com/cashapp/redwood) by Cash App. [Native UI with multiplatform Compose](https://jakewharton.com/native-ui-with-multiplatform-compose/). Use the compose compiler and native iOS component. 
 
-All development (both new features and bug fixes) is performed in the `develop` branch. This way `master` always contains the sources of the most recently released version. Use git-flow if possible.
+- [Platform-Kit by IceRock](https://github.com/Alex009/compose-jb/tree/platform-kit-sample/examples/common-platform-uikit) based on Compose Multiplatform by JetBrains, add support via UIKit, thus use the compose compiler and native iOS component.  
 
-You can start a PR with incomplete implementation to shows what you are working on. Please send PRs with bug fixes or new features to the `develop` branch. Documentation fixes in the markdown files are an exception to this rule. They are updated directly in `master`.
+- [multiplatform-compose](https://github.com/cl3m/multiplatform-compose/tree/yoga) This original repo, an experiment with native view and yoga for layout. You can also have a look at [kmp-redux](https://github.com/cl3m/kmp-redux/tree/skiko) that show Compose integration with SwiftUI. 
 
-The `develop` branch is pushed to `master` on release.
 
 ## License
 

Diff for: androidApp/build.gradle.kts

@@ -4,11 +4,11 @@ plugins {
 }
 
 android {
-    compileSdkVersion(AndroidSdk.compile)
+    compileSdk = AndroidSdk.compile
     defaultConfig {
         applicationId = "com.rouge41.kmm.compose.androidApp"
-        minSdkVersion(AndroidSdk.min)
-        targetSdkVersion(AndroidSdk.target)
+        minSdk = AndroidSdk.min
+        targetSdk = AndroidSdk.target
         versionCode = 1
         versionName = "1.0"
     }
@@ -28,21 +28,18 @@ android {
         compose = true
     }
     composeOptions {
-        kotlinCompilerExtensionVersion = Version.compose
+        kotlinCompilerExtensionVersion = Version.compose_compiler
     }
 }
 
 dependencies {
-    implementation(Android.appcompact)
-    implementation(Android.material)
-
-    implementation(project(":multiplatform-compose"))
     implementation(project(":test"))
 
+    implementation(Android.appcompat)
+    implementation(Android.material)
+
     implementation(Compose.runtime)
     implementation(Compose.ui)
     implementation(Compose.foundationLayout)
     implementation(Compose.material)
-    implementation(Compose.runtimeLiveData)
-    implementation(Compose.navigation)
-}
+}

Diff for: androidApp/src/main/java/com/rouge41/kmm/compose/androidApp/MainActivity.kt

@@ -2,28 +2,22 @@ package com.rouge41.kmm.compose.androidApp
 
 import android.graphics.Color
 import android.os.Bundle
-import android.view.View
-import androidx.appcompat.app.AppCompatActivity
-import androidx.compose.ui.platform.ComposeView
-import com.rouge41.kmm.compose.test.Content
-import com.rouge41.kmm.compose.test.Resources
+import com.rouge41.kmm.compose.Android
+import com.rouge41.kmm.compose.RootView
+import moe.tlaster.precompose.lifecycle.PreComposeActivity
+import moe.tlaster.precompose.lifecycle.setContent
 
-class MainActivity : AppCompatActivity() {
+class MainActivity : PreComposeActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        setContentView(R.layout.activity_main)
 
-        //has to be set in code or in theme
+        // has to be set in code or in theme
         window.decorView.setBackgroundColor(Color.WHITE)
         window.statusBarColor = Color.parseColor("#cc7000")
-        //window.statusBarColor = Color.WHITE
-        //window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
 
-        val cv: ComposeView = findViewById(R.id.compose_view)
-        val resources = Resources(logo = R.drawable.logo)
-
-        cv.setContent {
-            Content(resources)
+        Android.context = this
+        setContent {
+            RootView()
         }
     }
 }

Diff for: androidApp/src/main/res/layout/activity_main.xml

@@ -1,13 +1,16 @@
 buildscript {
     repositories {
         gradlePluginPortal()
-        jcenter()
         google()
+        jcenter()
         mavenCentral()
+        maven("https://jitpack.io")
+        maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
     }
     dependencies {
-        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${Version.kotlin}")
-        classpath("com.android.tools.build:gradle:7.1.2")
+        classpath(Kotlin.gradle)
+        classpath(Android.gradle)
+        classpath(Kotlin.serialization)
     }
 }
 
@@ -16,5 +19,6 @@ allprojects {
         google()
         jcenter()
         mavenCentral()
+        maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
     }
 }

Diff for: build.gradle.kts

@@ -1,11 +1,7 @@
 repositories {
-    jcenter()
+    mavenCentral()
 }
 
 plugins {
     `kotlin-dsl`
 }
-
-kotlinDslPluginOptions {
-    experimentalWarning.set(false)
-}