Skip to content

Add support to JSX transform for <hyphenated-tags> #1539

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from

Conversation

zpao
Copy link
Member

@zpao zpao commented May 15, 2014

This really only adds support for tags in our knownTags list. If we want
to support SVG fully we'll need to do that OR we do like we do for
styles and force camelCase.

Tested with <font-face/> which produces React.DOM["font-face"]. See #938 for even more.

@syranide
Copy link
Contributor

I think there's a bigger issue to consider here and it's HTML5 custom elements (which are identified by having at least one hyphen, so hooray HTML for font-face which is NOT a custom element). What do we do with <my-component>? If it's something you have to prepare as a local variable first, using the hyphen is obviously impossible.

Seeing as HTML elements must be lowercase in React and UpperCamelCase is preferred (?) for custom components. It kind of makes sense to apply the same special treatment to all HTML elements, i.e, <font-face> and <my-component> or <fontFace> and <myComponent>. But I feel like while it might make sense to camelCase, it means you can't copy-paste SVG (not necessarily an issue) and there might be a "mental disconnect" in-terms of looking at the code and immediately knowing what's what.

A simple solution would be to only differentiate between HTML and custom components by the first char being upper-/lowercase. We would no longer need a whitelist of tags in JSX. Everything that is lowercase reads from whatever the JSX docblock says, everything that is uppercase assumes its local. I wouldn't really mind, but I imagine many wouldn't see it as favorably... but it seems to me that if we don't do it (kind of) like that it, that camelCasing would be preferred/necessary, but then how do we keep this mess of HTML, SVG, HTML custom elements and React components separated?

Also, not really related to this, but to make everything a little bit more exciting, SVG has its own <title> element.

@facebook-github-bot
Copy link

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

This really only adds support for tags in our knownTags list. If we want
to support SVG fully we'll need to do that OR we do like we do for
styles and force camelCase.
@zpao zpao closed this in 5eb57fa Jul 1, 2014
@zpao zpao deleted the jsx-hyphen-tags branch October 30, 2014 01:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants