Tlaster / PreCompose

Compose Multiplatform Navigation && State Management
https://tlaster.github.io/PreCompose/
MIT License
803 stars 47 forks source link

Support for Compose HTML #163

Open GabrielLasso opened 8 months ago

GabrielLasso commented 8 months ago

It would be nice of we can use Precompose with Compose HTML.

You can use this template to try it out: https://github.com/JetBrains/compose-multiplatform-html-library-template

I changed the main.kt to:


class CounterViewModel: ViewModel() {
    val counter: MutableState<Int> = mutableStateOf(0)
}

fun main() {
    renderComposable(rootElementId = "root") {
        Body()
    }
}

@Composable
fun Body() {
    val viewModel: CounterViewModel = viewModel(CounterViewModel::class) {
        CounterViewModel()
    }
    Div {
        Text("Clicked: ${viewModel.counter.value}")
    }
    Button(
        attrs = {
            onClick { _ ->
                viewModel.counter.value++
            }
        }
    ) {
        Text("Click")
    }
}

And added this to build.gradle.kts:

                implementation("moe.tlaster:precompose:1.5.4")
                implementation("moe.tlaster:precompose-viewmodel:1.5.4")

But when I run I get "No StateHolder provided" error... I know that I should change the renderComposable call for something, but I didnt found anything for HTML in the documentation

GabrielLasso commented 8 months ago

I changed the main function to


fun main() {
    renderComposable(rootElementId = "root") {
        val holder: PreComposeWindowHolder = remember { PreComposeWindowHolder() }
        CompositionLocalProvider(LocalLifecycleOwner provides holder,
                                 LocalStateHolder provides holder.stateHolder,
                                 LocalBackDispatcherOwner provides holder) {
            Body()
        }
    }
}

And it worked.

It would be nice to have a built in function to this

GabrielLasso commented 8 months ago

navigation won't work, but at least view model works :)

Tlaster commented 8 months ago

Currently PreCompose does not have something like hash router, I'm working on it.