varabyte/kobweb v0.13.8

on GitHub

Silk

• SimpleGrids are now unlocked! They no longer have a restriction on the max number of columns.

  • A new approach, using CSS variables, let us avoid using one hardcoded style per number of columns.

  • SimpleGrid(numColumns(10)) {
        repeat(30) {
            Box(Modifier.size(50.px).backgroundColor(Color.Companion.rgb(Random.nextInt())))
        }
    }

    

• (Backwards incompatible) Grid builders now use a new way to name lines.

  •  // Before
     Grid { cols { size(100.px).named("before", "after")
     // After
     Grid { cols { lineNames("before"); size(100.px); lineNames("after")

  • The new style has three advantages.
    1. They better represent the model of what grids are actually doing. (You name lines around a track, you don't name a track itself)
    2. It is clearer that you can give one line multiple names, e.g. lineNames("header-end", "content-start")
    3. It makes it easier to add line names conditionally: lineNames("content-end"); if (showFooter) { lineNames("footer-start")

• You can now use numbers and strings as StyleVariable types.

  val MyWidgetWidth by StyleVariable<CSSLengthValue>() // Same as before
  val MyWidgetColor by StyleVariable<CSSColorValue>() // Same as before
  val MyWidgetFontSize by StyleVariable<Int>() // NEW!
  val MyWidgetFontFamily by StyleVariable<String>() // NEW!

Frontend

• New EventListenerManager class, which you can use to add a bunch of event listeners to some target HTMLElement and clear them later.

  •  // Before (potentially leaking listeners, if the element lives much longer than the code adding the listeners)
     element.addEventListener("mouseenter") { ... }
     element.addEventListener("mouseleave") { ... }
    
     // Before (manually cleaning up listeners)
     val onMouseEnter = EventListener { ... }
     val onMouseLeave = EventListener { ... } 
     element.addEventListener("mouseenter", onMouseEnter)
     element.addEventListener("mouseleave", onMouseLeave)
     onDispose {
        element.removeEventListener("mouseenter", onMouseEnter)
        element.removeEventListener("mouseleave", onMouseLeave)
     }
    
     // After (manager cleans up listeners)
     val listenerManager = EventListenerManager(element)
     listenerManager.addEventListener("mouseenter") { ... }
     listenerManager.addEventListener("mouseleave") { ... }
     onDispose { listenerManager.clearAllListeners() }

All the grid changes were brought to you by @DennisTsar (while I've been busy with Kotter and Websocket WIP stuff). Thanks as always!

Full Changelog: v0.13.7...v0.13.8