varabyte/kobweb v0.13.6

on GitHub

The biggest change in this release is the introduction of type-safe CSS grid builders.

The CSS grid spec is a beast, so thanks for your patience as we experimented with how best to migrate this over to Kotlin. If you try using this feature, feedback is appreciated!

As usual with Kotlin-idiomatic APIs, you add a bit of verbosity in exchange for compile-time verified, type-safe APIs.

// Before
Box(Modifier.gridTemplateColumns("minmax(0, 1fr) min-content 100px"))

// After
Box(Modifier.gridTemplateColumns { minmax(0.px, 1.fr); size(minContent); size(100.px) })

To get the image example rendered above, you can declare a grid modifier like so:

Div(Modifier.size(200.px).grid {
   cols { size(1.fr); size(50.px); } // 2 cols
   rows { size(50.px); size(1.fr); } // 2 rows
   // "auto" sizes are used for cells outside of the normal grid range
   auto { col(30.px); row(20.px) } 
}.toAttrs()) {
   Box(Modifier.gridItem(1, 1).backgroundColor(Colors.Red))
   Box(Modifier.gridItem(1, 2).backgroundColor(Colors.Blue))
   Box(Modifier.gridItem(2, 1).backgroundColor(Colors.Green))
   Box(Modifier.gridItem(2, 2).backgroundColor(Colors.Yellow))
   // (3, 3) is outside the core grid range and thus uses auto sizing
   Box(Modifier.gridItem(3, 3).backgroundColor(Colors.Magenta))
}

If you are new to CSS grids, here is one of the better resources online to help you understand them: https://css-tricks.com/snippets/css/complete-guide-grid/

A huge thanks to @DennisTsar for his help both with initiating grid support and then working with me exhaustively to iterate on it. This feature exists in this release because of his efforts.

Silk

• New type-safe grid modifiers!
• Renamed displayIf to displayIfAtLeast, for readability and to prevent confusion
  • e.g. displayIfAtLeast(Breakpoint.MD) better conveys this will apply to larger screens too

Frontend

• Added new Svg and Path composables.
  • See Svg header docs for example usage.
• Added a handful of Kotlin-idiomatic overloads / convenience methods for setTimeout / setInterval.
  • The kobweb versions put the lambda parameter in the last position. Old: setTimeout({ ... }, 100) New:setTimeout(100) { ... }
  • Also introduced invokeLater { ... } as a convenient way to call setTimeout(0) { ... } which postpones the action to the next browser event loop
  • Also introduced invokeThenInternval as a convenient way to invoke an action immediately and then repeatedly on a timer after that point (a somewhat common pattern that normally requires a bit of boilerplate).
  • All these methods also return a handle which can be used to cancel the repeated action later:

    val handle = setTimeout(2000) { ... run 2s later ... }
    // or: val handle = setInterval(100) { ... run every 100ms ... }
    // Later:
    handle.cancel()
    

• New numericAuto property which you can pass "auto" into any method which accepts a CSSNumeric value (such as 10.px, 5.cssRem, etc.)
  • Using this requires some care as there are some places that accept numeric values but not "auto", which will then fail silently. Please confer with CSS docs when using this property.

Gradle

• Made some caching (and other misc) improvements to Kobweb Gradle tasks, which may improve caching behavior for your project.
• The Gradle application plugin will now warn you if you don't define any routes or a root route

Full Changelog: 0.13.5...0.13.6