Partial override fields of a struct

[FloVanGH]

Check the following example:

export struct Style {
      background: brush,
      border-brush: brush
}

export component MyBase {
      in property <Style> style: {
              background: #000000,
              border-brush: #0000000
      };
      
      Rectangle {
          background: root.style.background;
          border-color: root.style.border-brush;
          border-width: 1px;
      }
}

export component MyWidget inherits MyBase {
      style: {
             background: #fffffff,
      };
}

In the example what I want for MyWidget is to set background to white and leave border-brush to black, as it is defined in MyBase. But currently it doesn't work. What happens instead is that background is set to black and all not set field of the structs are set to the defaults. So in case of border-brush to transparent.

[ogoffart]

The change as proposed is a breaking change.
We could come up with a new syntax for doing that. Like a "merge" operator.

So one option would be:

export component MyWidget inherits MyBase {
   // Option 1: have a . syntax to override only sub-field of a struct
   style.background: #fff;

   //Option 2: use a different symbol to merge
   style ~: { background: #fff } 

   // Also make sense with callback and stuff
   clicked => { root.style ~= { background: #fff } } 
}

I've used ~: and ~= as an example, but other symbols are possible (for example :~)

Note that with the option 2, the right hand side of this is NOT of type Style, but rather a struct type that has less fields. In particular, this would not work:

export component MyWidget {
   in property <Style> style;
   MyBase { 
      // This is like a normal binding since the right hand side type already have all the fields
      style ~: root.style; 
   }
}

export component App {
   MyWidget { 
      // This is not working as expected since the MyWidget's style don't have a binding
      style ~: { background: #fff }
   }
}

For that reason I think it's best to use option 1, which might already be enough.

[FloVanGH]

I really like option 1: style.background: #ffffff.
It is easy to write, easy to memorize and consistent to

Rectangle {
      background: root.style.background;
}