Custom attributes

[tounano]

Hey,

If I want to include custom attributes, it won't add them to the attributes array.

I understand why, however sometimes it's important.

Also, if my code looks like that:

h('div#id', {attributes: {a:'b'}});

It will override the attributes array.

I know how to fix it, the question is what's the design?

[dominictarr]

I think you are just ment to do : h('div#id', {a: 'b'}) that will add an a=b attribute.

[Raynos]

that's not quite how it works.

h('div#id', { a: 'b' }) is equivalent to

var div = document.createElement('div')
div.setAttribute('id', 'id')
div['a'] = b

There appears to be no way to do attributes with hyperscript.

We mentioned https://github.com/dominictarr/hyperscript/issues/6#issuecomment-16869895 at some point. However I don't think h('foo', { attributes: { a: 'b' } }) ever worked.

You may need to special case the attributes object into elem.setAttribute method calls or add something like h('foo', { 'attr-a': 'b' }).

I believe virtual-hyperscript has the exact same problem. You can't set attributes at all without calling setAttribute, we will probably implement something like:

h('div', {
  'attr-role': 'tabpanel',
  'attr-aria-labelledby': 'someTab'
})

[dominictarr]

btw, what are custom attributes needed for? do you mean data- attributes?

[Raynos]

@dominictarr I mean any attributes on a DOM element. anything that is not a property.

The most common example I can think of is that all the aria- accessibility attributes do not have an equivelant property based interface and must go through the setAttribute() method.

Note that the way the DOM works, doing elem.className = 'foo' vs elem.setAttribute('class', 'foo') is different. we are talking about the latter, you need a setAttribute() interface for any attributes that don't have a way of being set through properties on DOM elements.

[dominictarr]

By the way, @Raynos knows a lot more about the DOM than I do, and he created https://www.npmjs.org/package/mercury which is more developed then hyperscript, but also very simple and based on similar ideas. So, I would just use that if I was creating a dynamic, reactive html ui today

[Raynos]

mercury is a lot heavier & more opinionated then hyperscript.

hyperscript still has good use cases. Especially in cases where you don't want a virtual DOM.

[dominictarr]

so, if you do few updates, hyperscript may be okay, if you do many, mercury is better. would you agree @Raynos?

[Raynos]

Yes, if your UI is static or mostly static hyperscript will serve you well.

if your app is dynamic mercury does better.

Also integrating hyperscript into an existing application is easier because hyperscript is one module, where as mercury is a "framework".

Embedding a mercury app into an existing application isn't that hard, it's just that using a new module in an existing application is really really easy.

[tounano]

Hey,

Thanks for replying.

Actually, I wrote this comment referring to mercury. But later, when I started digging deeper inside mercury, I realized that mercury uses virtual-hyperscript.

So my actual problem is that vdom is not generating my not standard attributes.

The reason I need custom attributes in vDom and mercury, is for versioning. This is the usecase I encountered.

I actually tried to implement this tutorial: http://facebook.github.io/react/docs/tutorial.html

in mercury.

I don't mind committing the code for mercury's examples.

The challenge I had was regarding clearing the form after sending a comment. The way I though doing it is to add a v attribute and each time I want to rerender the form I increment it.

That way, the form will be rendered only when I need it to be cleared.

In any case, there are additional use cases for custom attributes.

For example, if you want to track social interactions with google analytics: https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingSocial

and you have your social widgets that come from social platforms (which btw has their own custom attributes). Those social widgets expose a simple API for binding to events, however if you have 2 like buttons on the page for example, the only way to know which like button was clicked is by setting custom attributes that identify them.

It's useful in many other tracking use cases.

[Raynos]

@tounano

https://github.com/Matt-Esch/vdom/pull/11/files

We are working to get attributes into mercury :)

Let's move this issue into mercury or virtual-dom instead of here, since hyperscript is a similar but not quite related project.

[tounano]

@Raynos sure.

How do I move an issue? simply close it and reopen it somewhere else?

Also. I'll be glad to help with development of mercury...

[Raynos]

@tounano closing & re-opening with a link / reference works fine.

[Raynos]

@tounano if you want to help with development come hang out in #virtualdom on IRC :)

[tusharmath]

We are using hyperscript to create shadow DOM elements. These elements have custom attributes which we are not able to use because hyperscript doesn't let us set them. Can you provide use with some pointers?

[tusharmath]

Our last resort is to create a custom factory function for creating elements with attributes.

[dominictarr]

@tusharmath hmm, you need to do that via the setAttribute method, right? it seems like this PR (which i forgot to merge somehow) should fix it https://github.com/dominictarr/hyperscript/pull/33

[dominictarr]

okay I merged #33 so this should work with {attrs: {...}}

[DanielRuf]

Custom attributes for rendering custom XML would be great.