Jetpack Compose

[lxsmnsyc]

Although not a DSL, Jetpack Compose introduces an interesting approach into UI composition.

Example component/widget:

@Composable
fun HelloContent() {
   Column(modifier = Modifier.padding(16.dp)) {
       Text(
           text = "Hello!",
           modifier = Modifier.padding(bottom = 8.dp),
           style = MaterialTheme.typography.h5
       )
       OutlinedTextField(
           value = "",
           onValueChange = { },
           label = { Text("Name") }
       )
   }
}

Jetpack Compose uses the following DSL structure:

MyComponent(attribute = value) {
  children()
}

which is similar to JS:

MyComponent({ attribute: value })(() => {
  children()
})

Jetpack Compose utilizes the concept of named parameters for passing attributes, however when constructing children, it's quite different. Instanciation of components are very much like in SolidJS, the difference only is that components in Jetpack Compose are "side-effects" such that they can be arbitrarily called in the component's function body at the same time as the children's function body. With this in mind, things like if..else and for..of is normally used to render the components

@Composable
fun NumberList(numbers: List<Int>) {
  Column {
    for (number in numbers) {
      ListItem(value = number)
    }
  }
}

You can explore more example comparisons with React here: https://tigeroakes.com/posts/react-to-compose-dictionary/