added support for molecule for js wasm, added wasm sample

Tlaster · Sep 24, 2024 · ed6dc0d · ed6dc0d
1 parent 26b46ac
commit ed6dc0d
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 0 deletions.
diff --git a/precompose-molecule/build.gradle.kts b/precompose-molecule/build.gradle.kts
@@ -1,3 +1,4 @@
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 import java.util.Properties
 
 plugins {
@@ -31,6 +32,10 @@ kotlin {
     js(IR) {
         browser()
     }
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        browser()
+    }
     sourceSets {
         val commonMain by getting {
             dependencies {

diff --git a/...lecule/src/wasmJsMain/kotlin/moe/tlaster/precompose/molecule/ProvidePlatformDispatcher.kt b/...lecule/src/wasmJsMain/kotlin/moe/tlaster/precompose/molecule/ProvidePlatformDispatcher.kt
@@ -0,0 +1,6 @@
+package moe.tlaster.precompose.molecule
+
+import kotlinx.coroutines.Dispatchers
+import kotlin.coroutines.CoroutineContext
+
+internal actual fun providePlatformDispatcher(): CoroutineContext = Dispatchers.Main
diff --git a/sample/molecule/build.gradle.kts b/sample/molecule/build.gradle.kts
@@ -1,5 +1,7 @@
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
 import org.jetbrains.kotlin.gradle.plugin.mpp.KotlinNativeTarget
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
 
 plugins {
     kotlin("multiplatform")
@@ -37,6 +39,25 @@ kotlin {
         }
     }
     jvm()
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        moduleName = "composeApp"
+        browser {
+            val projectDirPath = project.projectDir.path
+            commonWebpackConfig {
+                outputFileName = "composeApp.js"
+                devServer =
+                    (devServer ?: KotlinWebpackConfig.DevServer()).apply {
+                        static =
+                            (static ?: mutableListOf()).apply {
+                                // Serve sources to debug inside browser
+                                add(projectDirPath)
+                            }
+                    }
+            }
+        }
+        binaries.executable()
+    }
 
     sourceSets {
         val commonMain by getting {

diff --git a/sample/molecule/src/wasmJsMain/kotlin/moe/tlaster/precompose/molecule/sample/Main.kt b/sample/molecule/src/wasmJsMain/kotlin/moe/tlaster/precompose/molecule/sample/Main.kt
@@ -0,0 +1,12 @@
+package moe.tlaster.precompose.molecule.sample
+
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.ComposeViewport
+import kotlinx.browser.document
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    ComposeViewport(document.body!!) {
+        App()
+    }
+}
diff --git a/sample/molecule/src/wasmJsMain/resources/index.html b/sample/molecule/src/wasmJsMain/resources/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>molecule</title>
+    <link type="text/css" rel="stylesheet" href="styles.css">
+    <script type="application/javascript" src="composeApp.js"></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/sample/molecule/src/wasmJsMain/resources/styles.css b/sample/molecule/src/wasmJsMain/resources/styles.css
@@ -0,0 +1,7 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}