argyleink / argyleink/blingblingjs
Add `$().data` for handling `data-*`
- Dominant language
- JavaScript
- Stars
- 236
- Forks
- 17
- PR merge metrics
- No merged PRs in 30d
Description
I coded up [a mockup of the idea here](https://codepen.io/gingerchew/pen/dyrvYNG/b28d9fd99049ab7b9b93de8c07405724). While there is overlap with `.attr()` I think there could still be a place for it. especially when handling data that can't be coerced to a string.
```js
$('div').attr('data-user', {
fname: 'argyle',
lname: 'ink'
});
$('div').attr('user') // "[object Object]"
// data-user="{"fname":"ginger","lname":"chew"}"
$('div').data('user', {
fname: 'ginger',
lname: 'chew'
});
$('div').data('user') // { fname: 'ginger', lname: 'chew' }
// Needing to set `data-` like this on an object is frustrating
$('div').attr({
'data-fname': 'argyle',
'data-lname': 'ink'
'data-user-id': 1
});
// the `data-` is assumed and don't need to wrap the keys in quotes
// and converting camelCase to kebab-case is handled automatically
$('div').data({
fname: 'ginger',
lname: 'chew',
userId: 2
})
```
The mockup handles set/get/delete, so accepting an object as the first argument like in `.attr()` isn't there yet.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by comparing the existing .attr() entry point with the linked CodePen mockup, focusing on the proposed data-* behavior. Clarify the intended set, get, and delete API, including object values, automatic data- prefixing, and camelCase conversion. Done means the agreed behavior is implemented and covered by the project’s tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100