☝️ Google making Android ViewModel's KMP

Screenshot 2024-02-26 at 22.51.37.png

hi I am new to mvi orbit. Is there any doc which explains how intent, reduce work under the hood?

is

reduce

thread safe?

Hi @Guilherme Delgado I read your article here: https://proandroiddev.com/managing-the-ui-state-by-using-a-finite-state-machine-and-mvi-architecture-36d84056c616 I am trying to implement same in my sample project

Hello all 👋 Following recent news about Google officially supporting KMP in androidx.ViewModel and androidx.Lifecycle, I was wondering how OrbitMvi-Multiplatform could embrace this update in order to finally become KMP ready 🤔 Any hint @Mikolaj Leszczynski @appmattus about how difficult could this migration be?

Maybe just changing the libraries imports? 😅 it would be awesome

Good job on the article @Guilherme Delgado :) I do quite like that definition of what it means to be native and had never quite found the right words to describe it myself. It’s definitely one of the reasons I like Kotlin native and having written a cryptographic hashing library and seeing no real difference in performance from the same algorithms in C highlighted this to me

orbit uses

runBlocking { }

in it's

intent { }

extension function. runBlocking can throw

InterruptedException

when thread being used for executing the coroutine gets interrupted for some reason. This results in a runtime crash. Is there any way to get around this crash?

Release https://github.com/orbit-mvi/orbit-mvi/releases/tag/9.0.0 migration guide feedback

Hi, i create simple login screen using orbit mvi, how to prevent the whole screen recomposed when new state is emitted? In my case i update the state when user typing their email and password

The Screen:

@Composable
fun LoginScreen(
    /** States **/
    viewModel: LoginViewModel = viewModel(),
    onSuccess: (LoginResult) -> Unit,
    onNavigateToRegistration: () -> Unit,
) {
    val context = LocalContext.current
    viewModel.collectSideEffect {
        when (it) {
            is LoginScreenEffect.LoginSuccess -> onSuccess.invoke(LoginResult())
            is LoginScreenEffect.ShowToastError -> Toast.makeText(
                context,
                it.message,
                Toast.LENGTH_SHORT
            ).show()
        }
    }

    Box {
        Column(modifier = Modifier.fillMaxSize()) {
            Text(text = "Login Screen")
            val state by viewModel.collectAsState()
            val showLoading by remember(state.showLoginLoading) { derivedStateOf { state.showLoginLoading } }
            if (showLoading)
                CircularProgressIndicator()

            Spacer(modifier = Modifier.weight(1f))

            val emailError by remember(state.emailError) { derivedStateOf { state.emailError } }
            val passwordError by remember(state.passwordError) { derivedStateOf { state.passwordError } }
            LoginForm(
                emailError = emailError,
                passwordError = passwordError,
                onEmailInput = { viewModel.updateEmail(it) },
                onPasswordInput = { viewModel.updatePassword(it) }
            )

            val enableButton by remember(state) { derivedStateOf { state.enableSubmitButton } }
            Button(
                onClick = { viewModel.submitLogin() },
                enabled = enableButton
            ) {
                Text(text = "Login")
            }

            Spacer(modifier = Modifier.height(24.dp))

            Button(
                onClick = { onNavigateToRegistration.invoke() },
                colors = ButtonDefaults.filledTonalButtonColors()
            ) {
                Text(text = "Go To Registration")
            }

            Spacer(modifier = Modifier.weight(1f))
        }
    }
}

@Composable
fun LoginForm(
    emailError: String,
    passwordError: String,
    onEmailInput: (String) -> Unit,
    onPasswordInput: (String) -> Unit,
) {
    Column {
        var emailBuffer by remember { mutableStateOf("") }
        TextField(
            value = emailBuffer,
            onValueChange = {
                emailBuffer = it
                onEmailInput.invoke(it)
            },
            isError = emailError.isNotBlank(),
        )
        if (emailError.isNotBlank())
            Text(text = emailError, color = MaterialTheme.colorScheme.error)

        var passwordBuffer by remember { mutableStateOf("") }
        TextField(
            value = passwordBuffer,
            onValueChange = {
                passwordBuffer = it
                onPasswordInput.invoke(it)
            },
            isError = passwordError.isNotBlank()
        )
        if (passwordError.isNotBlank())
            Text(text = passwordError, color = MaterialTheme.colorScheme.error)
    }
}

The State:

@Immutable
@optics
data class LoginScreenSate(
    val email: String = "",
    val password: String = "",
    val submitLoginDataState: VmState<LoginCredential> = VmIdle()
) {
    companion object

    val showLoginLoading: Boolean = submitLoginDataState is VmProcessing
    val emailError: String
        get() = when {
            !email.matches(EmailPattern.toRegex()) -> "Format Salah"
            else -> ""
        }
    val passwordError: String = when {
        password.length < 10 -> "Pasword kurang panjang"
        else -> ""
    }
    val enableSubmitButton =
        emailError.isBlank() && passwordError.isBlank() && submitLoginDataState.fold(ifProcessing = { false }) { true }
}

The ViewModel

class LoginViewModel : ContainerHost<LoginScreenSate, LoginScreenEffect>, ViewModel() {

    override val container: Container<LoginScreenSate, LoginScreenEffect> =
        container(LoginScreenSate())

    fun updateEmail(email: String) = intent {
        reduce {
            val lens = LoginScreenSate.email::set
            lens(state, email)
        }
    }

    fun updatePassword(password: String) = intent {
        reduce {
            val lens = LoginScreenSate.password
            lens.set(state, password)
        }
    }

    fun submitLogin() = intent {
        val lens = LoginScreenSate.submitLoginDataState

        reduce { lens.set(state, VmProcessing()) }

        // do login stuff
        val loginResultState = runBlocking {
            delay(3000)
            VmSuccess(LoginCredential())
        }

        // assume success
        reduce { lens.set(state, loginResultState) }

        postSideEffect(LoginScreenEffect.LoginSuccess(loginResultState.data))
    }
}

when user typing, the email state will be forwarded to viewmodel. and everytime user typing the state is reduced. since the state is on top of LoginScreen function, the whole page is recomposed. how to prevent it?

orbit multiplatform Some exciting news to share today Orbit has been selected as one of the winners of the 2024 Kotlin Foundation grants. We'd like to take this opportunity to thank everyone in the Orbit community. We wouldn't be here without you all ❤️

set the channel description: Discussions for the Orbit Multiplatform library

As a follow up to the Kotlin Foundation announcement I wrote a brief article about some of the journey with Orbit - interesting to look back on the syntax of the earlier versions and how it has changed with time. https://appmattus.medium.com/6b949cf8133e

👋 Was wondering, what would it take to make orbit run in kotlin native (target

macosX64

&

macosArm64

)? Are there specific dependencies that need to be made compatible? I got a macos desktop app using compose that builds in kotlin native (not jvm) and would love to use orbit in it

Just looking back at Orbit... and I'm wondering what's the advantage over just having a simple channel for side effects and a state flow for ui state in the view model?

How should the first data download with orbit-mvi be? Something like this https://proandroiddev.com/loading-initial-data-in-launchedeffect-vs-viewmodel-f1747c20ce62

Hi, I have general question about architecting an app with Orbit-MVI. Do you typically define one State subclass (an instance) or many for different parts of your app? I see both pros and cons of using one vs many States. One of the pros for single State is that there are parts that can be shared among many views. How to implement Shared State that will live in application scope and be accessible from smaller scopes?

What happens if I execute the following lines inside viewmodel as below:

fun example() {
            intent {
                fun1()
            }
            Log.d("sonusourav","intent 1")
            intent {
                fun2()
            }
            Log.d("sonusourav","intent 2")

            intent {
                fun3()
            }
            Log.d("sonusourav","intent 3")
        }

Will the three functions be launched in parallel like launch? Sorry if this is very naive question, couldn't found a clear answer for this written anywhere

Is there any example code on how to subscribe to states and side-effects using a KMP ViewModel in Swift?

I have a spare ticket for KotlinConf next week if anyone here would be able to make use of it. Myself and @Mikolaj Leszczynski will both be there and will have a slot at a booth on the first day if you want to come and say hi.

orbit-compose-multiplatform.png

getting better on ktlibs.io 🙂

I'm trying to update to v10 and running into a weird issue in my unit tests. I have a ViewModel that is collecting a flow on initialization, but the unit test never seems to receive the state after the reducer is called. Am I doing it wrong, or is this something weird with v10? LoginViewModel.kt

class LoginViewModel(
    private val authController: AuthenticationController,
) : ViewModelContainerHost<LoginState, LoginSideEffect>() {
    override val container: Container<LoginState, LoginSideEffect> =
        container(
            initialState = LoginState.UNINITIALIZED,
        ) {
            observeAuthState()
        }

    private fun observeAuthState() =
        intent(registerIdling = false) {
            repeatOnSubscription {
                authController.authState
                    .collect { state ->
                        reduce {
                            when (state) {
                                AuthState.UNINITIALIZED -> LoginState.UNINITIALIZED
                                AuthState.UNAUTHORIZED -> LoginState.UNAUTHORIZED
                                AuthState.AUTHORIZED -> LoginState.AUTHORIZED
                                AuthState.ERROR -> LoginState.ERROR
                            }
                        }
                    }
            }
        }
}

LoginViewModelTests.kt

class LoginViewModelTests {
    val authService =
        mock<AuthService>(MockMode.strict) {
        }

    @Test
    fun testConstructorAuthorized() =
        runTest {
            everySuspend { authService.isAuthorized() } returns true

            val authController = AuthenticationController(Logger, authService)
            LoginViewModel(authController).test(this, LoginState.UNINITIALIZED) {
                runOnCreate()
                expectState(LoginState.AUTHORIZED)
            }
        }
}

Result:

Info: Updating auth state to AUTHORIZED

Timed out waiting for remaining intents to complete for 1s
org.orbitmvi.orbit.test.OrbitTimeoutCancellationException: Timed out waiting for remaining intents to complete for 1s
...

The weird thing is that if I

expectState(LoginState.UNAUTHORIZED)

, then it fails because it gets

AUTHORIZED

.

Hey folks, I'm trying to integrate compose UI tests into our app but I'm running into the problem outlined in this issue. The tl;dr is we get a

java.lang.IllegalStateException: Method setCurrentState must be called on the main thread

exception when trying to navigate because the block passed to

collectSideEffect

isn't being run on the main thread. Anyone faced this before or have any insights?