JetBrains/compose-multiplatform v1.0.0-alpha4-build321

on GitHub

Web

Support for transform and filter in CSS API

We've made a decision to introduce builders for CSS properties which values are actually functions (or list of functions). Transform and filter are our first examples of applying this approach consistently. Here's an example of what syntax looks like:

Div({
  style {
    transform {
      perspective(3.cm)
      translate(10.px, 3.px)
      rotateY(3.deg)
      hueRotate(0.5.turn)
    }
   }
 })

Separate control and uncontrolled inputs in DOM API

Starting from this release Input has two modes: controlled and uncontrolled.
Uncontrolled is a default mode. The input's state is managed by HTMLInputElement itself.
Controlled mode means that the input's state is managed by compose state.
To use Input in controlled mode, it's required to set its state by calling value(String|Number).

All Input creation shorthands (that've been already a thing in the API), such as TextInput, CheckboxInput, RadioInput, NumberInput etc. are intended for creating inputs that operate in a controlled mode. However, you can use basic Input function to create inputs both in controlled and uncontrolled mode:

 // creating a controlled Input:
val textInputState by remember { mutableStateOf("initial text") }

 Input(type = InputType.Text) {
      value(textInputState)
      onInput { event ->
          textInputState = event.value // without updating the state, the <input> will keep showing an old value
      }
 }

// creating an uncontrolled Input:
Input(type = InputType.Text) {
      defaultValue("someDefaultValue") // calling `defaultValue` is optional
       // No value set explicitly.
       // Whatever typed into the input will be immediately displayed in UI without handling any onInput events.
  }

You can find more on discussion around decision to introduce such behavior distinction in this issue

Using @Composable parameters in constructors

The bug was reported a couple of times:
#1052
#746

And now @composable parameters can be used in constructors without any issues:

// Works now:
data class Break(val myValue:String, val renderer:@Composable ()->Any?){
    init {
        println(myValue)
    }
}

// Also Works now:
class AlsoBreak(val myValue:String, val renderer:@Composable ()->Any?){
    init {
        println(myValue)
    }
}