Compose For Web 0.5.0-build222

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

0.5.0-build222

v0.5.0-build222

Update examples to 0.5.0-build221

0.5.0-build221

v0.5.0-build221

Simplify assignment signatures in CSS properties

0.5.0-build220

v0.5.0-build220

Simplify assignment signatures in CSS properties

0.5.0-build219

v0.5.0-build219

CSS units API is CSSOM-agnostic and supports homogenous arithmetic op…

0.5.0-build218

v0.5.0-build218

CSS units API is CSSOM-agnostic and supports homogenous arithmetic op…

Compose for Web 0.0.0-web-dev-14

0.0.0-web-dev-14 is built against Kotlin 1.5.10

We've again introduced breaking changes to the DOM API.

Changes in DOM API

Packages renamed

For consistency we've renamed all packages in following fashion:

• androidx.compose.web → org.jetbrains.compose.web
• androidx.compose.web.elements → org.jetbrains.compose.web.dom

Yep, we've colored your projects red, we apologize for any inconvenience you can possibly experience.
Changes of this kind are definitely not something we are going to annoy you with in future.
Basically, it's need to be done once.

style parameter is no more, use attrs instead

This change can be quite annoying since IDE won't be able to suggest quickfixes of any kind.
Manually, though, the changes one need to introduce very straightforward:

0.0.0-web-dev-13	0.0.0-web-dev-14
Div(attrs = {}, style = { padding(15.px) })	Div(attrs = { style { padding(15.px) } })
...	Div(attrs = { styleBuilder.padding(15.px) })

Simplification of signatures is the reason why we've decided to move in this direction.
Direct styling is important but still definitely not something we should prioritize as something that is used / called equally often
as anything like attribute assignment and adding events. Apart from this, with new syntax it's easier to share context between events, styles and attributes.

classes builder has been removed

Previously, it was possible to add classes using a builder:

Div(attrs = {
    classes { // This is not possible since 0.0.0-web-dev-14
         +"class1"
         +"class2" 
         if (addClass3) +"class3"
   }
})

Since, starting from 0.0.0-web-dev-13 classes calls behave cumulatively, such builder became actually redundant.
After discussing this issue with community, we've decided to retire this construction. Long live, classes builder!
Use classes(...) function, it is enough for all your needs:

Div(attrs = {
    classes("class1", "class2")
    if (addClass3) classes("class3")
})

All DOM creation elements can omit content

We've made content nullable so that one won't need to create empty builders instead.

0.0.0-web-dev-13	0.0.0-web-dev-14
Span() {}	Span()

Other recent updates:

• https://github.com/JetBrains/compose-jb/tree/master/examples/web-with-react - a couple of examples where Compose and React work together

0.4.0

• New experimental Composable Window API
• Tooltips
• Use Metal renderer for macOS by default
• Expose a swing mouse event in Modifier.pointerInput
• Improved keyboard support in TextField
• Avoid forcing discrete GPU on multi-GPU MacOS machines in Skiko and native distributions
• Make DropdownMenu focusable by default
• Scrollbar. get rid of itemCount and averageItemSize from rememberScrollbarAdapte
• Support scrollbars for LazyColumn with reverseLayout = true
• Fix memory leak
• Fix Scroll NaN rounding bug, desktop version
• Fix Dragging prevents pointer move events
• Fix Dragging window to another display makes Icon show up incorrectly
• Fix "Padding must be non-negative" after resizing window with Slider and Box

0.4.0-rc3

v0.4.0-rc3

[build] Simplify module creation in web

0.4.0-rc2

v0.4.0-rc2

[web] Remove classes builder version from API