v0.18.1

[bitspittle]

This release is a grab bag of miscellaneous features, including the addition of the long requested spacedBy arrangement method for Row and Column layouts (which comes thanks to a contribution from the community via @rafaeltonholo!). This release also features a handful of Markdown and CSS API fixes.

Important

Planning to upgrade? Review instructions in the README.

Note

Users are asking us when K2 support is going to land, but we are currently blocked due to a pretty major incremental compilation issue. You can learn more here and here. We are keeping a close eye on it and will support K2 as soon as we can!

Changes

Frontend

• New spacedBy arrangement support
  • See notes below for more information
• The boxShadow modifier can now take multiple shadow values
• Add transformBox, transformOrigin, and transformStyle modifiers
• Add overscrollBehavior modifier.

Silk

• Support for CSS layers

  • Read more about the feature in the README
  • Support for CSS layers was actually quietly introduced in 0.18.0 but not officially announced, since we wanted a bit of time to battle test the API first

• You can now pass in a callback letting you configure the look and feel of TOC header links

• Added new descendants and children utility methods for use inside CssStyle

  • For example, CssStyle { children("div", "span") { /* ... */ } } which is more expressive and easier to remember than cssRule(" > :is(div,span)")

• Link and Anchor widgets now accept an optional updateHistoryMode parameter

  • This is useful if you want a link to replace the current page rather than visit it (in other words, if you want to change the behavior when you press the "back" button)

• ⚠️ Renamed onTextChanged to onTextChange and onValueChanged to onValueChange for relevant Silk widgest

  • This brings our naming in line with how Jetpack Compose names its callbacks. Apologies for catching it so late.

Markdown

• You can now nest Kobweb Call blocks, supporting Kobweb code calling Kobweb code.
• Fixed logic issue in markdown that was preventing markdown context from being created in certain situations.
• Fixed a case where multiline markdown text had newlines getting swallowed

Backend

• Cleaned up logic around detecting routes that represent routes vs. files
  • For example, we no longer erroneously detect 1.0.0 in https://site.com/path/to/1.0.0 as a file with a .0 extension.

Notes

spacedBy

In HTML / CSS, the normal way to put space between elements in a row, column, or table layout is using the gap CSS style, which we have actually recommended for the last two years. However, with spacedBy, you can now use that instead:

// Using gap
Row(Modifier.columnGap(2.cssRem)) { /* ... */ }

// Using spacedBy
Row(horizontalArrangement = Arrangement.spacedBy(2.cssRem)) { /* ... */ }

The spacedBy method can also take optional alignment parameters. Read the official Jetpack Compose documentation for more information about these new APIs.

Constructing Background, Transition, and Animation CSS style properties

Over the past year, we have been building up a consistent vocabularly for how we want our CSS style classes to behave.

A very common pattern that has emerged is the CssStyleClass.of(...) helper method, which is a useful way to construct many CSS style classes that have complex parameters.

For Background, Transition, and Animation classes, however, since those classes already had (incomplete) definitions inside Compose HTML, we extended them by introducing our own CSSBackground, CSSTransition, and CSSAnimation data classes.

We have since come to the conclusion that this is pretty inconsistent and confusing, so in this release, Kobweb has introduces its own Background, Transition, and Animation classes. Constructing them is now consistent with all other CSS styles.

This may result in you getting deprecation warnings to migrate code over. Fixing it should be relatively straightforward, as in the following code:

-import com.varabyte.kobweb.compose.css.CSSTransition
+import com.varabyte.kobweb.compose.css.Transition

-CSSTransition("color", 50.ms))
+Transition.of("color", 50.ms))

Gradle

We have been hard at work getting Kobweb tasks to play nicer with the Gradle configuration cache. Our changes so far have all been implementation fixes that will be invisible to users, but we may need to deprecate / migrate some APIs in near future releases.

Thanks

This release we enjoyed first-time submissions from user @rafaeltonholo 🎉

They provided excellent PRs for the boxShadow and spacedBy changes. They also helped us identify inconsistencies in our codebase that we spent time tightening up.

Thank you Rafael for your contributions!

---

Full Changelog: v0.18.0...v0.18.1

---

This discussion was created from the release v0.18.1.