CamelCase @Prop() declaration don't work

[jgw96]

From @matteobortolazzo on January 7, 2018 12:57

Stencil version:

 @stencil/core@0.1.1-0

I'm submitting a:

• bug report
• feature request
• support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
When declaring a @prop() in camelCase the value is undefined. If it's all lower case it works.

Expected behavior:
The variable should have a value.

Steps to reproduce:

New component,
Declare a prop in camelCase
Use the component and set the attribute
Check the prop value in the componentDidLoad method

Related code:

export class HomeButton {

   @Prop() isSelected: boolean;

  render() {
    return (
      <div class="tag-button">
        <div class="tag-button-image"></div>
      </div>
    );
  }

  componentDidLoad() {
      console.log(this.isSelected); // undefined
  }
}

Other information:

Copied from original issue: ionic-team/stencil#397

[jgw96]

From @adamdbradley on January 9, 2018 3:14

As an attribute it should be <home-button is-selected="true">

[jgw96]

From @matteobortolazzo on January 9, 2018 8:31

I agree with you but I follow the docs.

[jgw96]

From @adamdbradley on January 9, 2018 12:33

Ok I see what you mean, this is a good question. In the example we're using JSX, and we can assign the element's properties. But if you're using the element in just HTML, and want to assign the value using attributes it uses dash case.

@jgw96 @jthoms1 any ideas how we can better document this? Or many any internal changes?

[jgw96]

From @matteobortolazzo on January 9, 2018 12:44

This explains a lot. Also, nothing other than "string" works as a type for @props() and I think this is why.
Not everyone comes from React especially people that use Ionic (and Angular).

Also, I found this Stencil Style Guide and there are "4. Internal props (context and connect)" and "11. hostData() function" sections that are not documented I think, because I cannot understand what they are.

[jgw96]

From @jthoms1 on January 9, 2018 14:14

For me this is definitely a documentation issue. I think that we need to create more examples on the website of how to accomplish these things JSX vs HTML etc. Does this sound right to everyone?

[jgw96]

I tend to agree with Josh here that this is a documentation issue. I can add this, probably to this section https://stenciljs.com/docs/templating. If everyone is in agreement that this is a docs issue then I will move this issue over to the stencil site repo.

[jgw96]

From @matteobortolazzo on January 9, 2018 14:38

Yes thanks, it's a documentation issue.