add wasm support

Squashed commit of the following: commit 6d3bc4d Author: Calvin Liang <[email protected]> Date: Wed Apr 3 13:00:18 2024 +0800 bump version in README commit d730c72 Author: Calvin Liang <[email protected]> Date: Wed Apr 3 12:48:23 2024 +0800 add TODO to fix #4 in the future commit 145be6b Author: Calvin Liang <[email protected]> Date: Wed Apr 3 12:44:14 2024 +0800 update packages commit 4cc4756 Author: Calvin Liang <[email protected]> Date: Thu Feb 29 20:02:43 2024 -0800 update org.jetbrains.compose commit c0f36d4 Author: Calvin Liang <[email protected]> Date: Thu Feb 29 19:52:59 2024 -0800 bump version commit 788b3d1 Author: Calvin Liang <[email protected]> Date: Thu Feb 29 19:52:52 2024 -0800 fix import in wasm demo commit 06fcf1a Author: Calvin Liang <[email protected]> Date: Thu Feb 29 19:50:18 2024 -0800 update README commit 0eb0897 Author: Calvin Liang <[email protected]> Date: Thu Feb 29 19:45:39 2024 -0800 add new line in end of files commit 6c3438c Author: Calvin Liang <[email protected]> Date: Sat Feb 17 22:56:47 2024 -0800 improve haptics in wasmJs demo app commit bbe6d14 Author: Calvin Liang <[email protected]> Date: Wed Feb 21 14:25:04 2024 -0800 bump version to 1.4.0-beta02 commit 2ee33c5 Author: Calvin Liang <[email protected]> Date: Sat Feb 10 21:04:26 2024 -0800 Update README.md commit ba6ff88 Author: Calvin Liang <[email protected]> Date: Sat Feb 10 21:00:54 2024 -0800 add documentation commit f8ff2d4 Author: Calvin Liang <[email protected]> Date: Sat Feb 10 20:39:31 2024 -0800 add wasm support
Calvin-LL · Apr 3, 2024 · 9d26abe · 9d26abe
1 parent f23100c
commit 9d26abe
Show file tree

Hide file tree

Showing 11 changed files with 2,985 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -8,14 +8,13 @@ The latest demo app APK can be found in the [releases](https://github.com/Calvin
 
 ## Features
 
-- Supports Compose Multiplatform (Android, iOS, Desktop/JVM)
+- Supports Compose Multiplatform (Android, iOS, Desktop/JVM, Wasm)
 - Supports items of different sizes
 - Some items can be made non-reorderable
 - Supports dragging immediately or long press to start dragging
 - Scrolls when dragging to the edge of the screen (only for [`LazyColumn`](<https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,kotlin.Function1)>) and [`LazyRow`](<https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary#LazyRow(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,kotlin.Function1)>)) The scroll speed is based on the distance from the edge of the screen
 - Uses the new [`Modifier.animateItemPlacement`](<https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyItemScope#(androidx.compose.ui.Modifier).animateItemPlacement(androidx.compose.animation.core.FiniteAnimationSpec)>) API to animate item movement in [`LazyColumn`](<https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,kotlin.Function1)>) and [`LazyRow`](<https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary#LazyRow(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,kotlin.Function1)>)
 - Supports using a child of an item as the drag handle
-- Supports Wasm in [`1.4.0-beta02`](https://github.com/Calvin-LL/Reorderable/tree/beta/v1.4.0-beta02)
 
 ## Usage
 
@@ -26,7 +25,7 @@ If you're using Version Catalog, add the following to your `libs.versions.toml`
 ```toml
 [versions]
 #...
-reorderable = "1.3.3"
+reorderable = "1.4.0"
 
 [libraries]
 #...
@@ -38,7 +37,7 @@ or
 ```toml
 [libraries]
 #...
-reorderable = { module = "sh.calvin.reorderable:reorderable", version = "1.3.3" }
+reorderable = { module = "sh.calvin.reorderable:reorderable", version = "1.4.0" }
 ```
 
 ### Gradle
@@ -49,15 +48,15 @@ If you're using Gradle instead, add the following to your `build.gradle` file:
 
 ```kotlin
 dependencies {
-    implementation("sh.calvin.reorderable:reorderable:1.3.3")
+    implementation("sh.calvin.reorderable:reorderable:1.4.0")
 }
 ```
 
 #### Groovy DSL
 
 ```groovy
 dependencies {
-    implementation 'sh.calvin.reorderable:reorderable:1.3.3'
+    implementation 'sh.calvin.reorderable:reorderable:1.4.0'
 }
 ```
 
@@ -403,6 +402,18 @@ You can just replace `Column` with `Row` in the `Column` examples above.
 - [`Modifier.draggableHandle`](reorderable/src/commonMain/kotlin/sh/calvin/reorderable/demo/ReorderableList.kt)
 - [`Modifier.longPressDraggableHandle`](reorderable/src/commonMain/kotlin/sh/calvin/reorderable/demo/ReorderableList.kt)
 
+## Running the demo app
+
+To run the Android demo app, open the project in Android Studio and run the app.
+
+To run the iOS demo app, open the iosApp project in Xcode and run the app or add the following Configuration to the Android Studio project, you may need to install the [Kotlin Multiplatform Mobile plugin](https://plugins.jetbrains.com/plugin/14936-kotlin-multiplatform-mobile) first.
+
+![Screenshot 2024-02-10 at 20 58 54](https://github.com/Calvin-LL/Reorderable/assets/8357970/817a17bf-360f-4a0b-9a18-219f9f9eba28)
+
+To run the web demo app, run `./gradlew :composeApp:wasmJsBrowserDevelopmentRun`.
+
+To run the desktop demo app, run `./gradlew :demoApp:ComposeApp:run`.
+
 ## Contributing
 
 Open this project with Android Studio Preview.

diff --git a/build.gradle.kts b/build.gradle.kts
@@ -1,8 +1,8 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 plugins {
-    id("com.android.application") version "8.2.2" apply false
-    id("org.jetbrains.kotlin.multiplatform") version "1.9.21" apply false
-    id("com.android.library") version "8.2.2" apply false
-    id("org.jetbrains.compose") version "1.5.11" apply false
+    id("com.android.application") version "8.3.1" apply false
+    id("org.jetbrains.kotlin.multiplatform") version "1.9.23" apply false
+    id("com.android.library") version "8.3.1" apply false
+    id("org.jetbrains.compose") version "1.6.1" apply false
     id("com.vanniktech.maven.publish") version "0.27.0" apply false
-}
+}
diff --git a/demoApp/composeApp/build.gradle.kts b/demoApp/composeApp/build.gradle.kts
@@ -1,4 +1,3 @@
-import org.jetbrains.compose.ExperimentalComposeLibrary
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
 
 plugins {
@@ -18,6 +17,16 @@ kotlin {
 
     jvm()
 
+    wasmJs {
+        moduleName = "composeApp"
+        browser {
+            commonWebpackConfig {
+                outputFileName = "composeApp.js"
+            }
+        }
+        binaries.executable()
+    }
+
     listOf(
         iosX64(),
         iosArm64(),
@@ -34,19 +43,14 @@ kotlin {
             implementation(compose.runtime)
             implementation(compose.material3)
             implementation(compose.materialIconsExtended)
-            @OptIn(ExperimentalComposeLibrary::class)
             implementation(compose.components.resources)
-            implementation("moe.tlaster:precompose:1.5.10")
+            implementation("moe.tlaster:precompose:1.6.0-rc04")
             implementation(project(":reorderable"))
         }
 
-        commonTest.dependencies {
-            implementation(kotlin("test"))
-        }
-
         androidMain.dependencies {
             implementation("androidx.activity:activity-compose:1.8.2")
-            implementation("androidx.compose.ui:ui-tooling:1.6.2")
+            implementation("androidx.compose.ui:ui-tooling:1.6.4")
         }
 
         jvmMain.dependencies {
@@ -73,7 +77,7 @@ android {
     }
     sourceSets["main"].apply {
         manifest.srcFile("src/androidMain/AndroidManifest.xml")
-        res.srcDirs("src/androidMain/resources")
+        res.srcDirs("src/androidMain/res")
         resources.srcDirs("src/commonMain/resources")
     }
     buildTypes {
@@ -113,3 +117,7 @@ compose.desktop {
         }
     }
 }
+
+compose.experimental {
+    web.application {}
+}
diff --git a/demoApp/composeApp/src/wasmJsMain/kotlin/main.kt b/demoApp/composeApp/src/wasmJsMain/kotlin/main.kt
@@ -0,0 +1,10 @@
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+import sh.calvin.reorderable.demo.App
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    CanvasBasedWindow(canvasElementId = "ComposeTarget") {
+        App()
+    }
+}
diff --git a/demoApp/composeApp/src/wasmJsMain/kotlin/sh/calvin/reorderable/demo/haptics.wasmJs.kt b/demoApp/composeApp/src/wasmJsMain/kotlin/sh/calvin/reorderable/demo/haptics.wasmJs.kt
@@ -0,0 +1,27 @@
+package sh.calvin.reorderable.demo
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import kotlinx.browser.window
+
+@Composable
+actual fun rememberReorderHapticFeedback(): ReorderHapticFeedback {
+    val reorderHapticFeedback = remember {
+        object : ReorderHapticFeedback() {
+            override fun performHapticFeedback(type: ReorderHapticFeedbackType) {
+                when (type) {
+                    ReorderHapticFeedbackType.START ->
+                        window.navigator.vibrate(5)
+
+                    ReorderHapticFeedbackType.MOVE ->
+                        window.navigator.vibrate(1)
+
+                    ReorderHapticFeedbackType.END ->
+                        window.navigator.vibrate(3)
+                }
+            }
+        }
+    }
+
+    return reorderHapticFeedback
+}
diff --git a/demoApp/composeApp/src/wasmJsMain/resources/index.html b/demoApp/composeApp/src/wasmJsMain/resources/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Compose App</title>
+    <script type="application/javascript" src="skiko.js"></script>
+    <script type="application/javascript" src="composeApp.js"></script>
+  </head>
+  <body>
+    <canvas id="ComposeTarget"></canvas>
+  </body>
+</html>
diff --git a/gradle.properties b/gradle.properties
@@ -25,3 +25,5 @@ android.nonTransitiveRClass=true
 # https://vanniktech.github.io/gradle-maven-publish-plugin/central/#configuring-maven-central
 SONATYPE_HOST=S01
 RELEASE_SIGNING_ENABLED=true
+
+org.jetbrains.compose.experimental.wasm.enabled=true
diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 #Fri Nov 17 13:21:17 PST 2023
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.2-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists