Uncomment and update the ViewModel code in the "common" module, add the necessary dependencies, and update the demo Material3 composable to use a Material3ViewModel to demonstrate ViewModels

An exception is thrown with the message "ViewModelStore should be set before setGraph call" on JS DOM in an internal app but not in the demo.

Author: ShreckYe

common/build.gradle.kts

@@ -57,13 +57,12 @@ kotlin {
                 api("com.varabyte.kobweb:kobweb-compose:${DependencyVersions.kobweb}")
                 implementation("com.huanshankeji:compose-html-common:${DependencyVersions.huanshankejiComposeHtml}")
 
-                // TODO not used yet
                 /*
                 The UI module depends on the lifecycle module to use `androidx.lifecycle.ViewModelStoreOwner`.
                 See https://github.com/JetBrains/compose-multiplatform-core/blob/jb-main/compose/ui/ui/build.gradle#L87.
                 This is actually only needed for JS DOM.
                  */
-                //implementation(cpnProject(project, ":lifecycle-viewmodel"))
+                implementation(commonDependencies.jetbrainsAndroidx.lifecycle.viewmodel())
             }
         }
     }

common/src/jsMain/kotlin/com/huanshankeji/compose/ui/platform/DefaultViewModelOwnerStore.kt

@@ -1,6 +1,5 @@
 package com.huanshankeji.compose.ui.platform
 
-/*
 // copied and adapted from "DefaultViewModelOwnerStore.skiko.kt" in `androidx.compose.ui.platform`
 
 import androidx.compose.runtime.Composable
@@ -22,4 +21,3 @@ internal val LocalInternalViewModelStoreOwner = staticCompositionLocalOf<ViewMod
 @Composable
 fun findComposeDefaultViewModelStoreOwner(): ViewModelStoreOwner? =
     LocalInternalViewModelStoreOwner.current
-*/

common/src/jsMain/kotlin/com/huanshankeji/compose/ui/window/ComposeWindow.js.kt

@@ -1,28 +1,36 @@
 package com.huanshankeji.compose.ui.window
 
-/*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Composition
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.lifecycle.ViewModelStore
+import androidx.lifecycle.ViewModelStoreOwner
+import com.huanshankeji.compose.ExperimentalApi
 import com.huanshankeji.compose.ui.platform.LocalInternalViewModelStoreOwner
 import org.jetbrains.compose.web.dom.DOMScope
 import org.jetbrains.compose.web.renderComposableInBody
 import org.w3c.dom.HTMLBodyElement
 
-// TODO not used yet so made private
-private fun renderComposableInBodyWithLifecycle(
+@ExperimentalApi
+class SimpleViewModelStoreOwner : ViewModelStoreOwner {
+    override val viewModelStore: ViewModelStore = ViewModelStore()
+}
+
+fun renderComposableInBodyWithViewModelStoreOwner(
     content: @Composable DOMScope<HTMLBodyElement>.() -> Unit
 ): Composition =
     renderComposableInBody {
         // copied and adapted from `ComposeWindow` in "ComposeWindow.web.kt" in `androidx.compose.ui.window`
         // also see `ComposeViewport` on Wasm JS
+        @OptIn(ExperimentalApi::class)
         CompositionLocalProvider(
-            //LocalSystemTheme provides systemThemeObserver.currentSystemTheme.value, // TODO add back if needed one day
-            //LocalLifecycleOwner provides this, // TODO
-            LocalInternalViewModelStoreOwner provides TODO(),
+            /* TODO add back these 2 lines below if needed one day
+                in a function possibly named `renderComposableInBodyWithLifecycle` */
+            //LocalSystemTheme provides systemThemeObserver.currentSystemTheme.value,
+            //LocalLifecycleOwner provides this,
+            LocalInternalViewModelStoreOwner provides SimpleViewModelStoreOwner(),
             content = {
                 content()
             }
         )
     }
-*/

demo/build.gradle.kts

@@ -49,6 +49,7 @@ kotlin {
                 implementation(compose.runtime)
                 implementation(cpnProject(project, ":material2"))
                 implementation(cpnProject(project, ":material3"))
+                implementation(cpnProject(project, ":lifecycle-viewmodel"))
                 implementation(cpnProject(project, ":navigation"))
                 /*
                 see https://github.com/JetBrains/compose-multiplatform-core/blob/476d43b99a27696d12ef087e8028d90789645ba7/compose/ui/ui/build.gradle#L54

demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt

@@ -2,6 +2,7 @@ package com.huanshankeji.compose.material.demo
 
 import androidx.compose.runtime.*
 import androidx.compose.ui.unit.dp
+import com.huanshankeji.androidx.lifecycle.viewmodel.compose.viewModel
 import com.huanshankeji.compose.ExtRecommendedApi
 import com.huanshankeji.compose.foundation.layout.*
 import com.huanshankeji.compose.foundation.rememberScrollState
@@ -27,10 +28,12 @@ import com.huanshankeji.compose.ui.Modifier
 import com.huanshankeji.compose.material3.Button as RowScopeButton
 
 @Composable
-fun Material3(/*modifier: Modifier = Modifier*/) {
+fun Material3(/*modifier: Modifier = Modifier*/
+              viewModel: Material3ViewModel = viewModel { Material3ViewModel() }
+) {
     Column(Modifier.verticalScroll(rememberScrollState()).innerContentPadding(), Arrangement.spacedBy(16.dp)) {
-        var count by remember { mutableStateOf(0) }
-        val onClick: () -> Unit = { count++ }
+        val count by viewModel.countState.collectAsState()
+        val onClick: () -> Unit = { viewModel.countState.value++ }
         val buttonContent: @Composable () -> Unit = {
             TaglessText(count.toString())
         }
@@ -56,7 +59,8 @@ fun Material3(/*modifier: Modifier = Modifier*/) {
             FilledTonalIconButton(onClick, content = iconButtonContent)
             OutlinedIconButton(onClick, content = iconButtonContent)
         }
-        val (checked, onCheckedChange) = remember { mutableStateOf(false) }
+        val checked = viewModel.checkedState.collectAsState().value
+        val onCheckedChange: (Boolean) -> Unit = { viewModel.checkedState.value = it }
         val iconToggleButtonContent: @Composable () -> Unit = {
             Icon(if (checked) Icons.Default.Add else Icons.Default.Remove, null)
         }

demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3ViewModel.kt

@@ -0,0 +1,9 @@
+package com.huanshankeji.compose.material.demo
+
+import androidx.lifecycle.ViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+
+class Material3ViewModel : ViewModel() {
+    val countState = MutableStateFlow(0)
+    val checkedState = MutableStateFlow(false)
+}

demo/src/jsMain/kotlin/com/huanshankeji/compose/material/demo/Main.kt

@@ -1,9 +1,10 @@
 package com.huanshankeji.compose.material.demo
 
 import com.huanshankeji.compose.html.material3.require
-import org.jetbrains.compose.web.renderComposableInBody
+import com.huanshankeji.compose.ui.window.renderComposableInBodyWithViewModelStoreOwner
 
 fun main() {
     require("material-symbols/outlined.css")
-    renderComposableInBody { App() }
+    //renderComposableInBody { App() } // "No ViewModelStoreOwner was provided via LocalViewModelStoreOwner"
+    renderComposableInBodyWithViewModelStoreOwner { App() }
 }

lifecycle-viewmodel/build.gradle.kts

@@ -1,3 +1,4 @@
+import com.huanshankeji.cpnProject
 import com.huanshankeji.team.`Shreck Ye`
 import com.huanshankeji.team.pomForTeamDefaultOpenSource
 
@@ -16,6 +17,9 @@ kotlin {
                 */
                 api(compose.runtime)
                 api(commonDependencies.jetbrainsAndroidx.lifecycle.viewmodel())
+                // only needed on JS DOM actually
+                // https://github.com/JetBrains/compose-multiplatform-core/blob/f1e03d0784631a88201931a6a6a708cdd090be57/lifecycle/lifecycle-viewmodel-compose/build.gradle#L58
+                api(cpnProject(project, ":common"))
             }
         }
         composeUiMain {

lifecycle-viewmodel/src/commonMain/kotlin/ViewModel.kt

@@ -46,7 +46,8 @@ expect inline fun <reified VM : ViewModel> viewModel(
 @Deprecated(
     "Use the one with a `viewModelStoreOwner` parameter instead. " +
             "This function might be removed in the future. " +
-            "Make sure you call this function with named arguments please so your source still compile when this is removed."
+            "If you call this function with a `key` argument, make sure you used a named argument " +
+            "so your source still compiles when this is removed."
 )
 @Composable
 inline fun <reified VM : ViewModel> viewModel(

lifecycle-viewmodel/src/jsMain/kotlin/LocalViewModelStoreOwner.kt

@@ -1,9 +1,11 @@
 package com.huanshankeji.androidx.lifecycle.viewmodel.compose
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.InternalComposeApi
 import androidx.compose.runtime.ProvidedValue
 import androidx.compose.runtime.compositionLocalOf
 import androidx.lifecycle.ViewModelStoreOwner
+import com.huanshankeji.compose.ui.platform.findComposeDefaultViewModelStoreOwner
 
 // copied and adapted from "LocalViewModelStoreOwner.kt" and "LocalViewModelStoreOwner.jb.kt" in `androidx.lifecycle.viewmodel.compose`
 
@@ -20,7 +22,7 @@ object LocalViewModelStoreOwner {
     }
 }
 
+@OptIn(InternalComposeApi::class)
 @Composable
 internal fun findViewTreeViewModelStoreOwner(): ViewModelStoreOwner? =
-    // TODO
-    null //findComposeDefaultViewModelStoreOwner()
+    findComposeDefaultViewModelStoreOwner()