varabyte/kobweb v0.11.8

on GitHub

The biggest feature in this new release is support for animation keyframes using Kobweb's Modifier concept. For example, you can now do this:

val Bounce by keyframes {
  from { Modifier.translateX((-50).percent) }
  to { Modifier.translateX((50).percent) }
}

// Later
Box(
  Modifier
    .animation(Bounce.toAnimation(
      duration = 2.s,
      timingFunction = AnimationTimingFunction.EaseIn,
      direction = AnimationDirection.Alternate,
      iterationCount = AnimationIterationCount.Infinite
  )
) { ... }

Silk

• Add support for defining keyframes and declaring animations via Modifier.
  • You can also declare keyframes manually using an @InitSilk annotated method and calling ctx.stylesheet.registerKeyframes(...)
• (Potentially backwards incompatible) The Button#onClick callback parameter now provides a SyntheticMouseEvent argument. This lets you check if any modifier keys (e.g. ctrl/alt/shift) are being pressed.
  • If you get a compile error, change code like this: onClick = ::clickHandler to this onClick = { clickHandler() }
• Added more options for width and height modifiers via the new Width and Height css classes, e.g. Modifier.width(Width.FitContent)
• Tweaked Popup implementation so you can now create a popup with the mouse already over the element that triggers the popup.
  • For example, you can now show a tooltip in response to clicking on a button:

    var showTooltip by remember { mutableStateOf(false) }
    Button(
       onClick = { handleCopy(); showTooltip = true },
       Modifier.onMouseLeave { showTooltip = false }
    ) { Text("Copy") }
    if (showTooltip) {
       Tooltip(ElementTarget.PreviousSibling, "Copied!")
    }
    

• Refactored the location of where Silk initialization code lives, e.g. the InitSilk annotation. Old code should still work for now but you may get deprecation warnings suggesting you change your import locations.

Gradle

• Fixed an issue with export sometimes causing OOM events when building a Kobweb project.
  • This was because dev and prod builds could happen at the same time before. After preventing this, exports take a bit longer, but it feels a lot safer to not have two related compiles happening at the same time.