Releases: JetBrains/compose-multiplatform
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 formatsEmailInput(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 providesvalue
typed according to the InputType. SyntheticInputEvent
also gives a direct access to thetarget: HTMLElement
andnativeEvent: Event
.- Ideally one wouldn't need to use neither
target
nornativeEvent
directly, asSyntheticInputEvent
has all properties and methods available in Web/API/Event. Please let us know if you need to usetarget
ornativeEvent
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:
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..