Kotlin 2.0, Compose 1.6.10, add Wasm target (#31)

* Kotlin 2.0, Compose 1.6.10, add Wasm target * Rearrange sample structure
ComposeGears · May 30, 2024 · f4ae237 · f4ae237
1 parent 831f929
commit f4ae237
Show file tree

Hide file tree

Showing 75 changed files with 731 additions and 334 deletions.
diff --git a/.github/workflows/wasm_deploy.yml b/.github/workflows/wasm_deploy.yml
@@ -21,11 +21,8 @@ jobs:
         distribution: 'zulu'
         java-version: 17
 
-    - name: kotlinUpgradeYarnLock
-      run: ./gradlew kotlinUpgradeYarnLock
-
     - name: Build web app
-      run: ./gradlew :example:composeApp:assemble
+      run: ./gradlew :example:composeApp:wasmJsBrowserDistribution
 
     - name: Upload artifact
       uses: actions/upload-pages-artifact@v3

diff --git a/.gitignore b/.gitignore
@@ -9,5 +9,18 @@ local.properties
 captures
 .externalNativeBuild
 .cxx
+.kotlin
 publish.bat
-kotlin-js-store/
+kotlin-js-store/
+
+# Xcode
+*.pbxuser
+*.mode1v3
+*.mode2v3
+*.perspectivev3
+*.xcuserstate
+*.xccheckout
+*.xcsmblueprint
+xcuserdata/
+xcshareddata/
+contents.xcworkspacedata
diff --git a/README.md b/README.md
@@ -102,7 +102,7 @@ Setup
     }
    ```
 
-see example: [App.kt](example/composeApp/src/commonMain/kotlin/App.kt#L16)
+see example: [App.kt](example/app/composeApp/src/commonMain/kotlin/composegears/tiamat/example/App.kt#L27)
 
 Overview
 --------
@@ -249,19 +249,19 @@ Custom transition:
 
 ### Examples code
 
-- [SimpleForwardBack.kt](example/composeApp/src/commonMain/kotlin/content/examples/SimpleForwardBack.kt) - Simple back and forward navigation
-- [SimpleReplace.kt](example/composeApp/src/commonMain/kotlin/content/examples/SimpleReplace.kt) - Example of `replace` navigation
-- [Tabs.kt](example/composeApp/src/commonMain/kotlin/content/examples/Tabs.kt) - Bottom navigation example
-- [NestedNavigation.kt](example/composeApp/src/commonMain/kotlin/content/examples/NestedNavigation.kt) - Nested nav controller interaction
-- [DataPassingParams.kt](example/composeApp/src/commonMain/kotlin/content/examples/DataPassingParams.kt) - How to pass data to next screen
-- [DataPassingFreeArgs.kt](example/composeApp/src/commonMain/kotlin/content/examples/DataPassingFreeArgs.kt) - How to pass addition type-free data to next screen (useful to metadata/deeplink)
-- [DataPassingResult.kt](example/composeApp/src/commonMain/kotlin/content/examples/DataPassingResult.kt) - How to provide result
-- [ViewModels.kt](example/composeApp/src/commonMain/kotlin/content/examples/ViewModels.kt) - ViewModels usage
-- [CustomTransition.kt](example/composeApp/src/commonMain/kotlin/content/examples/CustomTransition.kt) - Custom animations/transition
-- [Root.kt](example/composeApp/src/commonMain/kotlin/content/examples/multimodule/Root.kt) - Multi-module communication example (using Signals/Broadcast-api) 
-- [BackStackAlteration.kt](example/composeApp/src/commonMain/kotlin/content/examples/BackStackAlteration.kt) - Alteration(modification) of backstack (deeplinks)
-- [TwoPaneResizableExample.kt](example/composeApp/src/commonMain/kotlin/content/examples/TwoPaneResizableExample.kt) - 2 pane example (list+details, dynamic switch between 1-pane or 2-pane layout)
-- [KoinIntegration.kt](example/composeApp/src/commonMain/kotlin/content/examples/koin/KoinIntegration.kt) - Koin integration
+- [SimpleForwardBack.kt](example/app/composeApp/src/commonMain/kotlin/composegears/tiamat/example/SimpleForwardBack.kt) - Simple back and forward navigation
+- [SimpleReplace.kt](example/app/composeApp/src/commonMain/kotlin/composegears/tiamat/example/SimpleReplace.kt) - Example of `replace` navigation
+- [Tabs.kt](example/app/composeApp/src/commonMain/kotlin/composegears/tiamat/example/Tabs.kt) - Bottom navigation example
+- [NestedNavigation.kt](example/app/composeApp/src/commonMain/kotlin/composegears/tiamat/example/NestedNavigation.kt) - Nested nav controller interaction
+- [DataPassingParams.kt](example/app/composeApp/src/commonMain/kotlin/composegears/tiamat/example/DataPassingParams.kt) - How to pass data to next screen
+- [DataPassingFreeArgs.kt](example/app/composeApp/src/commonMain/kotlin/composegears/tiamat/example/DataPassingFreeArgs.kt) - How to pass addition type-free data to next screen (useful to metadata/deeplink)
+- [DataPassingResult.kt](example/app/composeApp/src/commonMain/kotlin/composegears/tiamat/example/DataPassingResult.kt) - How to provide result
+- [ViewModels.kt](example/app/composeApp/src/commonMain/kotlin/composegears/tiamat/example/ViewModels.kt) - ViewModels usage
+- [CustomTransition.kt](example/app/composeApp/src/commonMain/kotlin/composegears/tiamat/example/CustomTransition.kt) - Custom animations/transition
+- [Root.kt](example/app/composeApp/src/commonMain/kotlin/composegears/tiamat/example/multimodule/Root.kt) - Multi-module communication example (using Signals/Broadcast-api) 
+- [BackStackAlteration.kt](example/app/composeApp/src/commonMain/kotlin/composegears/tiamat/example/BackStackAlteration.kt) - Alteration(modification) of backstack (deeplinks)
+- [TwoPaneResizableExample.kt](example/app/composeApp/src/commonMain/kotlin/composegears/tiamat/example/TwoPaneResizableExample.kt) - 2 pane example (list+details, dynamic switch between 1-pane or 2-pane layout)
+- [KoinIntegrationScreen.kt](example/sample-koin/src/commonMain/kotlin/composegears/tiamat/sample/koin/KoinIntegrationScreen.kt) - Koin integration
 
 Hint
 ----
@@ -322,17 +322,19 @@ fun main() = application {
 ### Android
 `Tiamat-android` overrides `LocalLifecycleOwner` for each destination and compatible with lifecycle-aware components
 
-See an example of camera usage: [AndroidViewLifecycleExample.kt](example/composeApp/src/androidMain/kotlin/content/examples/platform/examples/AndroidViewLifecycleScreen.kt)
+See an example of camera usage: [AndroidViewLifecycleScreen.kt](example/app/composeApp/src/androidMain/kotlin/composegears/tiamat/example/platform/AndroidViewLifecycleScreen.kt)
 
 ### iOS
 
 Nothing specific (yet)
 
 ### Run/Build sample
 
-Android: `./gradlew example:composeApp:assembleDebug`
+Android: `./gradlew example:app:composeApp:assembleDebug`
 
-Desktop: `./gradlew example:composeApp:run`
+Desktop: `./gradlew example:app:composeApp:run`
+
+Web: `./gradlew example:app:composeApp:wasmJsBrowserRun`
 
 iOS: run XCode project or else use [KMM](https://plugins.jetbrains.com/plugin/14936-kotlin-multiplatform-mobile) plugin iOS target
 

diff --git a/build.gradle.kts b/build.gradle.kts
@@ -4,6 +4,7 @@ import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
 plugins {
     alias(libs.plugins.android.application) apply false
     alias(libs.plugins.android.library) apply false
+    alias(libs.plugins.compose.compiler)
     alias(libs.plugins.jetbrains.compose) apply false
     alias(libs.plugins.detekt)
     alias(libs.plugins.kotlin.multiplatform) apply false
@@ -29,8 +30,10 @@ allprojects {
             files(
                 "src/commonMain/kotlin",
                 "src/jvmMain/kotlin",
+                "src/desktopMain/kotlin",
                 "src/androidMain/kotlin",
                 "src/iosMain/kotlin",
+                "src/wasmJsMain/kotlin",
             )
         )
     }
@@ -44,18 +47,13 @@ allprojects {
 subprojects {
     tasks.withType<KotlinCompile>().configureEach {
         val outPath = layout.buildDirectory.dir("compose_compiler").get().asFile.absoluteFile
+
         compilerOptions {
             if (project.findProperty("composeCompilerReports") == "true") {
-                freeCompilerArgs.addAll(
-                    "-P",
-                    "plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=$outPath"
-                )
-            }
-            if (project.findProperty("composeCompilerMetrics") == "true") {
-                freeCompilerArgs.addAll(
-                    "-P",
-                    "plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination=$outPath"
-                )
+                composeCompiler {
+                    reportsDestination = outPath
+                    metricsDestination = outPath
+                }
             }
         }
     }

diff --git a/config/detekt/detekt.yml b/config/detekt/detekt.yml
@@ -1133,6 +1133,8 @@ Compose:
         active: true
     MutableParams:
         active: true
+    ParameterNaming:
+        active: true
     MutableStateAutoboxing:
         active: true
     MutableStateParam:

diff --git a/example/composeApp/build.gradle.kts → example/app/composeApp/build.gradle.kts b/example/composeApp/build.gradle.kts → example/app/composeApp/build.gradle.kts
@@ -1,21 +1,24 @@
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
+import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
+import org.jetbrains.kotlin.gradle.dsl.JvmTarget
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
 
 plugins {
     alias(libs.plugins.kotlin.multiplatform)
     alias(libs.plugins.android.application)
+    alias(libs.plugins.compose.compiler)
     alias(libs.plugins.jetbrains.compose)
     alias(libs.plugins.kotlin.parcelize)
 }
 
 kotlin {
     androidTarget {
-        compilations.all {
-            kotlinOptions {
-                jvmTarget = "1.8"
-            }
+        @OptIn(ExperimentalKotlinGradlePluginApi::class)
+        compilerOptions {
+            jvmTarget = JvmTarget.JVM_1_8
         }
     }
-
     jvm("desktop")
 
     listOf(
@@ -26,48 +29,76 @@ kotlin {
         iosTarget.binaries.framework {
             baseName = "ComposeApp"
             isStatic = true
+
+            export(projects.example.sampleKoin)
         }
     }
 
-    sourceSets {
-        val desktopMain by getting
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        moduleName = "tiamatApp"
+        browser {
+            commonWebpackConfig {
+                outputFileName = "tiamatApp.js"
+                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
+                    static = (static ?: mutableListOf()).apply {
+                        // Serve sources to debug inside browser
+                        add(project.projectDir.path)
+                    }
+                }
+            }
+        }
+        binaries.executable()
+    }
 
+    sourceSets {
+        commonMain.dependencies {
+            implementation(projects.tiamat)
+            implementation(projects.example.uiCore)
+        }
         androidMain.dependencies {
+            implementation(projects.tiamatKoin)
+            implementation(projects.example.sampleKoin)
+
             implementation(libs.androidx.activity.compose)
             implementation(libs.androidx.camera.camera2)
             implementation(libs.androidx.camera.lifecycle)
             implementation(libs.androidx.camera.view)
             implementation(libs.androidx.concurrent.futures)
+            implementation(libs.koin.compose)
         }
-        commonMain.dependencies {
-            implementation(projects.tiamat)
+        iosMain.dependencies {
             implementation(projects.tiamatKoin)
-
-            implementation(compose.runtime)
-            implementation(compose.foundation)
-            implementation(compose.material3)
-            implementation(compose.materialIconsExtended)
-            implementation(compose.ui)
+            api(projects.example.sampleKoin)
 
             implementation(libs.koin.compose)
         }
-        desktopMain.dependencies {
-            implementation(compose.desktop.currentOs)
-            implementation(libs.kotlin.coroutines.swing)
+        wasmJsMain.dependencies {
+
+        }
+        val desktopMain by getting {
+            dependencies {
+                implementation(projects.tiamatKoin)
+                implementation(projects.example.sampleKoin)
+
+                implementation(compose.desktop.currentOs)
+                implementation(libs.koin.compose)
+                implementation(libs.kotlin.coroutines.swing)
+            }
         }
     }
 }
 
 android {
-    namespace = "com.compose.gear.navigation.example"
+    namespace = "composegears.tiamat.example"
     compileSdk = libs.versions.android.compileSdk.get().toInt()
 
     sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
     sourceSets["main"].res.srcDirs("src/androidMain/res")
     sourceSets["main"].resources.srcDirs("src/commonMain/resources")
 
     defaultConfig {
-        applicationId = "com.compose.gear.navigation"
+        applicationId = "composegears.tiamat.example"
         minSdk = libs.versions.android.minSdk.get().toInt()
         targetSdk = libs.versions.android.targetSdk.get().toInt()
         versionCode = 1
@@ -81,11 +112,11 @@ android {
 
 compose.desktop {
     application {
-        mainClass = "MainKt"
+        mainClass = "composegears.tiamat.example.MainKt"
 
         nativeDistributions {
             targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
-            packageName = "com.compose.gear.navigation.example"
+            packageName = "composegears.tiamat.example"
             packageVersion = "1.0.0"
         }
     }

diff --git a/...seApp/src/androidMain/AndroidManifest.xml → ...seApp/src/androidMain/AndroidManifest.xml b/...seApp/src/androidMain/AndroidManifest.xml → ...seApp/src/androidMain/AndroidManifest.xml
@@ -8,10 +8,10 @@
         android:allowBackup="true"
         android:label="@string/app_name"
         android:supportsRtl="true"
-        android:name="com.composegear.navigation.MainApplication"
+        android:name=".MainApplication"
             android:theme="@android:style/Theme.Material.Light.NoActionBar">
         <activity
-            android:name="com.composegear.navigation.MainActivity"
+            android:name=".MainActivity"
             android:exported="true"
             android:launchMode="singleInstance"
             android:configChanges="screenSize|screenLayout|orientation">

diff --git a/.../composegear/navigation/DeeplinkHelper.kt → ...osegears/tiamat/example/DeeplinkHelper.kt b/.../composegear/navigation/DeeplinkHelper.kt → ...osegears/tiamat/example/DeeplinkHelper.kt
@@ -1,4 +1,4 @@
-package com.composegear.navigation
+package composegears.tiamat.example
 
 import android.content.Intent
 import androidx.compose.runtime.getValue

diff --git a/...om/composegear/navigation/MainActivity.kt → ...mposegears/tiamat/example/MainActivity.kt b/...om/composegear/navigation/MainActivity.kt → ...mposegears/tiamat/example/MainActivity.kt
@@ -1,15 +1,13 @@
-package com.composegear.navigation
+package composegears.tiamat.example
 
-import App
 import android.content.Intent
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.runtime.DisposableEffect
 import com.composegears.tiamat.navigationFadeInOut
-import content.MainScreen
-import content.examples.PlatformExample
+import composegears.tiamat.example.platform.DeeplinkScreen
 
 class MainActivity : ComponentActivity() {
 
@@ -20,7 +18,7 @@ class MainActivity : ComponentActivity() {
         super.onCreate(savedInstanceState)
         deepLinkController.onIntent(intent)
         setContent {
-            App { rootNavController ->
+            App { rootNavController, content ->
                 // pass deeplink deeper and handle inside screen
                 val deeplink = deepLinkController.deeplink
                 // using disposable effect as it runs faster then LaunchedEffect
@@ -29,9 +27,10 @@ class MainActivity : ComponentActivity() {
                         rootNavController.editBackStack {
                             clear()
                             add(MainScreen)
+                            add(PlatformExamplesScreen)
                         }
                         rootNavController.replace(
-                            dest = PlatformExample,
+                            dest = DeeplinkScreen,
                             freeArgs = deeplink,
                             // we only animate root content switch
                             // all nested items should use navigationNone() transition to prevent `blink`
@@ -41,12 +40,13 @@ class MainActivity : ComponentActivity() {
                     }
                     onDispose { }
                 }
+                content()
             }
         }
     }
 
-    override fun onNewIntent(intent: Intent?) {
+    override fun onNewIntent(intent: Intent) {
         super.onNewIntent(intent)
-        intent?.let(deepLinkController::onIntent)
+        deepLinkController.onIntent(intent)
     }
 }
diff --git a/...composegear/navigation/MainApplication.kt → ...segears/tiamat/example/MainApplication.kt b/...composegear/navigation/MainApplication.kt → ...segears/tiamat/example/MainApplication.kt
@@ -1,7 +1,7 @@
-package com.composegear.navigation
+package composegears.tiamat.example
 
 import android.app.Application
-import content.examples.koin.KoinLib
+import composegears.tiamat.sample.koin.KoinLib
 
 class MainApplication : Application() {