Stop doing data-*, aria-*, start using dataSet

The DOM already exposes data-* as dataset but it’s doing transformation from hyphenated to camelCase. From MDN:

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
</div>

var el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false

el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true

We should just start supporting dataSet (because camelCase). This will allow a couple things:

• easier reasoning about data attributes (Object.keys(this.props.dataSet))
• easier merging (<div dataSet={merge(this.props.dataSet, {extra: 'value', override: 'value'})} />)
• easier (potentially faster?) updates (just modify node.dataset)

We’ll want to do the reverse of what the DOM is doing. eg <div dataSet={{dateOfBirth: 'val', foo: 'bar'}} /> becomes <div data-date-of-birth="val" data-foo="bar"></div>.

To the best of my knowledge, aria-* doesn’t have a corresponding API, but we should make it work the same way. I think ariaSet makes sense.

[gaearon]

People rarely use data-* in react now, maybe?

I’ve written a ton of React code this year and I don’t remember ever using it. Maybe no point making it easier.

[chenglou]

@aditya2272sharma We were discussing on making working with data-* and aria-* better (just like we did with style), not eliminating them…