github JetBrains/compose-multiplatform 0.5.0-build220-web
Compose For Web 0.5.0-build222

latest releases: v1.6.10-rc01, v1.6.10-beta03, v1.6.10-dev1613...
pre-release2 years ago

We've aligned our versioning with the Compose for Desktop

That's why it's 0.5.0-build222! This number should not mislead you - we are still in pre-alpha stage and there's long (but amusing!) road aside.

However from now on there won't be no more confusion cause by differences in artifacts published alongside with Web and Desktop - because there's no more such thing like separate Web publication.

Changes in DOM and CSS API

At early stages we've chosen for CSS interop the CSSOM which is supported in Chrome and for the rest of the browsers we've used polyfill. This actually caused us less troubles than we anticipated (many thanks to the css-typed-om project) however we've decided not to move in this direction. There are three main reasons for this. First, the very nature of this approach requires more dedication for the cross-platform testing. Second, CSSOM per se even in Chrome is not something that is fully implemented and covers everything. Last, but not least, CSSOM for obvious reasons is JS-centric, not all js idioms and design patterns are best fit for Kotlin/JS, and we want to create ecosystem where one will be able to use to full extent all the possibilities Kotlin allows us to use.

That said, we gradually removing CSSOM layer but you most likely won't notice this changes at all - the CSS API users are using mostly hadn't changed so far. Mostly, but there are still things to mention.

Arithmetic operations for homogenous CSS units

Starting from 0.5.0-build222 one can just do something like this:

Div({
   style {
         val a = 5.px
         top(a)
         left(a + 2.px)
   } 
})

You can multiply any numeric CSS unit value by number or you can add and substract values with the same unit.
That said, you can not combine , say pixels and ems - just don't do it ) Right now such attempt will end with quite meaningless result - but we are actually designing the right behavior to deliver you such possibility in next release. Our idea is that in "heterogenous" cases we'll return expression wrapped in calc.

Simplifying API for setting CSS properties directly

While settings properties (and variables to that matter) in StyleBuilderContext there's no need to make any conversions for Strings, Numbers and CSS Units. We actually had not one but three ways to do that previously - because, you know, three devs are working on Compose for Web ;)

0.0.0-web-dev-14 0.5.0-build222
property("box-sizing", value("border-box")) property("box-sizing", "border-box")
property("margin-left", StylePropertyValue(4.px) property("margin-left", 4.px)
property("margin-left", 4.px.asSylePropertyValue() property("margin-left", 4.px)

Those are apparently breaking changes but we believe it's obvious why it was justified )

Hopefully in foreseeable future in 99 percent of cases you won't need to write "raw" css properties since API will got it all covered.
Oh, speaking of API we also renamed rem unit to cssRem because, as you most probably know, rem is used in Kotlin for different purposes.

Remove possibility to add content to the HTML Elements that are not allowed to have such content

Many, many thanks to our contributor @hfhbd who managed to this week actually contribute three times!

  • #741 - add Hr Element
  • #742 - fix Option usage in Select Element
  • #745 - remove content builder for empty elements

Don't miss a new compose-multiplatform release

NewReleases is sending notifications on new releases.