In Ivy, @Input setting order no longer matches the order of their corresponding properties in the class

🐞 bug report

Affected Package

The issue is caused by package "@angular/core": "9.0.0-rc.5" with Ivy

Description

Before Ivy: it was possible to receive @input values in a certain order. For example: I have a following component:

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`
})
export class HelloComponent  {
  public name: string = "";

  @Input() set firstName(value: string) {
    this.name += value;
  }

  @Input() set lastName(value: string) {
    this.name += value;
  }
}

In this case, thefirstName input setter used to run before the lastName input setter as their order is defined in the component class. So no matter in what order users provide values to input properties, it was possible to receive them in our desired order:

<!--displays Hello JohnDoe-->
<hello firstName="John" lastName="Doe"></hello> 

<!-- still displays Hello JohnDoe as it should-->
<hello lastName="Doe" firstName="John"></hello>

After Ivy:

I realized that input values are set as they are provided in the template, not by the order of their corresponding properties in the class. For example, using the exact same component in Ivy, we get the following result:

<!--displays Hello JohnDoe-->
<hello firstName="John" lastName="Doe"></hello> 

<!-- displays Hello DoeJohn-->
<hello lastName="Doe" firstName="John"></hello>

🔬 Minimal Reproduction

Angular 8: https://stackblitz.com/edit/angular-input-order

In Ivy: https://ivy.ng-run.com/edit/cOAOZzmer5154DINiEZT?open=app%2Fapp.component.ts

🌍 Your Environment

Angular Version:

"@angular/core": "9.0.0-rc.5" with Ivy

Anything else relevant?

[Airblader]

I doubt that this was ever intentional, by-design behavior. This sounds like xkcd 1172 to me.

[lucipacurar]

https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order