Add WASM support (#1245)

This adds WASM targets support 🥳.


https://github.com/slackhq/circuit/assets/1361086/e51daa0c-4cb9-4e92-8bc4-0b8e3fcdeaa3

Fixes #1100 along the way

Working around https://youtrack.jetbrains.com/issue/KT-66465

CHANGELOG.md

@@ -4,6 +4,8 @@ Changelog
 **Unreleased**
 --------------
 
+- **New**: Add WASM targets.
+
 0.20.0
 ------
 

backstack/build.gradle.kts

@@ -1,6 +1,7 @@
 // Copyright (C) 2024 Slack Technologies, LLC
 // SPDX-License-Identifier: Apache-2.0
 import org.jetbrains.kotlin.gradle.targets.js.dsl.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.tasks.KotlinCompilationTask
 
 // Copyright (C) 2022 Slack Technologies, LLC
 // SPDX-License-Identifier: Apache-2.0
@@ -24,12 +25,23 @@ kotlin {
     moduleName = property("POM_ARTIFACT_ID").toString()
     browser()
   }
-  if (hasProperty("enableWasm")) {
-    @OptIn(ExperimentalWasmDsl::class)
-    wasmJs {
-      moduleName = property("POM_ARTIFACT_ID").toString()
-      browser()
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    moduleName = property("POM_ARTIFACT_ID").toString()
+    browser {
+      testTask {
+        useKarma {
+          useChromeHeadless()
+          useConfigDirectory(
+            rootProject.projectDir
+              .resolve("internal-test-utils")
+              .resolve("karma.config.d")
+              .resolve("wasm")
+          )
+        }
+      }
     }
+    binaries.executable()
   }
   // endregion
 
@@ -70,13 +82,21 @@ kotlin {
         }
       }
     val jvmTest by getting { dependsOn(commonJvmTest) }
+    // We use a common folder instead of a common source set because there is no commonizer
+    // which exposes the browser APIs across these two targets.
+    jsMain { kotlin.srcDir("src/browserMain/kotlin") }
+    val wasmJsMain by getting { kotlin.srcDir("src/browserMain/kotlin") }
   }
 }
 
-tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompilationTask<*>>().configureEach {
+// adding it here to make sure skiko is unpacked and available in web tests
+// https://github.com/JetBrains/compose-multiplatform/issues/4133
+compose.experimental { web.application {} }
+
+tasks.withType<KotlinCompilationTask<*>>().configureEach {
   compilerOptions {
     // Need to disable, due to 'duplicate library name' warning
-    // https://youtrack.jetbrains.com/issue/KT-51110
+    // https://youtrack.jetbrains.com/issue/KT-64115
     allWarningsAsErrors = false
   }
 }

backstack/src/commonMain/kotlin/com/slack/circuit/backstack/SaveableStateRegistryBackStackRecordLocalProvider.kt

@@ -55,24 +55,28 @@ public object SaveableStateRegistryBackStackRecordLocalProvider :
 
         @Composable
         override fun provideValues(): ImmutableList<ProvidedValue<*>> {
-          remember {
-            object : RememberObserver {
-              override fun onForgotten() {
-                childRegistry.saveForContentLeavingComposition()
-              }
-
-              override fun onRemembered() {}
-
-              override fun onAbandoned() {}
-            }
-          }
+          remember { RememberObserverImpl(childRegistry) }
           return list
         }
       }
     }
   }
 }
 
+// Extracted to work around a WASM bug
+// https://youtrack.jetbrains.com/issue/KT-66465#focus=Comments-27-9568825.0-0
+private class RememberObserverImpl(
+  private val childRegistry: BackStackRecordLocalSaveableStateRegistry
+) : RememberObserver {
+  override fun onForgotten() {
+    childRegistry.saveForContentLeavingComposition()
+  }
+
+  override fun onRemembered() {}
+
+  override fun onAbandoned() {}
+}
+
 private class BackStackRecordLocalSaveableStateRegistry(
   // Note: restored is snapshot-backed because consumeRestored runs in composition
   // and must be rolled back if composition does not commit
@@ -112,7 +116,7 @@ private class BackStackRecordLocalSaveableStateRegistry(
         synchronized(lock) {
           val list = valueProviders.remove(key)
           list?.remove(valueProvider)
-          if (list != null && list.isNotEmpty()) {
+          if (!list.isNullOrEmpty()) {
             // if there are other providers for this key return list
             // back to the map
             valueProviders[key] = list

build.gradle.kts

@@ -24,8 +24,9 @@ import org.jetbrains.kotlin.gradle.plugin.AbstractKotlinMultiplatformPluginWrapp
 import org.jetbrains.kotlin.gradle.plugin.KotlinBasePlugin
 import org.jetbrains.kotlin.gradle.plugin.NATIVE_COMPILER_PLUGIN_CLASSPATH_CONFIGURATION_NAME
 import org.jetbrains.kotlin.gradle.plugin.PLUGIN_CLASSPATH_CONFIGURATION_NAME
+import org.jetbrains.kotlin.gradle.targets.js.ir.DefaultIncrementalSyncTask
+import org.jetbrains.kotlin.gradle.targets.js.testing.KotlinJsTest
 import org.jetbrains.kotlin.gradle.tasks.KotlinCompilationTask
-import org.jetbrains.kotlin.gradle.tasks.KotlinNativeCompile
 import wtf.emulator.EwExtension
 
 buildscript { dependencies { classpath(platform(libs.kotlin.plugins.bom)) } }
@@ -457,13 +458,11 @@ subprojects {
         }
       }
     }
-    tasks.withType<KotlinNativeCompile>().configureEach {
-      notCompatibleWithConfigurationCache("https://youtrack.jetbrains.com/issue/KT-49933")
-    }
-    @Suppress("INVISIBLE_REFERENCE")
-    tasks.withType<org.jetbrains.kotlin.gradle.plugin.mpp.apple.FrameworkCopy>().configureEach {
-      @Suppress("INVISIBLE_MEMBER")
-      notCompatibleWithConfigurationCache("https://youtrack.jetbrains.com/issue/KT-49933")
+
+    // Workaround for missing task dependency in WASM
+    val executableCompileSyncTasks = tasks.withType(DefaultIncrementalSyncTask::class.java)
+    tasks.withType(KotlinJsTest::class.java).configureEach {
+      mustRunAfter(executableCompileSyncTasks)
     }
   }
 

circuit-foundation/build.gradle.kts

@@ -23,12 +23,10 @@ kotlin {
     moduleName = property("POM_ARTIFACT_ID").toString()
     browser()
   }
-  if (hasProperty("enableWasm")) {
-    @OptIn(ExperimentalWasmDsl::class)
-    wasmJs {
-      moduleName = property("POM_ARTIFACT_ID").toString()
-      browser()
-    }
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    moduleName = property("POM_ARTIFACT_ID").toString()
+    browser()
   }
   // endregion
 
@@ -101,6 +99,10 @@ kotlin {
         implementation(libs.compose.ui.testing.junit)
       }
     }
+    // We use a common folder instead of a common source set because there is no commonizer
+    // which exposes the browser APIs across these two targets.
+    jsMain { kotlin.srcDir("src/browserMain/kotlin") }
+    val wasmJsMain by getting { kotlin.srcDir("src/browserMain/kotlin") }
   }
 }
 

circuit-overlay/build.gradle.kts

@@ -23,12 +23,10 @@ kotlin {
     moduleName = property("POM_ARTIFACT_ID").toString()
     browser()
   }
-  if (hasProperty("enableWasm")) {
-    @OptIn(ExperimentalWasmDsl::class)
-    wasmJs {
-      moduleName = property("POM_ARTIFACT_ID").toString()
-      browser()
-    }
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    moduleName = property("POM_ARTIFACT_ID").toString()
+    browser()
   }
   // endregion
 

circuit-retained/build.gradle.kts

@@ -23,12 +23,10 @@ kotlin {
     moduleName = property("POM_ARTIFACT_ID").toString()
     browser()
   }
-  if (hasProperty("enableWasm")) {
-    @OptIn(ExperimentalWasmDsl::class)
-    wasmJs {
-      moduleName = property("POM_ARTIFACT_ID").toString()
-      browser()
-    }
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    moduleName = property("POM_ARTIFACT_ID").toString()
+    browser()
   }
   // endregion
 
@@ -80,6 +78,10 @@ kotlin {
         implementation(projects.circuitRetained)
       }
     }
+    // We use a common folder instead of a common source set because there is no commonizer
+    // which exposes the browser APIs across these two targets.
+    jsMain { kotlin.srcDir("src/browserMain/kotlin") }
+    val wasmJsMain by getting { kotlin.srcDir("src/browserMain/kotlin") }
   }
 
   targets.configureEach {

circuit-runtime-presenter/build.gradle.kts

@@ -23,12 +23,10 @@ kotlin {
     moduleName = property("POM_ARTIFACT_ID").toString()
     browser()
   }
-  if (hasProperty("enableWasm")) {
-    @OptIn(ExperimentalWasmDsl::class)
-    wasmJs {
-      moduleName = property("POM_ARTIFACT_ID").toString()
-      browser()
-    }
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    moduleName = property("POM_ARTIFACT_ID").toString()
+    browser()
   }
   // endregion
 

circuit-runtime-screen/build.gradle.kts

@@ -23,18 +23,22 @@ kotlin {
     moduleName = property("POM_ARTIFACT_ID").toString()
     browser()
   }
-  if (hasProperty("enableWasm")) {
-    @OptIn(ExperimentalWasmDsl::class)
-    wasmJs {
-      moduleName = property("POM_ARTIFACT_ID").toString()
-      browser()
-    }
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    moduleName = property("POM_ARTIFACT_ID").toString()
+    browser()
   }
   // endregion
 
   applyDefaultHierarchyTemplate()
 
-  sourceSets { commonMain { dependencies { api(libs.compose.runtime) } } }
+  sourceSets {
+    commonMain { dependencies { api(libs.compose.runtime) } }
+    // We use a common folder instead of a common source set because there is no commonizer
+    // which exposes the browser APIs across these two targets.
+    jsMain { kotlin.srcDir("src/browserMain/kotlin") }
+    val wasmJsMain by getting { kotlin.srcDir("src/browserMain/kotlin") }
+  }
 
   targets.configureEach {
     compilations.configureEach {

circuit-runtime-ui/build.gradle.kts

@@ -23,12 +23,10 @@ kotlin {
     moduleName = property("POM_ARTIFACT_ID").toString()
     browser()
   }
-  if (hasProperty("enableWasm")) {
-    @OptIn(ExperimentalWasmDsl::class)
-    wasmJs {
-      moduleName = property("POM_ARTIFACT_ID").toString()
-      browser()
-    }
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    moduleName = property("POM_ARTIFACT_ID").toString()
+    browser()
   }
   // endregion
 

circuit-runtime/build.gradle.kts

@@ -23,12 +23,10 @@ kotlin {
     moduleName = property("POM_ARTIFACT_ID").toString()
     browser()
   }
-  if (hasProperty("enableWasm")) {
-    @OptIn(ExperimentalWasmDsl::class)
-    wasmJs {
-      moduleName = property("POM_ARTIFACT_ID").toString()
-      browser()
-    }
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    moduleName = property("POM_ARTIFACT_ID").toString()
+    browser()
   }
   // endregion
 

circuit-test/build.gradle.kts

@@ -23,12 +23,10 @@ kotlin {
     moduleName = property("POM_ARTIFACT_ID").toString()
     browser()
   }
-  if (hasProperty("enableWasm")) {
-    @OptIn(ExperimentalWasmDsl::class)
-    wasmJs {
-      moduleName = property("POM_ARTIFACT_ID").toString()
-      browser()
-    }
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    moduleName = property("POM_ARTIFACT_ID").toString()
+    browser()
   }
   // endregion
 
@@ -63,6 +61,10 @@ kotlin {
       }
     val jvmTest by getting { dependsOn(commonJvmTest) }
     val androidUnitTest by getting { dependsOn(commonJvmTest) }
+    // We use a common folder instead of a common source set because there is no commonizer
+    // which exposes the browser APIs across these two targets.
+    jsMain { kotlin.srcDir("src/browserMain/kotlin") }
+    val wasmJsMain by getting { kotlin.srcDir("src/browserMain/kotlin") }
   }
 }
 

circuitx/effects/build.gradle.kts

@@ -24,12 +24,23 @@ kotlin {
     moduleName = property("POM_ARTIFACT_ID").toString()
     browser()
   }
-  if (hasProperty("enableWasm")) {
-    @OptIn(ExperimentalWasmDsl::class)
-    wasmJs {
-      moduleName = property("POM_ARTIFACT_ID").toString()
-      browser()
+  @OptIn(ExperimentalWasmDsl::class)
+  wasmJs {
+    moduleName = property("POM_ARTIFACT_ID").toString()
+    browser {
+      testTask {
+        useKarma {
+          useChromeHeadless()
+          useConfigDirectory(
+            rootProject.projectDir
+              .resolve("internal-test-utils")
+              .resolve("karma.config.d")
+              .resolve("wasm")
+          )
+        }
+      }
     }
+    binaries.executable()
   }
   // endregion
 
@@ -54,7 +65,7 @@ kotlin {
       }
     }
     val iosTest by getting { dependencies { dependsOn(commonTest) } }
-    val jsTest by getting { dependencies { dependsOn(commonTest) } }
+    val browserTest by creating { dependencies { dependsOn(commonTest) } }
     val jvmTest by getting { dependencies { dependsOn(commonTest) } }
     val androidUnitTest by getting {
       dependsOn(commonTest)
@@ -65,6 +76,10 @@ kotlin {
         implementation(libs.androidx.compose.ui.testing.manifest)
       }
     }
+    // We use a common folder instead of a common source set because there is no commonizer
+    // which exposes the browser APIs across these two targets.
+    jsTest { kotlin.srcDir("src/browserTest/kotlin") }
+    val wasmJsTest by getting { kotlin.srcDir("src/browserTest/kotlin") }
   }
   targets.configureEach {
     compilations.configureEach {
@@ -73,6 +88,10 @@ kotlin {
   }
 }
 
+// adding it here to make sure skiko is unpacked and available in web tests
+// https://github.com/JetBrains/compose-multiplatform/issues/4133
+compose.experimental { web.application {} }
+
 android {
   namespace = "com.slack.circuitx.sideeffects"