Stop doing data-*, aria-*, start using dataSet
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 251k
- Forks
- 51.4k
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 53
Description
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No repository file, test, or entry point is named. Start by locating the existing handling of data-* and aria-* attributes and compare it with the dataset examples in the issue. Done means dataSet and ariaSet behavior, including camelCase-to-attribute conversion and merging, is defined and covered by tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100