prop that accepts array or object returns string #134

psyrendust · 2017-09-06T19:04:26Z

Issue

If I have a stencil custom element that has a prop that is typed as an array of numbers number[], the value of the prop from within the custom element is a string.

Expected

I expect the prop would be an array of numbers.

HTML Example

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

@Component({
  tag: 'my-map',
})
export class MyMap {
  @Prop() name: string;
  @Prop() coords: number[] = [-122.40655, 37.78437];

  componentDidLoad() {
    console.log(this.name, typeof this.coords, this.coords); // => object (2) [-122.40655, 37.78437]
                                                             // or
                                                             // => string -122.40655,37.78437
  }
}

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8" />
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <title>Stencil Starter App</title>
  <script src="build/app.js"></script>
</head>
<body>

  <my-map name='no prop'></my-map> <!-- => "no prop array" //-->
  <my-map name='with prop' coords='-122.4,37.7'></my-map> <!-- => "with prop string" //-->

</body>
</html>

I'm noticing this because I'm integrating stencil custom elements into a react application. When I pass in an array to a prop it get's converted by react to a string. So when I'm trying to read the value of the prop it's a string instead of an array of numbers.

The same holds true when trying to pass in an object to a prop.

React Example

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

@Component({
  tag: 'my-map',
})
export class MyMap {
  @Prop() coords: number[] = [-122.40655, 37.78437];
  @Prop() foo: any;

  componentDidLoad() {
    console.log(typeof this.coords, this.coords); // => string -122.40655,37.78437
    console.log(typeof this.foo, this.foo); // => string [object Object]
  }
}

import React, { Component } from 'react';

export default class MyView extends Component {
  render() {
    const coords = [-122.40655, 37.78437];
    const foo = {
      bar: 'woot',
    };
    return (
      <my-map coords={coords} foo={foo}></my-map>
    );
  }
}

The text was updated successfully, but these errors were encountered:

kylecordes · 2017-09-06T19:15:41Z

@psyrendust I think this is a React issue. React in its current version passing in attributes (strings) to custom elements, Whereas many of them (like yours and mine...) need JavaScript data via properties. You can read a lot about it in this open issue:

facebook/react#7249

I believe the typical workaround is to pass this form of data using a bit of JavaScript in the current version of React.

psyrendust · 2017-09-06T19:35:11Z

@kylecordes So it sounds like I'd have to do something like this:

import React, { Component } from 'react';

export default class MyView extends Component {
  render() {
    const coords = [-122.40655, 37.78437];
    const foo = {
      bar: 'woot',
    };

    const handleRef = (myMap) => {
      myMap.coords = coords;
      myMap.foo = foo;
    };

    return (
      <my-map ref={handleRef}></my-map>
    );
  }
}

If so does this mean that my CE would also have to implement the upgradeProperty hack? https://jsbin.com/zicewal/6/edit?html,output

kylecordes · 2017-09-06T19:49:02Z

@psyrendust I don't use React as often as some of its competitors :-) so I can't tell you the exact most concise invocation. But if you watch this Rob Dodson presentation starting at the time linked below, you should get a full feel for the situation.

https://youtu.be/sK1ODp0nDbM?t=24m40s

He launched a great informational site:

https://custom-elements-everywhere.com/

... Which documents the numerous bits a framework must do for maximal custom element / web component compatibility, and then tests a bunch of the current contenders. React currently is in the unfortunate position of being quite popular yet scoring pretty poorly. I expect that will be addressed in an upcoming React version to get it back on the top of the heap with the other major contenders which already support custom elements very well.

All of this is equally relevant to Stencil or any other way of building web components.

jthoms1 · 2017-09-08T20:25:47Z

@psyrendust I have ran into this issue with React and created a simple utility function to work around the problem. I have talked with the React team and this is something they are talking about fixing in React 17. Until then we have a workaround.

This utility should be used for custom events or for objects/arrays. Strings, numbers and booleans should work fine.

This utility fixes the issue.
https://github.com/ionic-team/ionic-react-conference-app/blob/master/src/utils/stencil.js

Usage is below:

import React, { Component } from 'react';
import { wc } from '../utils/stencil';

export default class MyView extends Component {
  render() {
    const coords = [-122.40655, 37.78437];
    const foo = {
      bar: 'woot',
    };
    return (
      <my-map
        ref={wc({
          coords: coords
        })}
        foo={foo}></my-map>
    );
  }
}

psyrendust · 2017-09-08T22:44:34Z

@jthoms1 Thanks for the util! Considering that foo is also an object I'm assuming it would look like this (using object shorthand):

import React, { Component } from 'react';
import { wc } from '../utils/stencil';

export default class MyView extends Component {
  render() {
    const coords = [-122.40655, 37.78437];
    const foo = {
      bar: 'woot',
    };
    return (
      <my-map
        ref={wc({ coords })}
        foo={wc({ foo })} />
    );
  }
}

jthoms1 · 2017-09-11T14:36:11Z

wc is a function specific to ref so all values would be passed through that.

import React, { Component } from 'react';
import { wc } from '../utils/stencil';

export default class MyView extends Component {
  render() {
    const coords = [-122.40655, 37.78437];
    const foo = {
      bar: 'woot',
    };
    return (
      <my-map
        ref={wc({ coords, foo })} />
    );
  }
}

marisaoliva · 2020-01-16T11:36:44Z

please, Can you put the utility again? :D

I've problem with the link and I've the same issue

https://github.com/ionic-team/ionic-react-conference-app/blob/master/src/utils/stencil.js

marisaoliva · 2020-01-24T11:51:37Z

Hello

I've found this
https://www.npmjs.com/package/reactify-wc
;)

adamdbradley assigned jthoms1 Sep 7, 2017

jgw96 added the bug label Sep 8, 2017

jthoms1 closed this as completed Sep 8, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

prop that accepts array or object returns string #134

prop that accepts array or object returns string #134

psyrendust commented Sep 6, 2017 •

edited

Loading

kylecordes commented Sep 6, 2017

psyrendust commented Sep 6, 2017

kylecordes commented Sep 6, 2017 •

edited

Loading

jthoms1 commented Sep 8, 2017

psyrendust commented Sep 8, 2017

jthoms1 commented Sep 11, 2017

marisaoliva commented Jan 16, 2020

marisaoliva commented Jan 24, 2020

prop that accepts array or object returns string #134

prop that accepts array or object returns string #134

Comments

psyrendust commented Sep 6, 2017 • edited Loading

Issue

Expected

HTML Example

React Example

kylecordes commented Sep 6, 2017

psyrendust commented Sep 6, 2017

kylecordes commented Sep 6, 2017 • edited Loading

jthoms1 commented Sep 8, 2017

psyrendust commented Sep 8, 2017

jthoms1 commented Sep 11, 2017

marisaoliva commented Jan 16, 2020

marisaoliva commented Jan 24, 2020

psyrendust commented Sep 6, 2017 •

edited

Loading

kylecordes commented Sep 6, 2017 •

edited

Loading