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 when navigating back.

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()