add js support (#42)

* add js support * add js support to demo app Signed-off-by: Calvin Liang <[email protected]> --------- Signed-off-by: Calvin Liang <[email protected]> Co-authored-by: Calvin Liang <[email protected]>
Calvin-LL · Jul 28, 2024 · 298101c · 298101c
1 parent 62c7392
commit 298101c
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ The latest demo app APK can be found in the [releases](https://github.com/Calvin
 
 ## Features
 
-- Supports Compose Multiplatform (Android, iOS, Desktop/JVM, Wasm)
+- Supports Compose Multiplatform (Android, iOS, Desktop/JVM, Wasm, JS)
 - Supports items of different sizes
 - Some items can be made non-reorderable
 - Supports dragging immediately or long press to start dragging

diff --git a/demoApp/composeApp/build.gradle.kts b/demoApp/composeApp/build.gradle.kts
@@ -29,6 +29,16 @@ kotlin {
         binaries.executable()
     }
 
+    js {
+        moduleName = "composeApp"
+        browser {
+            commonWebpackConfig {
+                outputFileName = "composeApp.js"
+            }
+        }
+        binaries.executable()
+    }
+
     listOf(
         iosX64(),
         iosArm64(),

diff --git a/demoApp/composeApp/src/jsMain/kotlin/main.kt b/demoApp/composeApp/src/jsMain/kotlin/main.kt
@@ -0,0 +1,13 @@
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+import org.jetbrains.skiko.wasm.onWasmReady
+import sh.calvin.reorderable.demo.ui.App
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    onWasmReady {
+        CanvasBasedWindow(canvasElementId = "ComposeTarget") {
+            App()
+        }
+    }
+}
diff --git a/demoApp/composeApp/src/jsMain/kotlin/sh/calvin/reorderable/demo/haptics.js.kt b/demoApp/composeApp/src/jsMain/kotlin/sh/calvin/reorderable/demo/haptics.js.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/jsMain/resources/index.html b/demoApp/composeApp/src/jsMain/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>
+  </head>
+  <body>
+    <canvas id="ComposeTarget"></canvas>
+    <script src="composeApp.js"></script>
+  </body>
+</html>
diff --git a/gradle.properties b/gradle.properties
@@ -27,3 +27,4 @@ SONATYPE_HOST=S01
 RELEASE_SIGNING_ENABLED=true
 
 org.jetbrains.compose.experimental.wasm.enabled=true
+org.jetbrains.compose.experimental.jscanvas.enabled=true
diff --git a/reorderable/build.gradle.kts b/reorderable/build.gradle.kts
@@ -28,6 +28,11 @@ kotlin {
         binaries.executable()
     }
 
+    js {
+        browser()
+        binaries.executable()
+    }
+
     listOf(
         iosX64(),
         iosArm64(),
Original file line number	Diff line number	Diff line change
Expand Up		@@ -27,3 +27,4 @@ SONATYPE_HOST=S01
		RELEASE_SIGNING_ENABLED=true

		org.jetbrains.compose.experimental.wasm.enabled=true
		org.jetbrains.compose.experimental.jscanvas.enabled=true