Function name hints at lambda's closing braces


#1

This post is a suggestion for a Kotlin+IntelliJ feature. It tries to solve what I call the “lambda braces hell”. Scroll to the end of the following real-world demo of using kotlinx.hmtl to see the problem:

class RecentAdvertsTemplate {
  fun render(model: RecentAdvertsModel): BODY.() -> Unit = {
    h1 { +model.h1Label }

    div(classes = "teaserBox") {
      img(src = model.teaserImage.imgUrl)

      p { +model.teaserText }
    }

    div(classes = "advertsList") {
      model.adverts.forEach { advert ->
        div(classes = "advertItem") {
          h2 { link(advert.linkedSubject) }

          if (advert.images.isNotEmpty()) {
            div(classes = "advertImageBox") {
              advert.images.forEach { image ->
                image(image)
              }
            }
          }

          p { +advert.bodyTeaser  }

          div {
            span(classes = "advertDate") {
              +advert.date
            }

            advert.price?.let { price ->
              span(classes = "advertPrice") {
                +price
              } //lambda braces hell starts here:
            }
          }
        }
      }
    }
  }
}

That’s not very nice to read. My suggestion is to let IntelliJ show function name hints at the position of closing lambda braces. Something like in the following code:

class RecentAdvertsTemplate {
  fun render(model: RecentAdvertsModel): BODY.() -> Unit = {
    h1 { +model.h1Label }

    div(classes = "teaserBox") {
      img(src = model.teaserImage.imgUrl)

      p { +model.teaserText }
    } //div

    div(classes = "advertsList") {
      model.adverts.forEach { advert ->
        div(classes = "advertItem") {
          h2 { link(advert.linkedSubject) }

          if (advert.images.isNotEmpty()) {
            div(classes = "advertImageBox") {
              advert.images.forEach { image ->
                image(image)
              }
            } //div
          }

          p { +advert.bodyTeaser  }

          div {
            span(classes = "advertDate") {
              +advert.date
            } //span

            advert.price?.let { price ->
              span(classes = "advertPrice") {
                +price
              } //span
            } 
          } //div
        } //div
      } 
    }//div
  }
}

These hints could be displayed for functions that are marked with a DSL marker annotation. Or there could be an additional annotation that triggers these hints.


Feature Request: Remove Curly Brackets
#2

I like the idea, but why not display the hint for any function. Maybe display the hint if there are x lines between the opening and closing braces.


#3

That’s also a valid idea. Ideally it should be configurable in settings. But frankly, I would take any of those solutions.


#4

At least, IDEA can show vertical indent guides and highlight matched pair.

Also IMHO, indent by 2 spaces is too small to be readable…


#5

I am using the indent lines already. They are great.


#6

Maybe this forum is the wrong place to make this suggestion. I searched for an official IntelliJ forum, and couldn’t find any.


#7

I guess you could just add a feature request at their issue tracker.


#8

I did https://youtrack.jetbrains.com/issue/KT-24927