Merge branch 'main' of https://github.com/worldline/learning-kotlin

docs/src/en/front-development/README.md

@@ -159,6 +159,20 @@ RandomNumberList()
 
 - Exercise: Make the "Hello, .." button switch between showing the list and and the image.
 
+### PW3: Compose multiplatform with web target
+
+Even though the official template does not support the web target, we can use the sample GitHub project [Kotlin/kotlin-wasm-examples/compose-imageviewer](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-imageviewer) with fortunately support all compose targets.
+
+- Similarly to the previous PW, download the project and open it in your IDE.
+- The web target can be run with: `./gradlew --console=plain :webApp:wasmRun`. The other targets can be run as seen above.
+- Exercise: develop a compose app that behaves like the below animation.
+
+## Solutions:
+
+- [Kotlin/JS and Kotlin/WASM PW](https://github.com/worldline/learning-kotlin/tree/main/material/webapp-kotlin-wasm)
+- [Compose multiplatform PW2](https://github.com/worldline/learning-kotlin/tree/main/material/app-compose-multiplatform)
+- [Compose multiplatform PW3](https://github.com/worldline/learning-kotlin/tree/main/material/app-compose-multiplatform-with-web)
+
 ## Further reading
 
 - [The huge potential of Kotlin/WASM](https://seb.deleuze.fr/the-huge-potential-of-kotlin-wasm/)

docs/src/en/presentation/README.md

@@ -8,7 +8,7 @@ Kotlin is a modern programming language developed by JetBrains.
   - Many server frameworks officially support Kotlin such as Spring and Quarkus.
   - It is the first-class language for writing Android.
   - Kotlin can compile to native with Kotlin native or with [GraalVM](https://www.graalvm.org/).
-  - KMP and KMM allow to share code between different platforms.
+  - KMP allows to share code between different platforms.
 - Kotlin can be considered as both _fullstack_ and _corss-platform_ language.
 - Inter-operable with Java.
 - Provides modern features such as compile-time null safety and data classes.

docs/src/fr/front-development/README.md

@@ -21,18 +21,15 @@ Ceci est possible notamment grâce à **KMP**
 
 ## KMP 
 
-- KMP (Kotlin Multiplatform) et KMM (Kotlin Multiplatform Mobile) sont les deux technologies Kotlin qui permettent de partager une base de code unique sur plusieurs cibles.
+- KMP (Kotlin Multiplatform) permet de partager une base de code unique sur plusieurs cibles.
 - [KMP](https://blog.jetbrains.com/kotlin/2021/08/compose-multiplatform-goes-alpha/) s'appuie sur Kotlin native et d'autres fonctionnalités de Kotlin pour aider les développeurs à créer des projets destinés à plusieurs plates-formes en utilisant une base de code Kotlin commune.
 
 ![KMP](https://kotlinlang.org/docs/images/kotlin-multiplatform.png)
 
 - De nombreuses combinaisons de cibles et de cas d'utilisation sont possibles :
   - [Full-Stack web apps](https://kotlinlang.org/docs/multiplatform-full-stack-app.html) : Un projet qui contient un backend et une application web tout en partageant une logique commune.
   - [Bibliothèques multiplateformes](https://kotlinlang.org/docs/multiplatform-library.html)
-  - [KMM](https://kotlinlang.org/lp/mobile/) : dénomination spéciale pour KMP lorsqu'il est utilisé pour des projets iOS et Android.
-- KMM est basé sur KMP et vise à aider les développeurs mobiles à créer un SDK multiplateforme pour le mobile de façon aisée.
-
-![KMM](https://kotlinlang.org/lp/mobile/static/sdk-313e52f7d9d3b3e3e48471ef06e8e3aa.svg)
+- KMM est une ancienne dénomination qui est dépréciée.
 
 Dans la suite de ce chapitre, nous explorerons les différentes possibilités individuellement et on fera un projet KMP dans le chapitre suivant.
 

material/app-compose-multiplatform-with-web/.gitignore

@@ -0,0 +1,21 @@
+*.iml
+.gradle
+/local.properties
+/.idea
+/.idea/caches
+/.idea/libraries
+/.idea/modules.xml
+/.idea/workspace.xml
+/.idea/navEditor.xml
+/.idea/assetWizardSettings.xml
+.DS_Store
+build/
+/captures
+.externalNativeBuild
+.cxx
+iosApp/Podfile.lock
+iosApp/Pods/*
+iosApp/iosApp.xcworkspace/*
+iosApp/iosApp.xcodeproj/*
+!iosApp/iosApp.xcodeproj/project.pbxproj
+shared/shared.podspec

material/app-compose-multiplatform-with-web/.run/desktopApp.run.xml

@@ -0,0 +1,23 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="desktopApp" type="GradleRunConfiguration" factoryName="Gradle">
+    <ExternalSystemSettings>
+      <option name="executionName" />
+      <option name="externalProjectPath" value="$PROJECT_DIR$/desktopApp" />
+      <option name="externalSystemIdString" value="GRADLE" />
+      <option name="scriptParameters" value="" />
+      <option name="taskDescriptions">
+        <list />
+      </option>
+      <option name="taskNames">
+        <list>
+          <option value="run" />
+        </list>
+      </option>
+      <option name="vmOptions" value="" />
+    </ExternalSystemSettings>
+    <ExternalSystemDebugServerProcess>true</ExternalSystemDebugServerProcess>
+    <ExternalSystemReattachDebugProcess>true</ExternalSystemReattachDebugProcess>
+    <DebugAllEnabled>false</DebugAllEnabled>
+    <method v="2" />
+  </configuration>
+</component>

material/app-compose-multiplatform-with-web/README.md

@@ -0,0 +1,57 @@
+# Compose Multiplatform for Web
+
+> **Note**
+> Web support is Experimental and may be changed at any time. Use it only for evaluation purposes.
+> We would appreciate your feedback on it in the public Slack channel [#compose-web](https://slack-chats.kotlinlang.org/c/compose-web).
+> If you face any issues, please report them on [GitHub](https://github.com/JetBrains/compose-multiplatform/issues).
+
+You can experiment with sharing your mobile or desktop UIs with the web. Compose for Web is based on [Kotlin/Wasm](https://kotl.in/wasm),
+the newest target for Kotlin Multiplatform projects. It allows Kotlin developers to run their code in the browser with
+all the benefits that WebAssembly has to offer, such as good and predictable performance for your applications.
+
+# Image Viewer
+
+Web version of an image gallery for remote server image viewing built with Compose Multiplatform.
+
+![](screenshots/imageviewer.png)
+
+## Build and run
+
+Check out the repo, navigate to the project folder, and use the following commands:
+
+### Run Web version via Gradle
+
+`./gradlew :webApp:wasmRun`
+
+### Run Desktop version via Gradle
+
+`./gradlew :desktopApp:run`
+
+### Install Android application via Gradle
+
+`./gradlew :androidApp:installDebug`
+
+## Setup Environment
+
+>**Note**
+> Using experimental Kotlin/Wasm may require enabling experimental features in the target environment.
+
+- **Chrome** 110 or newer: enable **WebAssembly Garbage Collection** at [chrome://flags/#enable-webassembly-garbage-collection](chrome://flags/#enable-webassembly-garbage-collection) or with Chrome 109 or newer, run the program with the `--js-flags=--experimental-wasm-gc` command line argument.
+- **Firefox Nightly** 112 or newer: enable **javascript.options.wasm_function_references** and **javascript.options.wasm_gc** at [about:config](about:config).
+- **Edge** 109 or newer: run the program with the `--js-flags=--experimental-wasm-gc` command line argument.
+
+For more information see https://kotl.in/wasm_help/.
+
+## IDE
+
+We recommend using [IntelliJ IDEA 2023.1 or newer](https://www.jetbrains.com/idea/) to work with the project.
+
+# Feedback & Questions
+
+Give it a try, and share your feedback and ask questions in the Kotlin Slack [#compose-web](https://slack-chats.kotlinlang.org/c/compose-web) channel (if you’re not a member, [apply here](https://kotl.in/slack)) or on Twitter to [@bashorov](https://twitter.com/bashorov).
+
+# Learn more
+
+* [Compose Multiplatform](https://github.com/JetBrains/compose-multiplatform/#compose-multiplatform)
+* [Kotlin/Wasm](https://kotl.in/wasm/)
+* [Other examples](../../../#examples)

material/app-compose-multiplatform-with-web/androidApp/build.gradle.kts

@@ -0,0 +1,37 @@
+plugins {
+    kotlin("multiplatform")
+    id("com.android.application")
+    id("org.jetbrains.compose")
+}
+
+kotlin {
+    android()
+    sourceSets {
+        val androidMain by getting {
+            dependencies {
+                implementation(project(":shared"))
+            }
+        }
+    }
+}
+
+android {
+    compileSdk = 33
+    defaultConfig {
+        applicationId = "org.jetbrains.Imageviewer"
+        minSdk = 26
+        targetSdk = 33
+        versionCode = 1
+        versionName = "1.0"
+    }
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_11
+        targetCompatibility = JavaVersion.VERSION_11
+    }
+}
+
+
+compose {
+    val composeVersion = project.property("compose.wasm.version") as String
+    kotlinCompilerPlugin.set(composeVersion)
+}

material/app-compose-multiplatform-with-web/androidApp/src/androidMain/AndroidManifest.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="example.imageviewer">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_imageviewer"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_imageviewer_round"
+        android:supportsRtl="true"
+        android:theme="@style/Theme.AppCompat.Light.NoActionBar">
+        <activity
+            android:exported="true"
+            android:name="example.imageviewer.MainActivity"
+        >
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+
+</manifest>

material/app-compose-multiplatform-with-web/androidApp/src/androidMain/kotlin/example/imageviewer/MainActivity.kt

@@ -0,0 +1,15 @@
+package example.imageviewer
+
+import android.os.Bundle
+import androidx.activity.compose.setContent
+import androidx.appcompat.app.AppCompatActivity
+import example.imageviewer.view.ImageViewerAndroid
+
+class MainActivity : AppCompatActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            ImageViewerAndroid()
+        }
+    }
+}

material/app-compose-multiplatform-with-web/build.gradle.kts

@@ -0,0 +1,39 @@
+plugins {
+    // this is necessary to avoid the plugins to be loaded multiple times
+    // in each subproject's classloader
+    kotlin("jvm") apply false
+    kotlin("multiplatform") apply false
+    kotlin("android") apply false
+    id("com.android.application") apply false
+    id("com.android.library") apply false
+    id("org.jetbrains.compose") apply false
+}
+
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+        maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+        mavenLocal()
+        maven("https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental")
+    }
+
+    configurations.all {
+        val conf = this
+        // Currently it's necessary to make the android build work properly
+        conf.resolutionStrategy.eachDependency {
+            val isWasm = conf.name.contains("wasm", true)
+            val isJs = conf.name.contains("js", true)
+            val isComposeGroup = requested.module.group.startsWith("org.jetbrains.compose")
+            val isComposeCompiler = requested.module.group.startsWith("org.jetbrains.compose.compiler")
+            if (isComposeGroup && !isComposeCompiler && !isWasm && !isJs) {
+                val composeVersion = project.property("compose.version") as String
+                useVersion(composeVersion)
+            }
+            if (requested.module.name.startsWith("kotlin-stdlib")) {
+                val kotlinVersion = project.property("kotlin.version") as String
+                useVersion(kotlinVersion)
+            }
+        }
+    }
+}

material/app-compose-multiplatform-with-web/desktopApp/build.gradle.kts

@@ -0,0 +1,51 @@
+import org.jetbrains.compose.desktop.application.dsl.TargetFormat
+
+plugins {
+    kotlin("multiplatform")
+    id("org.jetbrains.compose")
+}
+
+kotlin {
+    jvm {
+        withJava()
+    }
+    sourceSets {
+        val jvmMain by getting {
+            dependencies {
+                implementation(compose.desktop.currentOs)
+                implementation(project(":shared"))
+            }
+        }
+    }
+}
+
+compose.desktop {
+    application {
+        mainClass = "example.imageviewer.MainKt"
+
+        nativeDistributions {
+            targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
+            packageName = "ImageViewer"
+            packageVersion = "1.0.0"
+
+            val iconsRoot = project.file("../common/src/desktopMain/resources/images")
+            macOS {
+                iconFile.set(iconsRoot.resolve("icon-mac.icns"))
+            }
+            windows {
+                iconFile.set(iconsRoot.resolve("icon-windows.ico"))
+                menuGroup = "Compose Examples"
+                // see https://wixtoolset.org/documentation/manual/v3/howtos/general/generate_guids.html
+                upgradeUuid = "18159995-d967-4CD2-8885-77BFA97CFA9F"
+            }
+            linux {
+                iconFile.set(iconsRoot.resolve("icon-linux.png"))
+            }
+        }
+    }
+}
+
+compose {
+    val composeVersion = project.property("compose.wasm.version") as String
+    kotlinCompilerPlugin.set(composeVersion)
+}

material/app-compose-multiplatform-with-web/desktopApp/rules.pro

@@ -0,0 +1,12 @@
+# Ktor
+-keep class io.ktor.** { *; }
+-keepclassmembers class io.ktor.** { volatile <fields>; }
+-keep class io.ktor.client.engine.cio.** { *; }
+-keep class kotlinx.coroutines.** { *; }
+-dontwarn kotlinx.atomicfu.**
+-dontwarn io.netty.**
+-dontwarn com.typesafe.**
+-dontwarn org.slf4j.**
+
+# Obfuscation breaks coroutines/ktor for some reason
+-dontobfuscate

material/app-compose-multiplatform-with-web/desktopApp/src/jvmMain/kotlin/example/imageviewer/Main.kt

@@ -0,0 +1,8 @@
+package example.imageviewer
+
+import androidx.compose.ui.window.application
+import example.imageviewer.view.ImageViewerDesktop
+
+fun main() = application {
+    ImageViewerDesktop()
+}

material/app-compose-multiplatform-with-web/gradle.properties

@@ -0,0 +1,19 @@
+kotlin.code.style=official
+xcodeproj=iosApp
+kotlin.native.cocoapods.generate.wrapper=true
+android.useAndroidX=true
+org.gradle.jvmargs=-Xmx3g
+org.jetbrains.compose.experimental.jscanvas.enabled=true
+org.jetbrains.compose.experimental.macos.enabled=true
+org.jetbrains.compose.experimental.uikit.enabled=true
+kotlin.native.cacheKind=none
+kotlin.mpp.androidSourceSetLayoutVersion=2
+kotlin.native.useEmbeddableCompilerJar=true
+# Enable kotlin/native experimental memory model
+kotlin.native.binary.memoryModel=experimental
+agp.version=7.1.3
+ktor.version=2.2.1
+kotlin.js.ir.output.granularity=whole-program
+compose.version=1.4.0
+compose.wasm.version=1.4.0-dev-wasm09
+kotlin.version=1.9.0

material/app-compose-multiplatform-with-web/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,6 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.6-bin.zip
+networkTimeout=10000
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists