Injectable DOM properties

[petehunt]

#140 was reported today which was something I was interested in fixing anyway. Turns out this is pretty easy.

During the course of this diff I noticed we didn't expose the id attribute; this is fixed. I use MUST_USE_PROPERTY per http://stackoverflow.com/questions/4851699/setting-the-id-attribute-of-an-input-element-dynamically-in-ie-alternative-for.

I think this internal refactoring is basically pure win. If you guys don't want to expose the API publicly yet to keep the surface area of the API small I can revert the second commit on this.

If accepted into the public API, I will document this. I think this is definitely a rough edge that people will run into. Also in the future we can reduce our byte size by making all the svg props optional.

[tomocchino]

Nit: can you store these as local variables at the top to make this code pretty again? :)

allowFullScreen: MustUseAttribute | HasBooleanValue,

[zpao]

Octal literals are deprecated in es5 but it looks like hex still works. I guess it doesn't actually matter but I would consider using parseInt...

EDIT: realize now that this was already there, just shuffled

[zpao]

2 things that I think would need answers before we can merge:

• What do we do about collisions? injectDOMPropertyConfig will overwrite properties (so last wins) but it will append isCustomAttribute which will short-circuit. This feels a little inconsistent and will need to be well documented.
• Do we want to be able to uninject (eject?) a config?

[petehunt]

I did this upstream. We decided to not expose the API publicly yet since we have a few unanswered questions. But at least now the core is injectable such that it's easy to build an API for this in the future.

[zpao]

The upstream commit synced back down: 32423a8

[kirbysayshi]

Sorry to bump an old issue, but is there any chance this will be exposed? I'd like to use a jsx template like:

<div dataCustomUri="{this.props.uri}"></div>

And then use it for event delegation later:

delegate(document, '[data-custom-uri]', function(e) { ... });

But right now react ignores all data-*, which would be pretty easily fixed with the ability to add in a custom DOMPropertyConfig.

[petehunt]

@kirbysayshi You should just be able to do <div data-custom-uri={this.props.uri} /> and it'll work. data- attributes are special cased.

[kirbysayshi]

You are correct! It looks like I had extra " around the value...

data-custom-uri="{this.props.uri}"

vs

data-custom-uri={this.props.uri}

Sorry to bother.