Props are immutable by default but still able to manipulate without mentioning mutable: true

[kskeerthi]

Been stuck where documentation refers props are immutable by nature but explicitly we can set them mutable by assigning mutable:true, but in my case i can still change the prop value without setting mutable property,

import { Component, ComponentInterface, h, Prop} from '@stencil/core';

@Component({
  tag: 'app-button',
  styleUrl: 'app-button.css'
  shadow: true,
})
export class AppButton implements ComponentInterface {
@Prop() message : string = "Hello Everyone!!"
componentDidLoad(){
  
  this.message ="kkkk"
  console.log(this.message)
}
render() {
    return (
      <p>{this.message}</p>
    );
    }

}

Instead of showing "Hello Everyone!!" as output it shows kkkk

[gustavando]

I have the same issue.

Stencil version:

@stencil/core@2.0.1

[claviska]

Here's another example:

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  @Prop({ mutable: true }) isMutable = 'is mutable';
  @Prop({ mutable: false }) isNotMutable = 'is not mutable';

  render() {
    return (
      <div>
        <p>
          Is Mutable: {this.isMutable}
          <br />
          Is Not Mutable: {this.isNotMutable}
        </p>
        <button type="button" onClick={() => (this.isMutable = 'foo')}>
          Set isMutable to 'foo'
        </button>
        <button type="button" onClick={() => (this.isNotMutable = 'bar')}>
          Set isNotMutable to 'bar'
        </button>
      </div>
    );
  }
}

I don't believe Stencil can actually enforce immutability, but you should see a warning in dev mode when the immutable prop is changed. This doesn't appear to be happening in 2.3.0.

See also #791, #1927.