argyleink / argyleink/blingblingjs

Add `$().data` for handling `data-*`

Open
#47 7 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.