Skip to content

Commit

Permalink
Doc update for Compose features - KoinContext KoinAndroidContext and …
Browse files Browse the repository at this point in the history
…KoinIsolatedContext
  • Loading branch information
arnaudgiuliani committed Sep 12, 2023
1 parent deb1253 commit 11397b2
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 32 deletions.
53 changes: 52 additions & 1 deletion docs/reference/koin-compose/compose.md
@@ -1,9 +1,60 @@
---
title: Injecting in Jetpack Compose
title: Injecting in Jetpack Compose and Android
---

This page describe how you can inject your dependencies for your Jetpack Compose app - https://developer.android.com/jetpack/compose

## Starting Koin with Android Jetpack Compose - KoinApplication or KoinAndroidContext

Most of the time, `startKoin` function is used to start Koin in your application. This is done before running any Composable function. You need to setup Compose with your current Koin instance. Use `KoinAndroidContext()` to do so:

```kotlin
@Composable
fun App() {
// Set current Koin instance to Compose context
KoinAndroidContext() {

MyScreen()
}
}
```

Else if you want to start a new Koin instance from your Compose app, The function `KoinApplication` helps to create Koin application instance, as a Composable. This is a replacement of the classic `startKoin` application function.

```kotlin
@Composable
fun App() {
KoinApplication(application = {
// Koin configuration here
}) {

}
}
```

:::info
Difference between `KoinAndroidContext` and `KoinContext`:
- `KoinAndroidContext` is looking into current Android app context for Koin instance
- `KoinContext` is looking into current GlobalContext for Koin instances
:::

### Compose Preview with Koin

The `KoinApplication` function is also interesting to start dedicated context for preview. This can be also used to helo with Compose preview:

```kotlin
@Composable
@Preview
fun App() {
KoinApplication(application = {
// your preview config here
modules(previewModule)
}) {
// Compose to preview with Koin
}
}
```

## Injecting into a @Composable

While writing your composable function, you gain access to the following Koin API:
Expand Down
42 changes: 42 additions & 0 deletions docs/reference/koin-compose/isolated-context.md
@@ -0,0 +1,42 @@
---
title: Isolated Context with Compose
---

With a Compose application, you can work the same way with an [isolated context](../koin-core/context-isolation.md) to deal with SDK or white label application, in order to not mix your Koin definitions with a end user's one.

## Define isolated context

First let's declare our isolated context holder, in order to store our isolated Koin isntance in memory. This can be done with a simple Object class like this. The `MyIsolatedKoinContext` class is holding our Koin instance:

```kotlin
object MyIsolatedKoinContext {

val koinApp = koinApplication {
// declare used modules
modules(sdkAppModule)
}
}
```

:::note
Adapt the `MyIsolatedKoinContext` class according your need of initialization
:::

## Setup isolated context with Compose

Now that you have defined an isolated Koin context, we can setup it up to Compose to use it and override all the API. Just use the `KoinIsolatedContext` at the root Compose function. This will propagate your Koin context in all child composables.

```kotlin
@Composable
fun App() {
// Set current Koin instance to Compose context
KoinIsolatedContext(context = MyIsolatedKoinContext.koinApp) {

MyScreen()
}
}
```

:::info
All Koin Compose APIs will use your Koi isolated context after the use of `KoinIsolatedContext`
:::
77 changes: 46 additions & 31 deletions docs/reference/koin-compose/multiplatform.md
@@ -1,47 +1,25 @@
---
title: Compose & Multiplatform Basics
title: Compose Multiplatform Features
---

This page describe how you can inject your dependencies for your Jetpack & Jetbrains Compose app - https://www.jetbrains.com/lp/compose-mpp/

## Injecting into a @Composable

While writing your composable function, you gain access to the following Koin API:

* `koinInject()` - fetch instance from Koin container
* `getKoin()` - get current Koin instance

For a module that declares a 'MyService' component:
## Starting Koin with Compose - KoinApplication or KoinContext

```kotlin
val androidModule = module {

single { MyService() }
}
```

We can get your instance like that:
Most of the time, `startKoin` function is used to start Koin in your application. This is done before running any Composable function. You need to setup Compose with your current Koin instance. Use `KoinContext()` to do so:

```kotlin
@Composable
fun App() {
val myService = koinInject<MyService>()
}
```

:::note
To keep aligned on the functional aspect of Jetpack Compose, the best writing approach is to inject instances directly into functions properties. This way allow to have default implementation with Koin, but keep open to inject instances how you want.
:::
// Set current Koin instance to Compose context
KoinContext() {

```kotlin
@Composable
fun App(myService: MyService = koinInject()) {
MyScreen()
}
}
```

## Starting a Koin instance from Compose

The function `KoinApplication` helps to create Koin application instance, as a Composable. This is a replacement of the classic `startKoin` application function.
Else if you want to start a new Koin instance from your Compose app, The function `KoinApplication` helps to create Koin application instance, as a Composable. This is a replacement of the classic `startKoin` application function.

```kotlin
@Composable
Expand All @@ -54,7 +32,9 @@ fun App() {
}
```

This can be also used to helo with Compose preview:
### Compose Preview with Koin

The `KoinApplication` function is also interesting to start dedicated context for preview. This can be also used to helo with Compose preview:

```kotlin
@Composable
Expand All @@ -69,6 +49,41 @@ fun App() {
}
```

## Injecting into a @Composable

While writing your composable function, you gain access to the following Koin API:

* `koinInject()` - fetch instance from Koin container
* `getKoin()` - get current Koin instance

For a module that declares a 'MyService' component:

```kotlin
val androidModule = module {

single { MyService() }
}
```

We can get your instance like that:

```kotlin
@Composable
fun App() {
val myService = koinInject<MyService>()
}
```

:::note
To keep aligned on the functional aspect of Jetpack Compose, the best writing approach is to inject instances directly into functions properties. This way allow to have default implementation with Koin, but keep open to inject instances how you want.
:::

```kotlin
@Composable
fun App(myService: MyService = koinInject()) {
}
```


## Module loading & unloading tied to Composable

Expand Down

0 comments on commit 11397b2

Please sign in to comment.