https://kotlinlang.org logo
#compose
Title
# compose
p

pavi2410

10/23/2019, 7:46 PM
Suggestion: What if there is a preview button (next to @Composable functions) in the gutter just like Run button in psvm?
Copy code
1 👁️ | @Composable
2    | fun Greeting(name: String = "Android") {
3    |    Text (text = "Hello $name!")
4    | }
g

George Mount

10/23/2019, 7:47 PM
That's really cute. File a feature request!
👍 8
l

Luca Nicoletti

10/23/2019, 7:49 PM
Wouldn’t this be more a AS plugin?
f

Fudge

10/23/2019, 7:51 PM
This should definitely be part of the Android plugin.
👍🏼 4
r

romainguy

10/23/2019, 8:02 PM
Except composables might require more scaffolding to work
Like a theme for instance
This would work for simple cases
l

Luca Nicoletti

10/23/2019, 8:07 PM
@romainguy how would this affect the plugin and not the annotation?
f

Fudge

10/23/2019, 8:07 PM
I think he means that this would do the same as annotating
@Preview
and going to the preview screen.
👍🏼 1
Really, that sounds a lot more convenient than having to write an annotation and delete it after
👌 2
r

romainguy

10/23/2019, 8:16 PM
My point is that it might not be possible to preview any composable as is.
f

Fudge

10/23/2019, 8:17 PM
Are you saying the
@Preview
annotation is pointless 🤔
r

romainguy

10/23/2019, 8:18 PM
Not at all. You can write a composable function with the data and scaffolding you need and annotate that with the preview annotation
But you might also be able to just annotate your compostable directly. It depends on what you need
And you can write several previews for a composable this way, to test different color schemes, data etc.
f

Fudge

10/23/2019, 8:20 PM
So you insert information about the compostable inside the params of the
@Preview
annotation. Haven't seen that yet.
r

romainguy

10/23/2019, 8:26 PM
No, you write a composable function that does that
For instance I have a
PhotoCard()
composable, but my preview will be:
Copy code
@Preview
fun PhotoCardPreviewDark() {
   val testData = ...
   MaterialTheme(darkTheme) {
      PhotoCard(testData)
   }
}
The preview annotation does have parameters like width/height but I don't know if they work yet
f

Fudge

10/23/2019, 8:44 PM
Oh, I see what you mean. Either way, a "Play" button on
PhotoCardPreviewDark
would be useful.
Would be interesting to have a way to avoid this ceremony for previewing components though.
r

romainguy

10/23/2019, 8:49 PM
What would the play button do? The interesting thing about @Preview is that it will show you all previews in the current file at the same time
👍 2
Which lets you display the same component with different configurations, test data, etc.
f

Fudge

10/23/2019, 8:51 PM
Maybe, just insert the text itself of the annotation? 😅
At this point it's not too important/useful though
r

romainguy

10/23/2019, 8:51 PM
Eh, yeah 🙂
Anyway we are definitely open to feedback, we want to make this as nice as possible
f

Fudge

10/23/2019, 8:57 PM
It can be a refactoring/quickfix/button that takes this
Copy code
@Composable fun MyButton(size : Int)  = /**/
And generates this
Copy code
@Preview 
fun MyButtonPreview(){  
    MaterialTheme( <--- cursor goes here first with a default value of lightTheme){
       MyButton( <--- cursor then goes here)
   }
}
You know, I think that's almost possible with IntelliJ live templates 🤔
c

Cody Engel

10/23/2019, 8:58 PM
I think I generally like
@Preview
more than a run button. Seeing all of the previews is nice. I think it’s a bit confusing with how it is presented though… I think my assumption was I’d just add
@Preview
to the component I’d use in production, that doesn’t seem to be the use-case though.
2
f

Fudge

10/23/2019, 8:58 PM
Considering you won't have the material theme, it's unlikely @Preview will be useful on a normal component
r

romainguy

10/23/2019, 9:00 PM
@Cody Engel You could, if your composable doens’t need any other setup
c

Cody Engel

10/23/2019, 9:01 PM
Are there many use cases for that? I started to extract the hello world sample and pretty quickly needed to pass parameters to the composables
r

romainguy

10/23/2019, 9:02 PM
Of standalone composables?
f

Fudge

10/23/2019, 9:02 PM
It's actually very similar to unit testing, some things don't depend on any data so you can just run them, and for some things you need mock data
c

Cody Engel

10/23/2019, 9:03 PM
So I wanted to add a Model to the sample which looks like this:
Copy code
@Model
class Name(var name: String)

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloForm()
        }
    }

}

@Composable
fun HelloForm(name: Name = Name("Android")) = MaterialTheme {
    val name = Name("Android")
    Column {
        Greeting(name = name.name)
        Button(text = "New Name", onClick = { name.name = "Cody" } )
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}
And then I created a
ComposePreviews
Kotlin file with this:
Copy code
@Preview
@Composable
fun HelloFormNormal() {
    HelloForm(Name("Test"))
}
Which is probably fine, it’s a little weird that anyone could call
HelloFormNormal
though, it feels more like documentation to me than something I’d want others to actually call
r

romainguy

10/23/2019, 9:07 PM
You could put it in a separate file too
Does it work when making it private?
c

Cody Engel

10/23/2019, 9:08 PM
Making it private breaks it
r

romainguy

10/23/2019, 9:08 PM
Maybe that’s what we should do, make previews work when private
c

Cody Engel

10/23/2019, 9:09 PM
I will say though this tooling is still fantastic in the current state, I never thought I’d see Android get to this point and it’s really exciting 🙂
z

Zach Klippenstein (he/him) [MOD]

10/25/2019, 12:43 PM
Late to this thread, but wouldn't you want to put preview functions in a different variant? I would think you'd want to avoid shipping the bytecode for them in your library/app.
☝️ 2
r

romainguy

10/25/2019, 1:44 PM
You can do that, or use R8 to strip out the code that doesn’t get used
👍 1
c

Cody Engel

10/25/2019, 3:13 PM
Putting the code in a separate build variant? I don’t think variants are really discussed much so making that a best practice seems weird... I think letting R8 do the heavy lifting would be more practical.
2 Views