Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theapache64/rebugger
A simple Compose Multiplatform library designed to print the reason for recomposition in your console/Logcat window."
https://github.com/theapache64/rebugger
android jetpack jetpack-compose recomposition
Last synced: 3 months ago
JSON representation
A simple Compose Multiplatform library designed to print the reason for recomposition in your console/Logcat window."
- Host: GitHub
- URL: https://github.com/theapache64/rebugger
- Owner: theapache64
- License: apache-2.0
- Created: 2023-03-27T04:12:17.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-04-03T04:13:52.000Z (7 months ago)
- Last Synced: 2024-07-11T18:14:21.265Z (4 months ago)
- Topics: android, jetpack, jetpack-compose, recomposition
- Language: Kotlin
- Homepage:
- Size: 224 KB
- Stars: 866
- Watchers: 7
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- kmp-awesome - rebugger - A recomposition debugger (Libraries / 🍎 Compose UI)
- awesome-list - theapache64/rebugger - A simple Compose Multiplatform library designed to print the reason for recomposition in your console/Logcat window." (Kotlin)
README
# 🐞 Rebugger
> Rebugger : A recomposition debugger
Being a “compose dev” our enemy number one is unnecessary recompositions 🤕. Often times we use tools like [recompositionHighligher](https://github.com/theapache64/boil/blob/master/files/RecompositionHighlighter.kt), [LogComposition](https://github.com/theapache64/boil/blob/master/files/LogComposition.kt), and layout inspector to count the recomposition, but there’s no direct way to understand “why” the recomposition has happened.
Rebugger is a simple compose utility function that can track the change in the given arguments. It’ll print the reason for recomposition in your Logcat window.
## ⌨️ Demo
## Usage
### 1. Add dependencies
[](https://mvnrepository.com/artifact/io.github.theapache64/rebugger)
**Kotlin Script**
```kotlin
repositories {
...
mavenCentral()
}
dependencies {
implementation("io.github.theapache64:rebugger:1.0.0-rc03")
}
```
**Groovy**
```groovy
repositories {
...
mavenCentral()
}
dependencies {
implementation 'io.github.theapache64:rebugger:1.0.0-rc03'
}
```
### 2. Add `Rebugger` call
> Call `Rebugger` with the states or args you want to track
```kotlin
@Composable
fun VehicleUi(
car: Car,
bike: Bike,
) {
var human by remember { mutableStateOf(Human("John")) }
// Call Rebugger and pass the states you want to track.
// It could be a function arg or a state
Rebugger(
trackMap = mapOf(
"car" to car,
"bike" to bike,
"human" to human
),
)
//...
```
### 3. See `LogCat`
> Search for `Rebugger`
## 🖥 Sample Outputs
- When Rebugger hooked into your composable, it’ll print something like this
- When VehicleUi recomposes due to car instance change
- When VehicleUi recomposes due to both car and bike instance change
- When VehicleUi recomposes due to human instance change (State within the composable)
## 🎨 Customization
You can use the `RebuggerConfig.init` function to override default properties of Rebugger.
```kotlin
class App : Application() {
// ...
override fun onCreate() {
super.onCreate()
// ...
RebuggerConfig.init(
tag = "MyAppRebugger", // changing default tag
logger = { tag, message -> Timber.i(tag, message) } // use Timber for logging
)
}
}
```
## 🔌 Plugin
You can use the [Rebugger IntelliJ plugin](https://plugins.jetbrains.com/plugin/21633-rebugger) to generate the `Rebugger` function call.
https://user-images.githubusercontent.com/9678279/235495156-445e7ced-30fa-41dd-9b37-84b80502187f.mov
## 🟠 Limitation
### Auto Name Picking
When Rebugger is placed deep inside the composable, it may not be able to pick the correct composable name. For example, if I place the Rebugger somewhere inside the Button lambda like this
```kotlin
@Composable
fun VehicleUi(
car: Car,
bike: Bike,
) {
// ...
Column {
// ...
Button(
onClick = {
//...
}
) {
// 🟠 Inside Button's content lambda
Rebugger(
trackMap = mapOf(
"car" to car,
"bike" to bike,
"human" to human
),
)
// ...
}
}
}
```
It’ll print something like this
### The Fix
To fix this, you can pass composableName argument to override the automatic name picking behaviour
```kotlin
Rebugger(
composableName = "Button's body",
trackMap = mapOf(
"car" to car,
"bike" to bike,
"human" to human
),
)
```