facebook / flipper

A desktop debugging platform for mobile developers.
https://fbflipper.com/
MIT License
13.37k stars 952 forks source link

Discussion: Jetpack Compose & SwiftUI support? #2366

Open brianguertin opened 3 years ago

brianguertin commented 3 years ago

Any thoughts on supporting these modern UI toolkits in Flipper?

Compose is supposed to hit 1.0 in July, and SwiftUI has been out for some time already.

I've already started migrating to Jetpack Compose I'd like to keep using Flipper :crossed_fingers:

nikoant commented 3 years ago

There are no plans on implementing that internally in FB. If someone in open source would like to work on supporting Jetpack Compose or SwiftUI - contributions are welcome. You can either build a separate plugin for Flipper, or probably extend the existing Layout plugin to support these toolkits.

ln-12 commented 1 year ago

Hey @nikoant and @mweststrate, are there any plans in the meantime to support Compose on Android? According to Google it is the recommended UI framework now, so it would be a great pity if we cannot continue to use Flipper.

I saw that there is the new UI debugger, but it still does not support compose.

Maestro Studio for example is able to extract this information: https://maestro.mobile.dev/platform-support/android-jetpack-compose

mweststrate commented 1 year ago

cc @lblasa

ln-12 commented 1 year ago

Hey guys, can you give an update on the current state of this feature? I wanted to look into it to see if I can contribute something myself but discovered that there already is some implementation in https://github.com/facebook/flipper/tree/main/android/plugins/jetpack-compose. Are you already actively working on it?

ln-12 commented 11 months ago

For anyone coming across this issue, this is what I got working:

In your gradle file add:

    debugImplementation 'com.facebook.flipper:flipper:0.238.0'
    debugImplementation 'com.facebook.soloader:soloader:0.10.2'
    releaseImplementation 'com.facebook.flipper:flipper-noop:0.238.0'
    debugImplementation("com.facebook.flipper:flipper-jetpack-compose-plugin:0.238.0")

And in your application do it like this:

    override fun onCreate() {
        super.onCreate()
        SoLoader.init(this, false)

        val client = AndroidFlipperClient.getInstance(this)
        val context = UIDContext.create(this)
        client.addPlugin(UIDebuggerFlipperPlugin(context))
        UIDebuggerComposeSupport.enable(context)
        client.start()
    }

Then you can make of the new UI debugger which also shows information about Compose Nodes. Changing node properties does not seem to work yet.