Slide 1
Slide 1 text
@
VinayGaba
KotlinConf’23
Amsterdam
Automating UI
Infrastructure in
Jetpack Compose
Vinay Gaba
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
🚀 Automating UI Infrastructure 🚀
Slide 5
Slide 5 text
2021
2019
2016
2013 2023
Slide 6
Slide 6 text
2021
2019
2016
2013 2023
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
🚀
Slide 10
Slide 10 text
🚀
Slide 11
Slide 11 text
200k+
Github
Stars ⭐
🚀
Slide 12
Slide 12 text
2021
2019
2016
2013 2023
Slide 13
Slide 13 text
2021
2019
2016
2013 2023
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
❤
Slide 23
Slide 23 text
fun MyCustomTextComponent(displayString: String) {
}
Slide 24
Slide 24 text
fun MyCustomTextComponent(displayString: String) {
Text(
text = displayString,
style = TextStyle(
fontWeight = FontWeight.W900,
fontFamily = FontFamily.Monospace,
fontSize = 32.sp,
fontStyle = FontStyle.Italic,
color = Color.Magenta,
background = Color.Black
)
)
}
Slide 25
Slide 25 text
@Composable
fun MyCustomTextComponent(displayString: String) {
Text(
text = displayString,
style = TextStyle(
fontWeight = FontWeight.W900,
fontFamily = FontFamily.Monospace,
fontSize = 32.sp,
fontStyle = FontStyle.Italic,
color = Color.Magenta,
background = Color.Black
)
)
}
Slide 26
Slide 26 text
@Composable
fun MyCustomTextComponent(displayString: String) {
Text(
text = displayString,
style = TextStyle(
fontWeight = FontWeight.W900,
fontFamily = FontFamily.Monospace,
fontSize = 32.sp,
fontStyle = FontStyle.Italic,
color = Color.Magenta,
background = Color.Black
)
)
}
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Discoverability
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Project Codename: Showkase
Slide 41
Slide 41 text
Requirements
Slide 42
Slide 42 text
🌎 All components from the codebase
Requirements
Slide 43
Slide 43 text
🌎 All components from the codebase
Requirements 🗂 Components are neatly organized
Slide 44
Slide 44 text
🌎 All components from the codebase
Requirements 🗂 Components are neatly organized
🙅 No manual work
Slide 45
Slide 45 text
@Composable
fun MyCustomTextComponent(displayString: String) {
...
}
Slide 46
Slide 46 text
@Composable
fun MyCustomTextComponent(displayString: String) {
...
}
@Preview(name = "MyCustomTextComponent", group = "SectionHeader")
@Composables
funsMyCustomTextComponentPreview() {
MyCustomTextComponent("KotlinConf 2023")
}s
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Revised Problem Statement:
Collect all functions annotated with
@Preview and show them in a component
browser
Slide 50
Slide 50 text
Kotlin Symbol Processing (KSP)
https://kotlinlang.org/docs/ksp-overview.html
Slide 51
Slide 51 text
KSFile
packageName: KSName
fileName: String
annotations: List (File annotations)
declarations: List
KSClassDeclaration
//
class, interface, object
simpleName: KSName
qualifiedName: KSName
containingFile: String
typeParameters: KSTypeParameter
parentDeclaration: KSDeclaration
classKind: ClassKind
primaryConstructor: KSFunctionDeclaration
superTypes: List
//
contains inner classes, member functions, properties, etc.
declarations: List
KSFunctionDeclaration
//
top level function
simpleName: KSName
qualifiedName: KSName
containingFile: String
typeParameters: KSTypeParameter
parentDeclaration: KSDeclaration
functionKind: FunctionKind
extensionReceiver: KSTypeReference?
returnType: KSTypeReference
parameters: List
//
contains local classes, local functions, local variables, etc.
declarations: List
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Component Name
Slide 55
Slide 55 text
Component Name
Component Group
Slide 56
Slide 56 text
Component Name
Component Group
@Preview Function
Slide 57
Slide 57 text
data class ShowkaseBrowserComponent(
val name: String,
val group: String,
val component: @Composable () → Unit
)
Slide 58
Slide 58 text
data class ShowkaseBrowserComponent(
val name: String,
val group: String,
val component: @Composable () → Unit
)
interface ShowkaseProvider {
fun componentList() : List
}
Slide 59
Slide 59 text
class GeneratedCode: ShowkaseProvider {
override fun componentList(): List {
return listOf(
ShowkaseBrowserComponent(
...
),
ShowkaseBrowserComponent(
...
),
…
ShowkaseBrowserComponent(
...
),
)
}
}
Slide 60
Slide 60 text
class GeneratedCode: ShowkaseProvider {
override fun componentList(): List {
return listOf(
ShowkaseBrowserComponent(
...
),
ShowkaseBrowserComponent(
...
),
…
ShowkaseBrowserComponent(
...
),
)
}
}
Module 1
Slide 61
Slide 61 text
class GeneratedCode: ShowkaseProvider {
override fun componentList(): List {
return listOf(
ShowkaseBrowserComponent(
...
),
ShowkaseBrowserComponent(
...
),
…
ShowkaseBrowserComponent(
...
),
)
}
}
Module 2
Module n
.
.
.
Module 1
Slide 62
Slide 62 text
Which module has all the
dependencies?
Slide 63
Slide 63 text
@Retention(AnnotationRetention.SOURCE)
@Target(AnnotationTarget.CLASS)
annotation class ShowkaseRoot
Slide 64
Slide 64 text
@Retention(AnnotationRetention.SOURCE)
@Target(AnnotationTarget.CLASS)
annotation class ShowkaseRoot
//
Setup needed from the user of this library
@ShowkaseRoot
class MyShowkaseRoot
Slide 65
Slide 65 text
Which module has all the
dependencies?
Slide 66
Slide 66 text
Which module has all the
dependencies?
How can the root module access
previews from other modules?
Slide 67
Slide 67 text
module1
module2
module3
module4
module5
Slide 68
Slide 68 text
module1
module2
module3
module4
module5
> Task :module1:kspDebugKotlin
Slide 69
Slide 69 text
> Task :module1:kspDebugKotlin
module1
module2
module3
module4
module5
Slide 70
Slide 70 text
> Task :module1:kspDebugKotlin
> Task :module2:kspDebugKotlin
module1
module2
module3
module4
module5
Slide 71
Slide 71 text
> Task :module1:kspDebugKotlin
> Task :module2:kspDebugKotlin
module1
module2
module3
module4
module5
Slide 72
Slide 72 text
> Task :module1:kspDebugKotlin
> Task :module2:kspDebugKotlin
> Task :module3:kspDebugKotlin
module1
module2
module3
module4
module5
Slide 73
Slide 73 text
> Task :module1:kspDebugKotlin
> Task :module2:kspDebugKotlin
> Task :module3:kspDebugKotlin
module1
module2
module3
module4
module5
Slide 74
Slide 74 text
> Task :module1:kspDebugKotlin
> Task :module2:kspDebugKotlin
> Task :module3:kspDebugKotlin
module1
module2
module3
module4
module5
Slide 75
Slide 75 text
Fixed package location
com.airbnb.android.showkase
module1
module2
module3
module4
module5
Slide 76
Slide 76 text
Fixed package location
com.airbnb.android.showkase
module1
module2
module3
module4
module5
Slide 77
Slide 77 text
Fixed package location
com.airbnb.android.showkase
Metadata of previews from module 1
module1
module2
module3
module4
module5
Slide 78
Slide 78 text
Fixed package location
com.airbnb.android.showkase
Metadata of previews from module 1
module1
module2
module3
module4
module5
Slide 79
Slide 79 text
Fixed package location
com.airbnb.android.showkase
Metadata of previews from module 1
module1
module2
module3
module4
module5
Metadata of previews from module 2
Slide 80
Slide 80 text
Fixed package location
com.airbnb.android.showkase
Metadata of previews from module 1
module1
module2
module3
module4
module5
Metadata of previews from module 2
Slide 81
Slide 81 text
Fixed package location
com.airbnb.android.showkase
Metadata of previews from module 1
module1
module2
module3
module4
module5
Metadata of previews from module 2
Metadata of previews from module 3
Slide 82
Slide 82 text
com.airbnb.android.showkase
Slide 83
Slide 83 text
Fixed package location
com.airbnb.showkase
Metadata of previews from module 1
module1
module2
module3
module4
module5
Metadata of previews from module 2
Metadata of previews from module 3
Slide 84
Slide 84 text
Fixed package location
com.airbnb.showkase
Metadata of previews from module 1
module1
module2
module3
module4
module5
Metadata of previews from module 2
Metadata of previews from module 3
(Root Module)
Slide 85
Slide 85 text
Fixed package location
com.airbnb.showkase
Metadata of previews from module 1
module1
module2
module3
module4
module5
Metadata of previews from module 2
Metadata of previews from module 3
(Root Module)
Slide 86
Slide 86 text
Writing the Annotation Processor
Slide 87
Slide 87 text
class ShowkaseProcessor(
val environment: SymbolProcessorEnvironment
) : SymbolProcessor {
override fun process(resolver: Resolver): List {
return emptyList()
}
}
Slide 88
Slide 88 text
Find Symbols with
Annotation
Validate Generate Code Use Generated
Code
Slide 89
Slide 89 text
Find Symbols with
Annotation
Validate Generate Code Use Generated
Code
Slide 90
Slide 90 text
class ShowkaseProcessor(
val environment: SymbolProcessorEnvironment
) : SymbolProcessor {
override fun process(resolver: Resolver): List {
//
TODO: Step1 - Find elements with annotation
return emptyList()
}
}
Slide 91
Slide 91 text
//
Find all preview functions in the current module
resolver.getSymbolsWithAnnotation("androidx.compose.ui.tooling.preview.Preview")
Slide 92
Slide 92 text
resolver.getSymbolsWithAnnotation("androidx.compose.ui.tooling.preview.Preview")
.map { function
->
}
Slide 93
Slide 93 text
@Preview(
name = "ImageRow",
group = "Rows"
)
@Composable
fun ImageRowPreview() {
ImageRow(
...
)
}
resolver.getSymbolsWithAnnotation(
...
)
.map { function
->
}
Slide 94
Slide 94 text
@Preview(...)
@Composable
fun ImageRowPreview() {
ImageRow(...)
}
object MyPreviewsObject {
@Preview(...)
@Composable
fun ImageRowPreview() {
ImageRow(...)
}
}
class MyClass {
@Preview(...)
@Composable
fun ImageRowPreview() {
ImageRow(...)
}
}
resolver.getSymbolsWithAnnotation(
...
)
.map { function
->
}
Slide 95
Slide 95 text
resolver.getSymbolsWithAnnotation("androidx.compose.ui.tooling.preview.Preview")
.map { function
->
val previewAnnotation = function.annotations.first {
it.shortName.asString()
==
"Preview"
}
}
Slide 96
Slide 96 text
resolver.getSymbolsWithAnnotation("androidx.compose.ui.tooling.preview.Preview")
.map { function
->
val previewAnnotation = function.annotations.first {
it.shortName.asString()
==
"Preview"
}
val name = previewAnnotation.arguments.first {
it.name.asString()
==
"name"
}.value
val group = previewAnnotation.arguments.first {
it.name.asString()
==
"group"
}.value
}
Slide 97
Slide 97 text
resolver.getSymbolsWithAnnotation("androidx.compose.ui.tooling.preview.Preview")
.map { function
->
val previewAnnotation = function.annotations.first {
it.shortName.asString()
==
"Preview"
}
val name = previewAnnotation.arguments.first {
it.name.asString()
==
"name"
}.value
val group = previewAnnotation.arguments.first {
it.name.asString()
==
"group"
}.value
val wrapperClassMetadata = if (function.parentDeclaration is KSClassDeclaration){
val wrappingClass = (function.parentDeclaration as KSClassDeclaration)
wrappingClass.simpleName to wrappingClass.classKind
} else null to null
}
Slide 98
Slide 98 text
resolver.getSymbolsWithAnnotation("androidx.compose.ui.tooling.preview.Preview")
.map { function
->
val previewAnnotation = function.annotations.first {
it.shortName.asString()
==
"Preview"
}
val name = previewAnnotation.arguments.first {
it.name.asString()
==
"name"
}.value
val group = previewAnnotation.arguments.first {
it.name.asString()
==
"group"
}.value
val wrapperClassMetadata = if (function.parentDeclaration is KSClassDeclaration){
val wrappingClass = (function.parentDeclaration as KSClassDeclaration)
wrappingClass.simpleName to wrappingClass.classKind
} else null to null
}
Slide 99
Slide 99 text
resolver.getSymbolsWithAnnotation("androidx.compose.ui.tooling.preview.Preview")
.map { function
->
val previewAnnotation = function.annotations.first {
it.shortName.asString()
==
"Preview"
}
val name = previewAnnotation.arguments.first {
it.name.asString()
==
"name"
}.value
val group = previewAnnotation.arguments.first {
it.name.asString()
==
"group"
}.value
val wrapperClassMetadata = if (function.parentDeclaration is KSClassDeclaration){
val wrappingClass = (function.parentDeclaration as KSClassDeclaration)
wrappingClass.simpleName to wrappingClass.classKind
} else null to null
}
Slide 100
Slide 100 text
resolver.getSymbolsWithAnnotation("androidx.compose.ui.tooling.preview.Preview")
.map { function
->
val previewAnnotation = function.annotations.first {
it.shortName.asString()
==
"Preview"
}
val name = previewAnnotation.arguments.first {
it.name.asString()
==
"name"
}.value
val group = previewAnnotation.arguments.first {
it.name.asString()
==
"group"
}.value
val wrapperClassMetadata = if (function.parentDeclaration is KSClassDeclaration){
val wrappingClass = (function.parentDeclaration as KSClassDeclaration)
wrappingClass.simpleName to wrappingClass.classKind
} else null to null
}
MyClass
Slide 101
Slide 101 text
resolver.getSymbolsWithAnnotation("androidx.compose.ui.tooling.preview.Preview")
.map { function
->
val previewAnnotation = function.annotations.first {
it.shortName.asString()
==
"Preview"
}
val name = previewAnnotation.arguments.first {
it.name.asString()
==
"name"
}.value
val group = previewAnnotation.arguments.first {
it.name.asString()
==
"group"
}.value
val wrapperClassMetadata = if (function.parentDeclaration is KSClassDeclaration){
val wrappingClass = (function.parentDeclaration as KSClassDeclaration)
wrappingClass.simpleName to wrappingClass.classKind
} else null to null
}
MyClass
Slide 102
Slide 102 text
resolver.getSymbolsWithAnnotation("androidx.compose.ui.tooling.preview.Preview")
.map { function
->
val previewAnnotation = function.annotations.first {
it.shortName.asString()
==
"Preview"
}
val name = previewAnnotation.arguments.first {
it.name.asString()
==
"name"
}.value
val group = previewAnnotation.arguments.first {
it.name.asString()
==
"group"
}.value
val wrapperClassMetadata = if (function.parentDeclaration is KSClassDeclaration){
val wrappingClass = (function.parentDeclaration as KSClassDeclaration)
wrappingClass.simpleName to wrappingClass.classKind
} else null to null
}
MyClass
Slide 103
Slide 103 text
resolver.getSymbolsWithAnnotation("androidx.compose.ui.tooling.preview.Preview")
.map { function
->
val previewAnnotation = function.annotations.first {
it.shortName.asString()
==
"Preview"
}
val name = previewAnnotation.arguments.first {
it.name.asString()
==
"name"
}.value
val group = previewAnnotation.arguments.first {
it.name.asString()
==
"group"
}.value
val wrapperClassMetadata = if (function.parentDeclaration is KSClassDeclaration){
val wrappingClass = (function.parentDeclaration as KSClassDeclaration)
wrappingClass.simpleName to wrappingClass.classKind
} else null to null
}
MyClass ClassKind.Class or ClassKind.Object
Slide 104
Slide 104 text
resolver.getSymbolsWithAnnotation("androidx.compose.ui.tooling.preview.Preview")
.map { function
->
...
Metadata(
symbol = function,
previewName = name,
previewGroup = group,
wrapperDeclarationName = wrapperClassMetadata.first,
classKind = wrapperClassMetadata.second
)
}
Slide 105
Slide 105 text
@Retention(AnnotationRetention.SOURCE)
@Target(AnnotationTarget.FUNCTION)
annotation class ShowkaseComposable(
val name: String = "",
val group: String = "",
)
Slide 106
Slide 106 text
@ShowkaseComposable(name = "MyCustomComponent", group = "Custom")
@Preview(name = "MyCustomComponent", group = "SectionHeader")
@Composables
fun MyCustomComponentPreview() {
MyCustomComponent("KotlinConf 2023")
}
Slide 107
Slide 107 text
val previewList: List = processPreviewFunctions(
...
)
val showkasePreviewList: List = processPreviewFunctions(
...
)
Slide 108
Slide 108 text
val previewList: List = processPreviewFunctions(
...
)
val showkasePreviewList: List = processPreviewFunctions(
...
)
val consolidatedPreviewList = (showkasePreviewList + previewList)
Slide 109
Slide 109 text
val previewList: List = processPreviewFunctions(
...
)
val showkasePreviewList: List = processPreviewFunctions(
...
)
val consolidatedPreviewList = (showkasePreviewList + previewList)
.distinctBy {
it.declaration.packageName + it.wrapperDeclarationName +
it.declaration.simpleName
}
Slide 110
Slide 110 text
val previewList: List = processPreviewFunctions(
...
)
val showkasePreviewList: List = processPreviewFunctions(
...
)
val consolidatedPreviewList = (showkasePreviewList + previewList)
.distinctBy {
it.declaration.packageName + it.wrapperDeclarationName +
it.declaration.simpleName
}
.distinctBy {
it.previewGroup + it.previewName
}
Slide 111
Slide 111 text
//
Check if the current module is the root module
val rootModule = resolver.getSymbolsWithAnnotation(
ShowkaseRoot
::
class.java.name
).firstOrNull()
Slide 112
Slide 112 text
val previewList: List = processPreviewFunctions(
...
)
val showkasePreviewList: List = processPreviewFunctions(
...
)
val consolidatedPreviewList = (showkasePreviewList + previewList)
.distinctBy {
it.declaration.packageName + it.wrapperDeclarationName +
it.declaration.simpleName
}
.distinctBy {
it.previewGroup + it.previewName
}
val rootModule: KSAnnotated? = processRootAnnotation(
...
)
Slide 113
Slide 113 text
Find Elements with
Annotation
Validate Generate Code Use Generated
Code
Slide 114
Slide 114 text
Validation
Slide 115
Slide 115 text
🕵 Preview functions aren’t private
Validation
Slide 116
Slide 116 text
🕵 Preview functions aren’t private
Validation 👌 Preview functions have no non-default
parameters
Slide 117
Slide 117 text
🕵 Preview functions aren’t private
Validation 👌 Preview functions have no non-default
parameters
🧩 Only @Composable functions can be
annotated with @ShowkaseComposable
Slide 118
Slide 118 text
Find Elements with
Annotation
Validate Generate Code Use Generated
Code
Slide 119
Slide 119 text
Square/KotlinPoet
https://github.com/square/kotlinpoet
Slide 120
Slide 120 text
val consolidatePreviewList: List
Slide 121
Slide 121 text
val consolidatePreviewList: List
Slide 122
Slide 122 text
val consolidatePreviewList: List
Slide 123
Slide 123 text
val consolidatePreviewList: List
Previews from current module that’s
being processed by KSP
Slide 124
Slide 124 text
Metadata
Slide 125
Slide 125 text
Metadata
Slide 126
Slide 126 text
Metadata
Top-level Property
Slide 127
Slide 127 text
val comexamplepackagename_Rows_ImageRow: ShowkaseBrowserComponent =
ShowkaseBrowserComponent(
group = “Rows”,
name = “ImageRow”,
composable = @Composable {
ImageRowPreview()
}
)
Top-level Property
Slide 128
Slide 128 text
val comexamplepackagename_Rows_ImageRow: ShowkaseBrowserComponent =
ShowkaseBrowserComponent(
group = “Rows”,
name = “ImageRow”,
composable = @Composable {
ImageRowPreview()
}
)
Top-level Property
Package name of
preview function
Preview Name
Preview Group
Slide 129
Slide 129 text
val comexamplepackagename_Rows_ImageRow: ShowkaseBrowserComponent =
ShowkaseBrowserComponent(
group = “Rows”,
name = “ImageRow”,
composable = @Composable {
ImageRowPreview()
}
)
Top-level Property
Slide 130
Slide 130 text
val comexamplepackagename_Rows_ImageRow: ShowkaseBrowserComponent =
ShowkaseBrowserComponent(
group = “Rows”,
name = “ImageRow”,
composable = @Composable {
MyClass().ImageRowPreview()
}
)
Top-level Property
Slide 131
Slide 131 text
val comexamplepackagename_Rows_ImageRow: ShowkaseBrowserComponent =
ShowkaseBrowserComponent(
group = “Rows”,
name = “ImageRow”,
composable = @Composable {
MyObject.ImageRowPreview()
}
)
Top-level Property
Slide 132
Slide 132 text
Metadata
Top-level Property
Slide 133
Slide 133 text
Metadata
Top-level Property
Slide 134
Slide 134 text
Metadata
Top-level Property Class in fixed
package
Slide 135
Slide 135 text
package com.airbnb.android.showkase
@ShowkaseCodegenMetadata(
packageName = “com.example.packagename”,
generatedPropertyName = “comexamplepackagename_Rows_ImageRow”,
)
class ShowkaseMetadata_comexamplepackagename_Rows_ImageRow {}
Class in fixed package
Slide 136
Slide 136 text
package com.airbnb.android.showkase
@ShowkaseCodegenMetadata(
packageName = “com.example.packagename”,
generatedPropertyName = “comexamplepackagename_Rows_ImageRow”,
)
class ShowkaseMetadata_comexamplepackagename_Rows_ImageRow {}
Class in fixed package
Slide 137
Slide 137 text
package com.airbnb.android.showkase
@ShowkaseCodegenMetadata(
packageName = “com.example.packagename”,
generatedPropertyName = “comexamplepackagename_Rows_ImageRow”,
)
class ShowkaseMetadata_comexamplepackagename_Rows_ImageRow {}
Class in fixed package
Slide 138
Slide 138 text
package com.airbnb.android.showkase
@ShowkaseCodegenMetadata(
packageName = “com.example.packagename”,
generatedPropertyName = “comexamplepackagename_Rows_ImageRow”,
)
class ShowkaseMetadata_comexamplepackagename_Rows_ImageRow {}
Class in fixed package
Slide 139
Slide 139 text
package com.airbnb.android.showkase
@ShowkaseCodegenMetadata(
packageName = “com.example.packagename”,
generatedPropertyName = “comexamplepackagename_Rows_ImageRow”,
)
class ShowkaseMetadata_comexamplepackagename_Rows_ImageRow {}
Class in fixed package
Slide 140
Slide 140 text
com.airbnb.android.showkase
ShowkaseMetadata_comexamplepackagename_Rows_DisclosureRow
ShowkaseMetadata_comexamplepackagename_Rows_ActionRow
ShowkaseMetadata_comexamplepackagename_Rows_ImageRow
ShowkaseMetadata_comexamplepackagename_Inputs_TextInput
ShowkaseMetadata_comexamplepackagename_Inputs_SelectInput
ShowkaseMetadata_comexamplepackagename2_Navigation_NavBar
ShowkaseMetadata_comexamplepackagename2_Navigation_ActionFooter
C
C
C
C
C
C
C
Slide 141
Slide 141 text
val rootModule: KSAnnotated? = processRootAnnotation(…)
Slide 142
Slide 142 text
val rootModule: KSAnnotated? = processRootAnnotation(…)
if (rootModule
!=
null) {
//
This means that we are currently processing
//
the root module
}
Slide 143
Slide 143 text
Root Module
Slide 144
Slide 144 text
Root Module
Slide 145
Slide 145 text
Root Module
Aggregator Class
Slide 146
Slide 146 text
resolver.getDeclarationsFromPackage(“com.airbnb.android.showkase")
Aggregator Class
Slide 147
Slide 147 text
resolver.getDeclarationsFromPackage(“com.airbnb.android.showkase")
.filter { it is KSClassDeclaration }
Aggregator Class
Slide 148
Slide 148 text
resolver.getDeclarationsFromPackage(“com.airbnb.android.showkase")
.filter { it is KSClassDeclaration }
.map {
}
Aggregator Class
Slide 149
Slide 149 text
resolver.getDeclarationsFromPackage(“com.airbnb.android.showkase")
.filter { it is KSClassDeclaration }
.map {
val annotations = it.getAnnotationsByType(
ShowkaseCodegenMetadata
::
class
)
}
Aggregator Class
Slide 150
Slide 150 text
resolver.getDeclarationsFromPackage(
...
)
.filter { it is KSClassDeclaration }
.map {
val annotations = it.getAnnotationsByType(
ShowkaseCodegenMetadata
::
class
)
annotations.firstOrNull()
?.
let { annotation
->
GeneratedMetadata(
propertyName = annotation.generatedPropertyName,
propertyPackage = annotation.packageName,
classKind = ClassKind.CLASS,
originatingNode = it
)
}
}
Aggregator Class
Slide 151
Slide 151 text
resolver.getDeclarationsFromPackage(
...
)
.filter { it is KSClassDeclaration }
.map {
val annotations = it.getAnnotationsByType(
ShowkaseCodegenMetadata
::
class
)
annotations.firstOrNull()
?.
let { annotation
->
GeneratedMetadata(
propertyName = annotation.generatedPropertyName,
propertyPackage = annotation.packageName,
classKind = ClassKind.CLASS,
originatingNode = it
)
}
}
.filterNotNull()
.toList()
Aggregator Class
Slide 152
Slide 152 text
val rootModule: KSAnnotated? = processRootAnnotation(
...
)
if (rootModule
!=
null) {
}
Aggregator Class
Slide 153
Slide 153 text
val rootModule: KSAnnotated? = processRootAnnotation(
...
)
if (rootModule
!=
null) {
val fixedPackageMetadataList = getFixedPackageMetadata(
...
)
}
Aggregator Class
Slide 154
Slide 154 text
val rootModule: KSAnnotated? = processRootAnnotation(
...
)
if (rootModule
!=
null) {
val fixedPackageMetadataList = getFixedPackageMetadata(
...
)
val aggregatedMetadata = fixedPackageMetadataList +
currentPreviewList.map { it.toGeneratedMetadata() }
}
Aggregator Class
Slide 155
Slide 155 text
val rootModule: KSAnnotated? = processRootAnnotation(
...
)
if (rootModule
!=
null) {
val fixedPackageMetadataList = getFixedPackageMetadata(
...
)
val aggregatedMetadata = fixedPackageMetadataList +
currentPreviewList.map { it.toGeneratedMetadata() }
writeAggregatedFile(aggregatedMetadata)
}
Aggregator Class
Slide 156
Slide 156 text
class MyShowkaseRoot_ShowkaseCodegen : ShowkaseProvider {
override fun getShowkaseComponents() = listOf(
comexamplepackagename_Rows_DisclosureRow,
comexamplepackagename_Rows_ActionRow,
comexamplepackagename_Rows_ImageRow,
comexamplepackagename_Inputs_TextInput,
comexamplepackagename_Inputs_SelectInput,
comexamplepackagename2_Navigation_NavBar,
comexamplepackagename2_Navigation_ActionFooter,
)
}
Aggregator Class
Slide 157
Slide 157 text
class MyShowkaseRoot_ShowkaseCodegen : ShowkaseProvider {
override fun getShowkaseComponents() = listOf(
comexamplepackagename_Rows_DisclosureRow,
comexamplepackagename_Rows_ActionRow,
comexamplepackagename_Rows_ImageRow,
comexamplepackagename_Inputs_TextInput,
comexamplepackagename_Inputs_SelectInput,
comexamplepackagename2_Navigation_NavBar,
comexamplepackagename2_Navigation_ActionFooter,
)
}
Aggregator Class
Slide 158
Slide 158 text
val comexamplepackagename_Rows_ImageRow = ShowkaseBrowserComponent(
group = "Rows",
name = "ImageRow",
composable = @Composable {
ImageRowPreview()
}
)
Slide 159
Slide 159 text
Root Module
Aggregator Class
Slide 160
Slide 160 text
Root Module
Aggregator Class
Slide 161
Slide 161 text
Root Module
Aggregator Class Browser Intent
Slide 162
Slide 162 text
object Showkase
Browser Intent
Slide 163
Slide 163 text
fun Showkase.getBrowserIntent(context: Context): Intent {
}
Browser Intent
Slide 164
Slide 164 text
fun Showkase.getBrowserIntent(context: Context): Intent {
val intent = Intent(context, ShowkaseBrowserActivity
::
class.java)
}
Browser Intent
Slide 165
Slide 165 text
fun Showkase.getBrowserIntent(context: Context): Intent {
val intent = Intent(context, ShowkaseBrowserActivity
::
class.java)
intent.putExtra(“SHOWKASE_AGGREGATOR_FILE”,
“com.yourpackage.MyRootModule_ShowkaseCodegen”)
}
Browser Intent
Slide 166
Slide 166 text
fun Showkase.getBrowserIntent(context: Context): Intent {
val intent = Intent(context, ShowkaseBrowserActivity
::
class.java)
intent.putExtra(“SHOWKASE_AGGREGATOR_FILE”,
“com.yourpackage.MyRootModule_ShowkaseCodegen”)
return intent
}
Browser Intent
Slide 167
Slide 167 text
fun Showkase.getBrowserIntent(context: Context): Intent {
val intent = Intent(context, ShowkaseBrowserActivity
::
class.java)
intent.putExtra(“SHOWKASE_AGGREGATOR_FILE”,
“com.yourpackage.MyRootModule_ShowkaseCodegen”)
return intent
}
Browser Intent
Slide 168
Slide 168 text
fun Showkase.getBrowserIntent(context: Context): Intent {
val intent = Intent(context, ShowkaseBrowserActivity
::
class.java)
intent.putExtra(“SHOWKASE_AGGREGATOR_FILE”,
“com.yourpackage.MyRootModule_ShowkaseCodegen”)
return intent
}
//
Usage
startActivity(Showkase.getBrowserIntent(requireContext()))
Browser Intent
Slide 169
Slide 169 text
Find Elements with
Annotation
Validate Generate Code Use Generated
Code
Slide 170
Slide 170 text
class ShowkaseBrowserActivity: ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
}
}
Slide 171
Slide 171 text
class ShowkaseBrowserActivity: ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
val classKey = intent.extras.getString(“SHOWKASE_AGGREGATOR_FILE”)
}
}
Slide 172
Slide 172 text
class ShowkaseBrowserActivity: ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
val classKey = intent.extras.getString(“SHOWKASE_AGGREGATOR_FILE”)
val provider = Class.forName(classKey)
.newInstance()
}
}
Slide 173
Slide 173 text
class ShowkaseBrowserActivity: ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
val classKey = intent.extras.getString(“SHOWKASE_AGGREGATOR_FILE”)
val provider = Class.forName(classKey)
.newInstance()
val showkaseMetadata = (provider as ShowkaseProvider)
.componentList()
}
}
Slide 174
Slide 174 text
class ShowkaseBrowserActivity: ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
val classKey = intent.extras.getString(“SHOWKASE_AGGREGATOR_FILE”)
val provider = Class.forName(classKey)
.newInstance()
val showkaseMetadata = (provider as ShowkaseProvider)
.componentList()
//
Regular app from this point onwards
}
}
Slide 175
Slide 175 text
No content
Slide 176
Slide 176 text
No content
Slide 177
Slide 177 text
No content
Slide 178
Slide 178 text
No content
Slide 179
Slide 179 text
No content
Slide 180
Slide 180 text
No content
Slide 181
Slide 181 text
No content
Slide 182
Slide 182 text
No content
Slide 183
Slide 183 text
No content
Slide 184
Slide 184 text
I would like to link the
style variants of a
component together 💅
Slide 185
Slide 185 text
@Retention(AnnotationRetention.SOURCE)
@Target(AnnotationTarget.FUNCTION)
annotation class ShowkaseComposable(
val name: String = "",
val group: String = "",
)
Slide 186
Slide 186 text
@Retention(AnnotationRetention.SOURCE)
@Target(AnnotationTarget.FUNCTION)
annotation class ShowkaseComposable(
val name: String = "",
val group: String = "",
val styleName: String = "",
val defaultStyle: Boolean = false
)
Slide 187
Slide 187 text
@ShowkaseComposable(name = "Button", group = “Inputs”, defaultStyle = true)
@Composable
fun Preview_Button_Default() {
...
}
Slide 188
Slide 188 text
@ShowkaseComposable(name = "Button", defaultStyle = true)
@Composable
fun Preview_Button_Default() {
...
}
@ShowkaseComposable(name = "Button", group = “Inputs”, styleName = "Plus")
@Composable
fun Preview_Button_PlusStyle() {
...
}
@ShowkaseComposable(name = "Button", group = “Inputs”, styleName = "Lux")
@Composable
fun Preview_Button_LuxStyle() {
...
}
Slide 189
Slide 189 text
No content
Slide 190
Slide 190 text
No content
Slide 191
Slide 191 text
I would like to document
other UI Elements
as well 🌈
Slide 192
Slide 192 text
@Retention(AnnotationRetention.SOURCE)
@Target(AnnotationTarget.FIELD)
annotation class ShowkaseTypography(
val name: String = "",
val group: String = "",
)
@Retention(AnnotationRetention.SOURCE)
@Target(AnnotationTarget.FIELD)
annotation class ShowkaseColor(
val name: String = "",
val group: String = "",
)
Slide 193
Slide 193 text
@ShowkaseColor(name = "Primary Color", group = "Material Design")
val primaryColor = Color(0xFF6200EE)
@ShowkaseTypography(name = "Heading1", group = "Material Design")
val h1 = TextStyle(
fontWeight = FontWeight.Light,
fontSize = 96.sp,
letterSpacing = (-1.5).sp
)
Slide 194
Slide 194 text
val previewList: List = processPreviewFunctions(
...
)
val showkasePreviewList: List = processPreviewFunctions(
...
)
Slide 195
Slide 195 text
val previewList: List = processPreviewFunctions(
...
)
val showkasePreviewList: List = processPreviewFunctions(
...
)
val colorList: List = processColors(
...
)
val typography: List = processTypography(
...
)
Slide 196
Slide 196 text
interface ShowkaseProvider {
fun componentList(): List
}
Slide 197
Slide 197 text
interface ShowkaseProvider {
fun componentList(): List
fun colors(): List
fun typography: List
}
Slide 198
Slide 198 text
No content
Slide 199
Slide 199 text
No content
Slide 200
Slide 200 text
Quality
Slide 201
Slide 201 text
interface ShowkaseProvider {
fun componentList(): List
fun colors(): List
fun typography: List
}
Slide 202
Slide 202 text
interface ShowkaseProvider {
fun componentList(): List
fun colors(): List
fun typography: List
fun metadata(): ShowkaseElementsMetadata {
val componentList = componentList()
val colorList = colors()
val typographyList = typography()
return ShowkaseElementsMetadata(componentList, colorList, typographyList)
}
}
Slide 203
Slide 203 text
fun Showkase.getMetadata(): ShowkaseElementsMetadata {
}
Slide 204
Slide 204 text
fun Showkase.getMetadata(): ShowkaseElementsMetadata {
try {
val provider = Class.forName(
"com.example.packagename.RootModule_ShowkaseCodegen"
).newInstance() as ShowkaseProvider
return showkaseComponentProvider.metadata()
} catch(exception: ClassNotFoundException) {
error("Make sure that you have setup Showkase correctly
...
")
}
}
Slide 205
Slide 205 text
val showkaseMetadata = Showkase.metadata()
Slide 206
Slide 206 text
val showkaseMetadata = Showkase.metadata()
val components = showkaseMetadata.componentList()
val colors = showkaseMetadata.colorList()
val typography = showkaseMetadata.typographyList()
Slide 207
Slide 207 text
Having access to all UI
elements that you care
about is really
POWERFUL 💪
Slide 208
Slide 208 text
Use case:
Screenshot Testing
Slide 209
Slide 209 text
CashApp/Paparazzi
https://github.com/CashApp/Paparazzi
Slide 210
Slide 210 text
@RunWith(TestParameterInjector
::
class)
class MyPaparazziShowkaseScreenshotTest_PaparazziShowkaseTest :MyScreenshotTest() {
@get:Rule
val paparazzi: Paparazzi = providePaparazzi()
@Test
fun test_previews(
@TestParameter(valuesProvider = PaparazziShowkasePreviewProvider
: :
class)
elementPreview: PaparazziShowkaseTestPreview,
@TestParameter(valuesProvider = PaparazziShowkaseDeviceConfigProvider
: :
class)
config: PaparazziShowkaseDeviceConfig,
@TestParameter(valuesProvider = PaparazziShowkaseLayoutDirectionProvider
: :
class)
direction: LayoutDirection,
@TestParameter(valuesProvider = PaparazziShowkaseUIModeProvider
::
class)
uiMode: PaparazziShowkaseUIMode,
): Unit {
paparazzi.unsafeUpdateConfig(config.deviceConfig.copy(softButtons = false))
takePaparazziSnapshot(paparazzi, elementPreview, direction, uiMode)
}
private object PaparazziShowkasePreviewProvider : TestParameter.TestParameterValuesProvider {
override fun provideValues(): List {
val metadata = Showkase.getMetadata()
val components = metadata.componentList.map(
::
ComponentTestPreview)
val colors = metadata.colorList.map(
:
:
ColorTestPreview)
val typography = metadata.typographyList.map(
: :
TypographyTestPreview)
return components + colors + typography
}
}
private object PaparazziShowkaseDeviceConfigProvider : TestParameter.TestParameterValuesProvider {
override fun provideValues(): List = deviceConfigs()
}
private object PaparazziShowkaseLayoutDirectionProvider :
TestParameter.TestParameterValuesProvider {
override fun provideValues(): List = layoutDirections()
}
private object PaparazziShowkaseUIModeProvider : TestParameter.TestParameterValuesProvider {
override fun provideValues(): List = uiModes()
}
}
Slide 211
Slide 211 text
@RunWith(TestParameterInjector
::
class)
class MyPaparazziShowkaseScreenshotTest_PaparazziShowkaseTest: MyScreenshotTest() {
@get:Rule
val paparazzi: Paparazzi = providePaparazzi()
@Test
fun test_previews(
@TestParameter(valuesProvider = PaparazziShowkasePreviewProvider
::
class)
elementPreview: PaparazziShowkaseTestPreview,
@TestParameter(valuesProvider = PaparazziShowkaseDeviceConfigProvider
::
class)
config: PaparazziShowkaseDeviceConfig,
@TestParameter(valuesProvider = PaparazziShowkaseLayoutDirectionProvider
::
class)
direction: LayoutDirection,
@TestParameter(valuesProvider = PaparazziShowkaseUIModeProvider
::
class)
uiMode: PaparazziShowkaseUIMode,
): Unit {
paparazzi.unsafeUpdateConfig(config.deviceConfig.copy(softButtons = false))
takePaparazziSnapshot(paparazzi, elementPreview, direction, uiMode)
Slide 212
Slide 212 text
@RunWith(TestParameterInjector
::
class)
class MyPaparazziShowkaseScreenshotTest_PaparazziShowkaseTest: MyScreenshotTest() {
@get:Rule
val paparazzi: Paparazzi = providePaparazzi()
@Test
fun test_previews(
@TestParameter(valuesProvider = PaparazziShowkasePreviewProvider
::
class)
elementPreview: PaparazziShowkaseTestPreview,
@TestParameter(valuesProvider = PaparazziShowkaseDeviceConfigProvider
::
class)
config: PaparazziShowkaseDeviceConfig,
@TestParameter(valuesProvider = PaparazziShowkaseLayoutDirectionProvider
::
class)
direction: LayoutDirection,
@TestParameter(valuesProvider = PaparazziShowkaseUIModeProvider
::
class)
uiMode: PaparazziShowkaseUIMode,
): Unit {
paparazzi.unsafeUpdateConfig(config.deviceConfig.copy(softButtons = false))
takePaparazziSnapshot(paparazzi, elementPreview, direction, uiMode)
}
private object PaparazziShowkasePreviewProvider :
TestParameter.TestParameterValuesProvider {
Slide 213
Slide 213 text
@TestParameter(valuesProvider = PaparazziShowkaseUIModeProvider
::
class)
uiMode: PaparazziShowkaseUIMode,
): Unit {
paparazzi.unsafeUpdateConfig(config.deviceConfig.copy(softButtons = false))
takePaparazziSnapshot(paparazzi, elementPreview, direction, uiMode)
}
private object PaparazziShowkasePreviewProvider :
TestParameter.TestParameterValuesProvider {
override fun provideValues(): List {
val metadata = Showkase.getMetadata()
val components = metadata.componentList.map(
::
ComponentTestPreview)
val colors = metadata.colorList.map(
::
ColorTestPreview)
val typography = metadata.typographyList.map(
::
TypographyTestPreview)
return components + colors + typography
}
}
private object PaparazziShowkaseDeviceConfigProvider :
TestParameter.TestParameterValuesProvider {
override fun provideValues(): List = deviceConfigs()
}
Slide 214
Slide 214 text
Wouldn’t it be amazing if
I didn’t have to write all
this code that you
showed me today 🧘
Slide 215
Slide 215 text
Showkase
https://github.com/airbnb/Showkase
Slide 216
Slide 216 text
Showkase
https://github.com/airbnb/Showkase
Slide 217
Slide 217 text
No content
Slide 218
Slide 218 text
No content
Slide 219
Slide 219 text
No content
Slide 220
Slide 220 text
Summary
Slide 221
Slide 221 text
🔨 KSP needs to be in every engineer’s arsenal
Summary
Slide 222
Slide 222 text
🔨 KSP needs to be in every engineer’s arsenal
Summary 🧩 Keep composability in mind when building
UI infrastructure
Slide 223
Slide 223 text
🔨 KSP needs to be in every engineer’s arsenal
Summary 🧩 Keep composability in mind when building
UI infrastructure
😉 Don’t reinvent the wheel, use Showkase
Slide 224
Slide 224 text
Thank you,
and don’t forget
to vote
@
VinayGaba
KotlinConf’23
Amsterdam