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 = "[email protected]")
• 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..

v0.5.0-build226

Desktop

Breaking changes in Composable Window API

• Window(onCloseRequest=) is required parameter now
• WindowState.isMaximized, WindowState.isFullscreen are merged to WindowState.placement { Floating, Maximized, Fullscreen }
• WindowPosition is sealed class { PlatformDefault, Aligned, Absolute }, initialAlignment removed from Window/Dialog

Compose for Web 0.5.0-build225

Changes in API

More HTML tags available from the box:

• Content sectioning: Address, Article, Aside, Header
• Multimedia: Area, Audio, HTMLMap (<map>), Track, Video
• Form: Datalist, Fieldset, Legend, Meter, Output, Progress
• Embedded: Embed, Iframe, Object, Param, Picture, Source

The attr method no longer accepts nullable values (breaking)

Null values were used only to tell API to skip attribute assignment at all. The other, closely related, change is that

Boolean attributes no longer accept Boolean flag as parameter (breaking)

before	0.5.0-build225
attrs { disabled(value = isDisabled) }	attrs { if (isDisabled) disabled() }

The change affects the following attributes: autoFocus, disabled, formNoValidate, autoComplete, noValidate, autoComplete, checked, multiple, readOnly, selected, required.

The thing is that whenever we wrote code like this

Button({ disabled(false) })

it takes some mental effort to realize that this attribute was just not added at all. This is rather tricky (and non-idiomatic) way not to add an attribute. So, we've decided to just, well, not call anything in such cases.

Tag interface has been removed (breaking)

If you haven't extended any DOM entities you can just skip this section, these changes won't affect you.

Initially, we introduced the Tag interface to separate attribute scopes (so that one, for instance, won't call href on div etc.).
Having hard times with CSSOM, we just weren't sure that the standard DOM API provided in browsers would be sufficient for our purposes.

However, now we are lucky enough to acknowledge that we can rely completely on standard DOM types hierarchy.

If you have some tags declared in your code, just choose HTMLElement subtype that you will use as context:

before	0.5.0-build225
fun AttrsBuilder<Tag.A>.href(value: String?) = attr("href", value)	fun AttrsBuilder<HTMLAnchorElement>.href(value: String) = attr("href", value)

This week in Compose for Web

We've decided to add small section on news about the ecosystem.
We are very excited to see some project build upon Compose for Web.
Here are the most recent contributions announced at #compose-web channel:

• Compose Chrome extension template by @theapache64
• The experimental routing library for compose-web by @hfhbd

Thank you, #compose-web community!