Wasm support (#236)

* Add wasm support for storage modules * Add wasm support for ui module * Add sample wasm * Wasm support running * Update workflows * Add yarn update * Rename * Try ignoring yarn failure
alorma · Mar 6, 2024 · cc51640 · cc51640
1 parent 2858005
commit cc51640
Show file tree

Hide file tree

Showing 17 changed files with 3,023 additions and 199 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -132,10 +132,28 @@ jobs:
       - name: Build sample iOS - Main
         run: ./gradlew :composeApp:compileKotlinIosArm64 :composeApp:compileKotlinIosX64 :composeApp:compileKotlinIosSimulatorArm64
 
+  build-sample-wasm:
+    name: Build sample Wasm - Main
+    if: ${{ success() }}
+    needs: [ build-storage-memory, build-storage-disk, build-ui ]
+    runs-on: macos-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Set up JDK
+        uses: actions/setup-java@v4
+        with:
+          distribution: adopt
+          java-version: 17
+
+      - name: Build sample Wasm - Main
+        run: ./gradlew :composeApp:compileKotlinWasmJs
+
   check-sign:
     name: Check signature - Main
     if: ${{ success() }}
-    needs: [ build-sample-android, build-sample-iOS, build-sample-desktop ]
+    needs: [ build-sample-android, build-sample-iOS, build-sample-desktop, build-sample-wasm ]
     runs-on: macos-latest
     steps:
       - name: Check out code
@@ -153,7 +171,7 @@ jobs:
   fake-publish:
     name: Fake publish - Main
     if: ${{ success() }}
-    needs: [ build-sample-android, build-sample-iOS, build-sample-desktop ]
+    needs: [ build-sample-android, build-sample-iOS, build-sample-desktop, build-sample-wasm ]
     runs-on: macos-latest
     steps:
       - name: Check out code
@@ -171,7 +189,7 @@ jobs:
   publish-dry:
     name: Dry run publish - Main
     if: ${{ success() }}
-    needs: [ check-sign, build-sample-android, build-sample-iOS, build-sample-desktop ]
+    needs: [ check-sign, build-sample-android, build-sample-iOS, build-sample-desktop, build-sample-wasm ]
     runs-on: macos-latest
     steps:
       - name: Check out code

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -131,10 +131,28 @@ jobs:
       - name: Build sample iOS - Release
         run: ./gradlew :composeApp:compileKotlinIosArm64 :composeApp:compileKotlinIosX64 :composeApp:compileKotlinIosSimulatorArm64
 
+  build-sample-wasm:
+    name: Build sample Wasm - Release
+    if: ${{ success() }}
+    needs: [ build-storage-memory, build-storage-disk, build-ui ]
+    runs-on: macos-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Set up JDK
+        uses: actions/setup-java@v4
+        with:
+          distribution: adopt
+          java-version: 17
+
+      - name: Build sample Wasm - Release
+        run: ./gradlew :composeApp:compileKotlinWasmJs
+
   check-sign:
     name: Check signature - Release
     if: ${{ success() }}
-    needs: [ build-sample-android, build-sample-iOS, build-sample-desktop ]
+    needs: [ build-sample-android, build-sample-iOS, build-sample-desktop, build-sample-wasm ]
     runs-on: macos-latest
     steps:
       - name: Check out code
@@ -152,7 +170,7 @@ jobs:
   fake-publish:
     name: Fake publish - Release
     if: ${{ success() }}
-    needs: [ build-sample-android, build-sample-iOS, build-sample-desktop ]
+    needs: [ build-sample-android, build-sample-iOS, build-sample-desktop, build-sample-wasm ]
     runs-on: macos-latest
     steps:
       - name: Check out code
@@ -170,7 +188,7 @@ jobs:
   publish-dry:
     name: Publish - Release
     if: ${{ success() }}
-    needs: [ check-sign, build-sample-android, build-sample-iOS, build-sample-desktop ]
+    needs: [ check-sign, build-sample-android, build-sample-iOS, build-sample-desktop, build-sample-wasm ]
     runs-on: macos-latest
     steps:
       - name: Check out code

diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
@@ -132,10 +132,28 @@ jobs:
       - name: Build sample iOS - PR
         run: ./gradlew :composeApp:compileKotlinIosArm64 :composeApp:compileKotlinIosX64 :composeApp:compileKotlinIosSimulatorArm64
 
+  build-sample-wasm:
+    name: Build sample Wasm - PR
+    if: ${{ success() }}
+    needs: [ build-storage-memory, build-storage-disk, build-ui ]
+    runs-on: macos-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Set up JDK
+        uses: actions/setup-java@v4
+        with:
+          distribution: adopt
+          java-version: 17
+
+      - name: Build sample Wasm - PR
+        run: ./gradlew :composeApp:compileKotlinWasmJs
+
   check-sign:
     name: Check signature - PR
     if: ${{ success() }}
-    needs: [ build-sample-android, build-sample-iOS, build-sample-desktop ]
+    needs: [ build-sample-android, build-sample-iOS, build-sample-desktop, build-sample-wasm ]
     runs-on: macos-latest
     steps:
       - name: Check out code
@@ -153,7 +171,7 @@ jobs:
   fake-publish:
     name: Fake publish - PR
     if: ${{ success() }}
-    needs: [ build-sample-android, build-sample-iOS, build-sample-desktop ]
+    needs: [ build-sample-android, build-sample-iOS, build-sample-desktop, build-sample-wasm ]
     runs-on: macos-latest
     steps:
       - name: Check out code
@@ -171,7 +189,7 @@ jobs:
   publish-dry:
     name: Dry run publish - PR
     if: ${{ success() }}
-    needs: [ check-sign, build-sample-android, build-sample-iOS, build-sample-desktop ]
+    needs: [ check-sign, build-sample-android, build-sample-iOS, build-sample-desktop, build-sample-wasm ]
     runs-on: macos-latest
     steps:
       - name: Check out code

diff --git a/build.gradle.kts b/build.gradle.kts
@@ -1,3 +1,6 @@
+import org.jetbrains.kotlin.gradle.targets.js.yarn.YarnLockMismatchReport
+import org.jetbrains.kotlin.gradle.targets.js.yarn.YarnRootExtension
+
 plugins {
   alias(libs.plugins.jetbrainsCompose) apply false
   alias(libs.plugins.androidApplication) apply false
@@ -26,4 +29,11 @@ allprojects {
   }
 }
 
+
+rootProject.plugins.withType(org.jetbrains.kotlin.gradle.targets.js.yarn.YarnPlugin::class.java) {
+  rootProject.the<YarnRootExtension>().yarnLockMismatchReport = YarnLockMismatchReport.NONE
+  rootProject.the<YarnRootExtension>().reportNewYarnLock = false // true
+  rootProject.the<YarnRootExtension>().yarnLockAutoReplace = false // true
+}
+
 apply(from = "${rootDir}/scripts/publish-root.gradle")
diff --git a/compose-settings-storage-base/build.gradle.kts b/compose-settings-storage-base/build.gradle.kts
@@ -1,4 +1,5 @@
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 
 plugins {
   alias(libs.plugins.kotlinMultiplatform)
@@ -28,6 +29,15 @@ kotlin {
   iosArm64()
   iosSimulatorArm64()
 
+  js(IR) {
+    browser()
+  }
+
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    browser()
+  }
+
   sourceSets {
     commonMain.dependencies {
       implementation(compose.runtime)

diff --git a/compose-settings-storage-disk/build.gradle.kts b/compose-settings-storage-disk/build.gradle.kts
@@ -1,4 +1,5 @@
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 
 plugins {
   alias(libs.plugins.kotlinMultiplatform)
@@ -28,6 +29,15 @@ kotlin {
   iosArm64()
   iosSimulatorArm64()
 
+  js(IR) {
+    browser()
+  }
+
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    browser()
+  }
+
   sourceSets {
     androidMain.dependencies {
       implementation(libs.androidx.preference.preference)

diff --git a/compose-settings-storage-memory/build.gradle.kts b/compose-settings-storage-memory/build.gradle.kts
@@ -1,4 +1,5 @@
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 
 plugins {
   alias(libs.plugins.kotlinMultiplatform)
@@ -28,6 +29,15 @@ kotlin {
   iosArm64()
   iosSimulatorArm64()
 
+  js(IR) {
+    browser()
+  }
+
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    browser()
+  }
+
   sourceSets {
     androidMain.dependencies {
       implementation(libs.androidx.preference.preference)

diff --git a/compose-settings-ui/build.gradle.kts b/compose-settings-ui/build.gradle.kts
@@ -1,4 +1,5 @@
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 
 plugins {
   alias(libs.plugins.kotlinMultiplatform)
@@ -28,6 +29,15 @@ kotlin {
   iosArm64()
   iosSimulatorArm64()
 
+  js(IR) {
+    browser()
+  }
+
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    browser()
+  }
+
   sourceSets {
     androidMain.dependencies {
       implementation(libs.androidx.preference.preference)
@@ -37,7 +47,6 @@ kotlin {
     commonMain.dependencies {
       api(projects.composeSettingsStorageBase)
 
-      implementation(libs.androidx.annotation)
       implementation(compose.runtime)
       implementation(compose.foundation)
       implementation(compose.material3)

diff --git a/compose-settings-ui/src/commonMain/kotlin/com/alorma/compose/settings/ui/SettingsSlider.kt b/compose-settings-ui/src/commonMain/kotlin/com/alorma/compose/settings/ui/SettingsSlider.kt
@@ -1,6 +1,5 @@
 package com.alorma.compose.settings.ui
 
-import androidx.annotation.IntRange
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ListItemColors
@@ -24,7 +23,7 @@ fun SettingsSlider(
   icon: @Composable (() -> Unit)? = null,
   enabled: Boolean = true,
   valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
-  @IntRange(from = 0) steps: Int = 0,
+  steps: Int = 0,
   onValueChangeFinished: (() -> Unit)? = null,
   sliderColors: SliderColors = SliderDefaults.colors(),
   colors: ListItemColors = ListItemDefaults.colors(),

diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -1,4 +1,5 @@
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
+import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
 
 plugins {
   alias(libs.plugins.kotlinMultiplatform)
@@ -19,6 +20,17 @@ kotlin {
 
   jvm("desktop")
 
+  js(IR) {
+    browser()
+    binaries.executable()
+  }
+
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    browser()
+    binaries.executable()
+  }
+
   listOf(
     iosX64(),
     iosArm64(),
@@ -36,6 +48,7 @@ kotlin {
       implementation(compose.ui)
       implementation(libs.androidx.activity.compose)
     }
+
     commonMain.dependencies {
       implementation(compose.material3)
 
@@ -47,14 +60,20 @@ kotlin {
       implementation(projects.composeSettingsStorageDisk)
       implementation(projects.composeSettingsUi)
     }
-    val desktopMain by getting
 
+    val desktopMain by getting
     desktopMain.dependencies {
       implementation(compose.desktop.currentOs)
     }
+
+    val jsMain by getting
   }
 }
 
+compose.experimental {
+  web.application {}
+}
+
 android {
   namespace = libs.versions.namespace.get() + ".sample.shared"
   compileSdk = libs.versions.android.compileSdk.get().toInt()

diff --git a/composeApp/src/jsMain/kotlin/Main.kt b/composeApp/src/jsMain/kotlin/Main.kt
@@ -0,0 +1,12 @@
+package com.alorma.compose.settings.sample.shared
+
+import App
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+  CanvasBasedWindow("Compose Settings sample") {
+    App()
+  }
+}
diff --git a/composeApp/src/jsMain/resources/index.html b/composeApp/src/jsMain/resources/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Compose Settings sample</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/composeApp/src/wasmJsMain/kotlin/Main.kt b/composeApp/src/wasmJsMain/kotlin/Main.kt
@@ -0,0 +1,10 @@
+import App
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+  CanvasBasedWindow("Compose Settings sample") {
+    App()
+  }
+}
diff --git a/composeApp/src/wasmJsMain/resources/index.html b/composeApp/src/wasmJsMain/resources/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Compose Settings sample</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
@@ -29,6 +29,8 @@ android.nonTransitiveRClass=true
 #MPP
 kotlin.mpp.androidSourceSetLayoutVersion=2
 kotlin.mpp.enableCInteropCommonization=true
+org.jetbrains.compose.experimental.jscanvas.enabled=true
+org.jetbrains.compose.experimental.wasm.enabled=true
 
 #Development
 development=true