New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Props values setted as html attributes are always strings #1155

Closed
juanmiguelbesada opened this Issue Oct 17, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@juanmiguelbesada
Contributor

juanmiguelbesada commented Oct 17, 2018

Stencil version:

 @stencil/core@0.13.2

I'm submitting a:

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

Current behavior:

Hi guys.

It would be awesome if props defined as html attributes can be parsed / converted / casted to other types instead of strings when they are complex types.

We already do something with booleans and number props. Why not use something like JSON.parse to convert strings to objects if possible?

I mean, currently we have something like this

@Component({
  tag: 'my-component'
})
export class MyComponent implements ComponentDidLoad {
  @Prop() boolProp: boolean;
  @Prop() numberProp: number;
  @Prop() arrayProp: any;
  @Prop() jsonProp: any;

  componentDidLoad () {
    console.log(typeof this.boolProp, this.boolProp); //boolean, true
    console.log(typeof this.numberProp, this.numberProp); //number, 123456
    console.log(typeof this.arrayProp, this.arrayProp); //string, "[123456, 'string']"
    console.log(typeof this.jsonProp, this.jsonProp); //string, "'{"test": "foo", "bar": "baz"}"
  }
}
<my-component bool-prop="false" number-prop="123456" array-prop="[123456, 'string']" json-prop='{"test": "foo", "bar": "baz"}'></my-component>

After:

@Component({
  tag: 'my-component'
})
export class MyComponent implements ComponentDidLoad {
  @Prop() boolProp: boolean;
  @Prop() numberProp: number;
  @Prop() arrayProp: any;
  @Prop() jsonProp: any;

  componentDidLoad () {
    console.log(typeof this.boolProp, this.boolProp); //boolean, true
    console.log(typeof this.numberProp, this.numberProp); //number, 123456
    console.log(typeof this.arrayProp, this.arrayProp); //object, [123456, 'string']
    console.log(typeof this.jsonProp, this.jsonProp); //object, {"test": "foo", "bar": "baz"}
  }
}
<my-component bool-prop="false" number-prop="123456" array-prop="[123456, 'string']" json-prop='{"test": "foo", "bar": "baz"}'></my-component>

My use case is that we have a component with lot of props that are complex types (objects) and can be setted via html attributes. And I have to pass throw all properties and do a JSON.parse to convert it to objects, (and setting Watch for each prop) and i think is a task we can to it automatically.

@ionitron-bot ionitron-bot bot added the triage label Oct 17, 2018

@adamdbradley

This comment has been minimized.

Member

adamdbradley commented Oct 19, 2018

Thank you for opening the issue, but we've decided that html attributes should not be parsing objects and arrays that have been stringified. Element properties can already be passed object and arrays, and if this logic was built into the core of stencil it could have a performance impact of constantly trying to parse strings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment