0.5.0-build262

• Support Kotlin 1.5.21

0.5.0-build253

v0.5.0-build253

Use max/minWidth/Height call in samples

0.5.0-build245

v0.5.0-build245

Update Compose (#882)

0.5.0-build243

v0.5.0-build243

Basic support for border-width in CSS API

0.5.0-build235

Preview toolwindow improvements (#854)

* Activate preview toolwindow on receiving preview configuration

* Don't show preview toolwindow until a preview is requested

* Add icon to preview toolwindow

0.5.0-build229

v0.5.0-build229

Update Compose

Compose for Web 0.5.0-build228

The main topic of the 0.5.0-build228 web update is Input and its onInput {} event listener.

Although, it brings some breaking changes, they are rather minor and can be easily fixed. Let's have look:

Input doesn't have parameter value anymore:

before	0.5.0-build228
Input(type = InputType.Text, value = "some value", attrs = {})	Input(type = InputType.Text, attrs = {})

If you need to use Input(...) and need to set value, then it's possible to do using attrs { value("string value") }

To help with the limitation mentioned above, we added a set of functions for different Input types.

Every function has a parameter attrsBuilder = {}, but it's omitted here for brevity.

• CheckboxInput(checked = true)
• DateInput(value = "2021-10-10")
• DateTimeLocalInput(value="1986-01-28T11:38:00.01") Have a look at Date and time formats
• EmailInput(value = "name@mail.com")
• FileInput(value = pathToFile)
• HiddenInput(attrsBuilder = {})
• MonthInput(value = "2017-06")
• NumberInput(value = 0, min = 0, max = 100)
• PasswordInput(value = password)
• RadioInput(checked = true)
• RangeInput(value = 0, min = 0, max = 100, step = 1)
• SearchInput(value = "search term")
• SubmitInput()
• TelInput(value = "0123456789")
• TextInput(value = "text")
• TimeInput(value = "12:20")
• UrlInput(value = "https://google.com")
• WeekInput(value = "2017-W01")

We updated onInput {} event handler.

• First of all, it uses a new type SyntheticInputEvent that provides value typed according to the InputType.
• SyntheticInputEvent also gives a direct access to the target: HTMLElement and nativeEvent: Event.
• Ideally one wouldn't need to use neither target nor nativeEvent directly, as SyntheticInputEvent has all properties and methods available in Web/API/Event. Please let us know if you need to use target or nativeEvent directly, as it will help us improve the API.

TextInput({
     onInput { syntheticInputEvent -> syntheticInputEvent.value } // value is of type 'String' for TextInput
})
CheckboxInput({
     onInput { syntheticInputEvent -> syntheticInputEvent.value } // value is of type 'Boolean' for CheckboxInput
})

Old event handlers for Input are deprecated:

Deprecated: onRangeInput, onRadioInput, onCheckboxInput, onTextInput
Replace by: onInput {} - it is sufficient to replace all of deprecated input event listeners

The weird thing about old event listener (onRangeInput, onRadioInput, etc.) is the fact they can be used in the Input of any InputType (it's obviously error prone). We recommend to migrate to onInput {} as soon as possible, as we plan to remove deprecated functions next release.

Moreover it was possible to use onInput, onRangeInput, onRadioInput, etc. in the attrs scope of any element. That's not the case anymore. onInput {} belongs to Input and TextArea elements, and they can be used only within their scopes now.

If you still need to handle input events on some containers or parent elements, then it's possible by setting an event listener manually as described in the tutorial Events handling in Compose Web If you do so, then please let us know about your use case. Your feedback is very useful and helps us improving the API.

Fixed issues:

• #765 - ClassCastException with native event when using autocomplete
• #635 - Web: DateInput onInput: Event is not InputEvent

0.5.0-build228

v0.5.0-build228

Dispose web drivers after selenium tests

0.5.0-build227

v0.5.0-build227

Update CHANGELOG.md after releasing 0.5.0-build226

Compose for Web 0.5.0-build226

❗This release can break your code if you are using empty lambdas in default params❗

Some changes had been introduced to the common part of compose compiler plugin. While changes are completely correct, they turned out to affect some runtime functionality in the JS target. We apologize for this and currently working both on fix and on introducing more rigorous testing procedures.

Basically, in 0.5.0-build226 this code will break in runtimes:

@Composable
fun Something(handler: () -> Unit = {}) { ... }

The temporary workaround would be to use nullables instead:

@Composable
fun Something(handler: (() -> Unit)? = null) { ... }

Again, we apologize for this and will release fix ASAP.
The silver lining however is that this nullable approach will lead to slightly smaller JavaScript files generated.

Apart from this bug, this release does not introduce any mind-boggling API changes ;)
However. it's still worth to mention

Smarter arithmetic operations in CSS API

Starting with this release you can apply arithmetic operations to heterogenous CSS values and CSS variables - the resulting value would be a calc:

   Div({
      style { 
          top(100.px + 2.percent)   // top value will be resolved as calc(100px + 2%)
          bottom(4 * variables.pxVar.value(4.px)) // bottom value will be resolved as calc(4 * var(--pxVar, 4px))
      }
   })

This week in Compose for Web

No UI framework can be considered mature enough till someone writes a Flappy Bird using it. Well, guess what, @theapache64 just did exactly that - using a very elegant minimalistic approach - and was kind enough to allow us to add this game to our collection of web examples.

Well, that's basically it. All is left is to thank yet another time our regular contributor @hfhbd for noticing and fixing small inconsistency in our html API - #783.

PS We promise to be more productive as soon as Euro 2020 will be over..